/* Забележка за --tx3: brand.ts го описва като «за изключено състояние и никога
   за съдържание». Тук се ползва само за плейсхолдъри и за надписа в празен слот.
   Дребният текст, който казва нещо, е --tx2 — на крем --tx3 дава 3.2:1.

/* Светлата палитра на приложението, дума по дума от constants/brand.ts.
   Взета, не изведена: брасът в светлата тема е друг цвят, не по-блед нюанс —
   #C8A165 върху почти бяло не се чете като акцент, затова светлата ползва #96702A.
   --onBrass е текстът ВЪРХУ брас и не се извежда от останалите: в тъмната тема
   брасът е блед и иска мастило, в светлата е дълбок и иска бяло. */
:root{
  --ink:#F5F1EA;--ink2:#FFFFFF;--surf:#FFFFFF;--surf2:#F0EBE1;
  --line:#E2D9CB;--line2:#D3C8B7;
  --brass:#96702A;--brass2:#7A5A1E;--brassd:#8A6F1B;
  --onBrass:#FFFFFF;--brassLine:rgba(150,112,42,.32);
  --tx:#1F1815;--tx2:#6B5F54;--tx3:#9A8D80;
  --ok:#4A8A62;--warn:#C9843F;
  --sp:cubic-bezier(.2,.9,.25,1);

  /* Radius и CARD_GAP от brand.ts. KRUG значи кръг и страницата чете като една идея:
     всеки елемент е отделен объл обект върху повърхност. */
  --r-card:20px;--r-media:14px;--r-grid:16px;--r-control:12px;--gap:14px;

  /* ── ТИПОГРАФСКА СТЪЛБА ───────────────────────────────────────────────────
     Пет стъпки, не тридесет. Одитът намери шест размера за основен текст —
     15.5, 16, 16.5, 17, 17.5 и 22 — станали шест, защото всеки е избран на
     място. Лек за това не е по-подреден списък, а стълба, към която всичко
     се залепя: --t1 е дребният етикет, --t5 е заглавието на глава. Между тях
     няма междинни стойности и нова такава е решение, не дреболия. */
  --t0:9.5px;                                 /* надписи върху устройството в демото */
  --t1:11px;                                  /* моноетикети, номера, фигури */
  --t2:clamp(15px,1.1vw,16px);                /* второстепенен текст */
  --t3:clamp(16.5px,1.5vw,18px);              /* основен текст */
  --t4:clamp(20px,2.6vw,26px);                /* подзаглавие, ползи, изводи */
  --t5:clamp(31px,5.4vw,58px);                /* заглавие на глава */
  --t6:clamp(34px,6.6vw,76px);                /* изявлението, веднъж */

  /* ── ЕДНА СТЪЛБА ЗА ОТСТОЯНИЕ ─────────────────────────────────────────────
     Беше пет независими рампи: 82/58 за секции, clamp(34,5vw,58) над заглавие,
     clamp(48,6.5vw,82) между фигури, плоски 30 и 26 другаде. Сега едно
     семейство, всяко следващо ≈1.5× предишното. */
  --s1:8px;--s2:14px;--s3:22px;--s4:clamp(26px,3vw,34px);
  --s5:clamp(34px,4.4vw,52px);--s6:clamp(46px,6vw,78px);--s7:clamp(58px,7.5vw,104px);

  /* ── ТИХ ТЕКСТ, КОЙТО ВСЕ ПАК Е ТЕКСТ ─────────────────────────────────────
     --tx3 е състоянието «недостъпно» и идва такова от brand.ts. Одитът го
     завари като съдържание на четири места — номера на глави, «Фиг. N»,
     броячите на ползите и долния колонтитул — при 2.9–3.2:1, когато трябват
     4.5:1. Едно име по-малко на грешното място решава и четирите. */
  --txq:#6F6257;                              /* 5.4:1 върху --ink */
  --txq-dark:rgba(240,234,225,.68);           /* същата роля върху тъмното */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:138px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ink);color:var(--tx);
  font-family:'Golos Text',system-ui,sans-serif;font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Пръстенът като тапет. Едри концентрични дъги, излизащи извън екрана, на 3–5%.
   SVG в data URI: без заявка, без файл, без цена. Fixed, за да не се движи при скрол —
   нищо на тази страница не мърда, освен когато го превъртиш до него. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cg fill='none' stroke='%2396702A' stroke-width='1.4'%3E%3Ccircle cx='1010' cy='215' r='150'/%3E%3Ccircle cx='1010' cy='215' r='245'/%3E%3Ccircle cx='1010' cy='215' r='350'/%3E%3Ccircle cx='1010' cy='215' r='470'/%3E%3Ccircle cx='1010' cy='215' r='600'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right -180px top -220px;
  background-size:1180px 1180px;opacity:.05;
}
@media(max-width:700px){
  body::before{background-position:right -300px top -260px;background-size:900px 900px;opacity:.045}
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}

/* ── ШРИФТОВЕ, ОТ НАШИЯ СЪРВЪР ──
   Google Fonts праща IP-то на всеки посетител към Google, преди човекът да е
   дал съгласие за каквото и да било — германски съдилища са осъждали сайтове
   точно за това. Отворено от първия одит и затворено тук: нищо на страницата
   вече не се тегли от трета страна.

   Само подмножествата cyrillic и latin. Сайтът е на български с латинска
   марка и латински имена на продукти; cyrillic-ext, latin-ext, greek и
   vietnamese не се ползват от нищо и всяко е още един файл по мобилни данни.
   Google сервира едно променливо тегло на подмножество, така че идентичните
   файлове са слети: 7 файла, 176 KB вместо 15 и 412 KB. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golos-text-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golos-text-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/golos-text-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/golos-text-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/golos-text-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pt-serif-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pt-serif-700-latin.woff2') format('woff2');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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── NAV ── */
/* Марката в средата, навигацията под нея, рисуваната черта отдолу. */
nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s;
  background:rgba(245,241,234,.86);backdrop-filter:blur(16px)}
nav.solid{background:rgba(245,241,234,.96)}
nav .in{max-width:1140px;margin:0 auto;padding:14px 24px 0;display:flex;
  flex-direction:column;align-items:center;gap:9px}
.brand{display:flex;align-items:center;gap:11px}
.brand b{font-family:'PT Serif',serif;font-size:var(--t4);font-weight:700;letter-spacing:3.4px}
nav .links{display:flex;gap:22px;align-items:center;font-size:var(--t2);font-weight:600;
  color:var(--tx2);flex-wrap:wrap;justify-content:center}
nav .links a:hover{color:var(--tx)}
nav .links .btn{margin-left:8px}
@media(max-width:760px){
  nav .in{padding:10px 18px 0;gap:7px}
  nav .links a:not(.btn){display:none}
  nav .links .btn{margin-left:0}
}

/* Пръстенът. Рисува се веднъж на зареждане, после една тясна междина обикаля
   бавно — не се върти цялата марка. */
.brand .rg{width:34px;height:34px;flex:none;display:block}
.brand .rg svg{width:100%;height:100%;overflow:visible}
.brand .rg circle{fill:none;stroke:var(--brass);stroke-linecap:round;
  transform-origin:22px 22px}
.rgO{stroke-width:2.4;stroke-dasharray:119.4;stroke-dashoffset:119.4;
  animation:rgDraw 1.15s var(--sp) .12s forwards;transform:rotate(-90deg)}
.rgI{stroke-width:1.2;opacity:0;animation:rgFade .6s ease 1.0s forwards}
/* Междината: къса дъга в цвета на фона, минаваща над начертания пръстен. */
.rgS{stroke:var(--ink);stroke-width:3.4;stroke-dasharray:13 106.4;opacity:0;
  animation:rgHold .01s linear 1.3s forwards,rgTravel 16s linear 1.3s infinite}
@keyframes rgDraw{to{stroke-dashoffset:0}}
@keyframes rgFade{to{opacity:.45}}
@keyframes rgHold{to{opacity:1}}
@keyframes rgTravel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Reduce Motion получава готовата марка, не по-бавна версия на анимацията. */
@media(prefers-reduced-motion:reduce){
  .rgO{stroke-dashoffset:0;animation:none}
  .rgI{opacity:.45;animation:none}
  .rgS{display:none}
}

/* Рисуваната черта. Запълнен път, а не border: щрих не може да изтънява,
   а формата тук е леща — дебела в средата, нула в краищата. */
nav .rule{display:block;width:100%;height:14px;margin-top:1px}
nav .rule path{fill:var(--brass);opacity:.55}
@media(max-width:760px){nav .rule{height:11px}}
/* Хапче, не правоъгълник — Radius.pill. Минимум 46px височина: приложението
   държи 44 навсякъде, а това се ползва прав, с една ръка, между двама клиенти. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:0;font-family:inherit;font-weight:700;font-size:var(--t2);
  padding:var(--s3) calc(var(--s3) * 1.3);
  border-radius:999px;transition:.2s var(--sp);min-height:48px;white-space:nowrap;
  background:var(--brass);color:var(--onBrass)}
.btn:hover{background:var(--brass2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.gh{background:transparent;border:1.5px solid var(--line2);color:var(--tx)}
.btn.gh:hover{border-color:var(--brass);color:var(--brass);background:transparent}
.btn.sm{padding:var(--s2) var(--s3);font-size:var(--t2);min-height:44px}

/* ── ЗАГЛАВИЕТО СЕ ОТКРИВА ПО РЕДОВЕ ──
   Всеки ред е маска с надничащ отвътре ред: transform на вътрешния слой в
   кутия с overflow:hidden, което е само композиторът. Не буква по буква —
   това чете като ефект; ред по ред чете като набор, който сяда.

   Редовете идват от <br> в самото заглавие, така че прекъсванията са тези,
   които някой е избрал, а не каквото се е паднало на дадена ширина. */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);
  transition:transform .62s cubic-bezier(.22,.75,.2,1) var(--d,0s)}
.seen .ln>span,.ln.seen>span{transform:none}
@media(prefers-reduced-motion:reduce){.ln>span{transform:none;transition:none}}

/* ── РИСУВАНАТА ЧЕРТА СЕ РИСУВА ──
   Пътят е запълнен, не щрихован, така че stroke-dashoffset няма какво да хване.
   Вместо това се разгъва отляво надясно — scaleX от нула с origin вляво, което
   е същият жест и пак само композиторът. */
nav .rule path{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.22,.75,.2,1) .25s}
nav.drawn .rule path{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  nav .rule path{transform:none;transition:none}}

/* ── НАТИСК И ПОСОЧВАНЕ ──
   Най-евтиното нещо, което кара страницата да усеща скъпа, и не струва нищо:
   всичко натискаемо отговаря веднага. 90ms надолу, за да е под прага, при който
   ръката усеща закъснение; излизането е по-бавно, защото връщането не е
   съобщение.

   Само transform и box-shadow — композиторът ги поема без пренареждане, така
   че нищо не мести оформлението и нищо не пада на средно Android устройство.
   Посочването е зад hover:hover, за да не залепва на телефон, където браузърът
   държи :hover след допир. */
.btn,.audBtn,.roleBtn,.tryChips li,.chip,.demoJump,.fsBtn,.card{
  transition:transform .09s var(--sp),box-shadow .18s var(--sp),
    background-color .18s ease,border-color .18s ease,color .18s ease}

.btn:active,.audBtn:active,.roleBtn:active,
.demoJump:active,.fsBtn:active{transform:scale(.97)}
.tryChips li:active{transform:scale(.98)}

@media(hover:hover){
  .fig:hover .figShot{transform:translateY(-3px)}
  .fig .figShot{transition:transform .22s var(--sp)}
  .tryChips li:hover{border-color:var(--brass);color:var(--tx)}
  #demo .tryChips li:hover{color:#F0EAE1;border-color:#C8A165}
}

/* Reduce Motion: състоянията остават, движението не. Натиснатото пак трябва да
   изглежда натиснато — просто без скок. */
@media(prefers-reduced-motion:reduce){
  .btn,.audBtn,.roleBtn,.tryChips li,.chip,.demoJump,.fsBtn,.card{
    transition:background-color .18s ease,color .18s ease}
  .btn:active,.audBtn:active,.roleBtn:active,
  .demoJump:active,.fsBtn:active,.tryChips li:active{transform:none}
  .fig:hover .figShot{transform:none}
}

/* ── HERO ── */
/* Само заглавие, изречение, два бутона и екраните. Витрината и лентата със
   статистики са махнати: над сгъвката води едно нещо, останалото отстъпва. */
/* Клипва по ръба, за да надничат страничните екрани, вместо да бутат
   страницата настрани — 11px хоризонтален скрол на телефон. */
.hero{padding:168px 0 78px;position:relative;overflow:hidden}
.heroIn{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:52px;align-items:center}
@media(max-width:960px){
  .heroIn{grid-template-columns:1fr;gap:42px}
  .hero{padding:150px 0 56px}
}

/* Golos на 800 за заглавието. PT Serif е само за марката — сериф, рисуван за
   текст в колони, не е това, което иска заглавие на екран. */
h1{font-family:'Golos Text',system-ui,sans-serif;font-size:clamp(42px,7vw,76px);font-weight:800;
  line-height:1.03;letter-spacing:-.025em;margin:0 0 24px;max-width:13ch}
h1 em{font-style:normal;color:var(--brass);font-family:'Marck Script',cursive;font-weight:400;
  font-size:1.16em;line-height:.9;letter-spacing:0;padding-right:.06em}
.hero p.lead{font-size:18px;line-height:1.62;color:var(--tx2);max-width:46ch;margin:0 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}

/* ── AUDIENCE SWITCH ── */
.audSwitch{display:inline-flex;gap:3px;padding:4px;margin:0 0 26px;
  border-radius:999px;background:var(--surf2);border:1px solid var(--line)}
.audBtn{border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:var(--t2);color:var(--tx2);padding:10px 17px;border-radius:999px;min-height:44px;
  transition:.2s var(--sp);white-space:nowrap}
.audBtn.on{background:var(--surf);color:var(--tx);box-shadow:0 1px 3px rgba(31,24,21,.09)}
.audBtn:hover:not(.on){color:var(--tx)}
@media(max-width:420px){.audBtn{font-size:12.5px;padding:10px 13px}}

/* ── HERO ART: телефоните ── */
/* Без нарисувани рамки: снимката на екрана вече е с формата на телефон.
   Средният е най-едър и най-отпред, страничните са по-назад и по-малки. */
/* Абсолютно позициониране, а не flex: трите екрана трябва да се застъпват и да
   останат в колоната си. Flex ги свиваше пропорционално и средният преставаше
   да е по-едър, което е цялата идея на композицията. */
.heroArt{position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1/.92}
.heroArt .ph{position:absolute;bottom:0;border-radius:26px;overflow:hidden;
  background:var(--surf2);border:1px solid var(--line);
  box-shadow:0 22px 50px -20px rgba(31,24,21,.30),0 5px 14px -7px rgba(31,24,21,.14)}
/* Застъпване като дълбочина, не подреждане с луфтове: страничните влизат под
   средния, иначе трите четат като три карти в редица. */
.heroArt .ph img,.heroArt .ph{line-height:0}
.heroArt .ph img{width:100%;height:auto;display:block}
.heroArt .ph1{left:6%;width:36%;bottom:8%;transform:rotate(-6deg);z-index:1}
.heroArt .ph3{right:6%;width:36%;bottom:8%;transform:rotate(6deg);z-index:1}
.heroArt .ph2{left:50%;width:45%;translate:-50% 0;z-index:3;
  box-shadow:0 36px 72px -24px rgba(31,24,21,.38),0 9px 22px -9px rgba(31,24,21,.18)}
/* Един телефон на телефон. Стек от три е четим, но тесен на 390, а работата на
   първия екран там е да покаже едно нещо ясно, вместо три наведнъж.
   Стекът се връща от таблет нагоре, където има място за дълбочина. */
@media(max-width:640px){
  .heroArt{max-width:290px;aspect-ratio:588/1248}
  /* Не се крият, а надничат. Стек от три пълни телефона на 390 е тесен и
     нечетим, но един самотен телефон е по-слаб от стека — затова страничните
     остават като ръбове, излизащи извън кадъра. */
  .heroArt .ph1{display:block;left:-16%;width:34%;bottom:11%;transform:rotate(-7deg);opacity:.85}
  .heroArt .ph3{display:block;right:-16%;width:34%;bottom:11%;transform:rotate(7deg);opacity:.85}
  .heroArt .ph2{position:relative;left:auto;translate:none;width:100%;
    box-shadow:0 30px 64px -22px rgba(31,24,21,.34),0 8px 20px -8px rgba(31,24,21,.16)}
  .heroArt .ph2 .slotNote b{font-size:var(--t2)}
  .heroArt .ph2 .slotNote{font-size:var(--t0)}
}

/* Слотът е нарочно празен и нарочно личи. Истинските снимки от приложението още
   ги няма, а измисленото изображение на този етап се приема за продукта. */
/* Надписът на страничните стои горе, защото средният телефон покрива центъра им —
   иначе изглежда като счупен текст, а не като застъпване. */
.heroArt .ph .slotNote{padding:0 8px;color:var(--tx3);font-family:'JetBrains Mono';
  font-size:var(--t0);letter-spacing:1.1px;text-transform:uppercase;line-height:1.6;
  max-width:100%;overflow-wrap:anywhere}
.heroArt .ph .slotNote b{display:block;font-family:'Golos Text',system-ui,sans-serif;
  font-size:12px;letter-spacing:0;text-transform:none;color:var(--tx2);font-weight:700}
.heroArt .ph2 .slotNote{font-size:var(--t0);letter-spacing:1.4px}
.heroArt .ph2 .slotNote b{font-size:var(--t2);margin-bottom:6px}
.heroArt .ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;border:1px dashed var(--line2)}

/* ── ДЕМО ── */
/* Собствена лента. Страницата трябва да спре тук: това е доказателството, а
   всичко останало е аргументът. По-топъл фон, повече въздух и по-едро заглавие
   от която и да е друга секция. */
/* Тъмна лента. Останалата страница е крем, така че тъмен блок е невъзможно да
   се подмине при скрол и веднага чете като друг вид нещо. Стойностите са
   тъмната палитра от brand.ts — това е темата, в която приложението вече
   съществува, а не измислен фон.

   Пет души минаха оттук и никой не разбра, че демото се пипа. Секцията вече не
   го твърди, а го изглежда. */
#demo{background:#14100E;color:#F0EAE1;padding:clamp(20px,3.4vh,48px) 0 clamp(22px,3.6vh,50px);scroll-margin-top:-18px;
  display:flex;align-items:center;position:relative;overflow:hidden}
#demo .lab{color:#C8A165;margin-bottom:clamp(6px,1.4vh,15px);font-size:var(--t1);
  letter-spacing:2.4px}
#demo .demoHead h2{color:#E3C48E}
#demo .demoHead p,#demo .demoNote p{color:#A79C91}
#demo .tryChips li{color:#E3C48E;background:transparent;
  border:1px solid rgba(200,161,101,.42)}
#demo .tryChips li::before{background:#C8A165}
#demo .tryLead li{background:#C8A165;color:#14100E}
#demo .protoLabel{color:#8A7F73;opacity:1}
#demo .demoNote{background:rgba(200,161,101,.09);border:1px solid rgba(200,161,101,.22)}
#demo .demoNote svg{color:#C8A165}
#demo .btn{background:#C8A165;color:#14100E}
#demo .btn:hover{background:#E3C48E}
/* Прожектор зад устройството: свети, вместо да е поставено. */
#demo::before{content:'';position:absolute;left:50%;top:50%;width:min(900px,120vw);
  height:min(900px,120vw);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(200,161,101,.20),rgba(200,161,101,.06) 42%,transparent 68%)}
@media(min-width:861px){#demo::before{left:26%}}
#demo>.wrap{width:100%}
@media(max-width:860px){#demo{padding:68px 0 74px}}
#demo .demoHead{text-align:left;margin:0 0 clamp(10px,2vh,22px);max-width:19ch}
@media(max-width:860px){#demo .demoHead{text-align:center;margin:0 auto 4px;max-width:none}}
#demo .demoHead h2{font-size:clamp(26px,min(4vw,4.9vh),48px);line-height:1.0;letter-spacing:-.028em}
#demo .demoHead p{font-size:16.5px;margin-top:10px}
@media(max-width:860px){#demo .demoHead{margin-bottom:30px}}

/* Кратки подкани, не инструкции. */
.tryChips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(4px,.8vh,8px)}
.tryChips li{height:clamp(28px,4vh,40px);font-size:clamp(13px,1.8vh,14px)}
.tryChips li::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--brass);margin-right:10px;flex:none}
.tryLead{display:none}
@media(max-width:620px){
  .tryLead{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 12px;
    list-style:none;padding:0}
  .tryLead li{display:inline-flex;align-items:center;height:34px;padding:0 14px;line-height:1;
    border-radius:999px;background:var(--brass);color:var(--onBrass);
    font-size:12.5px;font-weight:700}
  .demoSide .tryChips{display:none}
}
.tryChips li{display:inline-flex;align-items:center;height:40px;padding:0 16px;line-height:1;
  border-radius:999px;background:var(--surf);border:1px solid var(--line);
  font-size:var(--t2);font-weight:600;color:var(--tx2)}
@media(max-width:860px){.tryChips{justify-content:center}}

/* Живо под пръста: рамката се повдига и получава брас ореол, докато я държиш. */
.phoneFrame.held{transform:translateY(-2px);
  box-shadow:0 0 0 3px var(--brassLine),0 40px 80px -26px rgba(31,24,21,.46)}
@media(prefers-reduced-motion:reduce){.phoneFrame{transition:none}}
.demoWrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,440px);gap:64px;
  align-items:center;justify-content:start;min-height:0;max-width:940px;margin:0}
/* Колоната трябва да се събере в един екран заедно с телефона: три подканя,
   не пет, и по-плътни отстъпи. Останалите две живеят в самото демо. */
@media(min-width:861px){
  /* НАРОЧНО: на широк екран се показват три от петте подканя, за да се събере
     колоната в един екран заедно с телефона. Другите две живеят на телефон,
     където колоната е сама. Не е бъг — не ги «поправяй», без да провериш дали
     секцията пак се събира в 700px височина. */
  /* И петте се показват: колоната се събира, защото телефонът вече следва
     височината на прозореца вместо да я надвишава. */
  /* Бележката повтаря етикета под телефона; на широк екран и двете се виждат
     наведнъж, така че остава едната. */
  .demoSide .demoNote{display:none}
  .demoSide>.btn{margin-top:clamp(10px,2.2vh,22px)!important}
  #demo .demoHead p{font-size:clamp(14px,1.9vh,16px);line-height:1.5}
}
@media(max-width:860px){.demoWrap{grid-template-columns:1fr;gap:26px;max-width:none;min-height:0}}
/* Таблет: една колона, но телефонът си остава телефон, не се разлива. */
@media(min-width:621px) and (max-width:860px){
  .phoneFrame{width:min(340px,calc((100svh - 300px) * 0.462));
    height:min(620px,calc(100svh - 300px));margin:0 auto}
  #demo .demoHead{text-align:center;max-width:none;margin:0 auto 22px}
  .demoSide{text-align:center}
  .tryChips{align-items:center}
}
/* Рамката е екран, не картинка: височината ѝ е това, което остава между
   закования хедър и долния ръб, а ширината следва от съотношението. Фиксирано
   число сряза върха под навигацията и провеси дъното под сгъвката. */
/* Скролът се цели в самия телефон, не в секцията: така едно докосване винаги
   го оставя цял под навигацията, вместо да спре на заглавието отгоре. */
/* Закача се под навигацията, вместо да минава под нея. Фиксираният хедър
   режеше собствения хедър на телефона на всеки екран. */
.phoneFrame{position:relative;margin:0 auto;scroll-margin-top:132px;z-index:2;
  transition:box-shadow .22s var(--sp),transform .22s var(--sp);
  /* Следва височината на прозореца. Къс екран беше отказващият случай и тест
     на 900px не можеше да го види: min-height:400 държеше телефона по-висок,
     отколкото има място, и секцията преливаше. */
  /* Таванът е вдигнат, логиката не е пипана: на висок екран телефонът стига
     до 720, а на нисък пак се свива до това, което остава. Ограничителят преди
     беше самото число 500, не сметката. Ширината следва съотношението, за да
     не се разтегли устройството, когато височината порасне. */
  height:min(720px,calc(100svh - 244px));
  /* 333 = 720 × 0.462. Таванът на ширината трябва да е точно съотношението на
     тавана на височината, иначе на висок екран ширината опира първа и
     устройството се разтяга: на 1920×1080 излизаше 360×720, тоест 0.50. */
  width:min(333px,calc((100svh - 244px) * 0.462));
  min-height:0;
  border-radius:30px;overflow:hidden;background:var(--ink);
  border:1px solid var(--line);isolation:isolate;
  box-shadow:0 44px 90px -30px rgba(0,0,0,.75),0 12px 30px -12px rgba(0,0,0,.5),
    0 0 0 1px rgba(200,161,101,.22)}

/* Пулсиращ пръстен. Втората и последна нарочна примка на страницата, след
   марката — и по същата причина: това е единственият елемент, който трябва да
   се обяви сам. Пет души го подминаха, докато стоеше мирно.
   Reduce Motion получава пръстена нарисуван, без пулса. */
.phoneFrame::after{content:'';position:absolute;inset:-6px;border-radius:30px;
  border:2px solid rgba(200,161,101,.55);pointer-events:none;
  animation:framePulse 2.8s ease-in-out infinite}
@keyframes framePulse{
  0%,100%{opacity:.32;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.012)}}
@media(prefers-reduced-motion:reduce){.phoneFrame::after{animation:none;opacity:.5}}

/* «ДОКОСНИ» стои върху рамката, не до нея. */
.phoneWrap{position:relative;width:max-content;max-width:100%;margin:0 auto}
.fsBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;
  height:42px;padding:0 20px;line-height:1;border-radius:999px;background:rgba(240,234,225,.10);
  border:1px solid rgba(200,161,101,.45);color:#E3C48E;font-weight:700;font-size:var(--t2);
  white-space:nowrap}
.fsBtn:hover{background:rgba(200,161,101,.18)}
.phoneWrap+.protoLabel,.fsBtn{display:flex}
#fsWrap{position:fixed;inset:0;z-index:400;background:#14100E;display:flex;flex-direction:column}
#fsWrap[hidden]{display:none}
/* Сцената центрира колона с естествената ширина на приложението. Преди рамката
   ставаше широка колкото прозореца, fit() смяташе --fs от нейната ширина и на
   1440 излизаше коефициент 3.7 — приложението се разтягаше до билборд и се
   виждаше само горният ляв ъгъл. Колоната е 390 или по-малко; коефициентът
   пак се смята от нея и излиза 1. */
#fsWrap .fsStage{flex:1;min-height:0;position:relative;display:flex;justify-content:center}
#fsWrap .phoneFrame{position:relative!important;inset:auto;top:auto!important;
  width:min(390px,100vw)!important;height:100%!important;max-width:none;margin:0;
  border:0;border-radius:0;box-shadow:0 0 60px -10px rgba(0,0,0,.7)}

/* Хромът е над и под приложението, не върху него. */
#fsWrap .fsBar{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px 16px}
#fsWrap .fsTitle{font-family:'JetBrains Mono';font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;color:#A79C91}
#fsWrap .phoneFrame::after,#fsWrap .touchBadge,#fsWrap .fsBtn,#fsWrap .fingerCue{display:none}
#fsClose{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;
  border-radius:999px;background:#F0EAE1;color:#14100E;font-weight:700;font-size:var(--t2);
  line-height:1}
#fsClose svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
@media(max-width:420px){#fsClose span{display:none}#fsClose{padding:0;width:44px;justify-content:center}}
#fsWrap .fsLabel{flex:none;margin:0;padding:9px 14px calc(env(safe-area-inset-bottom,0px) + 11px);
  text-align:center;font-family:'JetBrains Mono';font-size:9px;line-height:1.5;color:#8A7F73}
html.fsOpen,body.fsOpen{overflow:hidden}
/* Движещ се пръст. Третото и последно нарочно изключение от правилото, че нищо
   не се върти — и единственото, спечелено с наблюдение: петима души минаха през
   страницата и никой не разбра, че демото се пипа. Мълчаливата рамка не свърши
   работа, значи мълчанието е грешката, не движението.

   Спира при първото докосване и не се връща в тази сесия. Reduce Motion го
   получава неподвижен: пръст, който стои, пак казва «това се пипа». */
.fingerCue{position:absolute;left:50%;top:38%;z-index:5;pointer-events:none;
  transform:translateX(-50%);color:#fff;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.7));
  animation:fingerTap 2.4s ease-in-out infinite;transition:opacity .3s ease}
.fingerCue svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.7}
.fingerCue.gone{opacity:0;animation:none}
@keyframes fingerTap{
  0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}
  45%{transform:translateX(-50%) translateY(26px);opacity:1}
  60%{transform:translateX(-50%) translateY(20px);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .fingerCue{animation:none;opacity:.85;transform:translateX(-50%) translateY(13px)}}
@media(max-width:620px){.phoneWrap{width:auto}}
.touchBadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:2.2px;
  background:#C8A165;color:#14100E;height:26px;padding:0 14px;border-radius:999px;
  display:inline-flex;align-items:center;line-height:1;white-space:nowrap;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.6)}
/* На телефон демото взема екрана. Центрирана миниатюра в колона чете като
   снимка — това е формата на всичко останало по страницата. Почти цяла ширина,
   тънък ръб и по-плитка сянка: дебелата рамка на малък размер е точно това,
   което го прави да изглежда като фотография на телефон. */
@media(max-width:620px){
  .phoneFrame{
    position:sticky;top:112px;
    width:calc(100vw - 20px);
    max-width:none;
    margin-left:calc(50% - 50vw + 10px);
    height:min(calc(100svh - 158px),calc((100vw - 20px) / 0.462));
    border:0;border-radius:22px;
    box-shadow:0 16px 40px -20px rgba(31,24,21,.26)}
  .phoneFrame.held{transform:none;
    box-shadow:0 0 0 2px var(--brassLine),0 16px 40px -20px rgba(31,24,21,.32)}
  .demoWrap{max-width:none}
}
/* Рендира се на 390 и се смалява, вместо да се стиска. Иначе същите 15px
   шрифт в 285px рамка изглеждат уголемени и в кадър остава една карта и
   половина — демото се четеше като увеличено, не като телефон. */
.phoneFrame iframe{position:absolute;top:0;left:0;border:0;display:block;
  width:390px;height:calc(var(--fh,616px) / var(--fs,1));
  transform:scale(var(--fs,1));transform-origin:top left}
/* Тих, извън рамката. Етикет на демото, не елемент от продукта. */
.protoLabel{margin:10px auto 0;text-align:center;font-family:'JetBrains Mono';
  font-size:var(--t0);line-height:1.5;letter-spacing:.2px;color:var(--txq);opacity:.8}
.tryList{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.tryList li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--tx2);line-height:1.55}
.tryList .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brass);
  color:var(--onBrass);display:grid;place-items:center;font-family:'JetBrains Mono';font-size:12px;
  margin-top:1px}
.tryList b{color:var(--tx);font-weight:700}
.demoNote{display:flex;gap:10px;margin-top:20px;padding:13px 14px;background:var(--surf2);
  border-radius:var(--r-ctl);font-size:13px;color:var(--tx2);line-height:1.55}
.demoNote svg{width:17px;height:17px;color:var(--brass);flex:none;margin-top:2px;
  stroke:currentColor;fill:none;stroke-width:1.9}

/* Плаващ пряк път към демото. Най-силното нещо на страницата, на един допир
   отвсякъде — човек със сканиран QR иска продукта, не аргумента за него. */
.demoJump{position:fixed;right:16px;bottom:16px;z-index:85;display:inline-flex;align-items:center;
  gap:8px;height:48px;padding:0 18px 0 15px;border-radius:999px;background:var(--brass);
  color:var(--onBrass);font-weight:700;font-size:14px;
  box-shadow:0 10px 26px -10px rgba(31,24,21,.5);opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .25s ease,transform .25s var(--sp)}
.demoJump.on{opacity:1;transform:none;pointer-events:auto}
.demoJump svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:760px){.demoJump{bottom:84px}}
@media(prefers-reduced-motion:reduce){.demoJump{transition:none}}

/* ── SECTIONS ── */
section{padding:var(--s7) 0}
.sh{max-width:660px;margin-bottom:62px}
@media(max-width:700px){.sh{margin-bottom:42px}}
/* eyebrowFor() от brand.ts: дребен, главни букви, щедро разреден моно. */
.sh .lab{font-family:'JetBrains Mono';font-size:var(--t1);letter-spacing:2.4px;
  color:var(--brass2);text-transform:uppercase;margin-bottom:var(--s3)}
.sh h2{font-family:'Golos Text',system-ui,sans-serif;font-size:clamp(29px,4.5vw,44px);
  font-weight:800;line-height:1.1;margin:0 0 15px;letter-spacing:-.022em}
.sh p{color:var(--tx2);font-size:var(--t3);margin:0;line-height:1.65}
.alt{background:var(--ink2)}

/* ── PAIN ── */
/* Без кутии. Едра брас цифра, текстът до нея, и въздух между трите — йерархията
   идва от тежест и разстояние, не от рамки и линии. */
/* ── Проблемът: едно изявление ───────────────────────────────────────────────
   Цифрите са зададени с обводка, не с плътен цвят: плътен блок в месинг под
   текста го прави нечетим, а обводката говори същия език като пръстена и
   оставя текста най-отгоре. Цифрите излизат извън секцията нарочно; реже ги
   общото `section{overflow:hidden}` по-горе, не отделно правило тук. */
.stmt{max-width:1000px}
.stmt .lab{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:2.4px;
  color:var(--brass2);text-transform:uppercase;margin-bottom:18px}
.stmtLead{font-size:var(--t6);font-weight:800;letter-spacing:-.034em;
  line-height:1;margin:0 0 var(--s5);color:var(--tx);max-width:13ch}
.frag{position:relative;isolation:isolate;font-size:var(--t3);line-height:1.62;
  color:var(--tx2);margin:0 0 var(--s4);max-width:62ch}
.frag b{color:var(--tx);font-weight:700}
.frag::before{content:attr(data-n);position:absolute;left:-.24em;top:-.12em;
  transform:translate(-100%,0);z-index:-1;pointer-events:none;
  font-size:clamp(64px,9vw,124px);font-weight:800;letter-spacing:-.055em;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px rgba(150,112,42,.26)}
.stmtEnd{font-size:var(--t4);line-height:1.3;font-weight:800;
  letter-spacing:-.02em;color:var(--tx);margin:var(--s6) 0 0 auto;max-width:19ch;
  padding-left:clamp(0px,6vw,90px)}
.stmtEnd::before{content:'';display:block;width:56px;height:1px;background:var(--brass);
  opacity:.5;margin-bottom:var(--s3)}
/* Под 1080px няма поле вляво за цифрата, затова тя минава зад текста —
   наполовина извън екрана, по-тънка, за да не спори с четенето. */
@media(max-width:1080px){
  .frag::before{left:-.18em;transform:translate(-100%,-.08em);
    -webkit-text-stroke-width:1.4px;font-size:clamp(58px,7.6vw,96px)}
}
/* Под 620px няма никакво поле вляво и цифрата няма къде да отиде, без да е
   върху текста. Затова там я няма изобщо: по-добре без нея, отколкото зад
   думите. */
@media(max-width:620px){.frag::before{content:none}}
@media(max-width:560px){.stmtEnd{max-width:none}}
/* ── FORM ── */
/* overflow:clip реже светлината отдолу като hidden, но НЕ прави секцията
   скролируем контейнер — иначе лепкавият бутон не се лепи за екрана.
   Стари браузъри падат на hidden и просто нямат лепкав бутон. */
.formSec{background:linear-gradient(165deg,var(--ink2),var(--ink) 70%);position:relative;
  overflow:hidden;overflow:clip}
.formSec::after{content:'';position:absolute;left:-160px;bottom:-180px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,161,101,.13),transparent 62%)}
.formGrid{display:grid;grid-template-columns:1fr 480px;gap:50px;align-items:start;
  position:relative;z-index:2}
@media(max-width:940px){
  .formGrid{grid-template-columns:1fr;gap:34px}
  /* На телефон формата отива най-отгоре. Иначе „Заяви достъп“ те стоварва
     върху рекламния текст и не се вижда нито едно поле. */
  .formGrid>.card{order:-1}
}
.offer{list-style:none;padding:0;margin:26px 0 0}
.offer li{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);
  align-items:flex-start}
.offer li:last-child{border-bottom:0}
.offer .ic{width:30px;height:30px;border-radius:9px;background:rgba(200,161,101,.14);
  display:grid;place-items:center;color:var(--brass);flex:none}
.offer .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.offer b{display:block;font-size:15.5px;margin-bottom:3px}
.offer p{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.55}
.card{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:30px 28px}
@media(max-width:520px){.card{padding:24px 20px}}
.card h3{font-family:'PT Serif',serif;font-size:24px;font-weight:700;margin:0 0 6px}
.card .sub{font-size:14px;color:var(--tx2);margin:0 0 22px}
.fld{margin-bottom:15px}
.fld label{display:block;font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:1.6px;
  color:var(--tx3);text-transform:uppercase;margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--ink);border:1px solid var(--line2);
  border-radius:var(--r-control);padding:13px 15px;color:var(--tx);font-family:inherit;
  font-size:16px;
  outline:none;transition:.18s;min-height:48px}
.fld textarea{min-height:82px;resize:vertical;line-height:1.55}
/* iOS Safari увеличава страницата при фокус, ако полето е под 16px, и после
   не я връща. Полетата са 16px на ВСЯКА ширина — вж. правилото по-горе. */
@media(max-width:760px){
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--brass)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tx3)}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E645C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
  padding-right:42px}
.fld.err input,.fld.err select{border-color:#A6524A}
.fld .msg{font-size:12px;color:#C9776D;margin-top:6px;display:none}
.fld.err .msg{display:block}
.roleRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:400px){.roleRow{grid-template-columns:1fr}}
/* nine roles now: keep the buttons compact so the form stays short */
.roleBtn{padding:var(--s2) var(--s1);border-radius:var(--r-control);
  border:1px solid var(--line2);background:var(--ink);color:var(--tx2);font-family:inherit;
  font-weight:700;font-size:var(--t2);line-height:1.25;cursor:pointer;
  transition:.18s;min-height:48px}
.roleBtn.on{background:rgba(200,161,101,.15);border-color:var(--brass);color:var(--brass)}
/* ── STICKY SUBMIT ──
   Картата е по-висока от екрана на всяко устройство, така че бутонът остава
   долу и хората не го виждат, докато попълват. Затова се лепи за долния ръб.
   Градиентът скрива текста, който минава под него. */
/* ── ПРОЗОРЕЦ С ФОРМАТА ──
   Заглавие и бутон са заковани; скролва се само средата. Така бутонът за
   изпращане не може да излезе от екрана, независимо колко полета има. */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
/* Видимостта НЕ зависи от JS клас или от кадър на анимация — прозорецът се
   вижда в мига, в който падне hidden. Анимацията е само украса. */
.modalVeil{position:absolute;inset:0;background:rgba(8,6,5,.72);backdrop-filter:blur(4px)}
.modalPanel{position:relative;width:100%;max-width:520px;max-height:min(88vh,780px);
  background:var(--surf);border:1px solid var(--line2);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.85)}
.modal:not([hidden]) .modalPanel{animation:panelIn .26s var(--sp)}
/* Само transform, никога opacity: ако анимацията не се изпълни, прозорецът
   стои 14px по-надолу вместо да е невидим. */
@keyframes panelIn{from{transform:translateY(14px)}to{transform:none}}
.modalHead{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 16px;flex:none;
  border-bottom:1px solid var(--line)}
.modalHead h3{font-family:'PT Serif',serif;font-size:23px;font-weight:700;margin:0 0 4px}
.modalHead .sub{font-size:13.5px;color:var(--tx2);margin:0}
.modalX{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:0;
  background:var(--surf2);color:var(--tx2);cursor:pointer;display:grid;place-items:center;
  transition:.18s}
.modalX:hover{background:var(--line2);color:var(--tx)}
.modalX svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round}
.modalBody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 24px 8px;
  overscroll-behavior:contain}
.modalFoot{flex:none;padding:16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surf)}
.modalFoot .formFoot{margin-top:11px}
/* след успешно изпращане остава само потвърждението */
#formBody.hide,#formBody.hide ~ .modalFoot{display:none}
body.modalOpen{overflow:hidden}
body.modalOpen .mcta{opacity:0;pointer-events:none}
/* на телефон прозорецът заема целия екран — максимум място за полетата */
@media(max-width:640px){
  .modal{padding:0}
  .modalPanel{max-width:none;max-height:none;height:100%;border-radius:0;border:0}
  .modalHead{padding:16px 18px 14px}
  .modalBody{padding:16px 18px 8px}
  .modalFoot{padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
}

/* блокът, който отваря прозореца */
.joinBox{text-align:center}
.joinBox h3{font-family:'PT Serif',serif;font-size:24px;font-weight:700;margin:0 0 8px}
.joinBox .sub{font-size:14.5px;color:var(--tx2);margin:0 0 22px}
.joinNote{display:block;font-size:12.5px;color:var(--tx2);margin-top:14px;line-height:1.5}
.formFoot{font-size:12px;color:var(--tx2);line-height:1.55;margin-top:14px}
/* ── CONSENT CHECKBOX ── */
.consent{margin-top:4px}
.cbx{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-family:'Golos Text',system-ui,sans-serif;text-transform:none;letter-spacing:0}
.cbx input{position:absolute;opacity:0;width:0;height:0}
.cbx .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line2);
  background:var(--ink);flex:none;margin-top:1px;display:grid;place-items:center;
  transition:.16s}
.cbx .box::after{content:'';width:11px;height:6px;border-left:2.2px solid var(--onBrass);
  border-bottom:2.2px solid var(--onBrass);transform:rotate(-45deg) translate(1px,-1px) scale(.5);
  opacity:0;transition:.16s}
.cbx input:checked + .box{background:var(--brass);border-color:var(--brass)}
.cbx input:checked + .box::after{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.cbx input:focus-visible + .box{outline:2px solid var(--brass);outline-offset:3px}
.cbx .txt{font-size:13px;line-height:1.55;color:var(--tx2)}
.cbx .txt a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.consent.err .box{border-color:#A6524A}

/* honeypot: off-screen for people, visible to bots that fill every field */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* shown only when delivery actually failed */
.failMsg{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;
  background:rgba(201,132,63,.10);border:1px solid var(--warn)}
.failMsg.on{display:block;animation:fade .3s var(--sp)}
.failMsg b{display:block;font-size:14.5px;color:var(--warn);margin-bottom:4px}
.failMsg p{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.55}
.failMsg a{color:var(--brass);font-weight:700;white-space:nowrap}
.ok{text-align:center;padding:30px 10px;display:none}
.ok.on{display:block;animation:fade .4s var(--sp)}
.ok .ring2{width:66px;height:66px;border-radius:50%;border:2px solid var(--brass);
  display:grid;place-items:center;margin:0 auto 18px}
.ok .ring2 svg{width:30px;height:30px;stroke:var(--brass);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.ok h4{font-family:'PT Serif',serif;font-size:23px;margin:0 0 9px}
.ok p{color:var(--tx2);font-size:var(--t2);margin:0;line-height:1.6}
.formBody.hide{display:none}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:40px 0 34px;background:var(--ink2)}
.fgrid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer .brand{margin-bottom:10px}
footer p{color:var(--tx2);font-size:var(--t2);margin:0;max-width:38ch;line-height:1.6}
.fmeta{font-family:'JetBrains Mono';font-size:var(--t1);color:var(--txq);text-align:right}
@media(max-width:640px){.fmeta{text-align:left}}
.social{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:9px 16px 9px 13px;
  border:1px solid var(--line2);border-radius:999px;font-size:var(--t2);font-weight:600;
  color:var(--tx2);transition:.2s var(--sp)}
.social:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
.social svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.flegal{display:flex;gap:16px;justify-content:flex-end;margin-top:12px}
@media(max-width:640px){.flegal{justify-content:flex-start}}
.flegal a{color:var(--tx2);text-decoration:underline;text-underline-offset:3px}
.flegal a:hover{color:var(--brass)}

/* ── LEGAL PAGES (privacy.html, terms.html) ── */
.legal{padding:120px 0 70px;max-width:760px}
.legal .back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--tx2);margin-bottom:26px}
.legal .back:hover{color:var(--brass)}
.legal h1{font-size:clamp(30px,5vw,42px);max-width:none;margin-bottom:10px}
.legal .upd{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1.4px;
  color:var(--tx3);text-transform:uppercase;margin:0 0 34px}
.legal h2{font-family:'PT Serif',serif;font-size:22px;font-weight:700;line-height:1.25;
  margin:36px 0 12px;letter-spacing:-.01em}
.legal h3{font-size:var(--t3);font-weight:700;margin:22px 0 7px}
.legal p{color:var(--tx2);font-size:15.5px;line-height:1.72;margin:0 0 13px}
.legal ul{color:var(--tx2);font-size:15.5px;line-height:1.72;padding-left:20px;margin:0 0 13px}
.legal li{margin-bottom:7px}
.legal a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}
.legal strong{color:var(--tx)}
.legal table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
.legal th,.legal td{border:1px solid var(--line);padding:10px 13px;text-align:left;
  vertical-align:top;color:var(--tx2)}
.legal th{background:var(--surf);color:var(--tx);font-weight:700}
.legal .tableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* На телефон трите колони стават нечетими, ако се сместят в 340px.
   По-добре таблицата да се плъзга настрани в своята кутия. */
@media(max-width:640px){
  .legal table{min-width:520px}
}

/* ── STICKY MOBILE CTA ── */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(245,241,234,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
@media(max-width:760px){.mcta{display:flex}body{padding-bottom:80px}}
.mcta.hide{transform:translateY(120%);opacity:0;pointer-events:none}
.mcta .btn{flex:1}
/* Няма смисъл да предлагаме „Заяви достъп“, докато човекът стои във формата —
   лентата само заема мястото, където трябва да е бутонът за изпращане. */
.mcta{transition:transform .3s var(--sp),opacity .22s ease}

/* ══════════ ВЛИЗАНЕ ПО СЕКЦИИ ══════════
   Всяка секция влиза различно, за да не чете страницата като един дълъг
   еднакъв документ. Правилата:

   - веднъж, при влизане във видимото поле, после наблюдателят пуска елемента
   - само opacity и transform, тоест само композиторът — нищо, което кара
     браузъра да преизчислява разположение на всеки кадър
   - нищо не се върти в кръг освен марката (виж docs/known-gaps.md)
   - Reduce Motion получава готовото състояние, не по-кратка анимация

   Маската «избърсване нагоре» е transform на вътрешен слой в кутия с overflow:
   hidden, а не clip-path. Изглежда еднакво и не изпуска кадри на среден
   Android. */
.rv,.rvL,.rvR,.rvF,.rvM>*{
  opacity:0;
  transition:opacity .72s ease var(--d,0s),transform .72s var(--sp) var(--d,0s)}
.rv{transform:translateY(26px)}                 /* изплува отдолу */
.rvL{transform:translateX(-34px)}               /* влиза отляво */
.rvR{transform:translateX(34px)}                /* влиза отдясно */
.rvF{transform:none}                            /* само избледняване */
.rvM{overflow:hidden}
.rvM>*{transform:translateY(100%);opacity:1}    /* избърсване нагоре */

.rv.seen,.rvL.seen,.rvR.seen,.rvF.seen{opacity:1;transform:none}
.rvM.seen>*{transform:none}

/* ── ГРЪБНАКЪТ ──
   KRUG значи кръг, а страницата досега показваше пръстен пет пъти и не значеше
   нищо с него. Сега е един: закован, зад всичко, и се отваря докато слизаш.

   Затворен в хероя. Отваря се на «проблемът» — това е разказът: кръгът още не е
   затворен около теб. Най-отворен при функциите. Отдръпва се почти до нула на
   демото, защото онази секция вече има пулсиращ кант и движещ се пръст и не ѝ
   трябва четвърто движещо се нещо. Затваря се пак при формата: заявяваш достъп
   и кръгът се затваря.

   Само stroke-dashoffset, rotate и scale — композиторът, без слушател по скрол
   и без нищо, което се смята на кадър. */
#spine{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
#spine circle{fill:none;stroke:var(--brass);vector-effect:non-scaling-stroke;
  transform-origin:500px 500px;
  transition:stroke-dashoffset 1.5s var(--sp),opacity 1.1s ease,
    transform 1.6s var(--sp),stroke-width 1.1s ease}
/* 2π×380 и 2π×286, закръглени. */
.sp1{stroke-dasharray:2388;stroke-width:1.6}
.sp2{stroke-dasharray:1797;stroke-width:1.1}

/* Затворен: пълен кръг, едва видим. */
#spine{--o1:0;--o2:0;--op:.10;--rot:0deg;--sc:1}
/* Без stroke-dashoffset тук: «#spine circle» бие «.sp1» по специфичност, така
   че нулата печелеше и пръстенът никога не се отваряше. Точно класът, за който
   казах, че «Отблизо» не беше. */
#spine circle{opacity:var(--op);transform:rotate(var(--rot)) scale(var(--sc))}
#spine .sp1{stroke-dashoffset:var(--o1)}
#spine .sp2{stroke-dashoffset:var(--o2)}

html[data-spine="hero"]    #spine{--o1:0;--o2:0;--op:.10;--rot:0deg;--sc:1}
html[data-spine="problem"] #spine{--o1:600;--o2:300;--op:.14;--rot:-14deg;--sc:1.1}
html[data-spine="funkcii"] #spine{--o1:1100;--o2:760;--op:.16;--rot:-30deg;--sc:1.22}
html[data-spine="demo"]    #spine{--o1:1300;--o2:900;--op:.02;--rot:-38deg;--sc:1.3}
html[data-spine="polzi"]   #spine{--o1:820;--o2:520;--op:.15;--rot:-52deg;--sc:1.16}
html[data-spine="dostap"]  #spine{--o1:0;--o2:0;--op:.20;--rot:-72deg;--sc:1}

@media(prefers-reduced-motion:reduce){
  #spine circle{transition:none;stroke-dashoffset:0;transform:none;opacity:.09}}

section{position:relative;overflow:hidden}
section>.wrap{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .rv,.rvL,.rvR,.rvF,.rvM>*{opacity:1;transform:none;transition:none}
  }

/* ══════════════════════════════════════════════════════════════════════════
   ОТВЪН И ВЪТРЕ
   --------------------------------------------------------------------------
   Страницата е врата, не брошура. Горе е бранша, както е днес — светло,
   разпръснато, без нищо, което да го държи. Под демото се влиза, и към края
   се обръща на тъмно: това е аргументът, казан с цвят, преди текстът да го е
   казал.

   Регистърът е на техническа таблица: глава, номер, фигура. Така изглежда
   инструмент за работа. Никаква карта: карта е кутия около текст и прави
   всяка секция еднаква с всяка друга.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Глава ─────────────────────────────────────────────────────────────── */
.chap{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.chap span{font-family:'JetBrains Mono';font-size:var(--t1);letter-spacing:2.4px;
  text-transform:uppercase;color:var(--brass2);white-space:nowrap}
.chap i{flex:1;height:1px;background:currentColor;opacity:.16;color:var(--tx)}
.chap em{font-family:'JetBrains Mono';font-size:var(--t1);letter-spacing:2.4px;
  font-style:normal;color:var(--txq)}
.chapH{font-size:var(--t5);font-weight:800;letter-spacing:-.032em;line-height:1.04;
  margin:0 0 var(--s6);max-width:15ch}
.chapH b{color:var(--brass);font-weight:800}

/* ── Разтворът: фигури, не редове ──────────────────────────────────────────
   Три екрана в три различни ширини, на редуващи се страни, с текст, който
   тече около тях. `shape-outside` е причината да изглежда набрано, а не
   подредено: буквите следват ъгъла на телефона вместо да спрат в колона. */
.spread{max-width:1040px}
.fig{position:relative;margin:0 0 var(--s7)}
.fig:last-child{margin-bottom:0}
.fig::after{content:'';display:block;clear:both}
.figN{position:absolute;top:-4px;left:0;font-family:'JetBrains Mono';font-size:var(--t1);
  letter-spacing:2.4px;font-style:normal;color:var(--txq)}
.figShot{float:left;width:var(--w,250px);height:var(--h,330px);margin:30px 40px 24px 0;
  border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--surf2);
  shape-outside:inset(30px 40px 24px 0 round 26px);shape-margin:16px}
.fig:nth-child(2) .figShot{float:right;margin:30px 0 24px 40px;
  shape-outside:inset(30px 0 24px 40px round 26px)}
.fig:nth-child(1){--w:264px;--h:360px}
.fig:nth-child(2){--w:230px;--h:212px;padding-left:7%}
.fig:nth-child(3){--w:172px;--h:188px;padding-left:15%}
.figShot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.fig figcaption{padding-top:30px}
.fig .ic{display:inline-flex;width:26px;height:26px;color:var(--brass);margin-bottom:14px}
.fig .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fig h3{font-size:var(--t4);font-weight:800;letter-spacing:-.02em;
  line-height:1.18;margin:0 0 var(--s2)}
.fig p{font-size:var(--t3);line-height:1.68;color:var(--tx2);margin:0}
@media(max-width:720px){
  /* На телефон обтичането е нечетимо: колоната е тясна и думите остават по
     две на ред. Екранът минава над текста и заема цялата ширина. */
  .figShot,.fig:nth-child(2) .figShot{float:none;width:min(226px,64%);height:250px;
    margin:14px 0 22px;shape-outside:none}
  .fig:nth-child(3) .figShot{height:200px}
  /* На тесен екран номерът няма поле над екрана и лягаше върху него. */
  .figN{position:static;display:block;margin-bottom:6px}
  .fig:nth-child(2),.fig:nth-child(3){padding-left:0}
  .fig figcaption{padding-top:0}
}

/* ── За теб: подредба, не карти ────────────────────────────────────────────
   Ползите са таблица: твърдение вляво, обяснение вдясно, тънка линия между
   редовете. Различна форма и от изявлението горе, и от разтвора над него. */
.gains{list-style:none;margin:0;padding:0;max-width:940px;counter-reset:g}
.gain{counter-increment:g;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:var(--s2) var(--s6);padding:var(--s5) 0 var(--s4);border-top:1px solid var(--line);
  align-items:baseline}
.gain:last-child{border-bottom:1px solid var(--line)}
.gain b{position:relative;font-size:var(--t4);font-weight:800;
  letter-spacing:-.018em;line-height:1.22}
.gain b::before{content:'0' counter(g);position:absolute;left:0;top:-1.55em;
  font-family:'JetBrains Mono';font-size:var(--t1);letter-spacing:1px;color:var(--txq);
  font-weight:400}
.gain p{margin:0;font-size:var(--t3);line-height:1.66;color:var(--tx2)}
@media(max-width:820px){
  .gain{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .gain b::before{position:static;display:block;margin-bottom:8px}
}

.audSwap{margin:var(--s5) 0 0;font-size:var(--t2);color:var(--tx2)}
.audSwap button{background:none;border:0;padding:0;font:inherit;color:var(--brass);
  font-weight:700;cursor:pointer;border-bottom:1px solid rgba(150,112,42,.42)}
@media(hover:hover){.audSwap button:hover{border-bottom-color:var(--brass)}}

/* ── Влез: обръщането ──────────────────────────────────────────────────────
   Единственото друго тъмно място на страницата освен демото, и това е нарочно:
   демото ти показва вътрешността, а тази секция е вратата към нея. */
.inside{background:#151210;color:#F0EAE1;position:relative}
.inside::before{content:'';position:absolute;right:-14%;top:50%;
  width:min(660px,74vw);aspect-ratio:1;transform:translateY(-50%);
  border:1px solid rgba(200,161,101,.30);border-radius:50%;
  border-right-color:transparent;border-top-color:rgba(200,161,101,.10);
  pointer-events:none}
@media(max-width:820px){.inside::before{right:-38%;opacity:.7}}
.inside .chap i{color:#F0EAE1;opacity:.2}
.inside .chap span{color:#C8A165}
.inside .chap em{color:var(--txq-dark)}
.inside .chapH{color:#FBF7F1;max-width:15ch}
.qa{max-width:1000px;columns:2;column-gap:clamp(40px,6vw,80px)}
@media(max-width:840px){.qa{columns:1}}
.qa p{break-inside:avoid;margin:0 0 var(--s4);font-size:var(--t3);line-height:1.72;
  color:rgba(240,234,225,.76)}
.qa b{display:block;color:#FBF7F1;font-weight:700;margin-bottom:5px}
.enter{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.enter span{font-size:var(--t2);color:var(--txq-dark);max-width:30ch}
.btn.big{font-size:var(--t3);padding:var(--s3) calc(var(--s3) * 1.6);min-height:56px}