/* Лендинг Стенио. Токены и приёмы — те же, что у кабинета (`docs/design/tokens.css`):
   Nunito Sans, чернила #060A1C, пилюли, контурные иконки. Шрифт объявлен здесь второй раз
   ОСОЗНАННО: лендинг — статика вне сборки кабинета, а файлы шрифта те же, из `web/public/fonts`.
   Собрано из макета `design-keep/landing/landing-full-2026-09-04.html` скриптом build-landing.py. */
/* Гарнитура кабинета. Файлы собирает `scripts/fetch-font.sh`, лицензия — рядом в `OFL.txt`.
   ⛔ Здесь шрифт только ОБЪЯВЛЯЕТСЯ. Назначает его `docs/design/tokens.css` (`--p-font-ui`), и
   второго места с `font-family` в продукте быть не должно — это сторожит охранка. */

/* Кириллица — основной алфавит интерфейса. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/app/fonts/nunito-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Латиница вместе с ЦИФРАМИ (U+0030-0039 внутри U+0000-00FF) — грузится всегда, даже на русском. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/app/fonts/nunito-sans-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;
}

/* ⛔ Знак рубля отдельным файлом. В подмножестве `latin` его НЕТ (там евро U+20AC), он лежит в
   `latin-ext` — тащить оттуда всё значит +27 КБ ради одного глифа. Без этого правила «574 ₽» на
   экране счёта рисуется смешанно: цифры наши, знак системный. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/app/fonts/nunito-sans-rub.woff2') format('woff2');
  unicode-range: U+20BD;
}

  :root{--ink:#060A1C; --ink-700:#3D4557; --ink-500:#616976; --ink-300:#9AA3B4;
    --ink-200:#C2C9D6; --ink-100:#EDEFF3; --ink-050:#F3F4F8;
    --paper:#FFFFFF; --cream:#F9F2E2; --cream-2:#F2E8D0; --cream-ink:#E9DDBF;
    --lift:0 1px 2px rgba(6,10,28,.05), 0 14px 40px -18px rgba(6,10,28,.22);
    --lift-pill:0 10px 34px -12px rgba(6,10,28,.34);
    --font:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --w:1160px;
    color-scheme: light;}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
  h1,h2,h3,p{margin:0}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
  svg{display:block}
  mark{background:var(--cream-2);color:inherit;border-radius:3px;padding:0 2px}
  .num{font-variant-numeric:tabular-nums}
  .variant[hidden]{display:none}
  /* ---------- общие детали лендинга ---------- */
  .nav{max-width:none;margin:0;padding:22px 32px;display:flex;align-items:center;gap:28px}
  .nav__brand{display:flex;align-items:center;gap:10px}
  .nav__brand svg{height:30px;width:auto}
  .nav__links{display:flex;gap:22px;font-size:15px;font-weight:600;color:var(--ink-700);margin-left:14px}
  .nav__cta{margin-left:auto;display:flex;gap:10px;align-items:center}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:700;font-size:15px;line-height:1;white-space:nowrap;transition:transform .12s, box-shadow .12s}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .btn--ink{background:var(--ink);color:#fff;box-shadow:0 6px 20px -8px rgba(6,10,28,.5)}
  .btn--ghost{border:1px solid var(--ink-200);background:transparent;color:var(--ink)}
  .btn--cream{background:var(--cream);color:var(--ink)}
  .btn--sm{padding:9px 14px;font-size:14px}
  .btn svg{width:16px;height:16px}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
  .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  /* ---------- вариант A · «Витрина» ---------- */
  .vA .hero{max-width:var(--w);margin:0 auto;padding:36px 24px 56px;display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr);gap:48px;align-items:center}
  .vA h1{font-size:clamp(36px,4.6vw,56px);font-weight:700;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
  .vA .lead{font-size:18.5px;line-height:1.5;color:var(--ink-700);margin-top:22px;max-width:44ch;text-wrap:pretty}
  .vA .cta{display:grid;grid-template-columns:auto auto;width:max-content;max-width:100%;gap:10px;margin-top:28px}
  .vA .cta .btn{justify-content:center}
  .vA .cta .btn:nth-child(3){grid-column:1/-1}
  .vA .fine{margin-top:16px;font-size:14px;color:var(--ink-500)}
  .vA .facts{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;max-width:520px}
  .vA .fact{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.35}
  .vA .fact b{display:block;font-weight:700}
  .vA .fact span{color:var(--ink-500)}
  .vA .fact svg{flex:none;margin-top:1px}
  .cab{background:var(--paper);border-radius:18px;box-shadow:var(--lift);padding:18px 18px 8px;position:relative;min-height:470px}
  .cab__top{display:flex;align-items:center;gap:10px}
  .cab__mark{width:26px;height:26px;color:var(--ink)}
  .cab__mark svg{width:100%;height:100%}
  .search{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--ink-200);border-radius:999px;padding:9px 14px;font-size:15px;color:var(--ink)}
  .search svg{width:18px;height:18px;flex:none;color:var(--ink-500)}
  .search .q{min-width:2px}
  .search .caret{width:1.5px;height:17px;background:var(--ink);animation:blink 1s steps(2) infinite}
  .search .ph{color:var(--ink-300)}
  .ask{border:1px solid var(--ink-200);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700;white-space:nowrap}
  .chips{display:flex;gap:6px;margin:12px 0 6px;flex-wrap:wrap}
  .chip{font-size:12.5px;font-weight:700;color:var(--ink-700);border:1px solid var(--ink-100);background:var(--ink-050);border-radius:999px;padding:4px 10px}
  .chip--on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .count{font-size:12.5px;color:var(--ink-500);margin-left:auto;align-self:center}
  .rows{display:flex;flex-direction:column}
  .row{border-top:1px solid var(--ink-100);padding:12px 4px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;overflow:hidden;transition:opacity .35s, max-height .45s cubic-bezier(.2,.7,.2,1), padding .45s;max-height:120px}
  .row.out{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-top-width:0}
  .row__t{font-weight:700;font-size:15px}
  .row__d{font-size:13px;color:var(--ink-500);text-align:right;white-space:nowrap}
  .row__s{grid-column:1/-1;font-size:13.5px;color:var(--ink-700);line-height:1.4}
  .row__meta{grid-column:1/-1;display:flex;gap:8px;font-size:12px;color:var(--ink-500)}
  .row__meta i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
  .row__meta svg{width:13px;height:13px}
  .row.open{max-height:360px}
  .lines{grid-column:1/-1;display:none;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--ink-100)}
  .row.open .lines{display:flex}
  .line{display:grid;grid-template-columns:44px 76px 1fr;gap:10px;font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(4px);animation:rise .4s forwards}
  .line:nth-child(2){animation-delay:.35s}
  .line:nth-child(3){animation-delay:.7s}
  .line .tc{color:var(--ink-300);font-size:12px;padding-top:2px}
  .line .who{font-weight:700}
  .line .who.a{border-left:3px solid var(--ink);padding-left:6px}
  .line .who.b{border-left:3px solid var(--ink-300);padding-left:6px}
  .player{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:var(--paper);border-radius:999px;box-shadow:var(--lift-pill);padding:8px 14px 8px 8px;display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
  .player .pl{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
  .player .pl svg{width:12px;height:12px;fill:#fff;stroke:none}
  .doors{border-top:1px solid var(--ink-100);background:var(--ink-025, #F6F7FA)}
  .doors__in{max-width:var(--w);margin:0 auto;padding:36px 24px 44px}
  .doors__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px}
  .doors__head h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
  .doors__head p{color:var(--ink-500);font-size:15px}
  .doors__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .door{background:var(--paper);border-radius:14px;box-shadow:var(--lift);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;min-height:150px}
  .door__ic{width:36px;height:36px;border-radius:10px;background:var(--cream);display:grid;place-items:center}
  .door b{font-size:15.5px;font-weight:700}
  .door span{font-size:13.5px;color:var(--ink-500);line-height:1.4}
  .door em{font-style:normal;font-size:12px;color:var(--ink-700);font-weight:700;margin-top:auto}
  .q{display:flex;flex-direction:column;gap:6px}
  .q__i{display:flex;justify-content:space-between;font-size:13px}
  .q__i .st{color:var(--ink-500)}
  .q__b{height:4px;background:var(--ink-100);border-radius:2px;overflow:hidden}
  .q__b i{display:block;height:100%;background:var(--ink);width:0;animation:grow2 5s linear infinite}
  /* ---------- слой движения ---------- */
  .variant{animation:vin .5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .in{animation:in .8s cubic-bezier(.2,.7,.2,1) both}
  .in-1{animation-delay:.08s}
  .in-2{animation-delay:.18s}
  .in-3{animation-delay:.3s}
  .in-4{animation-delay:.42s}
  .in-5{animation-delay:.54s}
  .in-6{animation-delay:.7s}
  @keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .cab{animation:cabIn 1s .45s cubic-bezier(.2,.7,.2,1) both}
  @keyframes cabIn{from{opacity:0;transform:translateY(34px) scale(.965)}to{opacity:1;transform:none}}
  .row.in{animation:in .55s cubic-bezier(.2,.7,.2,1) both}
  .row.in:nth-child(1){animation-delay:.9s}
  .row.in:nth-child(2){animation-delay:1s}
  .row.in:nth-child(3){animation-delay:1.1s}
  .row.in:nth-child(4){animation-delay:1.2s}
  .row.in:nth-child(5){animation-delay:1.3s}
  @keyframes pop{from{opacity:0;transform:translate(-50%,14px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
  .row{transition:opacity .35s, max-height .45s cubic-bezier(.2,.7,.2,1), padding .45s, background .2s}
  .row:hover{background:var(--ink-025,#F6F7FA)}
  .eq{display:flex;gap:2px;align-items:flex-end;height:14px}
  .eq i{width:2px;border-radius:1px;background:var(--ink);height:30%;animation:eq .8s ease-in-out infinite alternate}
  .eq i:nth-child(2){animation-delay:-.2s;height:70%}
  .eq i:nth-child(3){animation-delay:-.45s;height:100%}
  .eq i:nth-child(4){animation-delay:-.1s;height:55%}
  .eq i:nth-child(5){animation-delay:-.6s;height:80%}
  @keyframes eq{to{transform:scaleY(.35)}}
  .btn:hover{transform:translateY(-1px)}
  .btn--ink:hover{box-shadow:0 12px 28px -10px rgba(6,10,28,.55)}
  .btn--cream:hover{box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
  .door{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
  .door:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(6,10,28,.05), 0 24px 48px -20px rgba(6,10,28,.3)}
  html.js .rv:not(.rv--on){opacity:0;transform:translateY(18px)}
  .rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv--on{opacity:1;transform:none}
  .rv:nth-child(2){transition-delay:.08s}
  .rv:nth-child(3){transition-delay:.16s}
  .rv:nth-child(4){transition-delay:.24s}
  /* B: карточки вылетают из центра{animation:fly .9s cubic-bezier(.2,.8,.2,1) both;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  /* C: лист выезжает{animation:sheetIn 1s .5s cubic-bezier(.2,.7,.2,1) both}
  /* ---------- A: кольцо сцен ---------- */
  .demo{position:relative}
  .cab{min-height:0;height:600px;padding:0}
  .scene{position:absolute;inset:0;padding:18px 18px 8px;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none;overflow:hidden;border-radius:18px}
  .scene.on{opacity:1;transform:none;pointer-events:auto}
  .player{opacity:0;transform:translate(-50%,12px) scale(.94);transition:opacity .45s, transform .5s cubic-bezier(.3,1.4,.4,1)}
  .cab[data-scene="3"] .player{opacity:1;transform:translate(-50%,0) scale(1)}
  .story{display:flex;gap:8px;margin-top:30px;padding:0 4px}
  .story__i{flex:1;text-align:left;font-size:12.5px;font-weight:700;color:var(--ink-300);padding-top:8px;position:relative;transition:color .3s}
  .story__i i{display:block;height:2px;background:var(--ink-100);border-radius:1px;margin-bottom:8px;overflow:hidden;position:relative}
  .story__i i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
  .story__i.done{color:var(--ink-500)}
  .story__i.done i::after{width:100%}
  .story__i.now{color:var(--ink)}
  .story__i.now i::after{width:100%;transition:width var(--dur,6s) linear}
  .story__i i::after{transition:none}
  .story__i:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
  .msg{max-width:82%;border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.45;opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1)}
  .msg.on{opacity:1;transform:none}
  .msg .time{font-size:11px;opacity:.55;margin-top:4px;text-align:right}
  .file{display:flex;gap:10px;align-items:center}
  .file__ic{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
  .file__ic svg{color:#fff}
  .file b{display:block;font-weight:700}
  .file span{font-size:12px;opacity:.7}
  .steps{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
  .step{display:flex;gap:9px;align-items:center;color:var(--ink-300);transition:color .3s}
  .step i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-200);display:grid;place-items:center;flex:none;box-sizing:border-box;transition:background .3s,border-color .3s}
  .step.done{color:var(--ink-700)}
  .step.done i{background:var(--ink);border-color:var(--ink)}
  .step.done i::after{content:"";width:7px;height:3.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
  .step.now{color:var(--ink);font-weight:700}
  .step.now i{border-color:var(--ink);border-top-color:transparent;animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
  .btns span{border:1px solid var(--ink-200);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;background:#fff;color:var(--ink)}
  .mini{position:absolute;inset:0;background:var(--ink-050);border-radius:18px;overflow:hidden}
  .mini__tag{position:absolute;left:16px;top:16px;width:100px;font-size:12.5px;font-weight:700;color:var(--ink-500);line-height:1.35}
  .phone{position:absolute;left:calc(50% + 28px);top:28px;transform:translateX(-50%) translateY(30px);width:288px;height:calc(100% - 28px);background:#fff;border-radius:24px 24px 0 0;box-shadow:0 1px 2px rgba(6,10,28,.05), 0 -14px 40px -18px rgba(6,10,28,.3);display:flex;flex-direction:column;opacity:0;transition:opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1)}
  .scene.on .phone{opacity:1;transform:translateX(-50%) translateY(0)}
  .phone__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;font-size:13px;color:var(--ink-500);border-bottom:1px solid var(--ink-100)}
  .phone__bar b{color:var(--ink);font-weight:700;font-size:14px}
  .phone__shots{position:relative;flex:1;overflow:hidden}
  .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .45s}
  .shot.on{opacity:1}
  .tap{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(6,10,28,.16);border:2px solid var(--ink);opacity:0;transform:scale(.4);pointer-events:none}
  .tap.on{animation:tapAnim .75s cubic-bezier(.2,.7,.2,1)}
  @keyframes tapAnim{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
  .search--sm{padding:7px 12px;font-size:13.5px}
  .web{display:flex;flex-direction:column;gap:14px;height:100%}
  .web__h{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--ink-100)}
  .web__h b{font-size:16px;font-weight:700}
  .web__sub{margin-left:auto;font-size:12.5px;color:var(--ink-500)}
  .drop{border:1.5px dashed var(--ink-200);border-radius:14px;padding:26px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:border-color .3s, background .3s, opacity .4s, transform .4s}
  .drop .ico{width:28px;height:28px;color:var(--ink-500);margin-bottom:4px}
  .drop b{font-size:15px;font-weight:700}
  .drop span{font-size:13px;color:var(--ink-500);max-width:34ch}
  .drop em{margin-top:10px;font-style:normal}
  .drop.hot{border-color:var(--ink);background:var(--ink-025,#F6F7FA)}
  .drop.gone{opacity:.45;transform:scale(.985)}
  .upf{opacity:0;transform:translateY(10px);transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1)}
  .upf.on{opacity:1;transform:none}
  .file--w{color:var(--ink);padding:0 2px}
  .file--w .file__ic{background:var(--cream)}
  .file--w .file__ic svg{color:var(--ink)}
  .file--w span{opacity:1;color:var(--ink-500)}
  .upP{margin-left:auto;font-weight:700;font-size:13px;color:var(--ink)}
  .upbar{height:4px;background:var(--ink-100);border-radius:2px;overflow:hidden;margin:10px 2px 12px}
  .upbar i{display:block;height:100%;width:0;background:var(--ink);transition:width 1.6s cubic-bezier(.3,.6,.3,1)}
  .steps--w{margin-top:0;padding:12px 14px;background:var(--ink-050);border-radius:12px}
  .rec{display:flex;flex-direction:column;gap:8px}
  .rec__k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-top:4px}
  .rec__sum{font-size:14.5px;line-height:1.5;color:var(--ink-700)}
  .rec__sum .caret{display:inline-block;width:1.5px;height:15px;background:var(--ink);vertical-align:-2px;animation:blink 1s steps(2) infinite}
  .rec__lines{display:flex;flex-direction:column;gap:8px}
  .rec__lines .line{opacity:0;transform:translateY(6px);animation:none;transition:opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1)}
  .rec__lines .line.on{opacity:1;transform:none}
  .rec__lines .txt{min-height:1.4em}
  .rec__lines .caret{display:inline-block;width:1.5px;height:14px;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
  .btns--w{margin-top:6px}
  /* ---------- A2 «Теплее»: кремовый холст{background:var(--cream)}
  /* A3: белая страница,карточку держат рамка и тень (решение владельца 04.09) */
  .vA .cab{border:1px solid var(--ink-100);box-shadow:0 2px 4px rgba(6,10,28,.06), 0 36px 80px -30px rgba(6,10,28,.45)}
  /* ---------- A3 «По центру»: заголовок над продуктом,как у Voicenotes ---------- */
  .vA .hero{grid-template-columns:minmax(0,1fr);gap:32px;text-align:center;padding-top:28px}
  .vA h1{font-size:clamp(42px,5.6vw,72px);font-weight:700;letter-spacing:-.035em;max-width:16ch;margin:0 auto;line-height:1}
  .lett{display:block;width:min(640px,86vw);margin:0 auto;padding:0 3%;color:var(--ink);clip-path:inset(0 100% 0 0);animation:write 1.5s .35s cubic-bezier(.3,0,.2,1) forwards}
  .lett svg{display:block;width:100%;height:auto;transform:skewX(-12deg);transform-origin:50% 100%}
  @keyframes write{to{clip-path:inset(0 0 0 0)}}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vA h1{max-width:none}
  .vA .lead{margin:22px auto 0;max-width:52ch;font-size:19px}
  .vA .cta{margin:28px auto 0;grid-template-columns:auto auto auto}
  .vA .cta .btn:nth-child(3){grid-column:auto}
  .vA .fine{margin-top:14px}
  .vA .facts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;max-width:none;margin:22px auto 0}
  .vA .fact{font-size:14px;gap:7px;align-items:center}
  .vA .fact b{display:inline;font-weight:700}
  .vA .fact span{display:none}
  .vA .fact svg{width:18px;height:18px;margin:0;color:var(--ink-500)}
  .vA .demo{max-width:880px;margin:0 auto;width:100%;text-align:left}
  .vA .doors__head{justify-content:center;text-align:center}
  @media (max-width:980px){
    .vA .cta{grid-template-columns:auto auto}
    .vA .cta .btn:nth-child(3){grid-column:1/-1}
  }
  /* ---------- секции ниже первого экрана ---------- */
  .sec{padding:72px 0}
  .sec--tint{background:#F6F7FA;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100)}
  .sec__in{max-width:var(--w);margin:0 auto;padding:0 24px}
  .sec__in--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .sec__head{max-width:640px;margin-bottom:36px}
  .sec h2{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-top:10px;text-wrap:balance}
  .sec__head p{margin-top:12px;font-size:17px;color:var(--ink-700);text-wrap:pretty}
  .sec h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
  .sec p{line-height:1.5}
  .steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .step3{position:relative;display:flex;flex-direction:column;gap:10px}
  .step3__n{position:absolute;left:14px;top:14px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
  .step3__frag{background:var(--paper);border:1px solid var(--ink-100);border-radius:16px;padding:52px 18px 18px;height:236px;overflow:hidden;box-shadow:var(--lift);margin-bottom:8px;display:flex;flex-direction:column;justify-content:center}
  .step3 p{font-size:15px;color:var(--ink-700)}
  .frag-drop{border:1.5px dashed var(--ink-200);border-radius:12px;padding:14px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
  .frag-drop .ico{width:24px;height:24px;color:var(--ink-500);margin-bottom:4px}
  .frag-drop b{font-size:14px;font-weight:700}
  .frag-drop span{font-size:12.5px;color:var(--ink-500)}
  .frag-tr{display:flex;flex-direction:column;gap:8px}
  .frag-tr__sum{font-size:13px;color:var(--ink-700);line-height:1.4;padding-bottom:8px;border-bottom:1px dashed var(--ink-100)}
  .frag-tr .line{opacity:1;transform:none;animation:none;font-size:13px;grid-template-columns:38px 60px 1fr;gap:8px}
  .frag-search{display:flex;flex-direction:column;gap:8px}
  .frag-search__r{padding:8px 4px;border-top:1px solid var(--ink-100);font-size:13px;line-height:1.4}
  .frag-search__r b{display:block;font-weight:700}
  .frag-search__r span{color:var(--ink-700)}
  .feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .feat__i{background:var(--paper);border:1px solid var(--ink-100);border-radius:16px;padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
  .feat__frag{min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px;background:#FBFBFD;border-radius:12px;border:1px solid var(--ink-050)}
  .feat__frag .line{opacity:1;transform:none;animation:none;display:flex;justify-content:space-between;font-size:13px}
  .feat__pct{color:var(--ink-500)}
  .lane{height:6px;background:var(--ink-100);border-radius:3px;overflow:hidden}
  .lane i{display:block;height:100%;background:var(--ink)}
  .feat__frag--chat .msg{max-width:100%;font-size:13px;padding:8px 12px}
  .feat__frag .q{gap:5px}
  .feat__frag .q__i{font-size:12.5px}
  .feat__frag .btns{gap:6px}
  .doorsmini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .doorsmini span{border:1px solid var(--ink-200);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700}
  .feat p{font-size:14.5px;color:var(--ink-700)}
  .aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
  .aud__i{border-top:2px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:10px}
  .aud__i p{font-size:15px;color:var(--ink-700)}
  .aud__i ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
  .aud__i li{font-size:14px;color:var(--ink);padding-left:20px;position:relative}
  .aud__i li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
  .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
  .plan{background:var(--paper);border:1px solid var(--ink-100);border-radius:18px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px}
  .plan--main{border-color:var(--ink);box-shadow:var(--lift)}
  .plan__t{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
  .plan__p{font-size:34px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px}
  .plan__per{font-size:15px;font-weight:600;color:var(--ink-500);letter-spacing:0}
  .plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
  .plan li{font-size:14.5px;padding-left:22px;position:relative}
  .plan li::before{content:"";position:absolute;left:3px;top:9px;width:8px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
  .plan .btn{justify-content:center;margin-top:auto}
  .plan ul{margin-bottom:6px}
  .plan__fine{font-size:12.5px;color:var(--ink-500);line-height:1.4}
  .data{display:flex;flex-direction:column;gap:16px}
  .data__i{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ink-100);border-radius:14px}
  .data__i .ico{flex:none;width:22px;height:22px;color:var(--ink-500);margin-top:2px}
  .data__i b{display:block;font-weight:700;font-size:15.5px}
  .data__i span{font-size:14px;color:var(--ink-700);line-height:1.45}
  .data__legal{font-size:14px;color:var(--ink-500)}
  .data__legal a{text-decoration:underline;text-underline-offset:3px}
  .faq{display:flex;flex-direction:column}
  .faq details{border-top:1px solid var(--ink-200);padding:4px 0}
  .faq details:last-child{border-bottom:1px solid var(--ink-200)}
  .faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:16.5px;padding:14px 32px 14px 0;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
  .faq summary::after{content:"";position:absolute;right:8px;top:20px;width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);transition:transform .25s}
  .faq details[open] summary::after{transform:rotate(225deg);top:24px}
  .faq details p{margin:0 0 16px;font-size:15px;color:var(--ink-700);max-width:60ch}
  .fin{padding:84px 0 96px;text-align:center}
  .fin__in{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
  .fin__mark{width:48px;height:48px;color:var(--ink)}
  .fin__mark svg{width:100%;height:100%}
  .fin h2{margin-top:6px}
  .fin p{font-size:17px;color:var(--ink-700);max-width:44ch;text-wrap:pretty}
  .cta--fin{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
  .foot{border-top:1px solid var(--ink-100);background:#F6F7FA}
  .foot__in{max-width:var(--w);margin:0 auto;padding:44px 24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:56px}
  .foot__brand svg{height:30px;width:auto;color:var(--ink)}
  .foot__brand span{display:block;margin-top:10px;font-size:14px;color:var(--ink-500)}
  .foot__col{display:flex;flex-direction:column;gap:8px;font-size:14px}
  .foot__col b{font-weight:700;margin-bottom:4px}
  .foot__col a{color:var(--ink-700);text-decoration:none}
  .foot__col a:hover{text-decoration:underline;text-underline-offset:3px}
  .foot__col--2{display:grid;grid-template-columns:auto auto;grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;column-gap:28px;row-gap:8px;justify-content:start;align-content:start}
  .foot__col--2 b{grid-column:1/-1}
  .foot__law{max-width:var(--w);margin:0 auto;padding:0 24px 32px;font-size:12.5px;color:var(--ink-500)}
  @media (max-width:980px){
    .steps3,.feat,.plans{grid-template-columns:1fr}
    .aud{grid-template-columns:1fr}
    .sec__in--split{grid-template-columns:1fr;gap:24px}

    .foot__in{grid-template-columns:1fr 1fr}
  }
  @keyframes blink{50%{opacity:0}}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes grow{from{width:0}to{width:100%}}
  @keyframes grow2{0%{width:0}60%{width:100%}100%{width:100%}}
  @media (max-width:980px){
    .vA .hero{grid-template-columns:1fr}
    .doors__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .nav__links{display:none}
  }
  @media (max-width:430px){
    .nav{gap:14px;padding:16px}
    .nav__cta{gap:6px}
    .btn--sm{padding:8px 11px;font-size:13px}
    .vA .cta{grid-template-columns:1fr;width:auto}
    .vA .cta .btn:nth-child(3){grid-column:auto}
    .mini__tag{display:none}
  }
  @media (max-width:600px){
    .cab{height:640px}
    .row__s{display:none}
    .row{max-height:96px}
    .row.open{max-height:420px}
    .story__i{font-size:11.5px}
    .doors__grid{grid-template-columns:1fr}
    .vA .facts{grid-template-columns:1fr}
  }


  /* ---------- пример результата ---------- */
  .sample{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px}
  .sample__col{background:var(--paper);border:1px solid var(--ink-100);border-radius:16px;padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
  .sample__k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
  .sample__lines{display:flex;flex-direction:column;gap:9px}
  .sample__lines .line{opacity:1;transform:none;animation:none;font-size:14.5px;line-height:1.45;grid-template-columns:46px 76px 1fr}
  .sample__meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-500);padding-top:10px;border-top:1px dashed var(--ink-100)}
  .sample__meta i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
  .sample__meta svg{width:14px;height:14px}
  .sample__sum{font-size:14.5px;line-height:1.5;color:var(--ink-700)}
  .sample__doc{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
  .sample__doc li{font-size:14px;padding-left:20px;position:relative}
  .sample__doc li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}
  .sample__docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
  .sample__docs span{border:1px solid var(--ink-200);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700}
  /* ---------- что принимаем ---------- */
  .spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .spec__i{background:var(--paper);border:1px solid var(--ink-100);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
  .spec__i b{font-size:16px;font-weight:700}
  .spec__i span{font-size:14px;color:var(--ink-700);line-height:1.45}
  /* ---------- спросить запись ---------- */
  .sec__p{margin-top:12px;font-size:16px;color:var(--ink-700);max-width:44ch;text-wrap:pretty}
  .askdemo{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--ink-100);border-radius:16px;padding:18px}
  .askdemo .msg{font-size:14.5px;opacity:1;transform:none}
  /* ---------- сравнение ---------- */
  .cmp{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
  .cmp th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);padding:10px;border-bottom:1px solid var(--ink-200)}
  .cmp th:last-child,.cmp td:last-child{background:#FBFBFD}
  .cmp td{padding:12px 10px;border-bottom:1px solid var(--ink-100);vertical-align:top;color:var(--ink-700)}
  .cmp td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
  .cmp td:last-child{color:var(--ink);font-weight:600}
  .tblwrap{overflow-x:auto}
  .cmp--plans th:last-child,.cmp--plans td:last-child{background:transparent;font-weight:inherit;color:var(--ink-700)}
  .cmp--plans th:nth-child(3),.cmp--plans td:nth-child(3){background:#FBFBFD;color:var(--ink);font-weight:600}
  /* ---------- в чате с ботом ---------- */
  .cmds{display:flex;flex-direction:column;gap:10px;margin-top:22px}
  .cmd{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--ink-700)}
  .cmd code{font-family:var(--font);font-weight:700;color:var(--ink);background:var(--ink-050);border-radius:8px;padding:3px 8px;font-size:13.5px;white-space:nowrap}
  .botshot{display:flex;flex-direction:column;align-items:center;gap:10px}
  .botshot img{width:min(300px,100%);height:auto;border-radius:22px;box-shadow:var(--lift);border:1px solid var(--ink-100)}
  .botshot__cap{font-size:13px;color:var(--ink-500);text-align:center}
  /* ---------- кто делает ---------- */
  .maker{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.55;color:var(--ink-700);max-width:60ch}
  .maker a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
  .maker__fine{font-size:14px;color:var(--ink-500)}

  /* ---------- внутренние страницы ---------- */
  .phead{padding:36px 0 8px}
  .vA .phead h1{font-size:clamp(34px,4.4vw,52px);font-weight:700;letter-spacing:-.025em;line-height:1.05;max-width:22ch;margin:10px 0 0;text-align:left}
  .phead p{margin-top:12px;font-size:18px;color:var(--ink-700);max-width:60ch;text-wrap:pretty}
  .sec .doors{margin:0;border-top:0;background:transparent}
  .sec .doors__in{padding-top:0;padding-bottom:0}
  .more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .more__i{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--ink-100);border-radius:14px;padding:18px 18px 16px;color:var(--ink);transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
  .more__i:hover{transform:translateY(-3px);box-shadow:var(--lift)}
  .more__i b{font-size:17px;font-weight:700}
  .more__i span{font-size:14px;color:var(--ink-700);line-height:1.45}
  .more__i i{font-style:normal;margin-top:auto;padding-top:8px;font-weight:700}

  /* ---------- блог ---------- */
  .post{max-width:68ch;margin:0 auto;font-size:17px;line-height:1.6;color:var(--ink-700)}
  .phead--center{text-align:center}
  .vA .phead--center h1{margin:10px auto 0;text-align:center}
  .phead--center p{margin:12px auto 0}
  .phead__meta{margin-top:14px;font-size:13.5px;color:var(--ink-500)}
  .post h2{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:34px 0 10px}
  .post h3{font-size:19px;font-weight:700;color:var(--ink);margin:24px 0 6px}
  .post p{margin:0 0 14px}
  .post ul,.post ol{margin:0 0 14px;padding-left:22px}
  .post li{margin-bottom:6px}
  .post b{color:var(--ink)}
  .post code{font-family:var(--font);font-weight:700;color:var(--ink);background:var(--ink-050);border-radius:6px;padding:1px 6px;font-size:.95em}
  .post a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
  .more--blog{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---------- широкие экраны ----------
     Контейнер 1160 px на мониторе в 1800–2000 px занимал половину. Масштабировать страницу целиком
     оказалось неверно («слишком большое всё» — владелец, 04.09): растёт сам контейнер и ширина
     карточки кабинета, а кегль почти прежний. */
  @media (min-width:1500px){
    :root{--w:min(1480px,88vw)}
    body{zoom:1.04}
    .vA .demo{max-width:1040px}
  }
  @media (min-width:1900px){
    :root{--w:min(1720px,88vw)}
    body{zoom:1.08}
    .vA .demo{max-width:1160px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .caret{display:none}
    .rv{opacity:1;transform:none}
    .lett{clip-path:none}
    .line{opacity:1;transform:none}
    html{scroll-behavior:auto}
  }

  .msg{max-width:82%;border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.45}
  .msg--me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
  .msg--bot{align-self:flex-start;background:var(--ink-050);border-bottom-left-radius:4px}

  /* ---------- узкие экраны для секций, объявленных ниже старого блока ≤980 ----------
     ⛔ Порядок несущий: базовые правила этих классов стоят ПОСЛЕ первого блока @media, и
     переопределение внутри него проигрывало при равной специфичности. Поэтому — в самом конце. */
  @media (max-width:980px){
    .sample,.spec{grid-template-columns:1fr}
    .cmd{grid-template-columns:1fr;gap:4px}
    .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:600px){
    .more{grid-template-columns:1fr}
  }
  @media (max-width:980px){ .more--blog{grid-template-columns:1fr} }
  /* юридические тексты: 4/5 экрана (решение владельца 04.09), внутри той же .sec__in */
  .post--legal{max-width:80vw}
  @media (max-width:600px){ .post--legal{max-width:none} }