/* Ентър.БГ — прототип D, етап B3: ЕДИНСТВЕНИЯТ източник на облика.

   След одобрение от собственика този файл се копира ДОСЛОВНО в
   `public/assets/css/site.css` (Задача 5; `SiteStylesheetTest` пази
   равенството). Промяна в облика = промяна ТУК, после копие.

   Пътищата към ресурси са АБСОЛЮТНИ (`/assets/...`) — същите като на сайта;
   `shoot.js` сервира прототипа с тези адреси. Относителен път от прототип е
   причината логото да липсва на живо в етап B2c.

   Без тъмна тема (основната спецификация я изключва). Шрифтът е само Onest,
   самостоятелно хостван (`/assets/fonts/fonts.css`).

   Без JavaScript всяка страница е пълна: всичко, което крие или свива, е под
   `html.js` или под клас, който слага собственият скрипт (`.svc-tabs.is-ready`).
   Каскадата на шапката е описана при нея и се пази от `SiteMenuCssTest`. */

/* ---------- токени ---------- */
:root{
  --ink:#0B2A3C;
  --accent-1:#14B8A6;
  --accent-2:#1E6FD9;
  --accent:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --bg:#FFFFFF;
  --surface:#F3F7FA;
  --text:#0F1B24;
  --muted:#5B6B78;
  --line:#E2E8EE;
  /* Производни, проверени от SiteContrastTest (решение Р7): `--accent-2` върху
     `--surface` е 4.35:1 и не стига за малък текст, а бял текст върху
     `--accent-1` е 2.49:1. */
  --accent-text:#1A5DBA;
  --accent-2-hover:#185DB8;
  --on-ink:#FFFFFF;
  --on-ink-muted:#A9BCC9;
  /* Малкият цветен текст в hero лежи върху сиянията и мрежата, където
     `--accent-1` пада до ~3.9:1 по пиксели; този тюркоаз е 7.99:1 върху `--ink`. */
  --accent-1-on-ink:#2DD4BF;
  /* Синият край на сменящата се фраза в динамичния hero (Задача H): 7.14:1
     върху `--ink`, колкото тюркоаза до него — градиентът е равен по яркост.
     `--accent-2` (3.06:1) не стига дори за едър текст върху сиянията. */
  --accent-2-on-ink:#7CB7FF;
  --pill-bg:#E8F1FC;
  /* Грешка под поле на формата: 6.57:1 върху бяло (SiteContrastTest). */
  --danger:#B42318;
  /* Задача G, „стъкло": само под `html.glass` (до одобрение сайтът не слага
     класа). Полупрозрачните стойности са за фона; текстът върху тях е от
     обичайните токени, а контрастът е мерен по пиксели (доклада на задачата).
     `*-solid` са плътните резерви — без поддръжка на `backdrop-filter` и при
     `prefers-reduced-transparency` (двойките им са в SiteContrastTest). */
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-strong:rgba(255,255,255,.92);
  --glass-bg-solid:#FFFFFF;
  --glass-dark:rgba(11,42,60,.8);
  --glass-dark-solid:#14374B;
  --glass-tint:rgba(255,255,255,.1);
  /* Задача H2: контролите в hero са без размиване (фонът се движи) — тонът е
     по-плътен, за да се четат като стъкло. */
  --glass-tint-strong:rgba(255,255,255,.13);
  /* …и под тона — тъмна „опушка": над светлите места на течността белият
     текст на чипа остава ≥4.5:1 (по пиксели — в доклада на H2). */
  --glass-veil:color-mix(in srgb,var(--ink) 40%,transparent);
  --glass-tint-solid:#1C3D50;
  --glass-border:rgba(255,255,255,.65);
  --glass-border-dark:rgba(255,255,255,.2);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.35);
  --glass-highlight-dark:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12);
  --glass-shadow:0 14px 36px -18px rgba(11,42,60,.38);
  --glass-blur:blur(16px) saturate(170%);
  /* Задача LG (собственикът, 12.10: „по-изразен liquid glass", в духа на
     iOS 26): шапката, панелът „Услуги" и телефонното меню — по-силно
     размиване и наситеност, по-прозрачен тон. `--glass-head*` е тонът на
     шапката в трите ѝ състояния (светло; над hero-то горе; превъртяно над
     hero-то); правилата на състоянията сочат токените, тоест резервите долу
     ги правят плътни във ВСЯКО състояние. В Chromium размиването на шапката
     и панела е SVG филтър с пречупване по ръба (`html.glass.lg-refract`). */
  --glass-head:rgba(255,255,255,.56);
  --glass-head-top:color-mix(in srgb,var(--ink) 30%,transparent);
  --glass-head-stuck:color-mix(in srgb,var(--ink) 62%,transparent);
  --glass-topbar-top:transparent;
  --glass-head-blur:blur(24px) saturate(200%);
  --glass-panel:rgba(255,255,255,.74);
  --glass-panel-blur:blur(28px) saturate(200%);
  --glass-sheet:rgba(246,249,251,.8);
  --glass-sheet-blur:blur(28px) saturate(190%);
  /* Картата за бисквитки (Задача 4b): над тъмния hero и над бели секции, тоест
     по-плътен тон от шапката — тъмният текст остава ≥4.5:1 и над тъмното. */
  --glass-card:rgba(255,255,255,.86);
  --glass-card-blur:blur(28px) saturate(180%);
  /* Фаска: ярък горен ръб, по-слаб долен, вътрешно сияние горе и сянка долу —
     усещане за дебелина. */
  --glass-bevel:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.45),inset 0 12px 20px -14px rgba(255,255,255,.9),inset 0 -14px 22px -16px rgba(11,42,60,.2);
  --glass-bevel-dark:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 12px 20px -14px rgba(255,255,255,.16),inset 0 -14px 22px -16px rgba(0,0,0,.35);
  --glass-head-shadow:0 18px 40px -22px rgba(11,42,60,.5),0 3px 10px -4px rgba(11,42,60,.14);
  --r:16px;
  --r-lg:24px;
  --shadow:0 24px 60px -36px rgba(11,42,60,.45);
  /* Страничното поле на `.wrap` и разстоянието от него до ръба на прозореца —
     колкото декорация трябва да излезе извън `.wrap`, за да стигне ръба. */
  --gutter:clamp(16px,4vw,44px);
  --bleed:calc(var(--gutter) + max(0px,(100vw - 1240px) / 2));
}

/* ---------- основа ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Onest',system-ui,sans-serif;
  font-size:clamp(15.5px,.4vw + 14.4px,17px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.75rem)}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
h1 em,h2 em{font-style:italic;color:var(--accent-text)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--accent-2);outline-offset:3px}
/* WCAG 1.4.11: обръчът е ≥3:1 спрямо фона, на който ЛЕЖИ. `--accent-2` върху
   `--ink` е 3.06:1 по токени, а върху сиянията пада до ~2.6:1 — на тъмно
   обръчът е бял. Lightbox-ът (`.lb`, етап C) е тъмен контекст. Върху
   градиента бялото е 2.49:1 до `--accent-1`, а `--ink` е ≥3.07:1 по цялата
   дължина. Пази го пробата в `shoot.js` (истински пиксели). */
:is(.hero,.svc-card,.step,.cta-copy,footer.site,.lb) :focus-visible{outline-color:var(--on-ink)}
.cta-actions :focus-visible{outline-color:var(--ink)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter);position:relative}
.lede{max-width:60ch;color:var(--muted);font-size:clamp(1.02rem,.5vw + .92rem,1.2rem);line-height:1.6}
.grad{color:var(--accent-text)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--accent-text);font-size:.88rem;font-weight:600;letter-spacing:.02em}
/* Късата градиентна черта пред надписа е подписът на марката — градиентът е
   само декорация (Р7), текстът до нея е плътен `--accent-text`. */
.kicker::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--accent)}

/* ---------- бутони ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:10px;
  background:var(--accent-2);color:var(--on-ink);font:inherit;font-weight:600;font-size:.98rem;text-decoration:none;
  cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.pill:hover{background:var(--accent-2-hover);transform:translateY(-1px)}
.pill .badge{display:inline-grid;place-items:center;width:18px;height:18px}
.pill .badge svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.pill.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.pill.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.pill.sm{min-height:42px;padding:0 18px;font-size:.92rem}

/* ---------- горна лента ---------- */
.topbar{padding-top:3px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2)) top/100% 3px no-repeat,var(--surface)}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;min-height:36px}
.topbar a,.topbar .wrap>span{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.topbar a:hover{color:var(--text)}
.topbar svg{width:14px;height:14px;stroke:var(--accent-2);stroke-width:2;fill:none}

/* ---------- шапка и меню ----------
   Пресметнатата каскада, за всяко състояние (специфичност в скоби):

   широк, без JS — `.site-nav` (0,1,0) е собствен ред (order:1); `.menu` се
     пренася; думата е `.menu-label`; `.menu-group` (0,1,0) е display:none;
     групата с панел взема цял ред (`html:not(.js) .menu-item.has-panel`, (0,3,1));
     `.mega` (0,1,0) е в потока и видим; `.burger` (0,1,0) е display:none.
   широк, с JS — `html.js .site-nav` (0,2,1) е в реда на шапката;
     `html.js .menu-group` (0,2,1) inline-flex бие `.menu-group` (0,1,0);
     `html.js .menu-label` (0,2,1) крие думата-текст; `html.js .mega` (0,2,1) е
     absolute и невидим, `html.js .mega.on` (0,3,1) — видим. Посочването е от
     скрипта (Р4), не от `:hover`.
   тесен, без JS — менюто е колона в шапката; панелите са видими; бутоните — не.
   тесен, с JS, затворено — `html.js .site-nav` (0,2,1) е fixed и display:none;
     `html.js .burger` (0,2,0) inline-flex бие `.burger` (0,1,0).
   тесен, с JS, отворено — `html.js.nav-open .site-nav` (0,3,1) display:block бие
     (0,2,1); групата е акордеон: `html.js .mega` (0,2,1) none, `.mega.on` (0,3,1) block.

   Широкият и тесният набор са в НЕприпокриващи се блокове `(width > 1100px)` и
   `(max-width:1100px)` — редът между тях не значи нищо (Р6). Блоковете за 1100px
   и 620px стоят СЛЕД общите правила със същия селектор. */
header{position:relative;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
html.js header{position:sticky;top:0}
/* WCAG 2.4.11 (етап C): при Tab назад браузърът превърта спирката до горния
   ръб — под залепената шапка (84px, а под 620px — 64px). Отстъпът е на
   спирките и котвите в `main`, НЕ `scroll-padding-top` на `html`: с него всеки
   бутон в шапката е „в отстъпа" и Chromium центрира фокусирания — клик върху
   бургера или „Услуги" скачаше ~450px (Ruling 5). Пазят го пробите
   `stickyCover()` и `headerJump()` в `shoot.js`. Без JavaScript шапката не е
   залепена. `:where()` — нулева специфичност: собствен `scroll-margin-top`
   (`.is-active` на панела с услуги) печели.
   Задача 4b, преглед: и футърът — докато картата за бисквитки плува,
   `scroll-padding-bottom` превърта по-надолу и връзките във футъра стигаха
   под шапката (1400×700, 1280×620). */
:where(html.js main,html.js main :is(a[href],button,summary,input,select,textarea,[tabindex],:target),html.js footer.site :is(a[href],button,[tabindex])){scroll-margin-top:96px}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(12px,2vw,28px);min-height:84px;padding-block:10px}
html.js .bar{flex-wrap:nowrap}
.logo{display:inline-flex;flex:none}
.logo img{width:168px;height:auto}
/* Светлото лого за тъмен фон (шапката над hero, Задача H2) — само там. */
.logo .logo-on-dark{display:none}
.site-nav{flex:1 0 100%;order:1}
.menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.menu-item{position:relative}
.menu-link,.menu-label{display:inline-flex;align-items:center;padding:9px 16px;border-radius:99px;font-size:.95rem;text-decoration:none;white-space:nowrap}
.menu-link{color:var(--muted)}
.menu-link:hover{color:var(--text);background:var(--pill-bg)}
.menu-link[aria-current="page"]{color:var(--text);background:var(--pill-bg)}
.menu-label{color:var(--text);font-weight:600}
.menu-group{display:none;align-items:center;gap:6px;padding:9px 16px;border:0;border-radius:99px;background:none;
  font:inherit;font-size:.95rem;color:var(--muted);cursor:pointer;white-space:nowrap}
html.js .menu-group{display:inline-flex}
html.js .menu-label{display:none}
.menu-group:hover,.menu-group[aria-expanded="true"],.has-current > .menu-group{color:var(--text);background:var(--pill-bg)}
.menu-group .caret{width:10px;height:10px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .25s}
.menu-group[aria-expanded="true"] .caret{transform:rotate(180deg)}
html:not(.js) .menu-item.has-panel{flex:1 0 100%}
.mega{margin-top:6px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:20px}
.mega-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:4px}
.mega-link{display:block;padding:12px 14px;border-radius:14px;color:var(--text);text-decoration:none}
.mega-link:hover,.mega-link[aria-current="page"]{background:var(--pill-bg)}
.mega-link b{display:block;font-weight:600;font-size:.97rem}
.mega-link span{display:block;margin-top:3px;color:var(--muted);font-size:.86rem;line-height:1.45}
.tools{display:flex;align-items:center;gap:9px;margin-inline-start:auto}
.lang{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:99px;
  background:none;color:var(--muted);font:inherit;font-size:.88rem;text-decoration:none;transition:.2s}
.chip:hover{border-color:var(--accent-2);color:var(--text)}
.chip.is-current{border-color:var(--accent-2);color:var(--text);background:var(--pill-bg)}
.enquiry{white-space:nowrap}
.burger{display:none;order:3;align-items:center;justify-content:center;width:46px;height:42px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--bg);cursor:pointer}
.burger svg{width:18px;height:18px;stroke:var(--text);stroke-width:2;fill:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;border-radius:0 0 14px 0;
  background:var(--bg);color:var(--text);font-weight:600}
.skip-link:focus{left:0}
/* Текст само за четеца на екрана, например „(отваря нов раздел)“ до връзка с target="_blank". */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0}

@media(width > 1100px){
  .menu{flex-wrap:wrap}
  html.js .site-nav{flex:1 1 auto;order:0}
  html.js .menu{flex-wrap:nowrap;justify-content:center}
  html.js .mega{position:absolute;top:calc(100% + 12px);left:50%;z-index:60;width:min(720px,calc(100vw - 32px));margin-top:0;
    box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translate(-50%,-6px);
    transition:opacity .2s,transform .2s,visibility .2s}
  html.js .mega.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
@media(max-width:1100px){
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu-link,.menu-label{display:flex;padding:13px 6px;border-radius:12px;font-size:1.05rem}
  .menu-item + .menu-item{border-top:1px solid var(--line)}
  .mega-list{grid-template-columns:1fr}
  html.js .menu-group{justify-content:space-between;width:100%;padding:13px 6px;border-radius:12px;font-size:1.05rem}
  html.js .site-nav{position:fixed;left:0;right:0;top:var(--nav-top,64px);bottom:0;z-index:49;display:none;overflow-y:auto;
    overscroll-behavior:contain;padding:8px clamp(18px,4vw,44px) 32px;background:var(--bg);border-top:1px solid var(--line)}
  html.js.nav-open .site-nav{display:block}
  html.js.nav-open body{overflow:hidden}
  html.js .mega{display:none;margin:0 0 10px;padding:6px;border:0;border-radius:16px;background:var(--surface)}
  html.js .mega.on{display:block}
  html.js .burger{display:inline-flex}
}
@media(max-width:620px){
  .bar{min-height:64px;gap:8px}
  .logo img{width:132px}
  .chip{height:34px;padding:0 11px;font-size:.82rem}
  .burger{width:42px;height:38px}
  .enquiry{display:none}
  :where(html.js main,html.js main :is(a[href],button,summary,input,select,textarea,[tabindex],:target),html.js footer.site :is(a[href],button,[tabindex])){scroll-margin-top:72px}
}

/* ---------- секции ----------
   Редуващи се бял и светъл фон. Тъмните секции (hero, CTA) и заглавието на
   лентата с клиенти не участват — техният фон е свой. */
main > section{padding-block:clamp(56px,7vw,112px)}
main > section:nth-of-type(even):not(.hero):not(.cta-sec):not(.marq-head){background:var(--surface)}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head p{margin-top:14px;color:var(--muted)}
.sec-head .kicker{margin:0 0 10px;color:var(--accent-text)}
.sec-head:has(+ .svc-tabs){margin-inline:auto;text-align:center}
.sec-head:has(+ .svc-tabs) p{margin-inline:auto}
.page-head{padding-block:clamp(56px,7vw,104px) clamp(20px,3vw,40px);background:linear-gradient(180deg,var(--surface),var(--bg))}
.page-head h1{max-width:20ch}
.page-head .lede{margin-top:14px}
.crumb{margin:0 0 10px;font-size:.9rem}
.crumb a{color:var(--accent-text)}
.prose{max-width:72ch}
.prose :is(h2,h3){margin-top:1.6em}
.prose :is(p,ul,ol){margin-top:.9em;line-height:1.75}
.prose a{color:var(--accent-text)}
.empty{color:var(--muted)}
.site-404{padding-block:clamp(70px,9vw,140px);text-align:center}
.site-404 .lede{margin:16px auto 28px}

/* ---------- hero (Р16) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(72px,9vw,140px);
  background:var(--ink);color:var(--on-ink);text-align:center}
.hero-tech{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 0%,rgba(20,184,166,.20),transparent 70%),
    radial-gradient(45% 55% at 92% 100%,rgba(30,111,217,.34),transparent 70%),
    radial-gradient(35% 45% at 4% 96%,rgba(20,184,166,.14),transparent 70%)}
/* Горното сияние е най-много .20: при .26 (брифа) фонът под надписа над
   заглавието изсветлява дотам, че `--accent-1` пада до ~4.4:1 (смятано по WCAG
   за мястото на надписа); при .20 е ~4.8:1. */
/* Мрежата избледнява към краищата — маската е върху отделен слой, за да не
   гаси и сиянията. */
.hero-tech::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 50% 0/56px 56px,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 50% 0/56px 56px;
  -webkit-mask:radial-gradient(70% 80% at 50% 20%,#000 30%,transparent 80%);
  mask:radial-gradient(70% 80% at 50% 20%,#000 30%,transparent 80%)}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* .86 (B3, пренесен билет): малкият текст над почти бяла снимка стига 4.5:1. */
.hero:has(> .hero-bg)::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,42,60,.86),rgba(11,42,60,.92))}
/* Текстът е колона; плочките и картичката на агента делят последния ред
   (табло под заглавието), а на тесен екран се пренасят. */
.hero-inner{display:flex;flex-flow:row wrap;justify-content:center;align-items:stretch;column-gap:12px}
.hero-inner > *{flex:0 0 100%}
.hero-inner > .hero-tiles,.hero-inner > .agent{flex:0 1 auto}
.hero .kicker{justify-content:center;margin-bottom:18px;color:var(--accent-1-on-ink)}
.hero .kicker::after{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--accent)}
.hero h1{max-width:18ch;font-size:clamp(2.45rem,5.6vw,4.6rem);letter-spacing:-.03em;line-height:1.06}
.hero h1 em{font-style:italic;color:var(--accent-1)}
.hero .lede{max-width:62ch;margin-top:20px;color:var(--on-ink-muted)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero .pill.ghost{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.hero .pill.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--on-ink)}
.hero-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:56px}
.tile{display:grid;align-content:center;gap:4px;min-width:168px;padding:16px 20px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);background:rgba(255,255,255,.06);text-align:left}
.tile b{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.tile span{color:var(--on-ink-muted);font-size:.82rem}
.seal{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,48px);width:104px;height:104px;opacity:.85}
.seal svg{width:100%;height:100%;animation:spin 24s linear infinite}
.seal text{fill:var(--on-ink-muted);font-size:10.4px;font-weight:600;letter-spacing:.14em}
.seal .hub{position:absolute;inset:34%;display:grid;place-items:center;border-radius:50%;background:var(--accent-2)}
.seal .hub svg{width:16px;height:16px;stroke:var(--on-ink);stroke-width:2.4;fill:none;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.seal{display:none}}
/* Под ~960px плочките и картичката не се побират на един ред — картичката
   слиза под тях с малко разстояние, вместо с отстъпа на реда. */
@media(max-width:960px){.hero .hero-inner > .agent{margin-top:12px}}
@media(max-width:520px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .pill{justify-content:center}
  .hero-tiles{flex-wrap:nowrap;width:100%;margin-top:40px}
  .tile{flex:1;min-width:0}
  .hero .hero-inner > .agent{margin-top:12px}
  .hero .kicker::before,.hero .kicker::after{display:none}
}

/* ---------- динамичен hero „aurora" (Задача H) ----------
   Вариант на `.hero`: всеки селектор е под `.hero-aurora`, за да не пипа
   стария hero, който сайтът още рендира (`SiteHeroTest`). Тъмният фон, белият
   текст, бутоните и белият обръч на фокуса идват от `.hero` горе.

   Фонът е ЧИСТ CSS: три размазани петна (радиални градиенти — без `filter`,
   който би се прерисувал) под тъмно „петно на прожектор" зад текста и фина
   решетка. Движат се само с `transform`/`opacity`, на GPU.

   Без JavaScript нищо не се движи: дрейфът и смяната на фразите са под
   `.is-live`, който слага `site-hero.js` заедно с бутона за пауза (WCAG 2.2.2
   — движение без край иска механизъм за спиране, а без скрипт няма бутон).
   Тогава се вижда първата фраза; останалите държат мястото (`visibility`),
   за да е височината на реда колкото на най-дългата. */
.hero-aurora{display:grid;align-content:center;min-height:min(820px,calc(100svh - 120px));
  padding-block:clamp(88px,10vw,150px) clamp(104px,11vw,160px)}
.hero-aurora .aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-aurora .aurora::before{content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 50% 0/64px 64px,
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 50% 0/64px 64px;
  -webkit-mask:radial-gradient(75% 70% at 50% 40%,#000 20%,transparent 78%);
  mask:radial-gradient(75% 70% at 50% 40%,#000 20%,transparent 78%)}
/* Прожекторът държи контраста под текста: петната светят по краищата, а зад
   заглавието и абзаца фонът остава близо до `--ink` (числата — в доклада). */
.hero-aurora .aurora::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(72% 56% at 50% 48%,color-mix(in srgb,var(--ink) 90%,transparent) 42%,transparent 100%)}
.hero-aurora .aurora-blob{position:absolute;aspect-ratio:1;border-radius:50%}
.hero-aurora .a1{top:-34%;left:-16%;width:clamp(460px,64vw,1000px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-1) 62%,transparent),transparent)}
.hero-aurora .a2{right:-18%;bottom:-46%;width:clamp(480px,66vw,1040px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-2) 78%,transparent),transparent)}
.hero-aurora .a3{top:-10%;right:2%;width:clamp(320px,40vw,640px);
  background:radial-gradient(closest-side,color-mix(in srgb,color-mix(in oklab,var(--accent-1),var(--accent-2)) 55%,transparent),transparent)}
.hero-aurora.is-live .a1{animation:aurora-1 26s ease-in-out infinite alternate}
.hero-aurora.is-live .a2{animation:aurora-2 32s ease-in-out infinite alternate}
.hero-aurora.is-live .a3{animation:aurora-3 21s ease-in-out infinite alternate}
.hero-aurora.is-live .aurora-blob{will-change:transform}
/* След `animation` — шортхендът връща `animation-play-state` на `running`. */
.hero-aurora.is-still .aurora-blob{animation-play-state:paused}
@keyframes aurora-1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(14%,10%,0) scale(1.14);opacity:.85}
  100%{transform:translate3d(30%,-4%,0) scale(.94)}}
@keyframes aurora-2{
  0%{transform:translate3d(0,0,0) scale(1.06)}
  50%{transform:translate3d(-16%,-12%,0) scale(.92)}
  100%{transform:translate3d(-30%,4%,0) scale(1.1);opacity:.8}}
@keyframes aurora-3{
  0%{transform:translate3d(0,0,0) scale(.9);opacity:.7}
  50%{transform:translate3d(-36%,14%,0) scale(1.08);opacity:1}
  100%{transform:translate3d(-70%,-6%,0) scale(1)}}

/* ---------- „скъпият" фон: течна мрежа + стъклени форми (Задача H2) ----------
   `site-hero-bg.js` добавя в `.aurora` канвас (WebGL) и три стъклени форми и
   слага `.has-gl` САМО след първия успешен кадър. Без него (без скрипт, без
   WebGL, загубен контекст) всичко тук е скрито и се вижда днешната aurora.
   Прожекторът (`::after`) и решетката (`::before`) остават над канваса — те
   държат контраста под текста.

   Формите са БЕЗ `backdrop-filter`: фонът под тях се мени всеки кадър и
   размиването би се преизчислявало постоянно. Стъклото е нарисувано —
   полупрозрачен градиент, светъл ръб отгоре, тюркоазен отблясък отдолу и
   отражение. Носят се само с `transform` (вътрешният `i`); паралаксът е
   `transform` на външния елемент от скрипта. */
.hero-aurora{--hero-glow:color-mix(in oklab,var(--accent-1) 55%,var(--accent-2))}
.hero-aurora .hero-gl{position:absolute;inset:0;display:none;width:100%;height:100%;opacity:0;pointer-events:none;
  transition:opacity 1.4s cubic-bezier(.2,.7,.2,1)}
.hero-aurora.has-gl .hero-gl{display:block;opacity:1}
@starting-style{.hero-aurora.has-gl .hero-gl{opacity:0}}
.hero-aurora.has-gl .aurora-blob{display:none}
.hero-aurora.has-gl .aurora::before{opacity:.55}
/* Течността е по-ярка от петната — прожекторът зад текста е по-широк и плътен. */
.hero-aurora.has-gl .aurora::after{background:radial-gradient(78% 60% at 50% 46%,color-mix(in srgb,var(--ink) 92%,transparent) 46%,transparent 100%)}
/* Отгоре — височината на шапката, когато тя лежи върху hero-то (`--head-over`,
   само на такива страници): формите не влизат под нея. */
.hero-aurora .hero-shapes{position:absolute;inset:var(--head-over,0px) 0 0;z-index:3;display:none;pointer-events:none}
.hero-aurora.has-gl .hero-shapes{display:block}
.hero-aurora .hero-shape{position:absolute;will-change:transform}
.hero-aurora .hero-shape i{position:relative;display:block;width:100%;height:100%;border-radius:inherit;
  background:
    radial-gradient(90% 70% at 72% 105%,color-mix(in srgb,var(--accent-1-on-ink) 24%,transparent),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.03) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.05));
  box-shadow:
    inset 7px 9px 14px -9px rgba(255,255,255,.6),
    inset -8px -10px 18px -10px color-mix(in srgb,var(--accent-2-on-ink) 60%,transparent),
    inset 0 0 30px rgba(255,255,255,.04),
    0 36px 70px -34px rgba(3,14,22,.65)}
/* Ръбът: светъл горе вляво, гаснещ, пак светъл долу вдясно — 1px пръстен
   (маската изрязва вътрешността), както при дебело стъкло. */
.hero-aurora .hero-shape i::before{content:"";position:absolute;inset:0;padding:1.25px;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.8),rgba(255,255,255,.16) 28%,rgba(255,255,255,.04) 56%,rgba(255,255,255,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Отражението: тънка диагонална ивица светлина. */
.hero-aurora .hero-shape i::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(118deg,transparent 34%,rgba(255,255,255,.09) 44%,rgba(255,255,255,.02) 52%,transparent 58%)}
/* Места: далеч от реда на фразата (най-дългата е почти цялата ширина) и от
   абзаца — отляво до абзаца, отдясно под фразата, горе вдясно над заглавието. */
.hero-aurora .s1{top:44%;left:max(-70px,calc(50% - 770px));width:clamp(160px,18vw,260px);aspect-ratio:1.08;
  border-radius:47% 53% 57% 43% / 52% 41% 59% 48%}
.hero-aurora .s2{top:40%;right:max(-34px,calc(50% - 730px));width:clamp(86px,9vw,136px);aspect-ratio:.42;border-radius:999px}
.hero-aurora .s3{top:7%;right:max(13%,calc(50% - 560px));width:clamp(50px,5vw,76px);aspect-ratio:1;border-radius:50%}
.hero-aurora .s2 i{transform-origin:50% 50%}
.hero-aurora.is-live .hero-shape i{animation:hero-float-1 24s ease-in-out infinite alternate}
.hero-aurora.is-live .s2 i{animation-name:hero-float-2;animation-duration:29s}
.hero-aurora.is-live .s3 i{animation-name:hero-float-3;animation-duration:19s}
.hero-aurora.is-still .hero-shape i,.hero-aurora.is-still .s2 i,.hero-aurora.is-still .s3 i{animation-play-state:paused}
/* Слаб GPU (`site-hero-bg.js`, пазачът за кадрите): фонът е неподвижен — и формите. */
.hero-aurora.is-gl-still .hero-shape i,.hero-aurora.is-gl-still .s2 i,.hero-aurora.is-gl-still .s3 i{animation-play-state:paused}
@keyframes hero-float-1{
  0%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(18px,-14px,0) rotate(6deg)}
  100%{transform:translate3d(-8px,10px,0) rotate(-4deg)}}
@keyframes hero-float-2{
  0%{transform:translate3d(0,0,0) rotate(24deg)}
  50%{transform:translate3d(-14px,20px,0) rotate(31deg)}
  100%{transform:translate3d(6px,-12px,0) rotate(19deg)}}
@keyframes hero-float-3{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(16px,-18px,0)}
  100%{transform:translate3d(-10px,6px,0)}}
.hero-aurora .s2 i{transform:rotate(24deg)}
/* Уже — формите отиват в ъглите, далеч от текста и бутона за пауза. */
@media(max-width:960px){
  .hero-aurora .s1{top:3%;left:-74px;width:190px}
  .hero-aurora .s2{top:5%;right:-28px;width:76px}
  .hero-aurora .s3{display:none}
}
@media(max-width:520px){
  .hero-aurora .s1{top:auto;bottom:-70px;left:-62px;width:168px}
  .hero-aurora .s2{display:none}
  .hero-aurora .s3{display:block;top:14px;right:18px;width:44px}
  .hero-aurora.has-gl .aurora::after{background:radial-gradient(100% 62% at 50% 40%,color-mix(in srgb,var(--ink) 92%,transparent) 46%,transparent 100%)}
}

.hero-aurora .hero-title{display:grid;justify-items:center;max-width:none;font-size:clamp(2.3rem,6.4vw,4rem);
  font-weight:500;letter-spacing:-.04em;line-height:1.03}
.hero-aurora .hero-lead{display:block;color:var(--on-ink)}
/* Всички фрази в една клетка: ширината и височината са на най-дългата, тоест
   редът не „скача" при смяна. Фразата е широка колкото текста си, за да мине
   градиентът от край до край на всяка. Под 960px най-дългата фраза е на два
   реда (10em), а по-късите стоят горе, до „Изработваме". От 960px размерът
   следва ширината на `.wrap` — „интеграция на изкуствен интелект" (15.6em в
   Onest) се побира на един ред и всички фрази са на един. `clip-path` реже
   излизащата фраза на ръба на реда — тя „потъва" нагоре, вместо да минава
   през думата над нея; отстрани има запас за наклона на буквите. */
.hero-aurora .hero-rotator{display:grid;align-items:start;justify-items:center;width:min(100%,10em);clip-path:inset(-.04em -.6em 0)}
.hero-aurora .hero-phrase{grid-area:1/1;max-width:100%;padding:0 .05em .08em;color:var(--accent-1-on-ink);text-wrap:balance}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero-aurora .hero-phrase{background:linear-gradient(100deg,var(--accent-1-on-ink) 15%,var(--accent-2-on-ink) 85%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero-aurora:not(.is-live) .hero-phrase:not(:first-child){visibility:hidden}
.hero-aurora.is-live .hero-phrase{opacity:0;transform:translate3d(0,.6em,0);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.hero-aurora.is-live .hero-phrase.is-current{opacity:1;transform:none}
.hero-aurora.is-live .hero-phrase.is-leaving{opacity:0;transform:translate3d(0,-.6em,0);transition-duration:.5s}
.hero-aurora .lede{max-width:58ch;margin-top:clamp(20px,2.2vw,28px)}
.hero-aurora .hero-cta{margin-top:clamp(28px,3vw,36px)}
.hero-aurora .hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(36px,4.4vw,60px) 0 0;padding:0;list-style:none}
.hero-aurora .hero-chip{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 17px 0 13px;
  border:1px solid rgba(255,255,255,.14);border-radius:99px;background:rgba(255,255,255,.05);
  color:var(--on-ink);font-size:.9rem;font-weight:500;text-decoration:none}
.hero-aurora .hero-chip svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent-1-on-ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hero-aurora a.hero-chip{transition:border-color .2s,background .2s}
.hero-aurora a.hero-chip:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.1)}
/* Бутонът за пауза — в долния десен ъгъл, на ръба на `.wrap`; 44px за докосване. */
.hero-aurora .hero-pause{position:absolute;right:var(--bleed);bottom:clamp(18px,2.4vw,30px);display:inline-grid;place-items:center;
  width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:50%;
  background:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--on-ink);cursor:pointer;transition:border-color .2s,background .2s}
.hero-aurora .hero-pause:hover{border-color:var(--on-ink);background:color-mix(in srgb,var(--ink) 80%,transparent)}
.hero-aurora .hero-pause svg{width:16px;height:16px}
.hero-aurora .hero-pause .i-pause{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.hero-aurora .hero-pause .i-play{fill:currentColor}
.hero-aurora.is-paused .hero-pause .i-pause,.hero-aurora:not(.is-paused) .hero-pause .i-play{display:none}
@media(min-width:960px){
  .hero-aurora .hero-title{font-size:min(4.6rem,calc((min(100vw,1240px) - 2 * var(--gutter)) / 16.2))}
  .hero-aurora .hero-rotator{width:100%}
}
@media(max-width:520px){
  /* На телефон петната са едри спрямо екрана — прожекторът е по-широк. */
  .hero-aurora .aurora::after{background:radial-gradient(95% 60% at 50% 42%,color-mix(in srgb,var(--ink) 90%,transparent) 45%,transparent 100%)}
  .hero-aurora .hero-chips{gap:8px}
  .hero-aurora .hero-chip{min-height:40px;padding:0 14px 0 11px;font-size:.86rem}
}

/* ---------- кинематографичен hero „cinema" (Задача CIN) ----------
   Вариант на `.hero-aurora`: WebGL фонът, шапката над hero-то и бутонът за
   пауза идват оттам. Всеки селектор е под `.hero-cinema` — рендира го
   вариантът `cinema` на блока hero (`views/blocks/hero.php`, seed 015 на
   началната); другите варианти не носят класа и тук нищо не ги пипа.

   Без JavaScript, при `prefers-reduced-motion: reduce` и когато картите не се
   побират в екрана: заглавието и петте карти в спокойна мрежа, секцията е с
   нормална височина. `site-hero-cinema.js` слага `.is-cinema` (само ако
   браузърът има `overflow:clip` и картите се побират): секцията става по-висока
   с `--cin-travel`, сцената (`.cin-stage`) се задържа на цял екран, а картите
   долитат една по една от дълбочината — изцяло от превъртането.

   Една хореография, два двигателя: всичко се смята от `--cin-p` (0…1, колко от
   задържането е изминато). Където има scroll-driven анимации, `--cin-p` е
   анимация по `view-timeline` на секцията; иначе го пише модулът (rAF). Карта
   `i` лети от `--cin-s0 + i·--cin-step` за `--cin-d` от прогреса; easing-ът е
   кубичен (`1 − u³`), смятан в `calc()`. Движат се само transform, opacity и
   filter. Фонът се вижда през цялото задържане — `.aurora` е в сцената.

   Над 1100px заглавието остава: в началото е в средата на екрана, после се
   вдига (`--cin-rise`) и при нужда леко се смалява (`--cin-fit`) над реда от
   карти — двете мери модулът. До 1100px заглавието се превърта нагоре с
   пръста и избледнява, а картите изпълват екрана (3+2, под 620px — 2 колони). */
@property --cin-p{syntax:'<number>';inherits:true;initial-value:0}
.hero-cinema{--cin-travel:140svh;--cin-s0:.06;--cin-step:.13;--cin-d:.34;--cin-head-max:1;--cin-head-out:2;--cin-fit-mode:1;
  --cin-veil:color-mix(in srgb,var(--ink) 66%,transparent)}
.hero-aurora.hero-cinema .hero-title{font-size:clamp(2.35rem,6.6vw,5.4rem);letter-spacing:-.045em;line-height:1}
.hero-aurora.hero-cinema .hero-title em{padding-bottom:.06em;font-style:normal;color:var(--accent-1-on-ink)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero-aurora.hero-cinema .hero-title em{background:linear-gradient(100deg,var(--accent-1-on-ink) 12%,var(--accent-2-on-ink) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero-cinema .cin-head{z-index:2}
/* Паузата — вдясно, на реда на бутоните (заглавието е центрирано). */
.hero-aurora.hero-cinema .hero-pause{right:var(--gutter);bottom:0}
.hero-cinema .cin-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.25vw,18px);max-width:1400px;
  margin:clamp(48px,6vw,80px) auto 0;padding-block:0;list-style:none;text-align:left}
.hero-cinema .cin-card{--i:0;display:flex;min-width:0}
.hero-cinema .cin-card:nth-child(2){--i:1}
.hero-cinema .cin-card:nth-child(3){--i:2}
.hero-cinema .cin-card:nth-child(4){--i:3}
.hero-cinema .cin-card:nth-child(5){--i:4}
.hero-cinema .cin-card:nth-child(6){--i:5}
/* Стъклото на картата е НАРИСУВАНО (без `backdrop-filter` — фонът под него се
   движи): тон от `--ink` с отблясък, светъл ръб, сянка. Контрастът на текста
   е мерен по пиксели в движение (доклада). */
.hero-cinema .cin-link{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1;min-width:0;padding:7px;border-radius:22px;
  color:var(--on-ink);text-decoration:none;
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 42%,rgba(255,255,255,.07)),var(--cin-veil);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(255,255,255,.06),0 34px 70px -36px rgba(2,10,18,.85),0 10px 24px -16px rgba(2,10,18,.55);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.hero-cinema .cin-link::before{content:"";position:absolute;inset:0;z-index:-1;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.14) 30%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hero-cinema .cin-link:hover{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -34px rgba(2,10,18,.9),0 0 36px -12px color-mix(in srgb,var(--accent-1) 50%,transparent)}
.hero-cinema .cin-media{position:relative;order:-1;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:15px;background:var(--ink)}
.hero-cinema .cin-media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.hero-cinema .cin-link:hover .cin-media img{scale:1.04}
/* Отблясък отгоре, лека сянка отдолу и ръб — снимката е „екран" под стъкло. */
.hero-cinema .cin-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 32%),linear-gradient(0deg,color-mix(in srgb,var(--ink) 38%,transparent),transparent 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.24)}
.hero-cinema .cin-proj{position:absolute;left:8px;bottom:8px;z-index:1;padding:2px 9px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 86%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:var(--on-ink);font-size:.72rem;font-weight:500;letter-spacing:.01em;line-height:1.6}
/* Илюстрацията на карта без снимка (AI, Обучения): токените в сияние,
   концентрични пръстени и стъклен диск с иконата. Неподвижна. */
.hero-cinema .cin-art{display:grid;place-items:center;
  background:radial-gradient(70% 90% at 22% 6%,color-mix(in srgb,var(--accent-1) 70%,transparent),transparent 62%),
    radial-gradient(80% 100% at 92% 100%,color-mix(in srgb,var(--accent-2) 85%,transparent),transparent 66%),var(--ink)}
.hero-cinema .cin-art[data-art="training"]{
  background:radial-gradient(70% 90% at 82% 4%,color-mix(in srgb,var(--accent-2) 80%,transparent),transparent 62%),
    radial-gradient(80% 100% at 8% 100%,color-mix(in srgb,var(--accent-1) 64%,transparent),transparent 66%),var(--ink)}
.hero-cinema .cin-art::before{content:"";position:absolute;inset:0;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0 1px,transparent 1.5px 24px);
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent);mask:radial-gradient(closest-side,#000 25%,transparent)}
.hero-cinema .cin-disc{position:relative;display:grid;place-items:center;width:36%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 55%,rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -10px 18px -10px color-mix(in srgb,var(--accent-2-on-ink) 70%,transparent),0 18px 40px -16px rgba(2,10,18,.7)}
.hero-cinema .cin-disc svg{width:46%;height:46%;fill:none;stroke:var(--on-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-cinema .cin-body{display:flex;flex-direction:column;gap:6px;padding:14px 9px 8px}
.hero-cinema .cin-name{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.hero-cinema .cin-name > span{flex:1;min-width:0}
.hero-cinema .cin-icon{flex:none;width:19px;height:19px;fill:none;stroke:var(--accent-1-on-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-cinema .cin-go{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;opacity:.75;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
.hero-cinema .cin-link:hover .cin-go{transform:translate(2px,-2px);opacity:1}
.hero-cinema .cin-text{color:color-mix(in srgb,var(--on-ink-muted) 70%,var(--on-ink));font-size:.86rem;line-height:1.45}
@media(max-width:1100px){
  .hero-cinema{--cin-travel:170svh;--cin-s0:.16;--cin-step:.11;--cin-d:.32;--cin-head-max:.05;--cin-head-out:.16;--cin-fit-mode:0}
  .hero-cinema .cin-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero-cinema .cin-card{grid-column:span 2}
  .hero-cinema .cin-card:nth-child(4){grid-column:2/span 2}
}
@media(max-width:620px){
  .hero-cinema .cin-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero-cinema .cin-card,.hero-cinema .cin-card:nth-child(4){grid-column:auto}
  .hero-cinema .cin-card:nth-child(5){grid-column:1/-1}
  .hero-cinema .cin-card:nth-child(5) .cin-link{flex-direction:row;align-items:center}
  .hero-cinema .cin-card:nth-child(5) .cin-media{flex:0 0 47%}
  .hero-cinema .cin-link{padding:5px;border-radius:18px}
  .hero-cinema .cin-media{aspect-ratio:16/9;border-radius:13px}
  .hero-cinema .cin-body{gap:3px;padding:9px 6px 5px}
  .hero-cinema .cin-name{gap:7px;font-size:.9rem}
  .hero-cinema .cin-icon{width:16px;height:16px}
  .hero-cinema .cin-go{width:13px;height:13px}
  .hero-cinema .cin-text{font-size:.76rem;line-height:1.4}
  .hero-cinema .cin-proj{left:6px;bottom:6px;padding:1px 7px;font-size:.66rem}
  .hero-aurora.hero-cinema .hero-pause{position:static;flex:none;margin-top:20px}
  /* Тук бутонът е в потока, а `site-hero.js` го показва след първото изрисуване —
     мястото му се пази, докато е `hidden` (CLS на телефон, Lighthouse, етап D). */
  html.js .hero-aurora.hero-cinema .cin-head:has(> .hero-pause[hidden])::after{content:"";flex:none;width:44px;height:44px;margin-top:20px}
}

/* Задържането и движението — САМО под `.is-cinema` и САМО без намалено
   движение (`SiteHeroCinemaTest`): закъснял скрипт не може да ги пусне. */
@media(prefers-reduced-motion:no-preference){
  /* `align-content:normal`: aurora центрира съдържанието, а Chromium вече
     прилага `align-content` и на блок — сцената слизаше по средата на секцията. */
  .hero-cinema.is-cinema{display:block;align-content:normal;height:calc(100svh + var(--cin-travel));min-height:0;padding:0;overflow:clip}
  /* Издърпаното под шапката hero (`html.glass.js` по-горе) — без отстъпите
     му; завесата под шапката е в сцената, не в превъртащата се секция. */
  html.glass.js:has(#content>.hero-aurora:first-child) #content>.hero-cinema.is-cinema:first-child{padding:0;min-height:0}
  html.glass.js:has(#content>.hero-aurora:first-child) #content>.hero-cinema.is-cinema:first-child::before{content:none}
  .hero-cinema.is-cinema .cin-stage{position:sticky;top:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);height:100svh;
    padding:calc(var(--head-over,0px) + clamp(12px,2.6svh,32px)) 0 clamp(16px,3.6svh,40px)}
  /* Завесата под шапката (както в aurora) и тъмно сияние под реда от карти. */
  .hero-cinema.is-cinema .cin-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,transparent),color-mix(in srgb,var(--ink) 55%,transparent) 55%,transparent) 0 0/100% calc(var(--head-over,0px) + 90px) no-repeat,
      radial-gradient(90% 46% at 50% 100%,color-mix(in srgb,var(--ink) 62%,transparent),transparent 80%)}
  .hero-cinema.is-cinema .cin-head,.hero-cinema.is-cinema .cin-cards{grid-area:1/1}
  /* Заглавието лежи върху картите (докосване и Tab), но само бутоните му
     хващат показалеца. */
  .hero-cinema.is-cinema .cin-head{--h:clamp(0,var(--cin-p) / .3,1);--hu:calc(1 - var(--h));--he:calc(var(--hu) * var(--hu));
    align-self:start;margin-bottom:clamp(20px,3.6svh,44px);transform-origin:50% 0;pointer-events:none;will-change:transform;
    transform:translate3d(0,calc(var(--he) * var(--cin-rise,0px)),0) scale(calc(var(--cin-fit,1) + (1 - var(--cin-fit,1)) * var(--he)))}
  .hero-cinema.is-cinema .cin-head :is(a,button){pointer-events:auto}
  .hero-cinema.is-cinema.is-head-out .cin-head :is(a,button){pointer-events:none}
  .hero-cinema.is-cinema .cin-cards{align-self:end;width:100%;margin:0 auto;perspective:1300px;perspective-origin:50% 30%}
  /* Карта `i`: `--t` 0…1 по своя прозорец, `--u3` — кубичното „оставащо". От
     дълбочината (по-малка по перспектива, наклонена, размита, прозрачна) към
     мястото си; снимката се „успокоява" от леко увеличение. */
  .hero-cinema.is-cinema .cin-card{--t:clamp(0,(var(--cin-p) - var(--cin-s0) - var(--i) * var(--cin-step)) / var(--cin-d),1);
    --u:calc(1 - var(--t));--u2:calc(var(--u) * var(--u));--u3:calc(var(--u2) * var(--u));
    transform:translate3d(0,calc(var(--u3) * 12svh),calc(var(--u3) * -1100px)) rotateX(calc(var(--u3) * 18deg));
    opacity:clamp(0,calc(var(--t) * 2.5),1);filter:blur(calc(var(--u2) * 16px));will-change:transform,opacity,filter}
  .hero-cinema.is-cinema .cin-media img{transform:scale(calc(1 + var(--u) * .16))}
  /* Формите на фона (паралакс от `site-hero-bg.js`) се вдигат през цялото
     задържане — избледняват, преди да стигнат шапката. */
  .hero-aurora.hero-cinema.is-cinema .hero-shapes{-webkit-mask:linear-gradient(transparent,#000 120px);mask:linear-gradient(transparent,#000 120px)}
  /* „Нагоре" не покрива последната карта, докато сцената е задържана
     (`cin-pinned` на `html` — модулът). Горе той и без това не трябва. */
  html.js.cin-pinned .top.on{opacity:0;visibility:hidden}
  /* Карта, която още не е долетяла, не хваща докосване (модулът слага `.is-landed`). */
  .hero-cinema.is-cinema .cin-card:not(.is-landed) .cin-link{pointer-events:none}
  @media(max-width:1100px){
    .hero-cinema.is-cinema .cin-head{align-self:center;transform:translate3d(0,calc(var(--cin-p) * var(--cin-travel) * -1),0);
      opacity:clamp(0,calc(1 - (var(--cin-p) - .06) / .18),1)}
    .hero-cinema.is-cinema .cin-cards{align-self:center}
  }
  @supports (animation-timeline:view()){
    .hero-cinema.is-cinema{view-timeline:--cin block;animation:cin-p linear both;animation-timeline:--cin;animation-range:contain 0% contain 100%}
  }
}
@keyframes cin-p{from{--cin-p:0}to{--cin-p:1}}

/* ---------- картичката на AI агента (hero и ai_agent_demo) ---------- */
.agent{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:var(--shadow);text-align:left}
.agent .who{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.agent .av{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-2)}
.agent .av svg{width:13px;height:13px;stroke:var(--on-ink);stroke-width:2;fill:none}
.agent .who b{font-size:.9rem;font-weight:600}
.agent .who i{margin-inline-start:auto;color:var(--accent-text);font-size:.75rem;font-style:normal}
.agent p{color:var(--muted);font-size:.92rem;line-height:1.5}
.agent .cursor{display:inline-block;width:2px;height:1em;vertical-align:-2px;background:var(--accent-2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.agent .did{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.agent .did svg{flex:none;width:14px;height:14px;stroke:var(--accent-text);stroke-width:2.4;fill:none}
.hero .agent{width:min(420px,100%);margin-top:56px;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.07);box-shadow:none}
.hero .agent p,.hero .agent .did{color:var(--on-ink-muted)}
.hero .agent .did{border-color:rgba(255,255,255,.14)}
.hero .agent .who i{color:var(--accent-1-on-ink)}
.hero .agent .did svg{stroke:var(--accent-1)}

/* ---------- статистики ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.stat{padding-inline-start:20px;border-inline-start:2px solid var(--line);
  border-image:linear-gradient(180deg,var(--accent-1),var(--accent-2)) 1}
.num{color:var(--ink);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.stat .num.grad{color:var(--ink)}
.stat span{display:block;margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.5}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- услуги: облик `strip` (акордеон само под html.js) ---------- */
.strip{display:grid;gap:12px}
.card{position:relative;display:block;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);color:inherit;text-decoration:none}
.card .bgw{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#E6F7F5,var(--bg) 70%)}
.card:nth-child(even) .bgw{background:linear-gradient(160deg,var(--pill-bg),var(--bg) 70%)}
.card .mk{position:absolute;top:18px;left:clamp(20px,2.2vw,32px)}
.card .mk b{color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.08em}
.card .vert{display:none}
.card .face{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,32px);padding-top:56px}
.card .face p{max-width:44ch;margin-top:12px;color:var(--muted)}
.card:hover{border-color:var(--accent-2)}
html.js .strip{display:flex;height:440px}
html.js .card{flex:1;min-width:66px;transition:flex .45s cubic-bezier(.34,1,.5,1)}
html.js .card.open{flex:4.4}
html.js .card .vert{display:flex;position:absolute;left:0;right:0;bottom:22px;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);font-weight:500;transition:opacity .3s}
html.js .card.open .vert{opacity:0}
html.js .card .face{position:absolute;inset:0;padding-top:76px;opacity:0;transition:opacity .35s}
html.js .card.open .face{opacity:1}
@media(max-width:820px){
  html.js .strip{display:grid;height:auto}
  html.js .card{flex:none}
  html.js .card .vert{display:none}
  html.js .card .face{position:static;opacity:1;padding-top:56px}
}

/* ---------- услуги: облик `grid` и списъкът /uslugi ---------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.service-card{display:block;padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.service-card:hover{border-color:var(--accent-2);transform:translateY(-3px)}
.service-card h2{margin:0 0 10px;font-size:1.18rem}
.service-card p{margin-top:10px;color:var(--muted)}

/* ---------- услуги: облик `tabs` ----------
   Без `site-tabs.js` всички услуги са една под друга, всяка със заглавие:
   табовете и скриването на панелите са САМО под `.svc-tabs.is-ready` — клас,
   който слага единствено този скрипт (не общото `html.js`, което слагат и
   другите модули). */
.svc-tabs{display:grid;gap:20px}
/* Редът с табове не се пренася: на тесен екран се превърта настрани (облакът от
   пренесени табове не се чете като група). */
.svc-tablist{display:none;flex-wrap:nowrap;gap:2px;justify-self:center;max-width:100%;padding:6px;overflow-x:auto;
  scrollbar-width:none;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 10px 30px -24px rgba(11,42,60,.5)}
.svc-tablist::-webkit-scrollbar{display:none}
.svc-tabs.is-ready .svc-tablist{display:flex}
.svc-tab{flex:none;padding:10px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-size:.9rem;
  white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.svc-tab:hover{color:var(--text)}
.svc-tab[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.svc-panel{display:block}
.svc-tabs.is-ready .svc-panel:not(.is-active){display:none}
.is-active{scroll-margin-top:120px}
.svc-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:300px;padding:clamp(32px,4.4vw,64px);border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);text-align:center}
/* Знакът от логото като воден знак — `url()` е абсолютен и сочи файла на сайта. */
.svc-card::after{content:"";position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);z-index:-1;width:120px;height:82px;opacity:.16;
  background:url(/assets/img/mark.png) center/contain no-repeat}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 80% at 100% 0%,rgba(20,184,166,.25),transparent 70%),radial-gradient(60% 80% at 0% 100%,rgba(30,111,217,.25),transparent 70%)}
.svc-card h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500}
.svc-card p{max-width:60ch;margin:14px auto 0;color:var(--on-ink-muted)}
.svc-card .pill{margin-top:24px;background:var(--on-ink);color:var(--ink)}
.svc-card .pill:hover{background:var(--surface)}

/* ---------- процес ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(12px,1.6vw,20px)}
.step{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:240px;padding:24px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink)}
.step::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 70% at 100% 0%,rgba(20,184,166,.32),transparent 60%),radial-gradient(120% 70% at 0% 100%,rgba(30,111,217,.30),transparent 60%)}
.step b{position:absolute;top:20px;left:24px;color:var(--accent-1);font-size:2.6rem;font-weight:500;line-height:1}
.step:nth-child(even)::before{background:radial-gradient(120% 70% at 0% 0%,rgba(30,111,217,.32),transparent 60%),radial-gradient(120% 70% at 100% 100%,rgba(20,184,166,.26),transparent 60%)}
@media(max-width:620px){.step{min-height:0;padding-top:84px}.svc-card::after{display:none}}
.step h3{margin-bottom:6px}
.step p{color:var(--on-ink-muted);font-size:.93rem}

/* ---------- въпроси и отговори ---------- */
.faq-sec .sec-head{margin-inline:auto;text-align:center}
.faq-list{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq-item{padding:20px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);transition:border-color .2s}
.faq-item[open]{border-color:var(--accent-2)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:600;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--surface);color:var(--accent-text);font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-answer{margin-top:12px;color:var(--muted)}
.faq-answer a{color:var(--accent-text)}

/* ---------- призив за действие ---------- */
/* Като при Stemil: лентата е разделена — текстът вляво върху `--ink`, бутонът
   вдясно върху градиента, който стига до десния ръб на прозореца
   (`::before` излиза извън `.wrap`, секцията го отрязва). */
.cta-sec{position:relative;overflow:hidden;isolation:isolate;padding-block:0;background:var(--ink);color:var(--on-ink)}
.cta-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 90% at 0% 0%,rgba(20,184,166,.16),transparent 70%)}
.cta-band{display:grid;grid-template-columns:1fr;column-gap:clamp(24px,4vw,64px);align-items:stretch}
.cta-band:has(> .cta-actions){grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.cta-copy{padding-block:clamp(56px,7vw,104px)}
.cta-copy h2{max-width:20ch}
.cta-copy .lede{margin-top:16px;color:var(--on-ink-muted)}
.cta-actions{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,64px) clamp(24px,4vw,56px)}
.cta-actions::before{content:"";position:absolute;inset:0 calc(-1 * var(--bleed)) 0 0;z-index:-1;background:var(--accent)}
.cta-actions .pill{background:var(--on-ink);color:var(--ink)}
.cta-actions .pill:hover{background:var(--surface)}
.cta-actions .pill.ghost{background:rgba(255,255,255,.88);box-shadow:none}
@media(max-width:820px){
  .cta-band:has(> .cta-actions){grid-template-columns:1fr}
  .cta-copy{padding-bottom:40px}
  .cta-actions{justify-content:flex-start;padding-inline:0}
  .cta-actions::before{inset:0 calc(-1 * var(--bleed))}
}
.facts{display:grid;gap:12px;margin:22px 0 0;padding:0}
.fact{display:grid;grid-template-columns:104px 1fr;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.97rem}
.fact:last-child{border-bottom:0}
.fact dt{color:var(--muted)}
.fact dd{margin:0}
.fact a{font-weight:500;text-decoration:none}
.cta-sec .fact{border-color:rgba(255,255,255,.14)}
.cta-sec .fact dt{color:var(--on-ink-muted)}

/* ---------- клиенти ---------- */
.marq-head{padding-block:clamp(44px,5vw,72px) 0}
.marq-head .sec-head{margin:0 auto 8px;text-align:center}
.marq-head h2{color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.marq{overflow:hidden;padding-block:28px;border-bottom:1px solid var(--line);background:var(--bg);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq{--marq-step:20s;--marq-len:2}
/* Отстоянието е на всяко лого, не `gap`: двете половини на лентата са точно равни
   и `-50%` пада на шева. Продължителността е стъпка × дължина в отрязъци по 640 px
   (`ClientsMarqueeBlock::loop()`), тоест скоростта не зависи от броя лога. */
.track{display:flex;align-items:center;width:max-content;animation:slide calc(var(--marq-step) * var(--marq-len)) linear infinite}
.track > *,.marq-dup > *{flex:none;margin-inline-end:clamp(40px,5vw,76px)}
.marq:hover .track{animation-play-state:paused}
.track img{flex:none;width:auto;height:clamp(26px,2.6vw,34px);opacity:.45;filter:grayscale(1);transition:opacity .3s,filter .3s}
.track img:hover,.track a:focus-visible img{opacity:1;filter:none}
.marq-slow{--marq-step:34s}
.marq-fast{--marq-step:12s}
.marq-dup{display:flex;align-items:center;pointer-events:none}
.marq-len-1{--marq-len:1}
.marq-len-2{--marq-len:2}
.marq-len-3{--marq-len:3}
.marq-len-4{--marq-len:4}
.marq-len-5{--marq-len:5}
.marq-len-6{--marq-len:6}
.marq-len-7{--marq-len:7}
.marq-len-8{--marq-len:8}
.marq-len-9{--marq-len:9}
.marq-len-10{--marq-len:10}
.marq-len-11{--marq-len:11}
.marq-len-12{--marq-len:12}
.marq-len-13{--marq-len:13}
.marq-len-14{--marq-len:14}
.marq-len-15{--marq-len:15}
.marq-len-16{--marq-len:16}
.marq-len-17{--marq-len:17}
.marq-len-18{--marq-len:18}
.marq-len-19{--marq-len:19}
.marq-len-20{--marq-len:20}
.marq-len-21{--marq-len:21}
.marq-len-22{--marq-len:22}
.marq-len-23{--marq-len:23}
.marq-len-24{--marq-len:24}
.marq-len-25{--marq-len:25}
.marq-len-26{--marq-len:26}
.marq-len-27{--marq-len:27}
.marq-len-28{--marq-len:28}
.marq-len-29{--marq-len:29}
.marq-len-30{--marq-len:30}
.marq-len-31{--marq-len:31}
.marq-len-32{--marq-len:32}
.marq-len-33{--marq-len:33}
.marq-len-34{--marq-len:34}
.marq-len-35{--marq-len:35}
.marq-len-36{--marq-len:36}
.marq-len-37{--marq-len:37}
.marq-len-38{--marq-len:38}
.marq-len-39{--marq-len:39}
.marq-len-40{--marq-len:40}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- отзиви ---------- */
.testi-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
/* Спецификацията, §3: отзивите са „бели/светли карти, рамка --line" — тъмни
   са само hero, услугата, процесът, CTA и футърът. Кавичката е декорация
   (`/ ""` — без текст за екранния четец). */
.quote{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(26px,3vw,40px);padding-top:clamp(56px,5vw,72px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:var(--text);box-shadow:var(--shadow)}
.quote::before{content:"\201C" / "";position:absolute;top:clamp(10px,1.4vw,18px);left:clamp(22px,2.6vw,36px);font-size:4.4rem;font-weight:600;line-height:1;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--accent)}
.quote blockquote{position:relative;margin:0;font-size:clamp(1.08rem,1.4vw,1.22rem);font-weight:500;line-height:1.45;letter-spacing:-.01em}
.quote footer{position:relative;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.93rem}
.testi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.testi-card{padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.testi-card blockquote{margin:0 0 18px;color:var(--muted)}
.testi-foot{display:flex;align-items:center;gap:12px}
.testi-avatar{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover}
.testi-who{display:grid;gap:2px}
.testi-who b{font-weight:600}
.testi-who i{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem;font-style:normal}
.testi-logo{width:auto;height:18px;object-fit:contain}
.quote .testi-who b{color:var(--text)}
.quote .testi-who i{color:var(--muted)}
@media(max-width:940px){.testi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.testi-grid{grid-template-columns:1fr}}

/* ---------- текст и изображение ---------- */
.text-image-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center}
.text-image-grid:not(:has(.text-image-media)){grid-template-columns:1fr}
.text-image-grid.is-narrow{max-width:960px;margin-inline:auto}
.text-image-media{overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.text-image-media img{width:100%;height:100%;object-fit:cover}
.text-image-copy{margin-top:18px;color:var(--muted)}
.text-image-copy :is(p,ul,ol){margin-top:.8em}
.text-image-copy :is(h2,h3,strong){color:var(--text)}
.text-image-copy a{color:var(--accent-text)}
.text-image-body .pill{margin-top:26px}
@media(max-width:820px){.text-image-grid{grid-template-columns:1fr}}

/* ---------- богат текст ---------- */
.block-rich-text{margin-inline:auto;padding-inline:var(--gutter)}
.block-rich-text.is-narrow{max-width:920px}
.block-rich-text.is-wide{max-width:1240px}
.block-rich-text :is(h2,h3){margin-top:1.4em}
.block-rich-text :is(p,ul,ol,blockquote){margin-top:.9em;color:var(--muted)}
.block-rich-text :is(ul,ol){padding-inline-start:1.4em}
.block-rich-text a{color:var(--accent-text);text-underline-offset:3px}
.block-rich-text blockquote{margin-inline:0;padding-inline-start:18px;border-inline-start:3px solid var(--accent-1)}

/* ---------- демонстрация на AI агент ---------- */
.agent-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:center}
.agent-demo-grid .sec-head{margin-bottom:16px}
.agent-demo-stage{position:relative;min-height:220px}
.agent-demo-media{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.agent-demo-media img{width:100%;height:100%;object-fit:cover}
.agent-demo-stage .agent{margin-top:16px}
.agent-line{margin-top:10px;color:var(--muted);line-height:1.6;transition:opacity .45s,transform .45s}
.agent-line.is-pending{opacity:0;transform:translateY(6px)}
@media(max-width:820px){.agent-demo-grid{grid-template-columns:1fr}}

/* ---------- карта (Google Maps) ---------- */
.map-sec{background:var(--bg)}
.map-frame{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.map-frame.is-sm{height:260px}
.map-frame.is-md{height:380px}
.map-frame.is-lg{height:520px}
.map-open{margin-top:14px}
.map-open a{color:var(--accent-text);font-weight:500}
@media(max-width:620px){.map-frame.is-sm{height:200px}.map-frame.is-md{height:280px}.map-frame.is-lg{height:360px}}
/* Картата без съгласие (етап D): адресът и бутонът стоят там, където би била картата.
   Височината на всеки размер остава като `min-height` — бутонът „Покажи картата"
   не мести страницата; с едър текст рамката расте със съдържанието
   (`overflow:hidden` иначе би отрязал бутона). След височините горе. */
.map-off{display:grid;place-items:center;padding:24px;text-align:center}
.map-frame.map-off{height:auto}
.map-frame.map-off.is-sm{min-height:260px}
.map-frame.map-off.is-md{min-height:380px}
.map-frame.map-off.is-lg{min-height:520px}
@media(max-width:620px){.map-frame.map-off.is-sm{min-height:200px}.map-frame.map-off.is-md{min-height:280px}.map-frame.map-off.is-lg{min-height:360px}}
.map-consent{display:grid;gap:10px;justify-items:center;max-width:52ch}
.map-consent p{color:var(--muted)}
.map-address{font-weight:600}
/* След `.map-consent p` (0,1,1): 0,2,0 печели и адресът е в основния цвят. */
.map-consent .map-address{color:var(--text)}

/* ---------- контактна форма ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,60px);align-items:start}
.contact-grid:has(> * + *){grid-template-columns:1.1fr .9fr}
.contact-grid .facts{margin-top:0;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.contact-form{display:grid;gap:14px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.field{display:grid;gap:6px}
.field label{color:var(--text);font-size:.87rem;font-weight:500}
.field input,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font:inherit;font-size:1rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(30,111,217,.15)}
.field textarea{min-height:120px;resize:vertical}
.consent{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:.86rem}
.consent input{width:auto;margin-top:3px}
.consent a{color:var(--accent-text)}
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{color:var(--muted);font-size:.9rem}
.form-status:empty{display:none}
.form-status.is-ok{padding:12px 14px;border-radius:10px;background:var(--pill-bg);color:var(--text)}
.form-status.is-error{padding:12px 14px;border:1px solid var(--danger);border-radius:10px;color:var(--danger)}
.field-error{display:block;color:var(--danger);font-size:.84rem}
/* След `.field input:focus` (същата специфичност): рамката на грешното поле остава червена и на фокус. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
@media(max-width:820px){.contact-grid,.contact-grid:has(> * + *){grid-template-columns:1fr}}

/* ---------- съгласие за бисквитки (етап D; Задача 4b — плаваща карта) ----------
   Искане на собственика: карта долу вдясно (до 380px), на телефон — лист по
   цялата ширина с 12px отстъп. Плува над сайта и не избутва нищо надолу.

   Преглед на 4b: на НИСЪК прозорец (под 561px — телефон легнал, 400% мащаб)
   плаващата карта заемаше 65–91% от височината, а горният ѝ край лягаше под
   залепената шапка. Там картата е обикновен блок в потока най-горе (както
   лентата от Задача 4) — без отстъпи отдолу и без преместени контроли. Всичко
   плаващо е в `@media(min-height:561px)` по-долу. */
.cookie-bar{display:grid;gap:10px;padding:14px var(--gutter);border-bottom:1px solid var(--line);background:var(--surface);color:var(--text)}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}}
.cookie-copy{color:var(--text);font-size:.86rem;line-height:1.5}
.cookie-copy strong{display:block;margin-bottom:4px;font-size:.95rem}
.cookie-copy p{margin:0}
.cookie-copy a,.consent-more a{color:var(--accent-text)}
/* Връзката към политиката е на свой ред и не се пренася: обръчът на фокуса
   обикаля една дума и не застъпва буквите на реда над нея. */
.cookie-copy a{display:block;width:fit-content;margin-top:6px;white-space:nowrap}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px}
/* Двата бутона — един до друг и с еднаква тежест; дългият текст се пренася в
   бутона, вместо да го изтласка на нов ред. */
.cookie-bar .cookie-actions .pill{flex:1 1 0;justify-content:center;min-width:0;max-width:280px;padding-inline:14px;line-height:1.2;text-align:center;white-space:normal}
/* Плаващата карта. Слой 45: над съдържанието и „Нагоре" (40), под телефонното
   меню (49) и шапката (50); lightbox-ът е модален `<dialog>` в горния слой —
   над нея, а останалото (и картата) е инертно. Отвореното меню я прави `inert`
   (`site-nav.js`: брат на шапката).

   WCAG 2.4.11: докато картата се вижда, `scroll-padding-bottom` държи фокуса над
   нея, а отстъпът в края на футъра — последните връзки. `--cookie-h` е
   височината ѝ: без скрипт — разумна стойност тук, със скрипт — мерена
   (`site-nav.js`). „Нагоре" и паузата на hero-то се отместват. */
@media(min-height:561px){
  .cookie-bar{position:fixed;right:22px;bottom:22px;z-index:45;gap:14px;width:min(380px,calc(100vw - 44px));
    max-height:calc(100svh - 44px);overflow-y:auto;padding:20px 20px 18px;border:1px solid var(--line);border-radius:22px;
    background:var(--bg);box-shadow:var(--shadow);animation:cookie-in .4s cubic-bezier(.2,.7,.3,1) both}
  .cookie-bar .cookie-actions .pill{max-width:none}
  /* Без скрипт шапката не е залепена, а менюто с панелите е в потока (слой 50):
     превъртяно до картата, то би легнало върху нея. Няма телефонно меню, което
     картата да закрие — тя е над шапката. */
  html:not(.js) .cookie-bar{z-index:51}
  html:has(.cookie-bar){--cookie-h:250px;scroll-padding-bottom:calc(var(--cookie-h) + 34px)}
  html:has(.cookie-bar) footer.site{padding-bottom:calc(var(--cookie-h) + 34px)}
  html:has(.cookie-bar) .top{bottom:calc(var(--cookie-h) + 34px)}
  /* Паузата на hero-то е долу вдясно — там, където лежи картата: отива вляво,
     докато картата се вижда (под 620px тя и без това е под бутоните). */
  html:has(.cookie-bar) .hero-aurora .hero-pause{right:auto;left:var(--bleed)}
  html:has(.cookie-bar) .hero-aurora.hero-cinema .hero-pause{right:auto;left:var(--gutter)}
  /* Кино hero-то (само там, където `site-hero-cinema.js` го включва): задържаната
     сцена оставя място на картата — картите долитат НАД нея. Не се ли съберат,
     `fits()` (мери отстъпа) оставя спокойната мрежа. */
  html:has(.cookie-bar) .hero-cinema.is-cinema .cin-stage{padding-bottom:calc(var(--cookie-h) + 34px)}
  /* Стъклото — същото като на шапката и панела: тон, отблясък отгоре, фаска,
     сянка и 1px ободок на `::after`. Без пречупването на ръба: картите на
     `#lg-refract*` се рисуват по размера на шапката и панела. */
  html.glass .cookie-bar{border-color:transparent;background-color:var(--glass-card);
    background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 46%);
    box-shadow:var(--glass-bevel),var(--glass-head-shadow);
    -webkit-backdrop-filter:var(--glass-card-blur);backdrop-filter:var(--glass-card-blur)}
  html.glass .cookie-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 26%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.6));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  /* Обръчът е `--ink`, както в шапката: под стъклото минава и тъмно, и светло. */
  html.glass .cookie-bar :focus-visible{outline-color:var(--ink)}
}
@media(min-height:561px) and (min-width:1101px){
  /* Над 1100px картата е в ъгъла: сцената остава с височината си, а редът от
     карти отстъпва вдясно точно колкото е тя (380px + 22px + 16px въздух),
     като брои и полето, което `.wrap` вече оставя на широк екран. */
  html:has(.cookie-bar) .hero-cinema.is-cinema .cin-stage{padding-bottom:clamp(16px,3.6svh,40px)}
  html:has(.cookie-bar) .hero-cinema.is-cinema .cin-cards{padding-right:max(var(--gutter),calc(418px - (100% - min(1400px,100%)) / 2))}
}
@media(min-height:561px) and (max-width:620px){
  .cookie-bar{right:12px;bottom:12px;left:12px;width:auto;max-height:calc(100svh - 24px);gap:12px;padding:16px 16px 14px;border-radius:18px}
  .cookie-copy{font-size:.8rem;line-height:1.45}
  .cookie-copy strong{font-size:.9rem}
  .cookie-bar .cookie-actions .pill{min-height:44px;padding-inline:10px;font-size:.84rem}
  html:has(.cookie-bar){scroll-padding-bottom:calc(var(--cookie-h) + 24px)}
  html:has(.cookie-bar) footer.site{padding-bottom:calc(var(--cookie-h) + 24px)}
  html:has(.cookie-bar) .top{bottom:calc(var(--cookie-h) + 24px)}
}
.consent-kinds{display:grid;gap:14px;max-width:72ch;margin:0;padding:0}
.consent-kinds div{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.consent-kinds dt{font-weight:600}
.consent-kinds dd{margin:6px 0 0;color:var(--muted)}
.consent-current{margin-top:22px;font-weight:500}
.consent-page .cookie-actions{margin-top:14px}
.consent-more{margin-top:18px}

/* ---------- футър ---------- */
footer.site{border-top:1px solid rgba(255,255,255,.08);background:var(--ink);color:var(--on-ink-muted);font-size:.93rem}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);padding-block:clamp(48px,6vw,80px)}
.foot-logo{display:inline-flex}
.foot-logo img{width:150px;height:auto}
.foot-brand p{max-width:36ch;margin-top:16px}
.foot-col h2{margin-bottom:14px;color:var(--on-ink);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.foot-col ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--on-ink)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:18px;font-size:.85rem}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{color:var(--on-ink-muted)}
.foot-links a:hover{color:var(--on-ink)}
@media(max-width:900px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}

/* ---------- портфолио: списък (етап C) ----------
   `/proekti` и страницата на категория. Филтърът и страниците са ВРЪЗКИ —
   работят без JavaScript и имат адрес; обликът им е езиковият `.chip` от
   шапката, с височина 44px за докосване. Картите са светли (`--bg` върху
   `--surface` на четната секция), като `.service-card`. Движението при
   посочване се спира в общия блок за намалено движение по-долу. */
/* Списъкът продължава заглавната част — по-малък горен отстъп от общия. */
.proj-list{padding-top:clamp(36px,4.4vw,64px)}
.proj-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2.4vw,32px)}
.proj-filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:99px;
  background:var(--bg);color:var(--muted);font-size:.93rem;text-decoration:none;transition:border-color .2s,color .2s}
.proj-filters a:hover{border-color:var(--accent-2);color:var(--text)}
.proj-filters a[aria-current]{border-color:var(--accent-2);background:var(--pill-bg);color:var(--text);font-weight:600}
.proj-count{margin-bottom:18px;color:var(--muted);font-size:.92rem}
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.proj-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  color:inherit;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.proj-card:hover{border-color:var(--accent-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.proj-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.proj-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.proj-card:hover .proj-shot img{transform:scale(1.04)}
.proj-year{position:absolute;top:12px;right:12px;padding:4px 11px;border-radius:99px;background:var(--bg);color:var(--text);
  font-size:.8rem;font-weight:600}
.proj-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:clamp(18px,2vw,24px)}
.proj-client{color:var(--muted);font-size:.85rem}
.proj-body :is(h2,h3){font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.proj-body p{color:var(--muted);font-size:.94rem}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.proj-tags i{padding:4px 11px;border-radius:99px;background:var(--surface);color:var(--muted);font-size:.78rem;font-style:normal}
@media(max-width:980px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.proj-grid{grid-template-columns:1fr}}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:clamp(32px,4vw,52px)}
.pager-page,.pager-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;
  border:1.5px solid var(--line);border-radius:99px;background:var(--bg);color:var(--muted);font-size:.93rem;text-decoration:none;
  transition:border-color .2s,color .2s}
a.pager-page:hover,.pager-step:hover{border-color:var(--accent-2);color:var(--text)}
.pager-page[aria-current="page"]{border-color:var(--accent-2);background:var(--pill-bg);color:var(--text);font-weight:600}
.pager-gap{color:var(--muted)}
/* Бутонът „към всички проекти" на блока `projects_featured` — под решетката, в
   средата (на телефон редът „заглавие вляво, бутон вдясно" се пренася зле). */
.proj-more{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* ---------- портфолио: страница на проект (етап C) ----------
   Корицата и фактите, трите части като светли карти, галерията от ВРЪЗКИ към
   пълния файл (без JavaScript щракването отваря снимката, надписът се вижда под
   миниатюрата; `site-lightbox.js` я показва в диалог) и „следващ/предишен".
   Секциите са части на една страница — по-малък отстъп от общия. */
.proj-intro,.proj-case,.proj-gallery,.proj-nav{padding-block:clamp(36px,4.4vw,64px)}
.proj-cover{overflow:hidden;aspect-ratio:21/9;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.proj-cover img{width:100%;height:100%;object-fit:cover}
.proj-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(20px,2.4vw,32px) 0 0}
.proj-facts > div{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.proj-facts dt{margin-bottom:4px;color:var(--muted);font-size:.85rem}
.proj-facts dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.proj-facts a{color:var(--accent-text)}
@media(max-width:760px){.proj-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.proj-facts{grid-template-columns:1fr}}
.proj-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(14px,1.8vw,24px)}
.proj-part{padding:clamp(20px,2.2vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.proj-part h2{margin-bottom:10px;font-size:1.15rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.proj-part .prose{color:var(--muted)}
.proj-part .prose > :first-child{margin-top:0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.gallery-item{margin:0}
.gallery-item a{display:block;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:zoom-in}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery-item a:hover img{transform:scale(1.04)}
.gallery-item figcaption{margin-top:8px;color:var(--muted);font-size:.88rem}
@media(max-width:620px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.nextprev a{display:block;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:inherit;
  text-decoration:none;transition:border-color .2s,transform .2s}
.nextprev a:hover{border-color:var(--accent-2);transform:translateY(-3px)}
.nextprev span{display:block;margin-bottom:6px;color:var(--muted);font-size:.85rem}
.nextprev strong{font-weight:600}
/* Самотен „следващ" стои вдясно, самотен „предишен" — вляво. */
.nextprev .prev{grid-column:1}
.nextprev .next{grid-column:2;text-align:right}
@media(max-width:620px){.nextprev{grid-template-columns:1fr}.nextprev .next{grid-column:auto;text-align:left}}

/* ---------- lightbox (етап C) ----------
   Нативен `<dialog>` с `showModal()`: браузърът пази фокуса вътре, Esc затваря,
   страницата отдолу е инертна. Фонът е плътно `--ink` — тъмен контекст, тоест
   обръчът на фокуса е бял (`:is(…,.lb)` горе), а надписът е `--on-ink-muted`;
   двойките са в SiteContrastTest. Скрита стрелка (една снимка) остава скрита
   заради глобалното `[hidden]{display:none !important}`. Липсващ файл крие
   `img` (без иконата за счупено изображение) и показва текста от сървъра.
   Отвореният диалог заключва `body`, не `html` — `overflow` на `html` отлепва
   залепената шапка (като `html.js.nav-open body`). `scrollbar-gutter` НЕ се
   слага: на къса страница би добавил празна ивица в затворения изглед, а
   изчезналата лента при отворен диалог е под плътния `--ink`. */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(14px,4vw,48px);border:0;
  background:var(--ink);color:var(--on-ink)}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:transparent}
html.lb-open body{overflow:hidden}
.lb figure{display:flex;flex-direction:column;gap:12px;max-width:min(1200px,100%);max-height:100%;margin:0}
.lb img{width:auto;max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);margin-inline:auto;border-radius:var(--r)}
.lb figcaption{color:var(--on-ink-muted);font-size:.92rem;text-align:center}
.lb .broken img{display:none}
.lb .broken figcaption{color:var(--on-ink);font-size:1rem}
.lb .x,.lb .nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.2);
  border-radius:50%;background:rgba(255,255,255,.08);color:var(--on-ink);font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .2s}
.lb .x:hover,.lb .nav:hover{background:rgba(255,255,255,.2)}
.lb .x{top:20px;right:20px}
.lb .prev{top:50%;left:20px;transform:translateY(-50%)}
.lb .next{top:50%;right:20px;transform:translateY(-50%)}

/* ---------- стъкло (Задача G) ----------
   В духа на iOS 26 и sfcbg.com. ВСИЧКО е под `html.glass` — прототипът слага
   класа, сайтът още не (`SiteGlassTest`), тоест живият облик не се мени до
   одобрение. Истински `backdrop-filter` има САМО шапката (на `::before`),
   панелът „Услуги", телефонното меню, стъклените хапчета и чиповете, бутонът
   за пауза и контролите на lightbox-а — малки площи. Картите и футърът са
   „стъклен вид" без размиване: градиент, светъл ръб, сянка. Без вложено
   размиване: хапчетата в шапката са само оцветени.

   Шапката носи стъклото на `::before`, не на себе си: `backdrop-filter` на
   предшественик става съдържащ блок за `position:fixed` (телефонното меню би
   се закачило за лентата) и корен за размиването на панела „Услуги".
   Височината остава 84px (64px под 620px) — на нея стъпват
   `scroll-margin-top` и пробите `stickyCover`/`headerJump`. */
html.glass header{background:transparent;border-bottom:0}
html.glass .bar{isolation:isolate;min-height:68px;margin-block:8px;padding-block:4px}
/* Стъклото (Задача LG): тон + отблясък отгоре + блик след мишката (`--mx/--my`
   от `site-glass.js`; без скрипт — горе вляво) върху размития фон; фаска и
   сянка. Ободокът е на `::after`. */
html.glass .bar::before{content:"";position:absolute;inset:0 calc(var(--gutter) - 16px);z-index:-1;border-radius:22px;
  background-color:var(--glass-head);
  background-image:radial-gradient(300px 120px at var(--mx,22%) var(--my,0%),rgba(255,255,255,.42),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 58%);
  box-shadow:var(--glass-bevel),var(--glass-head-shadow);
  -webkit-backdrop-filter:var(--glass-head-blur);backdrop-filter:var(--glass-head-blur)}
/* Ободокът: 1px градиент (светло горе вляво и долу вдясно, както ръб на
   стъкло под светлина), изрязан с маска content-box срещу border-box, и по-ярко
   петно там, където е мишката. Без размиване — само рисунка. */
html.glass .bar::after{content:"";position:absolute;inset:0 calc(var(--gutter) - 16px);z-index:-1;border-radius:22px;padding:1px;pointer-events:none;
  background:radial-gradient(160px 80px at var(--mx,22%) var(--my,0%),rgba(255,255,255,.95),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 26%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Под шапката минава и тъмният hero: текстът в нея е `--text`, не `--muted`. */
html.glass .bar :is(.menu-link,.menu-group,.chip){color:var(--text)}
/* Обръчът в шапката е `--ink`: под стъклото минава и тъмно, и светло, а
   `--accent-2` пада до ~2.8:1 върху размития тъмен hero (пробата `focusRings`). */
html.glass .bar :focus-visible{outline-color:var(--ink)}
html.glass .bar .chip{border-color:rgba(11,42,60,.12);background:rgba(255,255,255,.5)}
html.glass .bar .chip.is-current{background:var(--pill-bg);border-color:var(--accent-2)}
html.glass .burger{border-color:rgba(11,42,60,.12);background:rgba(255,255,255,.55)}
html.glass .mega{border-color:transparent;background-color:var(--glass-panel);
  background-image:radial-gradient(420px 200px at var(--mx,30%) var(--my,0%),rgba(255,255,255,.4),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 30%);
  box-shadow:var(--glass-bevel),var(--shadow);
  -webkit-backdrop-filter:var(--glass-panel-blur);backdrop-filter:var(--glass-panel-blur)}
html.glass .mega-link:hover,html.glass .mega-link[aria-current="page"]{background:rgba(232,241,252,.85)}
/* По-тъмното описание: под по-прозрачния панел минава и тъмният hero. */
html.glass .mega-link span{color:#45525D}
/* SVG-ът с филтрите за пречупване (`views/site/layouts/app.php`) — без размер. */
.lg-defs{position:absolute;width:0;height:0;overflow:hidden}
@media(width > 1100px){
  html.glass.js .mega::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;
    background:radial-gradient(220px 110px at var(--mx,30%) var(--my,0%),rgba(255,255,255,.95),transparent 70%),linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,255,255,.3) 22%,rgba(255,255,255,.1) 60%,rgba(255,255,255,.55));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
}
@media(max-width:1100px){
  html.glass .mega,html.glass.js .mega{border:0;background:rgba(243,247,250,.7);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Телефонното меню — лист от горния ръб на шапката до долу (`--nav-head` и
     `--nav-top` от `site-nav.js`), ПОД лентата (z-index под `::before`):
     лентата стои върху листа и над hero-то не прозира тъмен шев (преглед на
     b425af0..c5f9aa9). Без пречупване — голяма площ. */
  html.glass.js .site-nav{top:var(--nav-head,0px);z-index:-2;padding-top:calc(var(--nav-top,64px) - var(--nav-head,0px) + 8px);border-top:0;
    background-color:var(--glass-sheet);background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 160px);
    -webkit-backdrop-filter:var(--glass-sheet-blur);backdrop-filter:var(--glass-sheet-blur)}
}
@media(max-width:620px){
  html.glass .bar{min-height:52px;margin-block:6px;padding-block:2px}
  html.glass .bar::before,html.glass .bar::after{inset:0 calc(var(--gutter) - 8px);border-radius:18px}
}
/* Пречупване (Chromium): `site-glass.js` слага `lg-refract`, щом е рисувал
   картата на ръба. Само Chromium рисува SVG филтър в `backdrop-filter` —
   Safari и Firefox приемат синтаксиса и губят ЦЯЛОТО размиване, затова е зад
   класа (проверка в скрипта), не само зад `@supports`. Размиването е вътре във
   филтъра. Резервите долу назовават `html.glass.lg-refract` изрично. */
@supports (backdrop-filter:url(#lg-refract)){
  html.glass.lg-refract{--glass-head-blur:url(#lg-refract) saturate(200%);--glass-panel-blur:url(#lg-refract-panel) saturate(200%)}
}

/* ---------- шапката ВЪРХУ hero-то (Задача H2, искане на собственика) ----------
   Само когато първата секция на `main` е `.hero-aurora` (`:has()` — CSS-ът
   сам разпознава страницата, без знак от сървъра; браузър без `:has()` вижда
   днешната светла шапка). Горе шапката и лентата са прозрачни, с бял текст и
   светлото лого; щом hero-то мине под шапката, `site-nav.js` слага
   `head-solid` и всичко се връща към днешното светло стъкло (плавно, само
   цветове и прозрачност). Отвореното телефонно меню (`nav-open`) е винаги
   светло. Над движещия се фон — без размиване (както контролите в hero).
   „Запитване" остава плътно синьо.

   С JavaScript шапката е залепена и с постоянна височина — `--head-over`
   (лента 40px + стъклото 84px; под 620px — 64px): hero-то се издърпва под нея
   и съдържанието му слиза със същото. Без JavaScript височината е тази на
   цялото меню (панелите са в потока) — тогава шапката и лентата носят тъмния
   фон сами, а горният ръб на aurora-та избледнява в него. */
html.glass:has(#content>.hero-aurora:first-child){--head-over:84px}
html.glass:has(#content>.hero-aurora:first-child):has(.topbar){--head-over:124px}
@media(max-width:620px){
  html.glass:has(#content>.hero-aurora:first-child){--head-over:64px}
  html.glass:has(#content>.hero-aurora:first-child):has(.topbar){--head-over:104px}
}
html.glass.js:has(#content>.hero-aurora:first-child) #content>.hero-aurora:first-child{margin-top:calc(-1 * var(--head-over));
  padding-top:calc(clamp(88px,10vw,150px) + var(--head-over));min-height:calc(min(820px,calc(100svh - 120px)) + var(--head-over))}
/* Тъмна „завеса" в горния край на hero-то, под шапката: течността там е най-
   ярка (тюркоазът горе вляво), а текстът на лентата и чиповете е светъл —
   контрастът по пиксели е в доклада. Над канваса и формите, под шапката и
   далеч над заглавието (до `--head-over` + 90px). */
html.glass.js:has(#content>.hero-aurora:first-child) #content>.hero-aurora:first-child::before{content:"";position:absolute;inset:0 0 auto;z-index:0;
  height:calc(var(--head-over) + 90px);pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,transparent),color-mix(in srgb,var(--ink) 55%,transparent) 55%,transparent)}
/* Издърпаното hero е позиционирано и би легнало ВЪРХУ лентата (тя не е). */
html.glass:has(#content>.hero-aurora:first-child) .topbar{position:relative;z-index:51}
html.glass:has(#content>.hero-aurora:first-child) .logo{position:relative}
html.glass:has(#content>.hero-aurora:first-child) .logo .logo-on-dark{display:block;position:absolute;top:0;left:0;opacity:0;visibility:hidden}
/* Преходите — в двете посоки (затова не са под `:not(.head-solid)`). */
html.glass:has(#content>.hero-aurora:first-child) .logo img{transition:opacity .35s,visibility .35s}
html.glass:has(#content>.hero-aurora:first-child) .bar::before{transition:background-color .35s,box-shadow .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s}
html.glass:has(#content>.hero-aurora:first-child) .bar :is(.menu-link,.menu-group,.chip),html.glass:has(#content>.hero-aurora:first-child) .burger,html.glass:has(#content>.hero-aurora:first-child) .topbar{transition:color .35s,background-color .35s,border-color .35s}

html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .topbar{background:var(--glass-topbar-top);border-bottom-color:rgba(255,255,255,.1);color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .topbar a:hover{color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .topbar svg{stroke:var(--accent-1-on-ink)}
/* Над hero-то — тъмно стъкло: силното размиване е от основното правило (фонът
   под шапката се движи — цената е мерена в доклада на LG), тонът е токен,
   отблясъкът, бликът и фаската са приглушени — белият текст ≥4.5:1. */
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar::before{background-color:var(--glass-head-top);
  background-image:radial-gradient(300px 120px at var(--mx,22%) var(--my,0%),rgba(255,255,255,.1),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 58%);
  box-shadow:var(--glass-bevel-dark),0 18px 40px -24px rgba(0,0,0,.5)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar::after{background:radial-gradient(160px 80px at var(--mx,22%) var(--my,0%),rgba(255,255,255,.7),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 26%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.32))}
/* Превъртяно, но още над hero-то: текстът му минава под шапката — по-плътен
   тъмен тон (`head-stuck`, `site-nav.js`). */
html.glass.head-stuck:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar::before{background-color:var(--glass-head-stuck)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .logo img{opacity:0;visibility:hidden}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .logo .logo-on-dark{display:block;opacity:1;visibility:visible}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-link,html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-group,html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-label{color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-link:hover,html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-link[aria-current="page"],html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-group:hover,html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-group[aria-expanded="true"],html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .has-current>.menu-group{background:rgba(255,255,255,.12);color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .menu-item+.menu-item{border-top-color:rgba(255,255,255,.14)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .chip{border-color:rgba(255,255,255,.26);background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--glass-veil);color:var(--on-ink)}
/* Бликът под белия текст — слаб, както на чиповете в hero (≥4.5:1). */
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .chip::after{background:radial-gradient(90px circle at var(--mx,26%) var(--my,0%),rgba(255,255,255,.12),transparent 70%)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .chip:hover{border-color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .chip.is-current{border-color:var(--accent-2-on-ink);background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14)),var(--glass-veil)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .burger{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.06)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .burger svg{stroke:var(--on-ink)}
/* Белият обръч — над тъмното; в светлия панел „Услуги" — пак `--ink`. */
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar :focus-visible{outline-color:var(--on-ink)}
html.glass:not(.head-solid):not(.nav-open):has(#content>.hero-aurora:first-child) .bar .mega :focus-visible{outline-color:var(--ink)}
html.glass:not(.js):not(.head-solid):has(#content>.hero-aurora:first-child) :is(header,.topbar){display:flow-root;background:var(--ink)}
/* Панелите на менюто без скрипт са в потока — плътно светли, не полупрозрачни над тъмното. */
html.glass:not(.js):not(.head-solid):has(#content>.hero-aurora:first-child) .mega{background:var(--surface)}
html.glass:not(.js):not(.head-solid):has(#content>.hero-aurora:first-child) #content>.hero-aurora:first-child .aurora{-webkit-mask:linear-gradient(transparent,#000 140px);mask:linear-gradient(transparent,#000 140px)}

/* Хапчета. Основното остава плътно синьо (бялото върху полупрозрачно синьо
   над бяла секция пада под 4.5:1): стъкленото е в ръба, бликa и сянката.
   Призрачното и чиповете са истинско стъкло. Бликът следва курсора през
   `--mx/--my` (`site-glass.js`); без скрипт стои горе вляво. */
html.glass :is(.pill,.chip,.hero-chip){position:relative;isolation:isolate;overflow:hidden}
html.glass .pill{border-radius:99px;background:linear-gradient(180deg,var(--accent-2),var(--accent-2-hover));
  box-shadow:var(--glass-highlight-dark),0 10px 24px -14px var(--accent-2)}
html.glass .pill.sm{border-radius:99px}
html.glass :is(.pill,.chip,.hero-chip,.hero-pause)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--mx,26%) var(--my,0%),rgba(255,255,255,.3),transparent 70%);opacity:.6;transition:opacity .25s}
html.glass :is(.pill,.chip,.hero-chip,.hero-pause):hover::after{opacity:1}
/* На плътното синьо бликът е по-слаб: бялото остава ≥4.5:1 и под него. */
html.glass .pill:not(.ghost)::after{background:radial-gradient(90px circle at var(--mx,26%) var(--my,0%),rgba(255,255,255,.12),transparent 70%)}
/* Посочване: `html.glass .pill` (0,2,1) бие `.pill:hover` (0,2,0) — без това
   хапчето не тъмнее, бликът светва и бялото пада до 4.35:1 (преглед на
   402cac3..2c25cc7). Белите хапчета (карта на услугата, CTA) — светли. */
html.glass .pill:not(.ghost):hover{background:linear-gradient(180deg,var(--accent-2-hover),color-mix(in srgb,var(--accent-2-hover) 84%,var(--ink)))}
html.glass .pill.ghost{background:var(--glass-bg);box-shadow:var(--glass-highlight),inset 0 0 0 1.5px var(--line),var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html.glass .pill.ghost:hover{box-shadow:var(--glass-highlight),inset 0 0 0 1.5px var(--accent-2),var(--glass-shadow)}
html.glass main .chip{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

/* Хапчетата на тъмно — hero, CTA, картата на услугата. */
/* БЕЗ `backdrop-filter` над движещия се фон на hero-то (преглед на
   402cac3..2c25cc7, Задача H2): размиването би се преизчислявало всеки кадър, а
   видимата разлика е ~8/255. Вместо него — по-плътен тон и светлият ръб. */
html.glass .hero .pill.ghost,html.glass .hero-aurora .hero-chip{border-color:var(--glass-border-dark);background:linear-gradient(var(--glass-tint-strong),var(--glass-tint-strong)),var(--glass-veil);
  box-shadow:var(--glass-highlight-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
html.glass .hero .pill.ghost:hover,html.glass .hero-aurora a.hero-chip:hover{background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),var(--glass-veil);
  box-shadow:var(--glass-highlight-dark),inset 0 0 0 1px rgba(255,255,255,.4),0 0 24px -6px color-mix(in srgb,var(--accent-1) 60%,transparent)}
/* Бликът под белия текст на тъмно — по-слаб, както на основното хапче: при
   посочване с пълния блик чипът падаше до ~3.5:1 по пиксели (H2). */
html.glass .hero .pill.ghost::after,html.glass .hero-aurora .hero-chip::after{background:radial-gradient(90px circle at var(--mx,26%) var(--my,0%),rgba(255,255,255,.12),transparent 70%)}
html.glass .hero-aurora .hero-pause{border-color:var(--glass-border-dark);background:var(--glass-dark);box-shadow:var(--glass-highlight-dark);
  -webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden;isolation:isolate}
html.glass :is(.svc-card,.cta-actions) .pill{background:linear-gradient(180deg,var(--on-ink),var(--surface));color:var(--ink);
  box-shadow:inset 0 1px 0 var(--on-ink),0 10px 24px -14px rgba(11,42,60,.6)}
html.glass :is(.svc-card,.cta-actions) .pill:not(.ghost):hover{background:var(--surface)}

/* Светлите секции получават меки цветни петна — да има какво да размие стъклото. */
html.glass main > section:not(.hero):not(.cta-sec):not(.marq-head){background-image:
  radial-gradient(36% 48% at 4% 10%,color-mix(in srgb,var(--accent-1) 9%,transparent),transparent 72%),
  radial-gradient(40% 52% at 98% 92%,color-mix(in srgb,var(--accent-2) 8%,transparent),transparent 72%)}

/* Карти: стъклен вид без размиване, леко повдигане при посочване. */
html.glass :is(.proj-card,.service-card,.quote,.testi-card,.proj-part,.faq-item,.nextprev a,.proj-facts > div){
  border-color:color-mix(in srgb,var(--line) 75%,transparent);
  background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(255,255,255,.8));
  box-shadow:inset 0 1px 0 var(--glass-border),var(--glass-shadow)}
html.glass :is(.quote,.testi-card){transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
html.glass .quote:hover,html.glass .testi-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 var(--glass-border),var(--shadow)}
html.glass :is(.proj-card,.service-card,.nextprev a):hover{box-shadow:inset 0 1px 0 var(--glass-border),var(--shadow)}
html.glass :is(.step,.svc-card){box-shadow:var(--glass-highlight-dark)}
html.glass .step{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
html.glass .step:hover{transform:translateY(-4px)}

/* Lightbox: стрелките и затварянето са тъмно стъкло над снимката. */
html.glass .lb .x,html.glass .lb .nav{border-color:var(--glass-border-dark);background:var(--glass-dark);box-shadow:var(--glass-highlight-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
html.glass .lb .x:hover,html.glass .lb .nav:hover{background:rgba(30,72,98,.8)}

/* Футърът: колоните на стъкло върху неподвижен градиент (без движение — то би
   искало бутон за пауза, WCAG 2.2.2). */
html.glass footer.site{background:
  radial-gradient(50% 80% at 0% 0%,color-mix(in srgb,var(--accent-1) 16%,transparent),transparent 70%),
  radial-gradient(50% 90% at 100% 100%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 70%),var(--ink)}
html.glass :is(.foot-brand,.foot-col){padding:clamp(18px,2vw,26px);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:var(--glass-highlight-dark)}
html.glass .foot{gap:clamp(12px,1.6vw,20px)}

/* Резерви: без поддръжка и при намалена прозрачност — плътни панели. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.glass,html.glass.lg-refract{--glass-head-blur:none;--glass-panel-blur:none;--glass-sheet-blur:none;--glass-head:var(--glass-bg-solid);--glass-head-top:var(--glass-dark-solid);--glass-head-stuck:var(--glass-dark-solid);--glass-panel:var(--glass-bg-solid);--glass-sheet:var(--surface);--glass-topbar-top:var(--ink);--glass-card:var(--glass-bg-solid);--glass-card-blur:none;
    --glass-blur:none;--glass-bg:var(--glass-bg-solid);--glass-bg-strong:var(--glass-bg-solid);--glass-dark:var(--glass-dark-solid);--glass-tint:var(--glass-tint-solid);--glass-tint-strong:var(--glass-tint-solid)}
}
@media(prefers-reduced-transparency:reduce){
  html.glass,html.glass.lg-refract{--glass-head-blur:none;--glass-panel-blur:none;--glass-sheet-blur:none;--glass-head:var(--glass-bg-solid);--glass-head-top:var(--glass-dark-solid);--glass-head-stuck:var(--glass-dark-solid);--glass-panel:var(--glass-bg-solid);--glass-sheet:var(--surface);--glass-topbar-top:var(--ink);--glass-card:var(--glass-bg-solid);--glass-card-blur:none;
    --glass-blur:none;--glass-bg:var(--glass-bg-solid);--glass-bg-strong:var(--glass-bg-solid);--glass-dark:var(--glass-dark-solid);--glass-tint:var(--glass-tint-solid);--glass-tint-strong:var(--glass-tint-solid)}
  html.glass .bar .chip,html.glass .burger{background:var(--bg)}
  /* Задача H2: прозрачните стъклени форми в hero изчезват — остава течността. */
  .hero-aurora.has-gl .hero-shapes{display:none}
}

/* ---------- страница на услуга (Задача S-код) ----------
   Прототипът `prototypes/d/service.html`. ВСЕКИ селектор тук е под нов клас
   (`.hero-svc`, `.svh-*`, `.svs-*`, `.feat*`, `.lt-*`, `.stack-*`, `.tech-*`,
   `.svp-*`, `[data-parallax]`) — сайтът още не ги рендира, тоест до стъпка 2
   нищо тук не пипа живия облик.

   Без JavaScript страницата е обикновен документ: картите на стъпките са
   номериран списък, съдържанието „В тази страница" е списък с връзки, а
   снимките стоят. Залепването на стъпките и паралаксът са САМО под класа на
   собствения модул (`.is-stacked` — `site-stack.js`, `.is-parallax` —
   `site-parallax.js`) и САМО в `@media(prefers-reduced-motion:no-preference)`.
   Движат се само transform и opacity. `SiteServicePrototypeTest` пази това. */

/* Hero: вариант на `.hero-aurora` — WebGL фонът, шапката над него и паузата
   идват оттам. Текстът е вляво, снимката (стъклена рамка) — вдясно; затова и
   прожекторът, който държи контраста под текста, е изместен наляво. */
.hero-aurora.hero-svc{text-align:left}
.hero-aurora.hero-svc .aurora::after{background:radial-gradient(64% 74% at 24% 52%,color-mix(in srgb,var(--ink) 90%,transparent) 44%,transparent 100%)}
.hero-aurora.hero-svc.has-gl .aurora::after{background:radial-gradient(70% 80% at 24% 52%,color-mix(in srgb,var(--ink) 92%,transparent) 46%,transparent 100%)}
.hero-aurora.hero-svc .s1{top:auto;bottom:-96px;left:max(-110px,calc(50% - 820px))}
.hero-aurora.hero-svc .s2{top:10%;right:max(-40px,calc(50% - 760px))}
.hero-aurora.hero-svc .s3{top:4%;right:auto;left:max(42%,calc(50% - 40px))}
.hero-svc .svh-grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);align-items:center;gap:clamp(32px,4.4vw,72px)}
/* Без снимка (няма свързан проект с корица и снимка на услугата) — само текстът. */
.hero-svc .svh-grid.is-text{grid-template-columns:minmax(0,1fr)}
.hero-svc .svh-grid.is-text .svh-copy{max-width:820px}
.hero-svc .svh-crumb{margin:0 0 18px;font-size:.92rem;font-weight:500}
.hero-svc .svh-crumb a{display:inline-flex;align-items:center;gap:10px;color:var(--accent-1-on-ink);text-decoration:none}
.hero-svc .svh-crumb a::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--accent)}
.hero-svc .svh-crumb a:hover{text-decoration:underline;text-underline-offset:4px}
.hero-svc .svh-title{max-width:14ch;font-size:clamp(2.6rem,5.8vw,4.9rem);font-weight:500;letter-spacing:-.045em;line-height:1}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero-svc .svh-title{padding-bottom:.06em;background:linear-gradient(100deg,var(--on-ink) 30%,var(--accent-2-on-ink) 72%,var(--accent-1-on-ink));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero-svc .lede{max-width:58ch;margin-top:clamp(18px,2vw,26px);color:var(--on-ink-muted)}
.hero-svc .hero-cta{justify-content:flex-start;margin-top:clamp(26px,3vw,34px)}
.hero-svc .svh-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:clamp(26px,3vw,36px) 0 0;padding:0;list-style:none;color:var(--on-ink);font-size:.93rem;font-weight:500}
.hero-svc .svh-points li{display:inline-flex;align-items:center;gap:8px}
.hero-svc .svh-points svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--accent-1-on-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Снимката: „екран" под дебело стъкло — светъл ръб, лента с три точки и
   дълбока сянка. Без `backdrop-filter`: под нея фонът се движи всеки кадър. */
.hero-svc .svh-media{position:relative;margin:0;padding:clamp(28px,3vw,44px) clamp(10px,2vw,30px) clamp(48px,5vw,72px) clamp(0px,3vw,44px)}
.hero-svc .svh-frame{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:22px;
  background:color-mix(in srgb,var(--ink) 70%,transparent);box-shadow:0 50px 100px -46px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.035)}
html.glass .hero-svc .svh-frame{box-shadow:var(--glass-highlight-dark),0 50px 100px -46px rgba(0,0,0,.8),0 0 0 8px rgba(255,255,255,.035)}
.hero-svc .svh-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06)}
.hero-svc .svh-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26)}
.hero-svc .svh-frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 0}
/* Плаващите карти — тъмно стъкло (плътен тон, без размиване), над рамката:
   лежат и върху светлата снимка, затова тонът е 92% `--ink` (контрастът — в доклада). */
.hero-svc :is(.svh-card,.svh-stat){position:absolute;z-index:2;border:1px solid rgba(255,255,255,.2);border-radius:18px;
  background:color-mix(in srgb,var(--ink) 94%,transparent);box-shadow:0 28px 60px -26px rgba(0,0,0,.7);color:var(--on-ink)}
html.glass .hero-svc :is(.svh-card,.svh-stat){border-color:var(--glass-border-dark);
  background:linear-gradient(var(--glass-tint),var(--glass-tint)),color-mix(in srgb,var(--ink) 92%,transparent);
  box-shadow:var(--glass-highlight-dark),0 28px 60px -26px rgba(0,0,0,.7)}
.hero-svc .svh-card{left:0;bottom:0;display:flex;align-items:flex-start;gap:14px;width:min(340px,82%);padding:16px 18px}
.hero-svc .svh-card b{display:block;font-size:.98rem;font-weight:600;line-height:1.3}
.hero-svc .svh-card b + span{display:block;margin-top:4px;color:color-mix(in srgb,var(--on-ink-muted) 70%,var(--on-ink));font-size:.86rem;line-height:1.45}
.hero-svc .svh-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 72%,var(--ink)),var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.hero-svc .svh-ico svg{width:20px;height:20px;fill:none;stroke:var(--on-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hero-svc .svh-stat{top:0;right:0;display:grid;gap:2px;max-width:210px;padding:14px 18px;font-size:.82rem;line-height:1.4}
.hero-svc .svh-stat b{font-size:1.9rem;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.hero-svc .svh-stat b span{color:var(--accent-1-on-ink)}
.hero-svc .svh-stat > span{color:var(--on-ink)}
/* Паузата — над стъкления панел със статистиките, който се качва върху hero-то. */
.hero-aurora.hero-svc .hero-pause{bottom:calc(clamp(40px,5vw,72px) + 18px)}
@media(max-width:980px){
  .hero-svc .svh-grid{grid-template-columns:1fr;gap:clamp(20px,4vw,40px)}
  .hero-svc .svh-media{max-width:620px;padding-inline:0 clamp(10px,3vw,24px)}
  .hero-aurora.hero-svc .aurora::after,.hero-aurora.hero-svc.has-gl .aurora::after{background:radial-gradient(110% 52% at 40% 30%,color-mix(in srgb,var(--ink) 92%,transparent) 46%,transparent 100%)}
}
@media(max-width:520px){
  .hero-svc .svh-media{padding:22px 0 56px}
  .hero-svc .svh-card{width:88%}
  .hero-svc .svh-stat{right:-4px;max-width:168px;padding:10px 14px}
  .hero-svc .svh-stat b{font-size:1.5rem}
  .hero-svc .svh-points{gap:8px 18px;font-size:.88rem}
}

/* Статистиките — стъклен панел, който се качва върху долния ръб на hero-то. */
main > section.svs{padding-block:0 clamp(48px,6vw,88px)}
.svs-panel{position:relative;z-index:2;margin-top:calc(-1 * clamp(40px,5vw,72px));padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,44px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:0 30px 70px -40px rgba(11,42,60,.5)}
html.glass .svs-panel{border-color:color-mix(in srgb,var(--line) 70%,transparent);background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(255,255,255,.9));
  box-shadow:inset 0 1px 0 var(--glass-border),0 30px 70px -40px rgba(11,42,60,.55)}
.svs-panel .stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}

/* Снимката в `text_image` (паралаксът е по-долу, под `.is-parallax`). */
.text-image-media:has(> img[data-parallax]){position:relative}
html.glass .text-image-media:has(> img[data-parallax]){border-color:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--glass-shadow)}

/* Предимства: стъклени карти, разкриват се по редове (`.rev` + d1/d2). */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin:0;padding:0;list-style:none}
.feat{position:relative;overflow:hidden;isolation:isolate;padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.feat::before{content:"";position:absolute;top:-30%;right:-20%;z-index:-1;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent-1) 12%,transparent),transparent);opacity:.6;transition:opacity .35s}
.feat:hover::before{opacity:1}
html.glass .feat{border-color:color-mix(in srgb,var(--line) 75%,transparent);background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(255,255,255,.82));
  box-shadow:inset 0 1px 0 var(--glass-border),var(--glass-shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
html.glass .feat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent-2) 35%,transparent);box-shadow:inset 0 1px 0 var(--glass-border),var(--shadow)}
.feat-icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:24px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 72%,var(--ink)),var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -10px 18px -10px rgba(11,42,60,.35),0 14px 28px -14px var(--accent-2)}
.feat-icon svg{width:27px;height:27px;fill:none;stroke:var(--on-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.14rem}
.feat p{margin-top:8px;color:var(--muted);font-size:.97rem;line-height:1.6}
@media(max-width:980px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.feat-grid{grid-template-columns:1fr}}

/* Дълъг текст: колона за четене (~68ch) и съдържание „В тази страница"
   отстрани, залепено под шапката. Залепването тук е подредба, не движение —
   то работи и без скрипт, и при намалено движение. `site-toc.js` (`.is-spy`)
   подчертава текущия раздел и рисува лентата на напредъка. */
.lt{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:clamp(32px,5.4vw,96px);align-items:start}
.lt-toc{position:sticky;top:108px;padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
html.glass .lt-toc{border-color:color-mix(in srgb,var(--line) 75%,transparent);background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(255,255,255,.86));
  box-shadow:inset 0 1px 0 var(--glass-border),var(--glass-shadow)}
.lt-toc-title{margin:0 0 12px 4px;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.lt-track{position:relative;padding-inline-start:12px}
.lt-track::before{content:"";position:absolute;top:6px;bottom:6px;left:0;width:2px;border-radius:2px;background:var(--line)}
.lt-track ol{display:grid;gap:2px;margin:0;padding:0;list-style:none;counter-reset:lt}
.lt-toc a{display:flex;gap:10px;padding:8px 10px;border-radius:10px;color:var(--muted);font-size:.92rem;line-height:1.4;text-decoration:none;transition:color .2s,background .2s}
.lt-toc a::before{flex:none;padding-top:.12em;counter-increment:lt;content:counter(lt,decimal-leading-zero);font-size:.78rem;font-variant-numeric:tabular-nums}
.lt-toc a:hover{background:var(--surface);color:var(--text)}
.lt-toc a[aria-current="location"]{background:var(--pill-bg);color:var(--accent-text);font-weight:600}
.lt-toc.is-spy .lt-rail{position:absolute;top:6px;bottom:6px;left:0;display:none;width:2px;border-radius:2px;background:var(--accent);transform-origin:50% 0}
.lt-body{max-width:68ch}
.lt-part{scroll-margin-top:112px}
.lt-part + .lt-part{margin-top:clamp(44px,5vw,72px);padding-top:clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.lt-num{display:block;margin-bottom:12px;color:var(--accent-text);font-size:.84rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.lt-part h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.lt-part p{margin-top:1em;color:color-mix(in srgb,var(--text) 84%,var(--muted));font-size:1.04rem;line-height:1.8}
.lt-part h2 + p{color:var(--text);font-size:1.12rem}
.lt-part ul{display:grid;gap:10px;margin:1.3em 0 0;padding:0;list-style:none}
.lt-part li{position:relative;padding:13px 18px 13px 50px;border:1px solid var(--line);border-radius:14px;background:var(--bg);line-height:1.6}
html.glass .lt-part li{border-color:color-mix(in srgb,var(--line) 75%,transparent);background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(255,255,255,.84));box-shadow:inset 0 1px 0 var(--glass-border)}
.lt-part li::before{content:"";position:absolute;top:16px;left:18px;width:20px;height:20px;border-radius:50%;background:var(--accent)}
.lt-part li::after{content:"";position:absolute;top:21px;left:25px;width:5px;height:9px;border:solid var(--on-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lt-part li strong{color:var(--ink);font-weight:600}
@media(max-width:980px){
  .lt{grid-template-columns:1fr}
  .lt-toc{position:static;max-width:68ch}
}

/* Стъпки при скрол: без скрипт — номериран списък от тъмни карти. С
   `.is-stacked` (по-долу) картите се залепват една върху друга под шапката, а
   покритите се смаляват и притъмняват (`--d` — колко карти лежат отгоре). */
.stack{--stack-top:112px;--stack-step:16px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,88px);align-items:start}
.stack-head .sec-head{margin-bottom:0}
.stack-list{display:grid;gap:clamp(14px,1.6vw,20px);margin:0;padding:0;list-style:none}
.stack-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:clamp(220px,22vw,272px);padding:clamp(24px,2.8vw,36px);border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink);
  box-shadow:0 30px 60px -36px rgba(11,42,60,.7);transform-origin:50% 0}
html.glass .stack-card{box-shadow:var(--glass-highlight-dark),0 30px 60px -36px rgba(11,42,60,.7)}
.stack-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 80% at 100% 0%,rgba(20,184,166,.30),transparent 62%),radial-gradient(90% 80% at 0% 100%,rgba(30,111,217,.30),transparent 62%)}
.stack-card:nth-child(even)::before{background:radial-gradient(90% 80% at 0% 0%,rgba(30,111,217,.32),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(20,184,166,.26),transparent 62%)}
.stack-num{color:var(--accent-1-on-ink);font-size:clamp(2.6rem,4.2vw,3.8rem);font-weight:500;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .stack-num{background:linear-gradient(100deg,var(--accent-1-on-ink),var(--accent-2-on-ink));-webkit-background-clip:text;background-clip:text;color:transparent}
}
.stack-card h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:500;letter-spacing:-.02em}
.stack-card p{max-width:46ch;margin-top:8px;color:var(--on-ink-muted)}
@media(max-width:980px){.stack{grid-template-columns:1fr}}
@media(max-width:620px){.stack{--stack-top:80px;--stack-step:10px}}

/* Технологии: стъклени чипове без връзки. */
.tech-sec .sec-head{margin-inline:auto;text-align:center}
.tech-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:920px;margin:0 auto;padding:0;list-style:none}
.tech-chip{display:inline-flex;align-items:center;gap:11px;min-height:50px;padding:0 22px 0 18px;border:1px solid var(--line);border-radius:99px;background:var(--bg);font-weight:500}
.tech-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-1) 14%,transparent)}
html.glass .tech-chip{border-color:color-mix(in srgb,var(--line) 75%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.82));
  box-shadow:inset 0 1px 0 var(--glass-border),var(--glass-shadow)}

/* Свързаните проекти: при 2, 5, 8… карти първата е двойно широка, при 1, 4,
   7… — на цял ред; така последният ред винаги е пълен. Снимката на водещата
   карта запълва височината на реда. */
.svp-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,3.4vw,48px)}
.svp-head .sec-head{margin-bottom:0}
.svp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.svp-grid .proj-shot{aspect-ratio:3/2}
.svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child{grid-column:span 2}
.svp-grid:has(> :nth-child(3n+1):last-child) > .proj-card:first-child{grid-column:1/-1}
.svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child .proj-shot{flex:1;min-height:260px;aspect-ratio:auto}
.svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child .proj-shot img{position:absolute;inset:0}
.svp-grid > .proj-card:first-child h3{font-size:clamp(1.2rem,1.8vw,1.45rem)}
/* Карта на цял ред (1, 4, 7… проекта): ниска снимка — картата се побира в
   екрана под шапката (иначе фокусът при Shift+Tab застава под нея). */
.svp-grid:has(> :nth-child(3n+1):last-child) > .proj-card:first-child .proj-shot{aspect-ratio:21/9}
/* Обръчът на фокуса върху светлите карти на `--surface` с петната:
   `--accent-2` пада до ~2.9:1 — по-тъмното синьо е ≥3:1 (пробата `focusRings`). */
.svp .proj-card:focus-visible{outline-color:var(--accent-text)}
@media(max-width:980px){
  .svp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svp-grid > .proj-card:first-child,.svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child{grid-column:1/-1}
  .svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child .proj-shot{flex:none;aspect-ratio:16/8}
}
@media(max-width:620px){
  .svp-grid{grid-template-columns:1fr}
  .svp-grid:has(> :nth-child(3n+2):last-child) > .proj-card:first-child .proj-shot{aspect-ratio:3/2}
}

/* Залепване, наслагване, паралакс и лентата на напредъка — само със скрипт и
   без намалено движение. */
@media(prefers-reduced-motion:no-preference){
  .stack-list.is-stacked{padding-bottom:14vh}
  .stack-list.is-stacked .stack-card{position:sticky;top:calc(var(--stack-top) + var(--i,0) * var(--stack-step));
    transform:scale(calc(1 - var(--d,0) * .045));will-change:transform}
  .stack-list.is-stacked .stack-card::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
    background:var(--ink);opacity:calc(var(--d,0) * .26)}
  @media(min-width:981px){
    .stack.is-stacked .stack-head{position:sticky;top:var(--stack-top)}
  }
  [data-parallax].is-parallax{transform:translate3d(0,var(--par,0px),0);will-change:transform}
  .text-image-media > img[data-parallax].is-parallax{transform:translate3d(0,var(--par,0px),0) scale(1.14)}
  .lt-toc.is-spy .lt-rail{display:block;transform:scaleY(var(--lt-p,0))}
}

/* ---------- движение ----------
   `.rev` е ВИДИМ по подразбиране; невидимото начално състояние е само под
   `html.js` (етап B2b). Броячите показват истинските числа без скрипт. */
.rev{opacity:1;transform:none}
html.js .rev{opacity:0;transform:translateY(20px)}
/* Задача 4c: `html.js` идва от `<head>`, преди модулите. Ако `site-reveal.js`
   не тръгне (не е зареден, грешка), секциите се показват след 3 s; модулът
   слага `rev-ready` и резервата спира — разкриването е негово. */
html.js:not(.rev-ready) .rev{animation:rev-failsafe .01s 3s forwards}
@keyframes rev-failsafe{to{opacity:1;transform:none}}
html.js .rev.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .rev.d1.in{transition-delay:.08s}
html.js .rev.d2.in{transition-delay:.16s}
html.js .rev.d3.in{transition-delay:.24s}
/* Решение на собственика (етап D, Задача 14): абзацът под заглавието в hero-то е
   LCP на началната — видим от първия кадър, само плъзгането остава. От 0 Chromium
   отчиташе LCP чак в края на прехода (~0.8 s след изрисуването). */
html.js .hero .lede.rev{opacity:1}
.top{position:fixed;right:22px;bottom:22px;z-index:40;display:none;place-items:center;width:48px;height:48px;
  border:1px solid var(--line);border-radius:50%;background:var(--bg);box-shadow:var(--shadow);cursor:pointer}
html.js .top{display:grid;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
html.js .top.on{opacity:1;visibility:visible}
.top .arw{width:18px;height:18px;stroke:var(--text);stroke-width:2;fill:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Същите селектори като в „движение“ — `html.js .rev` сам губи от
     `html.js .rev.in` по специфичност и картите пак се плъзгат. */
  html.js .rev,html.js .rev.in,html.js .rev.d1.in,html.js .rev.d2.in,html.js .rev.d3.in{opacity:1;transform:none;transition:none}
  .seal svg,.agent .cursor,.track{animation:none}
  .marq{overflow-x:auto}
  .marq-dup{display:none}
  .pill:hover,.service-card:hover{transform:none}
  html.js .mega,html.js .top,html.js .card,html.js .card .face,html.js .card .vert{transition:none}
  .pill,.chip,.menu-group .caret,.svc-tab,.service-card,.faq-item,.track img,.foot a,.agent-line{transition:none}
  .proj-card:hover,.proj-card:hover .proj-shot img{transform:none}
  .proj-card,.proj-shot img,.proj-filters a,.pager-page,.pager-step{transition:none}
  .nextprev a:hover,.gallery-item a:hover img{transform:none}
  .nextprev a,.gallery-item img{transition:none}
  .lb .x,.lb .nav{transition:none}
  /* Задача 4b: картата за бисквитки се появява без плъзгане. */
  .cookie-bar{animation:none}
  /* Задача H: фонът стои, фразите се сменят без движение (на по-дълъг
     интервал — `site-hero.js`). Същите селектори като горе, след тях. */
  .hero-aurora.is-live .a1,.hero-aurora.is-live .a2,.hero-aurora.is-live .a3{animation:none}
  .hero-aurora.is-live .hero-phrase,.hero-aurora.is-live .hero-phrase.is-leaving,.hero-aurora a.hero-chip,.hero-aurora .hero-pause{transition:none}
  /* Задача H2: канвасът рисува един кадър (`site-hero-bg.js`), формите стоят. */
  .hero-aurora.is-live .hero-shape i,.hero-aurora.is-live .s2 i,.hero-aurora.is-live .s3 i{animation:none}
  .hero-aurora .hero-gl{transition:none}
  /* Шапката над hero: смяната е мигновена. */
  html.glass:has(#content>.hero-aurora:first-child) .logo img{transition:none}
  html.glass:has(#content>.hero-aurora:first-child) .bar::before{transition:none}
  html.glass:has(#content>.hero-aurora:first-child) .bar :is(.menu-link,.menu-group,.chip),html.glass:has(#content>.hero-aurora:first-child) .burger,html.glass:has(#content>.hero-aurora:first-child) .topbar{transition:none}
  /* Задача G: без повдигане на стъклените карти; бликът не следва курсора
     (`site-glass.js`) и не мига. */
  html.glass .quote:hover,html.glass .testi-card:hover,html.glass .step:hover{transform:none}
  html.glass :is(.quote,.testi-card),html.glass .step,html.glass :is(.pill,.chip,.hero-chip,.hero-pause)::after{transition:none}
  /* Задача CIN: задържането и долитането ги няма (виж блока no-preference);
     картите не се повдигат и снимката не се увеличава при посочване. */
  .hero-cinema .cin-link,.hero-cinema .cin-go,.hero-cinema .cin-media img{transition:none}
  .hero-cinema .cin-link:hover,.hero-cinema .cin-link:hover .cin-go{transform:none}
  .hero-cinema .cin-link:hover .cin-media img{scale:none}
  /* Задача S-код: предимствата не се повдигат; без преходи. Стекът и
     паралаксът са само в no-preference — тук няма какво да се спира. */
  .feat::before,.lt-toc a{transition:none}
  html.glass .feat{transition:none}
  html.glass .feat:hover{transform:none}
}