/* K838 (02.11.2026): the site's styles, formerly one inline <style> in template.html. denmar.bg runs
   under `style-src 'self'`, so no style may be inline - build.mjs stops the build on <style> or style="".
   Served as /assets/site.<hash>.css; url() is relative to THAT file, hence ../fonts/. */
/* ---------- Шрифт: локален Inter variable ---------- */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-cyrillic.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ====================================================================
   ТОКЕНИ — гама ПЕРЛА (design/THEMES.md, гама 4; дефиницията е в
   design/mockups/02-aurora/themes.html, блок [data-theme="pearl"]).
   Извън :root нито едно правило не носи собствен hex/rgba — смяна на
   гамата е смяна на този блок и нищо друго.
   ==================================================================== */
:root{
  /* --- основа: почти бяло --- */
  --bg:#F6F8F7;              --bg-rgb:246,248,247;
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;
  --line:#E2EAE7;
  --fg:#0F1F1D;              --fg-rgb:15,31,29;
  --muted:#41544F;

  /* --- бранд: тюркоазът е марката --- */
  --turq:#2fc3a1;            --turq-rgb:47,195,161;
  --turq-deep:#148f77;       --turq-deep-rgb:20,143,119;
  --turq-ink:#0F766E;        --turq-ink-rgb:15,118,110;
  /* --accent = декорацията; --accent-text = това, което носи текст.
     На светла основа двете съвпадат в #0F766E: #2fc3a1 върху хартия не
     стига 4.5:1 и затова остава само за декорация (аврора, петна). */
  --accent:#0F766E;          --accent-rgb:15,118,110;
  --accent-text:#0F766E;

  /* --- аврора: акварел, не дим ---
     Пигментите са СВЕТЛИ (тъмен пигмент на хартия сваля контраста на текста),
     а --aur-op вдига непрозрачността над 1, иначе петната изчезват в бялото. */
  --aur-a-rgb:47,195,161;
  --aur-b-rgb:109,196,232;
  --aur-c-rgb:47,195,161;
  --aur-c-core:#FFFFFF;
  --aur-op:1.55;
  --grain:rgba(15,31,29,.020);
  --vig-side:.82; --vig-top:.26; --vig-bot:.72;

  /* --- стъкло: на светла основа е бяло с ВИСОКА непрозрачност плюс ясен ръб,
         иначе панелът не се чете като панел --- */
  --glass:rgba(255,255,255,.74);
  --glass-strong:rgba(255,255,255,.88);
  --glass-edge-a:.22;
  --glass-edge-hi-a:.42;
  --glass-edge:rgba(var(--accent-rgb),var(--glass-edge-a));
  --glass-edge-hi:rgba(var(--accent-rgb),var(--glass-edge-hi-a));
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.95);
  --glass-face:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.80) 36%,rgba(255,255,255,.74) 100%);
  --glass-shadow:0 16px 40px rgba(15,31,29,.10),0 2px 6px rgba(15,31,29,.05);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,1) 0,rgba(255,255,255,0) 1.5px),
             linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 30%);
  --card-shadow-hover:0 26px 54px rgba(15,31,29,.14),0 0 0 1px rgba(15,118,110,.10);
  --hover-wash:rgba(15,118,110,.08);
  --kfn-bg:rgba(255,255,255,.78);
  --header-bg:rgba(246,248,247,.975);
  --header-line:rgba(203,218,213,.95);
  /* падащото езиково меню: на хартия сянката е лека, иначе менюто изглежда залепено */
  --menu-shadow:0 18px 44px rgba(15,31,29,.16);

  /* --- бутони: обемът е в четирите слоя по-долу ---
     --btn-inset = вътрешният горен highlight, --btn-shadow = хвърлената сянка,
     --btn-glow = сиянието. На светла основа glow-ът НЕ работи и е нула;
     обемът идва от highlight-а и от двете сенки. */
  --btn-fg:#FFFFFF;
  --btn-bg:linear-gradient(168deg,#107F76 0%,#0F766E 46%,#0A574F 100%);
  --btn-inset:inset 0 1px 0 rgba(255,255,255,.40);
  --btn-ring:0 0 0 1px rgba(8,58,53,.32);
  --btn-shadow:0 10px 22px rgba(15,31,29,.26),0 2px 4px rgba(15,31,29,.16);
  --btn-glow:0 0 0 rgba(255,255,255,0);
  --btn-ring-h:0 0 0 1px rgba(8,58,53,.44);
  --btn-shadow-h:0 16px 30px rgba(15,31,29,.30),0 3px 6px rgba(15,31,29,.18);
  --btn-glow-h:0 0 0 rgba(255,255,255,0);
  --btn-edge:linear-gradient(160deg,rgba(255,255,255,.7),rgba(10,87,79,.3));
  --btn-edge-op:.9;
  --ghost-glow-h:0 8px 18px rgba(15,31,29,.14);

  /* --- телефон (рецептата: design/PHONE.md) ---
     Корпусът е тъмен във всяка гама — на хартия тъмният силует се чете от само
     себе си, затова rim light-ът (елемент 4) е НУЛА, а силуета го носят
     двуслойната сянка (3) и по-плътният хайрлайн. */
  --dev-metal:linear-gradient(148deg,
    #7E8F8B 0%,#384744 14%,#9FB2AE 30%,#22302D 46%,
    #6E7F7B 60%,#1B2624 76%,#8CA09C 90%,#2B3835 100%);
  --dev-btn-l:linear-gradient(90deg,#22302D,#9FB2AE 55%,#4A5B57);
  --dev-btn-r:linear-gradient(270deg,#22302D,#9FB2AE 55%,#4A5B57);
  --dev-shadow:0 3px 8px rgba(15,31,29,.26),0 40px 80px -22px rgba(15,31,29,.48);
  --dev-hairline:0 0 0 1px rgba(15,31,29,.16);
  --dev-rim:rgba(15,118,110,0);
  --dev-rim-size:88px;
  --screen-bg:#0B1413;
  /* Елемент 8 (подложката) — на светла основа се ОБРЪЩА: „по-светло петно" върху
     хартия не съществува, затова отдолу лежи мека сянка, а цветните слоеве само
     подписват аврората. Виж design/PHONE.md, 8. */
  --phone-glow:
    radial-gradient(circle at 50% 46%,rgba(15,31,29,.20) 0%,rgba(15,31,29,.09) 38%,rgba(246,248,247,0) 66%),
    radial-gradient(circle at 50% 45%,rgba(47,195,161,.34) 0%,rgba(47,195,161,.14) 42%,rgba(246,248,247,0) 68%),
    radial-gradient(circle at 50% 52%,rgba(109,196,232,.20) 0%,rgba(246,248,247,0) 62%);

  /* --- дребното --- */
  --h1-grad:linear-gradient(172deg,#0B211E 0%,#10312C 52%,#0D443D 100%);
  --logo-ring:0 0 0 1px rgba(15,118,110,.20),0 6px 16px rgba(15,31,29,.14);
  --dot-glow:0 0 0 rgba(255,255,255,0);
  --ico-bg:linear-gradient(160deg,rgba(15,118,110,.15),rgba(15,118,110,.05));
  --ico-ring:inset 0 0 0 1px rgba(15,118,110,.20);
  --qr-corner:rgba(15,118,110,.40);
  /* бисквитката за съгласие: контур, без фон — на светла гама тъмният тюркоаз;
     на тъмна гама тук би влязло #2fc3a1, файлът го поема през currentColor */
  --cookie-fg:#0F766E;
  --cookie-fg-h:#0c5f59;
  --spot-glow-a:.12;
  --badge-hover:drop-shadow(0 10px 22px rgba(15,31,29,.28));
  /* Стор бейджовете са тъмни във всяка гама — така са и истинските. */
  --badge-fill-1:#121E1C;   --badge-fill-2:#0A1413;
  --badge-edge-1:rgba(255,255,255,.22); --badge-edge-2:rgba(47,195,161,.16);
  --badge-fg:#E8F2F0;       --badge-fg-2:#8FA6A2;
  /* Чуждите марки в бейджовете (триъгълникът на Google Play, ябълката на Apple) НЕ взимат
     фирмен цвят — рисуват се със собствените си цветове направо в symbol-ите отдолу. */

  /* типографска скала */
  --fs-2xs:.6875rem;
  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-md:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-xl:1.4375rem;
  --fs-2xl:1.875rem;
  --fs-3xl:clamp(2.05rem,3.8vw,2.95rem);
  --fs-hero:clamp(2.7rem,6.6vw,5.1rem);

  /* ритъм */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:1.75rem; --sp-7:2.25rem; --sp-8:3rem; --sp-9:4.5rem;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  --shell:1120px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
/* glow-ът под телефона е нарочно по-широк от контейнера си (135%) — clip го спира да отваря
   хоризонтален скрол на тесен екран. clip, не hidden: не убива position:sticky. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;position:relative;  /* аврората е абсолютна и висока колкото целия документ */
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-md);
  line-height:1.6;
  font-feature-settings:'ss01' 1,'cv05' 1;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
::selection{background:rgba(var(--accent-rgb),.25)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,32px)}

/* ---------- Аврора: живият фон ----------
   Слоят е ВИСОК КОЛКОТО ДОКУМЕНТА (absolute, не fixed) — така всяка секция ляга върху
   различно място от светлината и надолу по страницата има ритъм, а не плоско черно. */
.aurora{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}
.aurora::after{ /* лека зърнистост, за да не банди градиентът */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(var(--grain) 1px,transparent 1px);
  background-size:3px 3px;
}
.blob{position:absolute;border-radius:50%;will-change:transform}

/* 1. топлото тюркоазено петно зад телефона — най-силното */
.blob-a{
  width:min(96vw,1080px);aspect-ratio:1;top:-13vh;right:-8vw;
  background:radial-gradient(circle at 50% 50%,rgb(var(--aur-a-rgb)) 0%,rgba(var(--aur-a-rgb),.58) 33%,rgba(var(--aur-a-rgb),0) 70%);
  opacity:calc(.30 * var(--aur-op));filter:blur(84px);animation:drift-a 38s var(--ease-out) infinite;
}
/* 2. по-дълбокото долу вляво — лежи под „Доверие" и продължава надолу */
.blob-b{
  width:min(92vw,1000px);aspect-ratio:1;top:49%;left:-24vw;
  background:radial-gradient(circle at 50% 50%,rgb(var(--aur-b-rgb)) 0%,rgba(var(--aur-b-rgb),.55) 38%,rgba(var(--aur-b-rgb),0) 72%);
  opacity:calc(.28 * var(--aur-op));filter:blur(96px);animation:drift-b 47s var(--ease-out) infinite;
}
/* 3. тясната източена ивица, минаваща диагонално през средата на страницата */
.blob-c{
  width:140%;height:clamp(150px,18vh,300px);left:-20%;top:29%;border-radius:50%;
  transform-origin:50% 50%;rotate:-14deg;
  background:radial-gradient(52% 46% at 50% 50%,var(--aur-c-core) 0%,rgb(var(--aur-c-rgb)) 24%,rgba(var(--aur-c-rgb),.44) 46%,rgba(var(--aur-c-rgb),0) 76%);
  opacity:calc(.28 * var(--aur-op));filter:blur(42px);animation:drift-c 53s var(--ease-out) infinite;
}
/* 4. тих ореол под панела „Сваляне", за да не изгасне краят на страницата */
.blob-d{
  width:min(80vw,860px);aspect-ratio:1;top:76%;right:-14vw;
  background:radial-gradient(circle at 50% 50%,rgb(var(--aur-a-rgb)) 0%,rgba(var(--aur-a-rgb),0) 70%);
  opacity:calc(.19 * var(--aur-op));filter:blur(92px);animation:drift-d 61s var(--ease-out) infinite;
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-5vw,4vh,0) scale(1.12)}
}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(7vw,-4vh,0) scale(.92)}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,0) scaleY(1)}
  50%{transform:translate3d(3vw,2vh,0) scaleY(1.22)}
}
@keyframes drift-d{
  0%,100%{transform:translate3d(0,0,0) scale(.96)}
  50%{transform:translate3d(-4vw,-3vh,0) scale(1.14)}
}
/* Основата си остава основа по ръбовете: винетката гризе страните, темето и дъното. */
.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(var(--bg-rgb),var(--vig-side)) 0,rgba(var(--bg-rgb),0) clamp(28px,13vw,260px)),
    linear-gradient(270deg,rgba(var(--bg-rgb),var(--vig-side)) 0,rgba(var(--bg-rgb),0) clamp(28px,13vw,260px)),
    linear-gradient(180deg,rgba(var(--bg-rgb),var(--vig-top)) 0,rgba(var(--bg-rgb),0) 130px),
    linear-gradient(0deg,rgba(var(--bg-rgb),var(--vig-bot)) 0,rgba(var(--bg-rgb),0) 340px);
}

/* ---------- Стъкло ---------- */
.glass{
  background:var(--glass-face);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-inset),var(--glass-shadow);
  border-radius:var(--r-lg);
  position:relative;
}
/* горният highlight — ръбът, по който се разбира, че е стъкло, а не сива кутия */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--glass-hi);
}
.glass > *{position:relative;z-index:1}
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  .glass,.site-header,.badge-frame{background:var(--surface)}
}

/* ---------- Хедър ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--header-line);
}
.header-row{display:flex;align-items:center;gap:var(--sp-5);height:70px}
/* Логото на Денмар не се свива: свиването чупи думата на два реда. Целият недостиг
   на място поема .nav — тя се пренарежда (виж партньорското лого по-долу). */
.logo{flex:0 0 auto;display:flex;align-items:center;gap:10px;font-weight:640;font-size:var(--fs-lg);letter-spacing:-.03em}
.logo img{width:30px;height:30px;border-radius:8px;box-shadow:var(--logo-ring)}
.nav{flex:1 1 auto;min-width:0;margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:var(--sp-2)}
.nav-link{
  padding:8px 12px;border-radius:var(--r-pill);color:var(--muted);
  font-size:var(--fs-sm);transition:color .25s var(--ease-out),background .25s var(--ease-out);
}
.nav-link:hover{color:var(--fg);background:var(--hover-wash)}
.lang{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs);
  letter-spacing:.06em;cursor:default;
  /* плътен фон: хедърът е полупрозрачен и каквото мине под него изсветлява чипа —
     мерено 2.78:1 на .lang, преди беше по-зле. Чипът носи контраста си сам. */
  background:var(--bg);
}
.lang svg{opacity:.75}
/* Знамената: същите SVG файлове като на уеб платформата на брокера, размер 22×15.
   Стоят като ДЕКОРАЦИЯ до кода/името на езика (alt="" + aria-hidden) — смисълът е в
   текста, затова знамето никога не остава само. Тънкият ръб отвън е заради белите ивици
   (нидерландското и руското знаме иначе се разтварят в светлия чип). */
.flag{
  flex:0 0 auto;display:block;width:22px;height:15px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
}

/* ---------- Бутони ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-pill);border:0;cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:-.005em;
  transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-out),background .3s var(--ease-out);
  position:relative;isolation:isolate;
}
/* Четирите слоя на обема. На тъмна основа тежи --btn-glow; на светла той е
   нула и работят --btn-inset (вътрешен горен highlight) и --btn-shadow. */
.btn-primary{
  color:var(--btn-fg);
  background:var(--btn-bg);
  box-shadow:var(--btn-inset),var(--btn-ring),var(--btn-shadow),var(--btn-glow);
}
.btn-primary::before{ /* тънък градиентен ръб */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:var(--btn-edge);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:var(--btn-edge-op);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--btn-inset),var(--btn-ring-h),var(--btn-shadow-h),var(--btn-glow-h);
}
.btn-lg{padding:17px 32px;font-size:var(--fs-md)}
.btn-sm{padding:10px 18px;font-size:var(--fs-xs)}
.btn-ghost{
  color:var(--accent-text);background:var(--glass);
  border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--glass-inset);
}
.btn-ghost:hover{
  border-color:var(--glass-edge-hi);transform:translateY(-2px);
  box-shadow:var(--glass-inset),var(--ghost-glow-h);
}
.link-quiet{
  display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-sm);
  padding:14px 4px;transition:color .25s var(--ease-out);
}
.link-quiet:hover{color:var(--fg)}
.link-quiet .arr{transition:transform .3s var(--ease-spring)}
.link-quiet:hover .arr{transform:translateX(4px)}

/* Надписът в героя — слязъл от лентата (18.09.2026).
   `aspect-ratio` е закован по истинските мерки на рисунката (15226×4042), за да
   не подскача редът, докато SVG-то се зарежда. Ширината е в `min()`, за да не
   надскочи колоната на телефон. */
.hero-wordmark{
  display:block;width:min(430px,78%);height:auto;
  aspect-ratio:15226 / 4042;
  /* ⚠️ Искането (19.09.2026) е ЦЕНТРИРАНЕ, не вдигане: разстоянието от долния
     ръб на лентата до върха на надписа = разстоянието от долния му ръб до върха
     на заглавието. Двете разстояния се мерят, не се гледат.

     Отстъпите тук вървят по ДВОЙКА — колкото се маха отгоре, толкова се слага
     отдолу. Причината е `align-items:center` на `.hero-grid`: смени ли се само
     единият, височината на колоната се мени, центрирането я мести наполовина
     обратно и заглавието тръгва с нея. Двойката оставя височината същата,
     тоест заглавието НЕ мърда, а надписът се плъзга нагоре в полето, което
     собственикът гледа.

     ⚠️ И ДВАТА отстъпа не се събират със заглавието — долният СЕ СЛИВА с
     `margin-top`-а на `h1` (--sp-4 = 16px), както си е по правилата за съседни
     блокове. Тоест разстоянието отдолу е max(този отстъп, 16), а не сборът:
     отстъп под 16px не се вижда изобщо. Първата сметка тук беше направена като
     със сбор и излезе 39px накриво — числата долу са след поправката.

     Мерено на живо на denmar.bg на 19.09, преди промяната (кутия = рисунка,
     виж по-долу защо това изобщо се провери):
       1440/1600/1920 → над 167.81, под 16  (разлика 151.81)
       1280           → над 165.86, под 16
       1100           → над 172.22, под 16

     ⚠️ „Ръбът" има ДВА отговора — кутията на елемента и видимата рисунка. Тук
     СЪВПАДАТ: SVG-то е изрязано по надписа и канвасът показва нула празно поле
     горе и долу. Това е проверено ПРЕДИ мерките, защото носи ли SVG-то празно
     поле, аритметиката излиза вярна около грешното число. */
  /* ⛔ ЕДНА колона (≤1024px): тук `align-items:center` не мести нищо и
     равенството става ПО ПОСТРОЕНИЕ, без нито едно число — отгоре стои горният
     отстъп на самия герой, отдолу слагаме същия. Двете излизат точно
     `--hero-pt` на всяка ширина и на всеки от осемте езика.
     Дотук (18.09–19.09) вместо това стоеше отрицателен отстъп, който при една
     колона се брои ЦЯЛ и вкарваше надписа ПОД лентата: мерено на живо, върхът
     му излизаше на 34–47px при долен ръб на лентата 65–71px, тоест между 18 и
     37px от него стояха скрити зад нея, от 641 до 1024px ширина. Полето между
     лентата и заглавието там е по-късо от самия надпис — затова заглавието
     трябва да слезе и никаква двойка отстъпи не може да го спаси. */
  margin:0 0 var(--hero-pt);
}
@media (max-width:640px){
  /* На телефон полето стига и заглавието не мърда — остава двойката.
     Мерено преди промяната на 360/390/430/640: над 18, под 16. */
  .hero-wordmark{ width:min(300px,82%); margin:-17px 0 17px }
}

/* ⚠️ ДВЕ колони (≥1025px) — тук и само тук равенството иска ЧИСЛА, и то по
   език. Причината е една: горното разстояние не е отстъп, а ОСТАТЪК от
   центрирането, тоест зависи от височината на цялата текстова колона. А тя се
   мени с езика — заглавието се пренася на различен брой редове. Мерено при
   една обща стойност: bg/en/ru/uk/it ±1px, а de/nl +21 и fr −42. Едно число за
   всички тук е невъзможно, не неточно.
   Правилата по език не са изключение във файла — `html[lang="nl"] .hero h1`
   вече кара по същия път. de и nl дават ЕДНИ И СЪЩИ мерки на всички ширини,
   затова вървят заедно.
   ⚠️ Числата описват ТАЗИ подредба. Пипне ли се височината на героя, шрифтът
   на заглавието или текстът му, се премерват наново.

   ⛔⛔ КАЛИБРИРАТ СЕ САМО СРЕЩУ ЖИВИЯ САЙТ. Не срещу `node build.mjs` — той НЕ
   дава същата страница. Мерено на 19.09.2026 на 1440px, двете наведнъж:
     текстовата колона   467.27 и на двете места — еднаква
     колоната с телефони 857.34 локално срещу 826.91 живо — 30.43px разлика
   Половината от тази разлика Е остатъкът от центрирането, тоест всяка стойност,
   калибрирана локално, излиза 15.2px накриво на живо. Виновникът е ЕДИН файл:
   `assets/android-dark/home.webp` е 900×2000 в локалния `dist` и се рендерира с
   височина 0, а живият е 900×1930 и е 450.33px. Първият деплой на тези правила
   (18.09 вечерта) мина точно в този капан: локално показваше +1px, а на живо
   излезе −14.19px.
   Начинът, по който са мерени тези числа: зарежда се ЖИВАТА страница, налага се
   пробна двойка през `<style>` и се мери. Връзката е права — при mt+=X и mb−=X
   височината на колоната не се мени, тъй че „отгоре" расте с X, а „отдолу" пада
   с X, и точната двойка излиза от ЕДНО измерване: X = (под − над) / 2. Значи
   нула деплои за калибриране и един за пускане.

   ⚠️ Сборът mt+mb е −56 във ВСЯКА двойка тук, нарочно: той е височината, която
   надписът отнема от колоната. Пази ли се същият, центрирането не мърда и
   ЗАГЛАВИЕТО ОСТАВА НА МЯСТОТО СИ — мени се само къде стои надписът вътре в
   полето. Нова двойка се смята като mb = −56 − mt, не се измисля. */
@media (min-width:1025px){
  /* Мерено живо 19.09: нужната стойност е −147.9 на 1150/1440/1920, −146.9 на
     1280 и −146.7 на 1200; взета е средата на този разсейв. */
  .hero-wordmark{ margin:-147.3px 0 91.3px }
  html[lang="de"] .hero-wordmark,
  html[lang="nl"] .hero-wordmark{ margin:-157.65px 0 101.65px }
  html[lang="fr"] .hero-wordmark{ margin:-127.7px 0 71.7px }
}
@media (min-width:1025px) and (max-width:1149px){
  /* ⛔ Тесният двуколонен прозорец е ПРИБЛИЖЕНИЕ и това е признато, не скрито.
     Телефоните отдясно са на таван 470px, текстовата колона е смачкана и
     заглавието СЕ ПРЕНАСЯ на нов ред някъде вътре в прозореца — а нов ред значи
     ~34px друга височина на колоната, тоест друг остатък от центрирането.
     Мерено живо на 19.09 по нужната стойност на mt в четирите ъгъла на пояса
     (1149 / 1100 / 1060 / 1025):
       bg, en, it   −147.9  −150.1  −153.1  −155.8   → разсейв 7.9px
       de, nl       −158.3  −160.0  −162.7  −165.0   → разсейв 6.7px
       fr           −128.9  −132.0  −135.7  −138.9   → разсейв 10.0px
       ru, uk       −147.9  −150.1  −153.1  −138.8   → СТЪПКА: на 1025
                    заглавието се пренася и стойността скача обратно
     Тоест при ru и uk това не е наклон, а стъпка, и никоя константа не я следва;
     мястото ѝ е различно за всеки език. Двойките долу взимат средата на всеки
     разсейв. ПРОВЕРЕНО живо със същите двойки, преди да бъдат пуснати:
       bg, en, it   −7.89  −3.46  +2.58  +7.86   → ±7.9
       de, nl       −6.81  −3.28  +2.06  +6.74   → ±6.8
       fr           −9.89  −3.86  +3.52  +9.94   → ±9.9
       ru, uk       +3.92  +8.34  +14.39  −14.33 → ±14.4
     ⚠️ ru/uk са по-лоши НАРОЧНО и цената е избрана съзнателно: тяхната стойност
     е среда през СТЪПКА, не през наклон. Със стойността на bg те щяха да са
     почти точни на 1149/1100/1060 и −26px на 1025; така най-лошото пада от 26
     на 14, но три ширини, които можеха да са близо до нулата, се разместват.
     Взето е по-малкото най-лошо число, защото поясът и без това е приета цена.
     Най-лошото число в целия сайт остава тук, в този пояс.
     Единственото ТОЧНО решение тук би било подредбата да мине на една колона
     още на 1149px вместо на 1024px — тогава важи построението отгоре и
     равенството е нула на всяка ширина и всеки език.
     ⛔ ПОПИТАНО И РЕШЕНО (19.09.2026): прагът ОСТАВА 1024. Между 1025 и 1149 са
     обикновените лаптопи и те не бива да гледат телефонния изглед заради
     разминаване в тесен пояс. Тоест поясът е ИЗВЕСТНА И ПРИЕТА цена, а не
     недоглеждане — не се „оправя" мълчаливо при следващото пипане. */
  .hero-wordmark{ margin:-151.85px 0 95.85px }
  html[lang="ru"] .hero-wordmark,
  html[lang="uk"] .hero-wordmark{ margin:-145.95px 0 89.95px }
  html[lang="de"] .hero-wordmark,
  html[lang="nl"] .hero-wordmark{ margin:-161.65px 0 105.65px }
  html[lang="fr"] .hero-wordmark{ margin:-133.9px 0 77.9px }
}

/* ---------- Eyebrow / заглавия на секции ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);font-weight:600;
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-text))}
.section{padding-block:var(--sp-9)}
.section + .section{padding-top:var(--sp-8)}
.section-head{max-width:620px;margin-bottom:var(--sp-6)}
.section-head h2{
  font-size:var(--fs-3xl);font-weight:660;letter-spacing:-.032em;line-height:1.12;margin-top:var(--sp-4);
}
.section-head p{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-3)}

/* ---------- Hero ---------- */
/* `--hero-pt` е СЪЩОТО число като горния отстъп — изнесено, защото надписът
   „Денмар" го ползва, за да отмери равно поле под себе си (виж .hero-wordmark). */
.hero{--hero-pt:clamp(34px,4.6vw,60px);padding-top:var(--hero-pt);padding-bottom:var(--sp-7);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{
  font-size:var(--fs-hero);font-weight:700;line-height:1.0;letter-spacing:-.045em;
  margin-top:var(--sp-4);color:var(--fg);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero h1{
    background-image:var(--h1-grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.hero-sub{color:var(--muted);font-size:var(--fs-lg);max-width:34ch;margin-top:var(--sp-5);line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.hero-meta{display:flex;align-items:center;gap:10px;margin-top:var(--sp-6);color:var(--muted);font-size:var(--fs-xs)}
.hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-text);box-shadow:var(--dot-glow)}
/* същият ред под бутоните за сваляне — там човекът решава, там трябва да види кой стои зад това */

/* телефон */
.phone-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)}
.phone-glow{
  position:absolute;top:4%;left:50%;translate:-50% 0;width:135%;aspect-ratio:1;pointer-events:none;
  /* петното зад телефона (PHONE.md §8): на тъмните гами е неутрално-светла подложка
     плюс тюркоаз; на светлите е наситено цветно петно — там „по-светло" не работи,
     затова силуетът се отделя с цвят и с по-тежка сянка. */
  background:var(--phone-glow);
  filter:blur(48px);z-index:0;
}
/* ---------- .device — телефонът като предмет (обща рецепта: design/PHONE.md) ----------
   Един компонент за всички места, където се показва телефон. Гамата го облича
   САМО през токените — геометрията и седемте елемента не се преписват.
   Аврора: телефонът стои върху най-силното петно светлина → rim light-ът е по-тих
   (фонът вече отделя силуета), а отблясъкът е по-жив. Повърхност няма →
   елемент 7 (отражението) отпада. На светлите гами rim light-ът е нула и
   силуета го носят двуслойната сянка и по-плътният хайрлайн. */
.device{
  --dev-w:286px;          /* ширина на корпуса */
  --dev-r:54px;           /* радиус на канта */
  --dev-edge:3px;         /* дебелина на метала — самият кант */
  --dev-bezel:10px;       /* черната вътрешна рамка */
  --dev-glare:.12;        /* най-светлата точка на отблясъка — под .12 */
  --dev-glare-2:.07;
  --dev-glare-stop:26%;
  position:relative;z-index:1;
  width:min(var(--dev-w),78vw,100%);
}
/* Android е ДРУГ предмет, не iPhone с друга снимка: по-права геометрия (радиус 38 вместо 54),
   по-тесен кант, по-тънка черна рамка, punch-hole вместо островче и бутони само отдясно.
   Металът идва пак от токена на гамата — сменя се геометрията, не рецептата. */
.device--android{
  --dev-w:280px;
  --dev-r:38px;
  --dev-edge:2px;
  --dev-bezel:9px;
  --dev-glare:.10;
  --dev-glare-2:.055;
  --dev-glare-stop:22%;
}
/* 1 — метален кант: 8 спирки светло/тъмно под 148°, за да лови светлината неравномерно */
.device__edge{
  position:relative;
  padding:var(--dev-edge);border-radius:var(--dev-r);
  background:var(--dev-metal);
  /* 3 — двуслойна сянка (контактна + мека) + хайрлайн; 4 — rim light извън силуета */
  box-shadow:
    var(--dev-shadow),
    var(--dev-hairline),
    0 0 var(--dev-rim-size) -12px var(--dev-rim);
}
/* 6 — бутоните отстрани: тих режим + звук нагоре/надолу отляво, захранване отдясно */
.device__edge::before,.device__edge::after{
  content:'';position:absolute;width:3px;pointer-events:none;
}
.device__edge::before{
  left:-3px;top:15%;height:31%;border-radius:2px 0 0 2px;background:var(--dev-btn-l);
  -webkit-mask-image:linear-gradient(180deg,#000 0 13%,transparent 13% 25%,#000 25% 59%,transparent 59% 67%,#000 67% 100%);
  mask-image:linear-gradient(180deg,#000 0 13%,transparent 13% 25%,#000 25% 59%,transparent 59% 67%,#000 67% 100%);
}
.device__edge::after{
  right:-3px;top:27%;height:14%;border-radius:0 2px 2px 0;background:var(--dev-btn-r);
}
/* Android: лявата страна е чиста. Отдясно — захранване, под него люлката за звука
   (по-дебели бутони от iPhone, разделени с прекъсване в маската). */
.device--android .device__edge::before{display:none}
.device--android .device__edge::after{
  right:-4px;width:4px;top:16%;height:28%;border-radius:0 3px 3px 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0 29%,transparent 29% 43%,#000 43% 100%);
  mask-image:linear-gradient(180deg,#000 0 29%,transparent 29% 43%,#000 43% 100%);
}
/* 2 — черната вътрешна рамка: плътно #000, стъклото над корпуса */
.device__body{
  padding:var(--dev-bezel);border-radius:calc(var(--dev-r) - var(--dev-edge));
  background:#000;
}
.device__screen{
  position:relative;overflow:hidden;
  border-radius:calc(var(--dev-r) - var(--dev-edge) - var(--dev-bezel));
  background:var(--screen-bg);
}
.device__screen img{display:block;width:100%;height:auto}
/* Изрезите в екрана. Стоят ПОД отблясъка (z-index 2 срещу 3), за да мине стъклото и по тях. */
.device__cutout{position:absolute;z-index:2;pointer-events:none}
/* iOS: островчето е изрязано в самия кадър (черно, 34.4%–65.5% от ширината, 1.60%–5.79%
   от височината — мерено в home.png). Тук се добавя само ръбът и лещата: черно в черен
   екран не се чете като изрез. */
.device__island{
  left:34.4%;width:31.2%;top:1.60%;height:4.19%;border-radius:999px;background:#000;
  box-shadow:0 0 0 1px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.075);
}
.device__island::after{
  content:'';position:absolute;right:10%;top:19%;bottom:19%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#33474F 0%,#0C1418 52%,#000 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
/* Android: punch-hole в средата на статус лентата — кръгче, не пиле. */
.device__punch{
  left:50%;translate:-50% 0;top:1.07%;width:4.3%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#2C3C44 0%,#0A1013 46%,#000 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.055),0 1px 3px rgba(0,0,0,.45);
}
/* Коя рамка се вижда. В производство сървърът слага data-os при рендиране (без мигане);
   в мокъпа го прави скриптът в <head>. Няма ли атрибут — показва се iPhone. */
.phone-duo{position:relative;display:grid;justify-items:center;width:100%}
.phone-duo > .device{grid-area:1/1}
.device[data-os-only]{display:none}
html:not([data-os="android"]) .device[data-os-only="ios"]{display:block}
html[data-os="android"] .device[data-os-only="android"]{display:block}

/* ---------- Десктоп: и двата телефона ----------
   На десктоп не знаем какъв телефон има човекът — двата предмета го казват без думи.
   iPhone отпред и вляво, Android зад него и вдясно: застъпени, с преден план.
   Центровете им (±101px) лягат точно върху центровете на двата стор-стълба отдолу,
   така всеки QR код застава под своя телефон.
   ВАЖНО: правилото виси на data-os="desktop", не на ширината — таблетът е широк,
   но си има ОС и вижда САМО своя телефон. */
html[data-os="desktop"] .device[data-os-only="android"]{display:block}
html[data-os="desktop"] .device--ios{--dev-w:272px;translate:-101px 0}
html[data-os="desktop"] .device--android{
  --dev-w:232px;translate:101px -22px;
  /* задният е по-тих: rim light-ът се свива, а brightness хваща и него, и сянката,
     без да пипа токена на гамата (на светлите гами rim-ът е нула и си остава нула) */
  --dev-rim-size:58px;
  filter:brightness(.86) saturate(.94);
}
/* сянката на предния телефон, паднала върху задния — това дава дълбочината */
html[data-os="desktop"] .device--android::after{
  content:'';position:absolute;inset:0;border-radius:var(--dev-r);pointer-events:none;z-index:2;
  background:linear-gradient(101deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.30) 24%,rgba(0,0,0,0) 56%);
}
/* подложката (PHONE.md, 8) се измества към предния телефон и се разширява за двата */
html[data-os="desktop"] .phone-glow{left:45%;width:148%}
/* 5 — отблясък по стъклото: диагонална ивица, която казва „стъкло" */
.device__glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,
    rgba(255,255,255,var(--dev-glare)) 0%,
    rgba(255,255,255,var(--dev-glare-2)) var(--dev-glare-stop),
    rgba(255,255,255,0) 38%,rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;
}

/* ---------- Стор бейджове + QR ---------- */
.stores{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.store-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.badge{display:block;width:178px;height:auto;transition:transform .3s var(--ease-spring),filter .3s var(--ease-out)}
.badge:hover{transform:translateY(-3px);filter:var(--badge-hover)}
.badge-lg{width:212px}
.badge-img{--bh:48px;display:block;width:auto;height:var(--bh);transition:transform .3s var(--ease-spring),filter .3s var(--ease-out)}
.badge-img:hover{transform:translateY(-3px);filter:var(--badge-hover)}
.badge-img--lg{--bh:56px}
/* Google PNG носи собствено свободно поле (тялото е ~75% от височината) → по-висок и с отрицателен марж */
.badge-img--play{height:calc(var(--bh) / .752);margin-block:calc(var(--bh) * -.165)}
.footer-stores{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.footer-stores .badge-img{--bh:40px}
.qr{
  width:168px;height:168px;border-radius:var(--r-md);padding:10px;position:relative;
  background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-inset);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
}
.qr img{width:100%;height:100%;object-fit:contain}
.qr::before,.qr::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid var(--qr-corner);
}
.qr::before{top:9px;left:9px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.qr::after{bottom:9px;right:9px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.qr-note{font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Карти „Какво прави" ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.card{
  padding:clamp(22px,2.4vw,30px);
  transition:transform .45s var(--ease-spring),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.card:hover{
  transform:translateY(-4px);border-color:var(--glass-edge-hi);
  box-shadow:var(--glass-inset),var(--card-shadow-hover);
}
.card-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--accent-text);
  background:var(--ico-bg);
  box-shadow:var(--ico-ring);margin-bottom:var(--sp-4);
}
.card h3{font-size:var(--fs-lg);font-weight:620;letter-spacing:-.022em;line-height:1.25}
.card p{color:var(--muted);font-size:var(--fs-sm);margin-top:10px;line-height:1.6}

/* ---------- Доверие ---------- */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:hidden}
.trust-item{padding:clamp(24px,2.6vw,34px);border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-item .card-ico{width:38px;height:38px;border-radius:11px}
.trust-item h3{font-size:var(--fs-md);font-weight:620;letter-spacing:-.02em}
.trust-item p{color:var(--muted);font-size:var(--fs-sm);margin-top:9px}

/* ---------- Панел с курсорен ръб ---------- */
.spot{position:relative;overflow:hidden}
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),var(--spot-glow-a)),rgba(var(--accent-rgb),0) 62%);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.spot:hover::after{opacity:1}

/* ---------- Зад Денмар ---------- */
.behind{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);
  align-items:center;padding:clamp(28px,4vw,52px);border-radius:var(--r-xl)}
.behind h2{font-size:var(--fs-2xl);font-weight:660;letter-spacing:-.03em;line-height:1.15;margin-top:var(--sp-4)}
.behind p{color:var(--muted);margin-top:var(--sp-4);font-size:var(--fs-sm);max-width:52ch}
.behind-side{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.kfn{
  display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--kfn-bg);width:100%;
}
.kfn strong{display:block;font-size:var(--fs-sm);font-weight:600}
.kfn span{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:4px}

/* ---------- Сваляне ---------- */
.download-panel{
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);border-radius:var(--r-xl);text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.download-panel h2{font-size:var(--fs-3xl);font-weight:680;letter-spacing:-.035em;margin-top:var(--sp-4)}
.download-panel > p{color:var(--muted);margin-top:var(--sp-4);max-width:46ch;font-size:var(--fs-sm)}
.download-panel .stores{margin-top:var(--sp-7)}

/* ---------- Футър ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:var(--sp-8);padding-block:var(--sp-6) var(--sp-7)}
.footer-row{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;justify-content:space-between}
.footer-legal{color:var(--muted);font-size:var(--fs-xs);line-height:1.8}
.footer-legal a{color:var(--muted);border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.footer-legal a:hover{color:var(--accent-text);border-bottom-color:rgba(var(--accent-rgb),.4)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--sp-5);font-size:var(--fs-xs);color:var(--muted)}
.footer-links a:hover{color:var(--fg)}

/* ---------- Reveal ---------- */
/* Скриването е под html.js — класът се слага от js/os.js още в <head>. Не тръгнат ли
   скриптовете (блокирано CSP, паднал файл, стар браузър), страницата се вижда ЦЯЛА,
   само без анимация; празна страница между хедъра и футъра повече няма как да излезе. */
html.js .reveal{opacity:0;transform:translateY(20px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-spring);transition-delay:var(--d,0ms)}

/* ---------- Респонсив ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .hero-sub{max-width:46ch}
  .phone-wrap{margin-top:var(--sp-6)}
  .behind{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid var(--line)}
  .trust-item:last-child{border-bottom:0}
}
/* Тесен прозорец на десктоп: двата телефона вече не се побират — остава предният.
   Прагът е по ШИРИНА (композицията), не по ОС: разпознаването не се пипа. */
@media (max-width:760px){
  html[data-os="desktop"] .device[data-os-only="android"]{display:none}
  html[data-os="desktop"] .device--ios{--dev-w:286px;translate:none}
  html[data-os="desktop"] .phone-glow{left:50%;width:135%}
}
@media (max-width:720px){
  :root{--sp-9:3.25rem;--sp-8:2.5rem}
  /* Логото на партньора се смалява на 22px — оттам нататък до 480px то още се побира
     на един ред до езиковия чип (мерено след като бутонът „Свали" отпадна: редът иска
     ~375px при ~449px свободни на 481px екран). Прекъсването на реда е по-долу, в
     блока за ≤480px, където мястото наистина свършва. */
  .header-row{height:auto;min-height:64px;padding-block:8px}
  .cards{grid-template-columns:1fr}
  .hero .stores{display:none}     /* в hero-то: сторовете и QR изчезват, остава един бутон */
  .qr,.qr-note{display:none}      /* в „Сваляне": само бутоните, без QR */
  .stores{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .store-col{align-items:stretch}
  .badge,.badge-lg{width:100%;max-width:300px;margin-inline:auto}
  .stores .badge-img{margin-inline:auto}
  .hero-cta .btn-primary{flex:1 1 100%}
  .hero-cta{gap:var(--sp-2)}
  .download-panel{text-align:left;align-items:stretch}
  .download-panel .stores{margin-top:var(--sp-5)}
  .download-panel > p{max-width:none}
  .footer-row{flex-direction:column;align-items:flex-start}
}
/* ДВУРЕДНИЯТ хедър. Прагът беше 720px, докато в реда стоеше и бутонът „Свали"; след като
   собственикът го махна (14.09.2026), на един ред остават само езиковият чип и
   партньорското лого — а те се побират до 480px. Мерено, не на око: при 390px екран редът
   иска ~355px при ~358px свободни (3px запас — това не е запас), при 481px иска ~375px при
   ~449px свободни. Затова прекъсването остава само за телефоните.
   Прекъсването го прави .nav::after (100% основа, нулева височина) — стои след езика
   (order 0) и преди логото (order 1). */
@media (max-width:480px){
  .nav{row-gap:0}
  .nav::after{content:"";flex:0 0 100%;height:0}
  /* scroll-padding-top за двуредния хедър стои при основното правило по-долу — тук би
     било пренаписано от него (еднаква специфичност, а то е по-късно във файла). */
}
@media (max-width:420px){
  /* height:auto, НЕ фиксирана височина: под 480px хедърът е двуреден (партньорското лого
     слиза на свой ред) и фиксираните 64px го режеха — логото излизаше под ръба му. */
  .header-row{gap:var(--sp-3);height:auto;min-height:56px}
  .logo span{font-size:var(--fs-md)}
}

/* ---------- Без движение ---------- */
@media (prefers-reduced-motion:reduce){
  .blob{animation:none !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  /* K2: без нулиране на delay-ите blanket-ът държеше само по случайност — заради
     .reveal{transition:none}. Първият нов компонент със stagger щеше да изчака своя --d. */
  *,*::before,*::after{
    transition-duration:.01ms !important;transition-delay:0ms !important;
    animation-duration:.01ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;
  }
  .spot::after{display:none}
}

/* ================= Добавено за производството (не идва от мокъпа) =================
   1. scroll-padding: в мокъпа стоеше в блока на инструмента за преглед, а е нужно
      заради лепкавия хедър — котвата #svali иначе ляга под него.
   2. Езиковият превключвател: осем езика трябва да са достъпни един от друг, а сайтът
      върви под CSP без inline скриптове → <details>, нула JS.
   =============================================================================== */
html{scroll-padding-top:86px}
/* Под 480px хедърът е ДВУРЕДЕН (партньорското лого слиза на свой ред) — мерено 97px.
   С 86px котвата #kakvo-pravi лягаше ПОД хедъра и линкът „Виж какво прави" изглеждаше
   като че води наникъде. Мерено с tools/check-dist.mjs, не на око. Прагът върви заедно
   с прага на прекъсването по-горе: сменѝ единия — сменѝ и другия. */
@media (max-width:480px){
  html{scroll-padding-top:108px}
}
/* Тихият линк „Виж какво прави" сочи #kakvo-pravi и трябва да СТИГНЕ дотам видимо —
   скокът без движение изглежда като нищо не се е случило. Плавният скрол виси на
   no-preference: при `reduce` браузърът пак скача мигновено, както е поискано. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* 3. Дълги съставни думи. На 1440px hero колоната е 514px, а заглавието е 82px:
      немското „Versicherungen" изтичаше 97px извън нея, нидерландското „verzekeringen" — 36px.
      Гамата, ритъмът и разметката не се пипат — само таванът на скалата за тези два езика.
      hyphens:auto беше опитан и работи, но чупи „Versi-cherungen" насред заглавието —
      правилен пренос, който на 68px изглежда като счупена дума. С тавана думата се побира
      цяла, затова преносът отпада. break-word остава като мрежа за бъдещ превод:
      ако някой ден дума пак не се побере, се чупи, вместо да излезе под телефона. */
.hero h1{overflow-wrap:break-word}
html[lang="de"] .hero h1,
html[lang="nl"] .hero h1{font-size:clamp(2.7rem,5.4vw,4.25rem)}
.sr-only{
  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;
}
.lang-pick{position:relative}
.lang-pick > summary{list-style:none;cursor:pointer}
.lang-pick > summary::-webkit-details-marker{display:none}
.lang-pick > summary.lang{cursor:pointer}
.lang-pick > summary:hover{color:var(--fg);border-color:var(--glass-edge)}
.lang-pick[open] > summary svg{transform:rotate(180deg)}
.lang-pick > summary svg{transition:transform .25s var(--ease-out)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:6px;
  list-style:none;min-width:172px;border-radius:var(--r-md);
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--menu-shadow),var(--glass-inset);
}
.lang-menu a{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;border-radius:8px;
  font-size:var(--fs-sm);color:var(--muted);
  transition:color .2s var(--ease-out),background .2s var(--ease-out);
}
.lang-menu a:hover{color:var(--fg);background:var(--hover-wash)}
.lang-menu a[aria-current="true"]{color:var(--accent-text);font-weight:600}
/* Клавиатурата: без видим фокус списъкът е неизползваем с Tab. Пръстенът е на самия ред. */
.lang-pick > summary:focus-visible,
.lang-menu a:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
/* Тап таргет на телефон: 44px минимум — и на чипа, и на всеки ред от списъка. */
@media (max-width:720px){
  .lang{min-height:44px}
  .lang-menu a{min-height:44px}
}
@media (max-width:420px){
  .lang-menu{min-width:158px}
}

/* 5. Страницата с политиката за поверителност (site/privacy.html). Текстова страница,
      без hero и без телефон: една колона, широка колкото се чете удобно (68ch), върху
      същата аврора и със същия хедър и футър. Без .reveal — правен текст не се показва
      с анимация и не бива да зависи от скрипт. */
.page{padding-top:clamp(28px,4vw,52px);padding-bottom:var(--sp-8)}
.page-head{max-width:68ch;margin-bottom:var(--sp-6)}
.page-head h1{font-size:var(--fs-3xl);font-weight:680;letter-spacing:-.035em;line-height:1.12;margin-top:var(--sp-4)}
.page-head p{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-3)}
.prose{max-width:68ch;padding:clamp(20px,3vw,34px);border-radius:var(--r-xl)}
.prose h2{font-size:var(--fs-xl);font-weight:660;letter-spacing:-.026em;line-height:1.2;margin-top:var(--sp-7)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-md);font-weight:620;letter-spacing:-.018em;margin-top:var(--sp-5)}
.prose p{color:var(--muted);font-size:var(--fs-sm);line-height:1.65;margin-top:var(--sp-3)}
.prose ul{color:var(--muted);font-size:var(--fs-sm);line-height:1.65;margin:var(--sp-3) 0 0;padding-left:1.15em}
.prose li{margin-top:6px}
.prose li::marker{color:var(--accent-text)}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--accent-text);border-bottom:1px solid rgba(var(--accent-rgb),.35)}
.prose a:hover{border-bottom-color:var(--accent-text)}
.prose .meta{font-size:var(--fs-2xs);color:var(--muted);margin-top:var(--sp-7)}

/* 4. Съгласието (GA4, Consent Mode v2). Само токени — гамата го облича сама.
      Докът стои ДОЛУ ВЛЯВО: долу вдясно е мястото, което хората очакват да е чат или
      „нагоре". Банерът лежи над бисквитката и се свива В НЕЯ — затова transform-origin
      е долният ляв ъгъл, точно където е тя. */
.consent-dock{
  position:fixed;z-index:70;
  left:clamp(16px,4vw,24px);bottom:clamp(16px,4vw,24px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  max-width:calc(100vw - 2 * clamp(16px,4vw,24px));
  pointer-events:none;              /* самият док не хваща клик — само децата му */
}
.consent-dock > *{pointer-events:auto}

.consent{
  width:min(420px,100%);
  /* НЕПРОЗРАЧЕН фон, за разлика от другите стъклени панели: банерът плава над
     съдържанието и когато под него попадне тъмният телефон, полупрозрачното стъкло
     сваля дребния текст под 4.5:1 (измерено: 4.16:1 на линка към политиката).
     Решение, което се чете, не бива да зависи от това какво е отзад. */
  background:var(--bg-2);
  display:flex;flex-direction:column;gap:12px;
  padding:16px clamp(14px,3vw,18px);border-radius:var(--r-md);
  transform-origin:left bottom;
  opacity:0;transform:scale(.18) translateY(16px);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-spring);
}
.consent.is-open{opacity:1;transform:none}
.consent[hidden]{display:none}
.consent-text{color:var(--fg);font-size:var(--fs-sm);line-height:1.55;margin:0}
.consent-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.consent-actions .btn{flex:1 1 auto}
.consent-privacy{
  color:var(--muted);font-size:var(--fs-2xs);align-self:flex-start;
  border-bottom:1px solid transparent;transition:color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.consent-privacy:hover{color:var(--accent-text);border-bottom-color:rgba(var(--accent-rgb),.4)}

/* --- Двата изгледа на банера ---
   Кратък по подразбиране; „Защо ги ползваме" сменя съдържанието В СЪЩАТА рамка.
   Скриването е през атрибута `hidden` (display:none), НЕ през opacity — иначе невидим
   блок продължава да заема място и tools/check-mobile.mjs го брои за счупване (K4). */
/* Разширеният изглед е по-висок от телефона. Скролва САМО той — бутоните „Приемам" и
   „Само необходимото" и линкът към политиката остават на екрана винаги. Обратното
   (скрол на целия банер) режеше точно бутоните, заради които банерът съществува. */
.consent{max-height:calc(100vh - 120px);overflow:hidden}
.consent-brief,.consent-detail{display:flex;flex-direction:column;gap:12px}
.consent-detail{min-height:0}
/* Скролва САМО списъкът с категориите: „Назад" и двата бутона долу не бива да изчезват. */
.consent-cats{display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.consent-brief[hidden],.consent-detail[hidden]{display:none}
.consent-why,.consent-back{
  align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;
  color:var(--accent-text);font-size:var(--fs-xs);font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease-out);
}
.consent-why:hover,.consent-back:hover{border-bottom-color:rgba(var(--accent-rgb),.45)}
.consent-why .arr{transition:transform .3s var(--ease-spring)}
.consent-why:hover .arr{transform:translateX(3px)}
.consent-back{color:var(--muted);font-weight:500}
.consent-cat{
  padding:12px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);
}
.consent-cat + .consent-cat{margin-top:2px}
.consent-cat-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.consent-cat h3{font-size:var(--fs-sm);font-weight:640;letter-spacing:-.015em}
.consent-cat p{color:var(--muted);font-size:var(--fs-xs);line-height:1.55;margin-top:7px}
.consent-cat p.consent-never{color:var(--accent-text);font-weight:600}
.consent-always{
  flex:0 0 auto;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);font-weight:600;
}
/* Превключвателят: истински checkbox под маска. Клавиатурата и екранният четец виждат
   полето, окото вижда плъзгача; фокусът се рисува върху пистата, не около невидимото поле. */
.switch{flex:0 0 auto;display:inline-flex;align-items:center;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{
  display:block;width:40px;height:23px;border-radius:var(--r-pill);
  background:var(--line);position:relative;
  transition:background .25s var(--ease-out);
}
.switch-track::after{
  content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--surface);box-shadow:var(--btn-ring);
  transition:transform .25s var(--ease-spring);
}
.switch input:checked + .switch-track{background:var(--accent-text)}
.switch input:checked + .switch-track::after{transform:translateX(17px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--accent-text);outline-offset:3px}

/* Бисквитката. БЕЗ кръг отдолу: тя вече е кръгла и назъбена, втори кръг я свива до
   иконка в копче. Само контур, цветът идва от `color` през currentColor в SVG-то.
   54px е и рисунката, и тап таргетът (минимумът е 44). Контурен SVG върху прозрачен
   бутон има „дупки" между линиите — затова кликовете се хващат от самия бутон:
   `pointer-events:none` на рисунката и `background:transparent` на бутона. */
.cookie-btn{
  width:54px;height:54px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--cookie-fg);line-height:0;border-radius:50%;
  filter:drop-shadow(0 4px 10px rgba(10,40,36,.28));
  transition:transform .3s var(--ease-spring),color .25s var(--ease-out);
}
.cookie-btn:hover{color:var(--cookie-fg-h);transform:translateY(-2px) rotate(-6deg)}
.cookie-btn:active{transform:translateY(0) scale(.96)}
.cookie{display:block;width:54px;height:54px;pointer-events:none}

@media (max-width:480px){
  .consent{width:min(360px,100%)}
  .consent-actions .btn{flex:1 1 0}
}
/* Нула анимация при изрична заявка — банерът просто се показва и се скрива. */
@media (prefers-reduced-motion:reduce){
  .consent{transition:none;opacity:1;transform:none}
  .cookie-btn{transition:none}
  .cookie-btn:hover{transform:none}
}

/* ---------- K838: what used to be inline style attributes ---------- */
/* The hidden SVG sprite with the hand-drawn store badges (was style="position:absolute"). */
.svg-sprite{position:absolute}
/* The small icon beside the "behind the platform" lines (was a style="" on .card-ico, twice). */
.card-ico.card-ico--inline{margin:0;width:38px;height:38px;border-radius:11px;flex:0 0 auto}

/* ---------- Общите условия (/obshti-usloviya/) — were an inline <style> written by tools/sync-app-terms.mjs ---------- */
.terms-doc .info-table{border-collapse:collapse;margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.terms-doc .info-table td{padding:4px 12px 4px 0;vertical-align:top}
.terms-doc .info-table td:first-child{font-weight:600;color:var(--fg);white-space:nowrap}
.terms-doc .small{font-size:var(--fs-xs)}
.terms-doc .highlight{color:var(--fg);font-weight:600}
.terms-doc .terms-center{text-align:center}
.terms-doc .terms-center--top{margin-bottom:18px}
.terms-doc .terms-center--bottom{margin-top:18px}