/* Публичный лендинг FBS (ТЗ-41, модуль А).
   Светлая тема = Visitors («белый инженерный чертёж»), тёмная = Sauce Labs
   («неоновая консоль на обсидиане»). Первоисточники токенов:
   AI_Knowledge_Base/projects/fbs-amplimetro/design/refero/{visitors,saucelabs}-DESIGN.md.
   REKKI из палитры исключён (Данил, 01.09.2026) — от него только расположение.
   Шрифт Manrope — узаконенная замена OpenRunde/Aeonik (те платные, без кириллицы;
   их официальный substitute — Inter-класс). Никаких CDN: всё self-hosted. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/manrope-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/manrope-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/manrope-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-800.woff2") format("woff2"); }

/* ---------- Токены. Свет: тёплая бумага MPmetr (ребрендинг 02.09) ---------- */
:root {
  color-scheme: light;
  /* поверхности */
  --canvas: #f5efe5;          /* Paper — фирменная бумага MPmetr */
  --band-bg: #ece3d3;         /* Sand — вторые планы */
  --mist: #ece3d3;
  --line: #e4ddcc;            /* тёплый структурный 1px */
  --card-bg: #fdfbf7;         /* Cream Card */
  --panel-bg: #fdfbf7;
  /* текст */
  --ink: #2b2620;             /* тёплый графит MPmetr */
  --sub: #665e50;
  --mut: #6f685c;             /* держит 4.5:1 на #fdfbf7 */
  /* действие */
  --act: #c2622c;             /* терракота MPmetr — ТОЛЬКО главное действие */
  --act-ink: #ffffff;
  --act-hover: #d4703a;
  --act-2: #e0925f;           /* светлая ступень терракоты для градиентов */
  --link: #2f7c8a;            /* чирок MPmetr */
  --mint: #2e7d4c;            /* зелёный MPmetr, затемнён для текста на wash */
  --mint-wash: #e0efdc;
  --ember: #c33b2b;           /* красный MPmetr для отрицательных дельт */
  --ember-wash: #f6ded6;
  /* Тёплая подложка акцента: панель ответа, популярный тариф, «врезки».
     ⛔ Заводится ТОКЕНОМ, а не литералом. Литерал #fdf3ea пережил бы смену
     темы и оставил бы светлую плашку с белым текстом на тёмном холсте —
     ровно этот баг поймали глазами 07.09.2026. */
  --act-wash: #fdf3ea;
  --act-wash-line: #e0a983;
  --act-wash-hair: #edd2be;
  --mint-line: #9dc7ab;
  /* мокап: поверхность и «хром» браузерной рамки */
  --mock-bg: #fdfbf7;
  --mock-chrome: #ece3d3;
  /* формы и радиусы */
  --pill: 9999px;
  --r-card: 16px;
  --r-panel: 16px;
  --r-input: 8px;
  --r-band: 24px;
  --r-mock: 12px;
  --border-card: 1px solid var(--line);
  --shadow-btn: rgba(63,48,32,.10) 0 1px 1px 1px, rgba(63,48,32,.07) 0 0 0 .5px;
  --shadow-panel: rgba(63,48,32,.07) 0 1px 3px, rgba(63,48,32,.07) 0 8px 16px, rgba(63,48,32,.03) 0 0 0 1px;
  --shadow-mock: rgba(43,38,32,.20) 0 24px 48px -12px, rgba(43,38,32,.10) 0 8px 16px -8px;
  /* типографика: Visitors — display/заголовки 600 (их «инженерность» делает
     плотный минусовой трекинг, не жирность), значения метрик bold 700 */
  --w-display: 600;
  --w-head: 600;
  --w-title: 600;
  --w-value: 700;
  --w-logo: 800;
  --w-btn: 600;
  --track-display: -0.045em;
  --track-head: -0.02em;
  --track-body: -0.02em;
  --track-eyebrow: 0.14em;
  /* хиро-лента: терракотовая рампа MPmetr (атмосферная, только фон секции) */
  --band-hero: linear-gradient(105deg, #d98d54 0%, #c2622c 52%, #9e4a1e 100%);
  --band-hero-flat: #c2622c;
  /* график: рампа чирка */
  --c1: #8fc0cb; --c2: #2f7c8a; --c3: #1c4a54;  /* пришло→собрано→отгружено */
  --grid: #e7e0d1;
  --tip-bg: #2b2620; --tip-ink: #fdfbf7;
  /* светофор срока в мокапе — дисциплина проекта: только срок сборки */
  --ok: #2e7d4c; --ok-wash: #e0efdc;
  --warn: #a96b00; --warn-wash: #fff1cc;
  --late: #c33b2b; --late-wash: #f6ded6;
  --focus-ring: #2f7c8a;
}

/* ---------- Тьма: тёплый обсидиан MPmetr (двойное объявление: авто + явный выбор) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --act-wash: #33241a;
  --act-wash-line: #8a5230;
  --act-wash-hair: #4a3524;
  --mint-line: #3c6b4b;
  --canvas: #201a15;
  --band-bg: #171310;
  --mist: #2c251d;
  --line: rgba(255,255,255,.10);
  --card-bg: #171310;
  --panel-bg: #171310;
  --ink: #ffffff;
  --sub: rgba(255,255,255,.76);
  --mut: rgba(255,255,255,.60);
  --act: #e8834a;
  --act-ink: #201a15;
  --act-hover: #f29a63;
  --act-2: #f4ae7d;
  --link: #7cc5d3;
  --mint: #63c584;
  --mint-wash: rgba(99,197,132,.15);
  --ember: #f2655a;
  --ember-wash: rgba(242,101,90,.16);
  --mock-bg: #2c251d;      /* на ступень светлее ленты #171310: экран ярче рамки */
  --mock-chrome: #1c1712;
  --pill: 9999px;
  --r-card: 20px;
  --r-panel: 20px;
  --r-input: 10px;
  --r-band: 40px;
  --r-mock: 12px;
  --border-card: 1px solid rgba(255,255,255,.08);
  --shadow-btn: none;
  --shadow-panel: rgba(0,0,0,.04) 1px 0 9px 2px;
  --shadow-mock: rgba(0,0,0,.55) 0 24px 48px -12px;
  --w-display: 600;        /* тонкие веса — подпись тьмы; 500 нет в Manrope-наборе */
  --w-head: 600;
  --w-title: 600;
  --w-value: 600;
  --w-logo: 600;
  --w-btn: 600;
  --track-display: -0.02em;
  --track-head: -0.01em;
  --track-body: -0.005em;
  --track-eyebrow: 0.16em;
  --band-hero: #171310;          /* тьма без цветных градиентов, глубина светимостью */
  --band-hero-flat: #171310;
  --c1: #a1552a; --c2: #cc7038; --c3: #f09355;  /* терракотовая рампа к #171310 */
  --grid: rgba(255,255,255,.08);
  --tip-bg: #f5efe5; --tip-ink: #2b2620;
  --ok: #63c584; --ok-wash: rgba(99,197,132,.16);
  --warn: #ffcd48; --warn-wash: rgba(255,205,72,.14);
  --late: #f2655a; --late-wash: rgba(242,101,90,.18);
  --focus-ring: #e8834a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --act-wash: #33241a;
  --act-wash-line: #8a5230;
  --act-wash-hair: #4a3524;
  --mint-line: #3c6b4b;
    color-scheme: dark;
    --canvas: #201a15;
    --band-bg: #171310;
    --mist: #2c251d;
    --line: rgba(255,255,255,.10);
    --card-bg: #171310;
    --panel-bg: #171310;
    --ink: #ffffff;
    --sub: rgba(255,255,255,.76);
    --mut: rgba(255,255,255,.60);
    --act: #e8834a;
    --act-ink: #201a15;
    --act-hover: #f29a63;
    --link: #f4ae7d;
    --mint: #e8834a;
    --mint-wash: rgba(232,131,74,.14);
    --ember: #f2655a;
    --ember-wash: rgba(242,101,90,.16);
    --mock-bg: #2c251d;
    --mock-chrome: #1c1712;
    --pill: 9999px;
    --r-card: 20px;
    --r-panel: 20px;
    --r-input: 10px;
    --r-band: 40px;
    --r-mock: 12px;
    --border-card: 1px solid rgba(255,255,255,.08);
    --shadow-btn: none;
    --shadow-panel: rgba(0,0,0,.04) 1px 0 9px 2px;
    --shadow-mock: rgba(0,0,0,.55) 0 24px 48px -12px;
    --w-display: 600;
    --w-head: 600;
    --w-title: 600;
    --w-value: 600;
    --w-logo: 600;
    --w-btn: 600;
    --track-display: -0.02em;
    --track-head: -0.01em;
    --track-body: -0.005em;
    --track-eyebrow: 0.16em;
    --band-hero: #171310;
    --band-hero-flat: #171310;
    --c1: #a1552a; --c2: #cc7038; --c3: #e8834a;
    --grid: rgba(255,255,255,.08);
    --tip-bg: #f5efe5; --tip-ink: #201a15;
    --ok: #e8834a; --ok-wash: rgba(232,131,74,.15);
    --warn: #ffcd48; --warn-wash: rgba(255,205,72,.14);
    --late: #f2655a; --late-wash: rgba(242,101,90,.18);
    --focus-ring: #e8834a;
  }
}

/* ---------- Фаза «закат» (16:00–21:00 по устройству): светлая база,
   лента и акцентные выделения теплеют в гамму «Заката» #FF7A00→#FF3B70 ---------- */
:root[data-phase="dusk"] {
  --band-hero: linear-gradient(105deg, #ff9d3d 0%, #ff7a00 34%, #ff3b70 78%, #b04bd6 108%);
  --band-hero-flat: #ff5b38;
  --hl-grad: linear-gradient(100deg, #ffcf9e, #ffb3c4);
  --hero-grad: linear-gradient(100deg, #ff7a00, #ff3b70);
  --band-bg: #fdf7f2;
  --act: #f0512e;          /* вечером действие тоже в гамме «Заката» */
  --act-hover: #ff6b45;
  --focus-ring: #f0512e;
}
:root[data-phase="night"] {
  --hl-grad: none;
  --hero-grad: linear-gradient(100deg, #e8834a, #f4ae7d);
}
/* ночью маркер-брусок под заголовком читался грязью — слово светится само */
:root[data-phase="night"] .hl { background: none; color: var(--act-2, #f4ae7d); }

/* выделение ключевых слов: не «простой текст», а сигнатурная подсветка */
.hl {
  font-style: normal;
  background: var(--hl-grad, linear-gradient(100deg, #f3cba8, #e3bdb6));
  background-size: 100% 0.34em;
  background-repeat: no-repeat;
  background-position: 0 94%;
  padding: 0 .06em;
}
:root { --hl-grad: linear-gradient(100deg, #f3cba8, #e3bdb6);
        --hero-grad: linear-gradient(100deg, #c2622c, #e0925f); }
:root[data-theme="dark"] .hl { background-size: 100% 0.32em; }

/* ---------- Базовое ---------- */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font: 16px/1.5 "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: var(--track-body);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* страховка: ни один блок не превращает страницу в горизонтальный скролл */
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Шапка (расположение — REKKI Navigation: лого слева, действия справа) ---------- */
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; }
.lp-logo { display: flex; align-items: baseline; gap: 2px; font-size: 19px;
           font-weight: var(--w-logo); letter-spacing: -0.03em; color: var(--ink); }
.lp-logo:hover { text-decoration: none; }
.lp-logo .dot { color: var(--act); }
.lp-logo-sub {
  margin-left: 8px; color: var(--mut); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; align-self: center;
}
.lp-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--pill); border: 1px solid transparent; cursor: pointer;
  font: 600 15px/1 "Manrope", sans-serif; font-weight: var(--w-btn);
  letter-spacing: -0.01em; padding: 12px 24px; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--act); color: var(--act-ink); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--act-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--mist); }
/* Sauce Ghost CTA: 1.5px solid #fff — рядом с неоновой пилюлей не «disabled» */
:root[data-theme="dark"] .btn-ghost { border: 1.5px solid #ffffff; }
:root[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-ghost { border: 1.5px solid #ffffff; }
  :root:not([data-theme="light"]) .btn-ghost:hover { background: rgba(255,255,255,.10); }
}

/* тумблера темы нет: фаза (день/закат/ночь) живёт по времени устройства */

/* ---------- Хиро ---------- */
.hero { text-align: center; padding: 64px 0 40px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card-bg); padding: 7px 14px 7px 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.chip .tag {
  background: var(--mint-wash); color: var(--mint);
  border-radius: var(--pill); padding: 3px 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em;
}
.hero h1 {
  margin: 22px auto 0; max-width: 860px;
  font-size: clamp(36px, 6.4vw, 62px); line-height: 1.06;
  font-weight: var(--w-display); letter-spacing: var(--track-display);
  text-wrap: balance;
}
.hero .lead {
  margin: 20px auto 0; max-width: 620px;
  color: var(--sub); font-size: 18px; line-height: 1.55; text-wrap: pretty;
}
/* v5: в тьме заголовок хиро подсвечен тем же mint-светом, что и сцена ниже —
   верх страницы и лента становятся одним «источником света» */
:root[data-theme="dark"] .hero {
  background: radial-gradient(48% 42% at 50% 22%, rgba(232,131,74,.075), transparent 72%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background: radial-gradient(48% 42% at 50% 22%, rgba(232,131,74,.075), transparent 72%);
  }
}
.cta-row { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-row .btn { padding: 14px 28px; font-size: 16px; }

/* Дескриптор внутри кнопки — правило Данила 07.09.2026 (дизайн-база §3а):
   кнопка называет пользу, а строка под ней говорит, ЧТО произойдёт после
   нажатия. Именно неизвестность («мне начнут названивать?») и мешает нажать,
   поэтому дескриптор живёт ВНУТРИ кнопки, а не абзацем где-то ниже. */
.btn:has(small) {
  flex-direction: column;
  gap: 3px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 1.25;
  white-space: normal;      /* длинный призыв переносится, а не растягивает кнопку */
  text-align: center;
  /* Пилюля 9999px хороша на однострочной кнопке; на двух строках (а на
     телефоне это 103px высоты) она превращается в овал-блоб. Умеренный
     радиус держит форму кнопкой. */
  border-radius: 16px;
}

.btn small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: .82;
}

/* Запасной путь для браузеров без :has() — там дескриптор просто встаёт
   в строку и кнопка остаётся рабочей, просто ниже качеством. */
@supports not selector(:has(*)) {
  .btn small { display: block; width: 100%; }
}
.hero .note { margin-top: 16px; color: var(--mut); font-size: 13px; }

/* ---------- Лента с мокапом (full-bleed, по layout Visitors) ---------- */
.band { padding: 40px 0 0; }
.band-inner {
  position: relative;
  background: var(--band-hero);
  padding: clamp(28px, 5vw, 64px) 0 0;
  overflow: hidden;
}
.band-content {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
}
/* v5: свет и фактура сцены. Свет — блик из-за мокапа; тьма — «глубина
   светимостью» Sauce: mint-свечение сверху, дот-сетка, мягкая виньетка */
.band-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 44% at 50% 0%, rgba(255,255,255,.30), transparent 70%);
}
:root[data-theme="dark"] .band-inner { border: 1px solid rgba(255,255,255,.07); }
:root[data-theme="dark"] .band-inner {
  background:
    radial-gradient(46% 34% at 50% 0%, rgba(232,131,74,.30), transparent 68%),
    radial-gradient(70% 52% at 50% 6%, rgba(232,131,74,.13), transparent 72%),
    radial-gradient(36% 30% at 84% 84%, rgba(204,112,56,.11), transparent 75%),
    radial-gradient(30% 26% at 10% 72%, rgba(232,131,74,.07), transparent 75%),
    #171310;
}
:root[data-theme="dark"] .band-inner::after {
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 80%);
  mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 80%);
  opacity: .55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-inner { border: 1px solid rgba(255,255,255,.07); }
  :root:not([data-theme="light"]) .band-inner {
    background:
      radial-gradient(46% 34% at 50% 0%, rgba(232,131,74,.30), transparent 68%),
      radial-gradient(70% 52% at 50% 6%, rgba(232,131,74,.13), transparent 72%),
      radial-gradient(36% 30% at 84% 84%, rgba(204,112,56,.11), transparent 75%),
      radial-gradient(30% 26% at 10% 72%, rgba(232,131,74,.07), transparent 75%),
      #171310;
  }
  :root:not([data-theme="light"]) .band-inner::after {
    background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 80%);
    mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 80%);
    opacity: .55;
  }
}
.band-cap {
  text-align: center; color: #ffffff; font-size: 12px; font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  opacity: .85; margin-bottom: 20px;
}
:root[data-theme="dark"] .band-cap { color: #e8834a; opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-cap { color: #e8834a; opacity: 1; }
}

/* мокап: браузерная рамка, внутри — реплика ленты сборки вёрсткой.
   В тёмной теме поверхность мокапа на ступень СВЕТЛЕЕ ленты (люминансный
   ритм Sauce: экран ярче рамки, dark-on-dark запрещён). */
.mockup {
  max-width: 880px; margin: 0 auto; border-radius: var(--r-mock) var(--r-mock) 0 0;
  background: var(--mock-bg, var(--canvas)); box-shadow: var(--shadow-mock);
  overflow: hidden; transform: translateY(4px) rotate(-.45deg); transform-origin: center bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .mockup { animation: mock-rise .9s cubic-bezier(.16,1,.3,1) both; }
  .float-note { animation: note-rise 1.1s .25s cubic-bezier(.16,1,.3,1) both; }
  @keyframes mock-rise { from { opacity: 0; transform: translateY(32px) rotate(-.45deg); } to { opacity: 1; transform: translateY(4px) rotate(-.45deg); } }
  @keyframes note-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
.mock-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--mock-chrome);
}
.mock-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.mock-chrome .mock-url {
  flex: 1; max-width: 320px; margin: 0 auto; text-align: center;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 6px;
  color: var(--mut); font-size: 11px; font-style: normal; padding: 3px 10px;
}
.mock-body { padding: 0; text-align: left; }
.mock-top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px;
}
.mock-top b { font-size: 13px; font-weight: var(--w-logo); letter-spacing: -0.02em; }
.mock-top b i { color: var(--act); font-style: normal; }
.mock-tabs { display: flex; gap: 2px; }
.mock-tab { padding: 5px 12px; border-radius: var(--pill); color: var(--sub); }
.mock-tab.on { background: var(--mist); color: var(--ink); font-weight: 700; }
.mock-count { margin-left: auto; color: var(--mut); font-size: 11.5px; }
.mock-row {
  display: grid; grid-template-columns: 34px 1.6fr 0.6fr 1fr 0.9fr auto;
  gap: 12px; align-items: center;
  padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.mock-row > * { min-width: 0; } /* грид не раздувается от nowrap-содержимого */
.mock-row:last-child { border-bottom: 0; }
/* «фото» товаров в мокапе — цветные плитки вёрсткой (пустые серые квадраты
   выглядели админкой; правка Данила 01.09). Плитка = мягкий градиент ткани */
.mock-ph {
  width: 34px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; color: transparent;
  background: linear-gradient(135deg, #6d86f9, #4a5bc4);
}
.mock-ph svg { display: block; width: 22px; height: 22px; color: rgba(255,255,255,.88); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mock-row:nth-of-type(2) .mock-ph { background: linear-gradient(135deg, #4d5a68, #2b3440); }
.mock-row:nth-of-type(3) .mock-ph { background: linear-gradient(135deg, #f5f0e6, #cfc4ae); }
.mock-row:nth-of-type(4) .mock-ph { background: linear-gradient(135deg, #3a3a45, #17171d); }
.mock-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-name small { display: block; font-weight: 400; color: var(--mut); font-size: 10.5px; }
.mock-size, .mock-wh { color: var(--sub); }
.mock-due {
  justify-self: start; border-radius: var(--pill); padding: 3px 10px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.due-ok { background: var(--ok-wash); color: var(--ok); }
.due-warn { background: var(--warn-wash); color: var(--warn); }
.due-late { background: var(--late-wash); color: var(--late); }
.mock-act {
  border-radius: var(--pill); border: 0; background: var(--act); color: var(--act-ink);
  font: 700 11.5px "Manrope", sans-serif; padding: 6px 14px; pointer-events: none;
}
.mock-scan {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--mock-chrome); color: var(--sub); font-size: 11.5px;
}
.mock-scan svg { width: 14px; height: 14px; color: var(--mint); }

/* внутренности мокапа на светлой поверхности тёмной темы: активный таб
   и адресная строка не должны тонуть в --mock-bg; «фото» товаров остаются
   цветными плитками (v5) — серые квадраты выглядели админкой, приглушаем
   дневные градиенты под обсидиан вместо обесцвечивания */
:root[data-theme="dark"] .mock-tab.on { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .mock-url { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .mock-ph { background: linear-gradient(135deg, #3f6ba8, #2b3f66); }
:root[data-theme="dark"] .mock-row:nth-of-type(2) .mock-ph { background: linear-gradient(135deg, #55606c, #333c46); }
:root[data-theme="dark"] .mock-row:nth-of-type(3) .mock-ph { background: linear-gradient(135deg, #d9d2c2, #a99e86); }
:root[data-theme="dark"] .mock-row:nth-of-type(4) .mock-ph { background: linear-gradient(135deg, #4a4a56, #232329); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mock-tab.on { background: rgba(255,255,255,.08); }
  :root:not([data-theme="light"]) .mock-url { background: rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .mock-ph { background: linear-gradient(135deg, #3f6ba8, #2b3f66); }
  :root:not([data-theme="light"]) .mock-row:nth-of-type(2) .mock-ph { background: linear-gradient(135deg, #55606c, #333c46); }
  :root:not([data-theme="light"]) .mock-row:nth-of-type(3) .mock-ph { background: linear-gradient(135deg, #d9d2c2, #a99e86); }
  :root:not([data-theme="light"]) .mock-row:nth-of-type(4) .mock-ph { background: linear-gradient(135deg, #4a4a56, #232329); }
}
/* v5: rim-свет мокапа в тьме — экран «светится» в сцене, а не тонет в ней */
:root[data-theme="dark"] .mockup {
  box-shadow: var(--shadow-mock), 0 0 0 1px rgba(232,131,74,.22),
              0 0 150px -8px rgba(232,131,74,.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mockup {
    box-shadow: var(--shadow-mock), 0 0 0 1px rgba(232,131,74,.22),
                0 0 150px -8px rgba(232,131,74,.38);
  }
}

/* плавающая карточка-заметка на ленте (жёлтый акцент Sauce в тёмной) */
.float-note {
  position: absolute; left: clamp(20px, 5vw, 62px); right: auto; top: auto; bottom: 18px;
  background: var(--card-bg); border: var(--border-card); border-radius: 12px;
  box-shadow: var(--shadow-panel); padding: 10px 14px;
  font-size: 12px; line-height: 1.35; text-align: left; color: var(--sub);
  max-width: 176px;
}
.float-note b { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12.5px; }
.float-note .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
:root[data-theme="dark"] .float-note { background: var(--mock-bg); }
:root[data-theme="dark"] .float-note b .dot-live { background: #ffcd48; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .float-note { background: var(--mock-bg); }
  :root:not([data-theme="light"]) .float-note b .dot-live { background: #ffcd48; }
}

/* витрина-виджеты v5. Каждое color-mix-значение имеет литеральный фолбэк
   строкой выше: Safari ≤16.1 / Firefox ≤112 отбрасывают color-mix целиком,
   без фолбэка стекло становилось прозрачным (слом Кодекса, находка №1) */
.float-widget {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px;
  min-height: 66px; padding: 11px 13px; color: var(--ink);
  background: rgba(255,255,255,.84);
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  border: 1px solid rgba(24,25,37,.13);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 15px; backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  box-shadow: 0 26px 46px -22px rgba(5,14,24,.48), 0 12px 22px -16px rgba(5,14,24,.38),
              inset 0 1px 0 rgba(255,255,255,.6);
  box-shadow: 0 26px 46px -22px rgba(5,14,24,.48), 0 12px 22px -16px rgba(5,14,24,.38),
              inset 0 1px 0 color-mix(in srgb, var(--act) 42%, white);
}
.float-widget::before {
  content: ""; position: absolute; inset: 0 12px auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--act) 68%, white), transparent);
}
/* подписи виджетов: --mut на 84%-стекле не добирал 4,5:1 (находка №7) */
.float-widget small { display: block; color: var(--sub); font-size: 9.5px; letter-spacing: .03em; }
.float-widget strong { display: block; margin-top: 2px; font-size: 11.5px; white-space: nowrap; }
.float-widget-donut { left: clamp(2px, 1.1vw, 14px); top: 31%; transform: rotate(-4deg); }
.float-widget-shift { right: clamp(0px, .6vw, 8px); top: 19%; transform: rotate(3deg); align-items: stretch; }
.float-widget-chz { right: clamp(8px, 3vw, 38px); bottom: 10%; transform: rotate(-2deg); }
.float-donut { position: relative; width: 48px; height: 48px; flex: none; filter: drop-shadow(0 0 8px rgba(194,98,44,0.36)); }
.float-donut { position: relative; width: 48px; height: 48px; flex: none; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--act) 36%, transparent)); }
.float-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.float-donut circle { fill: none; stroke-width: 5; }
.float-donut-track { stroke: rgba(24,25,37,.10); stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
.float-donut-value { stroke: url(#float-donut-grad); stroke-linecap: round; stroke-dasharray: 124.4 1.3; }
.float-donut b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; letter-spacing: -.03em; }
.grad-start, .dash-grad-start { stop-color: var(--act); }
.grad-end { stop-color: var(--mint); }
.float-widget-label { display: flex; flex-direction: column; justify-content: space-between; min-width: 42px; }
.float-widget-label b { color: var(--mint); font-size: 12px; }
.mini-bars { display: flex; align-items: end; gap: 3px; width: 72px; height: 43px; padding-top: 3px; }
.mini-bars i {
  position: relative; flex: 1; height: var(--bar); min-height: 7px; overflow: hidden;
  border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--act-2, var(--act)), var(--act));
  box-shadow: 0 0 8px rgba(232,131,74,.24);
  box-shadow: 0 0 8px color-mix(in srgb, var(--act) 24%, transparent);
}
.mini-bars i::after { content: ""; position: absolute; inset: 1px 1px auto; height: 35%; border-radius: 2px; background: rgba(255,255,255,.34); }
.chz-scan { display: grid; grid-template-columns: repeat(2, 7px); gap: 3px; padding: 9px; border-radius: 10px; background: var(--mint-wash); }
.chz-scan i { width: 7px; height: 7px; border: 1.5px solid var(--mint); }
.chz-scan i:nth-child(1) { border-right: 0; border-bottom: 0; }
.chz-scan i:nth-child(2) { border-left: 0; border-bottom: 0; }
.chz-scan i:nth-child(3) { border-right: 0; border-top: 0; }
.chz-scan i:nth-child(4) { border-left: 0; border-top: 0; }
.float-widget-chz strong i { color: var(--mint); font-style: normal; }
/* «готово»: mint на wash в свете давал 3,05:1 — текст ярлыка темнее (frost-ok) */
.float-widget-chz em { margin-left: 4px; padding: 4px 7px; border-radius: var(--pill); background: var(--mint-wash); color: #0c7a4b; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
:root[data-theme="dark"] .float-widget { background: rgba(44,37,29,.86); background: color-mix(in srgb, var(--mock-bg) 86%, transparent); border-color: rgba(232,131,74,.18); border-color: color-mix(in srgb, var(--mint) 18%, transparent); }
:root[data-theme="dark"] .float-widget-chz em { color: var(--mint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .float-widget { background: rgba(44,37,29,.86); background: color-mix(in srgb, var(--mock-bg) 86%, transparent); border-color: rgba(232,131,74,.18); border-color: color-mix(in srgb, var(--mint) 18%, transparent); }
  :root:not([data-theme="light"]) .float-widget-chz em { color: var(--mint); }
}
@media (prefers-reduced-motion: no-preference) {
  /* вход + бесконечная лёгкая левитация с разфазировкой — сцена «дышит».
     Обе анимации ведут translate: до задержки боба им владеет вход (both),
     после — боб; transform (rotate) не трогаем */
  .float-widget {
    animation: widget-in .85s cubic-bezier(.16,1,.3,1) both,
               widget-bob 6.5s 2.4s ease-in-out infinite alternate;
  }
  .float-widget-shift { animation-delay: .14s, 3.2s; }
  .float-widget-chz { animation-delay: .28s, 2.8s; }
  @keyframes widget-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes widget-bob { from { translate: 0 0; } to { translate: 0 -7px; } }
  /* бары мини-виджета «Смена» отрастают при входе */
  .mini-bars i { animation: bar-grow .8s .5s cubic-bezier(.16,1,.3,1) both; }
  .mini-bars i:nth-child(2) { animation-delay: .58s; }
  .mini-bars i:nth-child(3) { animation-delay: .66s; }
  .mini-bars i:nth-child(4) { animation-delay: .74s; }
  .mini-bars i:nth-child(5) { animation-delay: .82s; }
  .mini-bars i:nth-child(6) { animation-delay: .9s; }
  @keyframes bar-grow { from { height: 7px; } to { height: var(--bar); } }
}

/* ---------- Живые цифры ---------- */
.metrics { padding: 56px 0 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mcard {
  background: var(--card-bg); border: var(--border-card); border-radius: var(--r-card);
  padding: 20px 22px;
}
.mcard .label { color: var(--mut); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }
.mcard .value { margin-top: 6px; font-size: 32px; font-weight: var(--w-value); letter-spacing: -0.03em; }
.mcard .delta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  border-radius: var(--pill); padding: 3px 10px; font-size: 12px; font-weight: 700;
}
.delta.up { background: var(--mint-wash); color: var(--mint); }
.delta.down { background: var(--ember-wash); color: var(--ember); }
.mcard .note { display: block; margin-top: 8px; color: var(--mut); font-size: 11.5px; }
.metrics .src { margin-top: 12px; color: var(--mut); font-size: 12px; text-align: center; }
/* Sauce Stat Block: цифры соцдоказательства — неоновым (green stat highlights) */
:root[data-theme="dark"] .mcard .value { color: #e8834a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mcard .value { color: #e8834a; }
}

/* ---------- Секции: заголовки ---------- */
.sec { padding: 64px 0 0; }
.sec-head { max-width: 620px; margin: 0 auto 32px; text-align: center; }
.eyebrow {
  display: block; color: var(--mut); font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin-bottom: 12px;
}
:root[data-theme="dark"] .eyebrow { color: #e8834a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow { color: #e8834a; }
}
.sec-head h2 {
  font-size: clamp(26px, 4vw, 38px); line-height: 1.18;
  font-weight: var(--w-head); letter-spacing: var(--track-head); text-wrap: balance;
}
.sec-head p { margin-top: 12px; color: var(--sub); font-size: 16px; }

/* ---------- График воронки ---------- */
.panel {
  background: var(--panel-bg); border: var(--border-card); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel); padding: 24px 24px 16px; position: relative;
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h3 { font-size: 17px; font-weight: var(--w-title); letter-spacing: -0.015em; }
.panel-head .cap { color: var(--mut); font-size: 12.5px; }
.legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.legend .key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sub); }
.legend .key i { width: 14px; height: 3px; border-radius: 2px; }
.key-came i { background: var(--c1); }
.key-asm i { background: var(--c2); }
.key-shp i { background: var(--c3); }
.chart-wrap { position: relative; margin-top: 8px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-wrap .axis text { fill: var(--mut); font: 11px "Manrope", sans-serif; }
.chart-wrap .grid line { stroke: var(--grid); stroke-width: 1; }
.chart-wrap .endlab { fill: var(--sub); font: 600 11px "Manrope", sans-serif; }
.chart-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  background: var(--tip-bg); color: var(--tip-ink);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45;
  box-shadow: rgba(0,0,0,.18) 0 6px 16px -4px; min-width: 148px; z-index: 3;
}
.chart-tip.on { opacity: 1; transform: translateY(0); }
.chart-tip .d { font-weight: 700; margin-bottom: 4px; }
.chart-tip .row { display: flex; align-items: center; gap: 7px; }
.chart-tip .row i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.chart-tip .row b { margin-left: auto; font-weight: 700; padding-left: 12px; }
.chart-empty {
  padding: 48px 16px; text-align: center; color: var(--mut); font-size: 14.5px;
}
.chart-note { margin-top: 10px; color: var(--mut); font-size: 11.5px; }

/* ---------- Дашборд-витрина «панель владельца» ---------- */
.dash {
  background: var(--panel-bg); border: var(--border-card); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel); padding: 20px 24px 24px;
}
.dash-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dash-head b { font-size: 15px; font-weight: var(--w-logo); letter-spacing: -0.02em; }
.dash-head b i { color: var(--act); font-style: normal; }
.dash-head > span { color: var(--mut); font-size: 12.5px; }
.dash-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.dash-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
               animation: live-blink 2.2s ease-in-out infinite; }
@keyframes live-blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.dash .mcard { background: var(--band-bg); }
:root[data-theme="dark"] .dash .mcard { background: rgba(255,255,255,.03); }

/* график панели v5: область + отдельная вертикальная сводка (демо-данные) */
.dash-viz { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(220px, .85fr); gap: 16px; margin-top: 18px; }
.dash-chart, .dash-side { border: 1px solid var(--line); border-radius: 14px; background: var(--band-bg); background: color-mix(in srgb, var(--band-bg) 72%, var(--panel-bg)); }
.dash-chart { padding: 16px 16px 8px; overflow: hidden; }
.dash-chart-head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.dash-chart-head > span:first-child { display: flex; align-items: baseline; gap: 7px; }
.dash-chart-head b { font-size: 13px; }
.dash-chart-head small { color: var(--mut); font-size: 10px; }
.dash-chart-cap { color: var(--mut); font-size: 11.5px; }
.dash-chart svg { display: block; width: 100%; height: auto; }
.dash-grid-lines line { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-grid-lines .dax { stroke: var(--line); }
.dash-axis-labels text { fill: var(--mut); font: 10px "Manrope", sans-serif; }
.dash-area { fill: url(#dash-area-grad); }
.dash-grad-mid { stop-color: var(--act); stop-opacity: .22; }
.dash-grad-end { stop-color: var(--act); stop-opacity: 0; }
.dash-grad-start { stop-opacity: .48; }
.dash-line { fill: none; stroke: var(--act); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-line-shadow { flood-color: var(--act); }
.dash-points circle { fill: var(--panel-bg); stroke: var(--act); stroke-width: 2.4; }
.dash-point-cores circle { fill: var(--act); }
.dash-end-label rect { fill: var(--panel-bg); stroke: var(--line); stroke: color-mix(in srgb, var(--act) 34%, var(--line)); }
.dash-end-label text { fill: var(--ink); font: 700 10px "Manrope", sans-serif; }
.dash-side { display: flex; flex-direction: column; padding: 16px; }
.dash-donut-block { display: flex; align-items: center; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.dash-donut { position: relative; width: 88px; height: 88px; flex: none; }
.dash-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 9px rgba(194,98,44,0.28)); }
.dash-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--act) 28%, transparent)); }
.dash-donut circle { fill: none; stroke-width: 9; }
.dash-donut-track { stroke: rgba(24,25,37,.08); stroke: color-mix(in srgb, var(--ink) 8%, transparent); }
.dash-donut-value { stroke: url(#dash-donut-grad); stroke-linecap: round; stroke-dasharray: 242.6 2.4; }
.dash-donut strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 23px; letter-spacing: -.05em; }
.dash-donut strong small { font-size: 11px; margin-left: 1px; }
.dash-donut-block > span:last-child small { display: block; color: var(--mut); font-size: 10px; }
.dash-donut-block > span:last-child b { display: block; margin-top: 2px; font-size: 13px; }
.spark-list { display: grid; gap: 0; flex: 1; }
.spark-row { display: grid; grid-template-columns: minmax(68px, 1fr) 1.35fr; align-items: center; gap: 7px; min-height: 54px; border-bottom: 1px solid var(--line); }
.spark-row:last-child { border-bottom: 0; }
.spark-row span small { display: block; color: var(--mut); font-size: 9.5px; }
.spark-row span b { display: block; margin-top: 1px; font-size: 13px; }
.spark-row svg { width: 100%; height: 34px; overflow: visible; }
.spark-row path { fill: none; stroke: var(--act); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 3px 3px rgba(194,98,44,0.3)); }
.spark-row path { fill: none; stroke: var(--act); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--act) 30%, transparent)); }
.dash-note { margin-top: 12px; color: var(--mut); font-size: 12px; text-align: center; }

/* v5: хореография дашборда — график рисуется, донат заводится, спарклайны
   прорастают, когда панель входит в кадр. Скрытые старты навешаны ТОЛЬКО
   на .reveal (класс ставит JS) — без JS всё видно сразу; reduced-motion
   отключает целиком */
@media (prefers-reduced-motion: no-preference) {
  .dash.reveal .dash-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dash.is-in .dash-line { animation: line-draw 1.5s .3s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes line-draw { to { stroke-dashoffset: 0; } }
  .dash.reveal .dash-area, .dash.reveal .dash-end-label { opacity: 0; }
  .dash.is-in .dash-area { animation: soft-in .9s 1.2s ease forwards; }
  .dash.is-in .dash-end-label { animation: soft-in .5s 1.65s ease forwards; }
  @keyframes soft-in { to { opacity: 1; } }
  .dash.reveal .dash-points circle, .dash.reveal .dash-point-cores circle { opacity: 0; }
  .dash.is-in .dash-points circle, .dash.is-in .dash-point-cores circle {
    animation: point-pop .45s cubic-bezier(.22,1,.36,1) forwards;
  }
  .dash.is-in .dash-points circle:nth-child(1), .dash.is-in .dash-point-cores circle:nth-child(1) { animation-delay: .35s; }
  .dash.is-in .dash-points circle:nth-child(2), .dash.is-in .dash-point-cores circle:nth-child(2) { animation-delay: .55s; }
  .dash.is-in .dash-points circle:nth-child(3), .dash.is-in .dash-point-cores circle:nth-child(3) { animation-delay: .75s; }
  .dash.is-in .dash-points circle:nth-child(4), .dash.is-in .dash-point-cores circle:nth-child(4) { animation-delay: .95s; }
  .dash.is-in .dash-points circle:nth-child(5), .dash.is-in .dash-point-cores circle:nth-child(5) { animation-delay: 1.15s; }
  .dash.is-in .dash-points circle:nth-child(6), .dash.is-in .dash-point-cores circle:nth-child(6) { animation-delay: 1.35s; }
  @keyframes point-pop { from { opacity: 0; } to { opacity: 1; } }
  /* opacity: 0 в базе прячет круглую cap-точку нулевого штриха на время
     задержки (round linecap рисует её даже при dasharray 0 — находка №6) */
  .dash.reveal .dash-donut-value { stroke-dasharray: 0 245.1; opacity: 0; }
  .dash.is-in .dash-donut-value { animation: donut-sweep 1.3s .5s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes donut-sweep { from { stroke-dasharray: 0 245.1; opacity: 1; } to { stroke-dasharray: 242.6 2.4; opacity: 1; } }
  .dash.reveal .spark-row path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .dash.is-in .spark-row path { animation: line-draw 1.1s .7s ease-out forwards; }
  .dash.is-in .spark-row:nth-child(2) path { animation-delay: .9s; }
  .dash.is-in .spark-row:nth-child(3) path { animation-delay: 1.1s; }
}
@media (max-width: 820px) { .dash-viz { grid-template-columns: 1fr; } .dash-side { display: grid; grid-template-columns: auto 1fr; gap: 16px; } .dash-donut-block { padding: 0 16px 0 0; border: 0; border-right: 1px solid var(--line); } }
@media (max-width: 560px) { .dash { padding: 16px; } .dash-chart { padding: 13px 9px 5px; } .dash-chart-head small { display: none; } .dash-side { display: flex; } .dash-donut-block { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- «Путь заказа»: конвейер → грузовик → склад ВБ/Ozon ---------- */
.flow-panel {
  background: var(--panel-bg); border: var(--border-card); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel); padding: clamp(12px, 3vw, 28px);
  overflow: hidden;
}
.flow-svg { display: block; width: 100%; height: auto; }
.flow-svg polygon, .flow-svg path, .flow-svg ellipse, .flow-svg circle {
  stroke-linejoin: round; stroke-linecap: round;
}
.flow-svg [class^="fw-"], .flow-svg [class*=" fw-"] { vector-effect: non-scaling-stroke; }
.fw-shadow { fill: var(--ink); opacity: .12; stroke: none; filter: url(#fw-soft-shadow); }
:root[data-theme="dark"] .fw-shadow { fill: #000000; opacity: .35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fw-shadow { fill: #000000; opacity: .35; }
}

.fw-road-bed { fill: #34312d; fill: color-mix(in srgb, var(--ink) 82%, #1b1d20); stroke: var(--line); stroke-width: 1.5; }
.fw-road-side { fill: var(--mut); stroke: var(--line); stroke-width: 1.5; }
.fw-road-curb { fill: var(--card-bg); stroke: var(--line); stroke-width: 1.5; }
.fw-road-dash { fill: none; stroke: #f4ead8; stroke: color-mix(in srgb, var(--card-bg) 88%, transparent); stroke-width: 3; opacity: .78; }
.fw-road-hub { fill: var(--ink); opacity: .82; stroke: var(--line); stroke-width: 1.5; }
.fw-hub-mark { fill: none; stroke: var(--panel-bg); stroke-width: 2; opacity: .34; }
.fw-ramp-top { fill: var(--mut); stroke: var(--line); stroke-width: 1.5; }
.fw-ramp-side { fill: var(--sub); stroke: var(--line); stroke-width: 1.5; }
.fw-ramp-front { fill: var(--ink); stroke: var(--line); stroke-width: 1.5; opacity: .72; }

.fw-belt-top { fill: var(--mist); stroke: var(--line); stroke-width: 1.5; }
.fw-belt-left { fill: var(--band-bg); stroke: var(--line); stroke-width: 1.5; }
.fw-belt-right { fill: var(--mut); stroke: var(--line); stroke-width: 1.5; }
.fw-belt-motion { fill: none; stroke: var(--mut); stroke-width: 2; stroke-dasharray: 20 20; opacity: .74; }
.fw-belt-edge { fill: none; stroke: var(--line); stroke-width: 1.5; }
.fw-legs path { fill: none; stroke: var(--ink); stroke-width: 5; }
.fw-legs polygon { fill: var(--mut); stroke: var(--line); stroke-width: 1.2; }

.fw-box polygon, .fw-load-box polygon, .fw-static-box polygon { stroke: var(--line); stroke-width: 1.35; }
.fw-box-top { fill: #ffbf47; }
.fw-box-left { fill: #e9a52e; }
.fw-box-right { fill: #c88618; }
.fw-box-tape { fill: var(--card-bg); opacity: .72; }
.fw-box-label { fill: var(--canvas); stroke-width: 1; }

.fw-truck-route, .fw-load-box { opacity: 0; transform-box: view-box; transform-origin: 0 0; }
.fw-static-box { opacity: 0; }
.fw-chassis-top { fill: var(--mut); stroke: var(--line); stroke-width: 1.5; }
.fw-chassis-side { fill: var(--ink); stroke: var(--line); stroke-width: 1.5; }
.fw-van-roof { fill: #fdfbf7; fill: var(--fw-van-roof, var(--card-bg)); fill-opacity: var(--fw-van-op, .18); stroke: rgba(255,255,255,.7); stroke: color-mix(in srgb, var(--ink) 44%, transparent); stroke-width: 1.8; }
.fw-van-rear { fill: #dedbd4; fill: var(--fw-van-rear, color-mix(in srgb, var(--card-bg) 88%, var(--ink))); fill-opacity: var(--fw-van-op, .18); stroke: rgba(255,255,255,.7); stroke: color-mix(in srgb, var(--ink) 44%, transparent); stroke-width: 1.8; }
.fw-van-side { fill: #c9c5bd; fill: var(--fw-van-side, color-mix(in srgb, var(--card-bg) 76%, var(--ink))); fill-opacity: var(--fw-van-op, .18); stroke: rgba(255,255,255,.7); stroke: color-mix(in srgb, var(--ink) 44%, transparent); stroke-width: 1.8; }
/* плотность кузова — наследуемая переменная (анимируется на группе грузовика; в инлайн-<style>
   SVG её объявлять нельзя: HTML-парсер принимает '<number>' за тег и рвёт стиль) */
@property --fw-van-op { syntax: '<number>'; inherits: true; initial-value: .18; }
.fw-van-seams, .fw-van-door { fill: none; stroke: var(--fw-van-ink, var(--ink)); stroke-width: 1.25; opacity: .34; }
/* тьма: плотный кузов должен читаться плотным — светлые грани (linen-dark пары DESIGN.md).
   Грани внутри use-клона: обычные селекторы до них не достают, только наследуемые переменные */
:root[data-theme="dark"] { --fw-van-roof: #d9d2c2; --fw-van-rear: #a99e86; --fw-van-side: #c9c3b8; --fw-van-ink: #201a15; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fw-van-roof: #d9d2c2; --fw-van-rear: #a99e86; --fw-van-side: #c9c3b8; --fw-van-ink: #201a15; }
}
}
.fw-cab-top { fill: var(--act-hover); stroke: var(--line); stroke-width: 1.5; }
.fw-cab-side { fill: var(--act); stroke: var(--line); stroke-width: 1.5; }
.fw-cab-front { fill: var(--act-hover); stroke: var(--line); stroke-width: 1.5; }
.fw-windshield, .fw-side-window { fill: var(--card-bg); stroke: var(--line); stroke-width: 1.2; opacity: .94; }
.fw-window-glint { fill: none; stroke: var(--canvas); stroke-width: 2.2; opacity: .74; }
.fw-cab-step, .fw-bumper { fill: var(--mut); stroke: var(--line); stroke-width: 1.2; }
.fw-headlight { fill: #ffbf47; stroke: var(--line); stroke-width: 1; }
.fw-wheel { fill: var(--ink); stroke: var(--line); stroke-width: 1.2; }
.fw-wheel-spin { transform-box: fill-box; transform-origin: center; }
.fw-wheel-spin path { fill: none; stroke: var(--mut); stroke-width: 1.2; }
.fw-hub { fill: var(--band-bg); stroke: var(--mut); stroke-width: 1.2; }

.fw-wh polygon { stroke: var(--line); stroke-width: 1.5; }
.fw-wh-wb .fw-wh-roof { fill: #9a5cff; }
.fw-wh-wb .fw-wh-left { fill: #7b2ff7; }
.fw-wh-wb .fw-wh-right { fill: #5b1dbd; }
.fw-wh-oz .fw-wh-roof { fill: #3182ff; }
.fw-wh-oz .fw-wh-left { fill: #0042ad; }
.fw-wh-oz .fw-wh-right { fill: #005bea; }
.fw-roof-ribs { fill: none; stroke: #ffffff; stroke-width: 1.15; opacity: .24; }
.fw-roof-light { fill: var(--card-bg); stroke: var(--line); stroke-width: 1.2; opacity: .76; }
.fw-wh-oz .fw-roof-light { fill: #8fd2ff; }
.fw-roof-light-small { opacity: .54; }
.fw-gate-dark { fill: var(--ink); stroke: var(--line); stroke-width: 1.5; opacity: .78; }
.fw-gate-halo { fill: var(--card-bg); stroke: none !important; opacity: 0; filter: url(#fw-gate-glow); }
.fw-wh-door { fill: var(--band-bg); }
.fw-wh-slats { fill: none; stroke: var(--mut); stroke-width: 1.25; }
.fw-door-panel { transform-box: fill-box; transform-origin: center bottom; }
.fw-dock-light { fill: #ffbf47; stroke: var(--line); stroke-width: 1; }
.fw-wh-label { font: 800 32px "Manrope", sans-serif; fill: #ffffff; letter-spacing: -.05em; }
.fw-wh-label-oz { font-size: 24px; letter-spacing: -.08em; }

.fw-fbs polygon { stroke: var(--line); stroke-width: 1.5; }
.fw-fbs-roof { fill: #ece3d3; fill: var(--mist); }
.fw-fbs-left { fill: #ded8cd; fill: color-mix(in srgb, var(--mist) 88%, var(--ink)); }
.fw-fbs-right { fill: #c9c3b8; fill: color-mix(in srgb, var(--mist) 72%, var(--ink)); }
.fw-fbs-accent { fill: #c2622c; fill: var(--act); }
.fw-fbs-gate-dark { fill: #2b2620; fill: color-mix(in srgb, var(--ink) 82%, transparent); }
.fw-fbs-door { fill: #fdfbf7; fill: var(--card-bg); }
.fw-fbs-slats { fill: none; stroke: var(--mut); stroke-width: 1.15; }
.fw-fbs-label { font: 750 8.5px "Manrope", sans-serif; fill: var(--ink); letter-spacing: -.035em; }

@media (max-width: 640px) {
  .flow-panel { padding: 8px; }
  .flow-svg { width: 116%; max-width: none; transform: translateX(-7%); }
}

/* ---------- УТП-грид (bento) ---------- */
.utp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.utp-card {
  background: var(--card-bg); border: var(--border-card); border-radius: var(--r-card);
  padding: 20px;
}
.utp-ico {
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: var(--mint-wash);
  background: linear-gradient(145deg, var(--mint-wash), color-mix(in srgb, var(--act) 13%, var(--card-bg)));
  box-shadow: inset 0 1px 0 rgba(24,25,37,.07);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent), 0 8px 18px -14px color-mix(in srgb, var(--act) 70%, transparent);
}
.utp-ico svg { width: 32px; height: 32px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utp-ico .ico-soft { fill: rgba(232,131,74,.12); fill: color-mix(in srgb, var(--act) 12%, transparent); }
.utp-ico .ico-accent { stroke: var(--act); stroke-width: 2.1; }
.utp-card h3 { font-size: 15.5px; font-weight: var(--w-title); letter-spacing: -0.01em; }
.utp-card p { margin-top: 7px; color: var(--sub); font-size: 13px; line-height: 1.5; }
.utp-card .fbadge { margin-top: 10px; }
.utp-wide { grid-column: 1 / -1; }
.utp-roles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.utp-role {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--pill);
  padding: 8px 16px; font-size: 13px; font-weight: 600;
}
.utp-role i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
@media (max-width: 1024px) { .utp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .utp-grid { grid-template-columns: 1fr; } }

/* ---------- всплывание при скролле (reveal) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px);
            transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Сравнение скорости: ЛК ВБ против софта ---------- */
.speed-panel {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px);
  align-items: center;
  background: var(--panel-bg); border: var(--border-card); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel); padding: clamp(24px, 4vw, 44px);
}
/* цифра — солидным фазовым акцентом: градиент на тексте — табу рефов
   (Visitors/Sauce: градиент только фоном ленты, никогда на тексте) */
.speed-big {
  font-size: clamp(64px, 9vw, 112px); line-height: 1;
  font-weight: var(--w-display); letter-spacing: -0.05em;
  color: var(--hero-ink, #c2622c);
}
:root[data-phase="dusk"] { --hero-ink: #f0512e; }
:root[data-phase="night"] { --hero-ink: #e8834a; }
.speed-rows { display: grid; gap: 16px; min-width: 0; }
.speed-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; }
.speed-name { color: var(--sub); font-size: 14px; }
.speed-track { height: 14px; border-radius: var(--pill); background: var(--mist); overflow: hidden; }
.speed-fill { display: block; height: 100%; border-radius: var(--pill); }
.speed-old { background: var(--mut); opacity: .55; }
.speed-new {
  background: var(--hero-grad, linear-gradient(100deg, #c2622c, #e0925f));
  box-shadow: 0 0 14px rgba(232,131,74,.35);
  box-shadow: 0 0 14px color-mix(in srgb, var(--hero-ink, #c2622c) 40%, transparent);
}
/* v5: бары отрастают, когда панель входит в кадр (скрытый старт — только
   при .reveal от JS; reduced-motion выключает) */
@media (prefers-reduced-motion: no-preference) {
  .speed-panel.reveal .speed-fill { transform: scaleX(0); transform-origin: left center; }
  .speed-panel.is-in .speed-fill { animation: bar-fill 1.1s .3s cubic-bezier(.22,1,.36,1) forwards; }
  .speed-panel.is-in .speed-new { animation-delay: .55s; }
  @keyframes bar-fill { to { transform: scaleX(1); } }
}
.speed-val { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.speed-val small { color: var(--mut); font-weight: 400; font-size: 12px; margin-left: 4px; }
.speed-note { color: var(--mut); font-size: 13px; margin-top: 6px; }
@media (max-width: 760px) {
  .speed-panel { grid-template-columns: 1fr; text-align: center; }
  .speed-row { grid-template-columns: 1fr; gap: 6px; text-align: left; }
}

/* ---------- Карточки выгод (Visitors Feature Card / Sauce deep cards) ---------- */
.features .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fcard { padding: 28px 20px; text-align: center; border-radius: var(--r-card); }
:root[data-theme="dark"] .fcard { background: #171310; border: 1px solid rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fcard { background: #171310; border: 1px solid rgba(255,255,255,.06); }
}
.ficon {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--act); color: var(--act-ink);
}
.ficon svg { width: 20px; height: 20px; }
/* Sauce нормирует неон: декоративные круги — wash-подложка + неоновый глиф,
   заливка остаётся только у CTA/актива/графика */
:root[data-theme="dark"] .ficon,
:root[data-theme="dark"] .step .n { background: var(--mint-wash); color: var(--mint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ficon,
  :root:not([data-theme="light"]) .step .n { background: var(--mint-wash); color: var(--mint); }
}
.fcard h3 { font-size: 17px; font-weight: var(--w-title); letter-spacing: -0.015em; }
.fcard p { margin-top: 8px; color: var(--sub); font-size: 14px; line-height: 1.5; }
.fbadge {
  display: inline-block; margin-top: 12px; padding: 4px 12px;
  border-radius: var(--pill); background: var(--mint-wash); color: var(--mint);
  font-size: 12px; font-weight: 700;
}

/* ---------- Слот GPT-иллюстрации (появляется вместе с файлом) ---------- */
.iso-band { padding: 64px 0 0; text-align: center; }
.iso-band img { max-width: 720px; width: 100%; height: auto; }
.iso-band .iso-dark { display: none; }
:root[data-theme="dark"] .iso-band .iso-light { display: none; }
:root[data-theme="dark"] .iso-band .iso-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iso-band .iso-light { display: none; }
  :root:not([data-theme="light"]) .iso-band .iso-dark { display: inline; }
}

/* ---------- Три шага ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  border: var(--border-card); border-radius: var(--r-card); padding: 24px;
  background: var(--card-bg);
}
.step .n {
  display: flex; width: 36px; height: 36px; border-radius: 50%;
  background: var(--act); color: var(--act-ink); font-weight: 700;
  align-items: center; justify-content: center; margin-bottom: 14px; font-size: 15px;
}
.step h3 { font-size: 16.5px; font-weight: var(--w-title); }
.step p { margin-top: 6px; color: var(--sub); font-size: 14px; line-height: 1.5; }

/* v5: карточки отвечают курсору светом, не движением — transform занят
   reveal-транзишеном, конфликтовать с ним нельзя */
@media (hover: hover) {
  .utp-card, .fcard, .step { transition: border-color .3s ease, box-shadow .3s ease; }
  .utp-card:hover, .fcard:hover, .step:hover {
    border-color: rgba(232,131,74,.4);
    border-color: color-mix(in srgb, var(--act) 45%, var(--line));
    box-shadow: 0 14px 34px -20px rgba(5,14,24,.45);
  }
  .utp-card .utp-ico { transition: box-shadow .3s ease; }
  .utp-card:hover .utp-ico {
    box-shadow: inset 0 1px 0 rgba(24,25,37,.07), 0 8px 22px -10px rgba(232,131,74,.6);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
                0 8px 22px -10px color-mix(in srgb, var(--act) 65%, transparent);
  }
}

/* ---------- Форма заявки ---------- */
.ask { margin-top: 64px; }
.ask-inner {
  border-radius: var(--r-band); padding: clamp(32px, 5vw, 56px) 24px;
  background: var(--band-bg); border: var(--border-card);
}
:root[data-theme="dark"] .ask-inner { background: #f5efe5; border: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask-inner { background: #f5efe5; border: 0; }
}
:root[data-theme="dark"] .ask-inner,
:root[data-theme="dark"] .ask-inner h2 { color: #2b2620; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask-inner,
  :root:not([data-theme="light"]) .ask-inner h2 { color: #2b2620; }
}
.ask h2 {
  text-align: center; font-size: clamp(24px, 4vw, 34px);
  font-weight: var(--w-head); letter-spacing: var(--track-head);
}
.ask .sub { text-align: center; margin: 10px auto 26px; max-width: 420px; font-size: 15px; color: var(--sub); }
:root[data-theme="dark"] .ask .sub { color: #665e50; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask .sub { color: #665e50; }
}
.ask form { max-width: 460px; margin: 0 auto; display: grid; gap: 12px; }
.ask label { font-size: 13px; font-weight: 700; margin-bottom: -6px; }
.ask input, .ask textarea {
  width: 100%; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
  padding: 13px 14px; font: inherit; font-size: 15px;
  transition: border-color .15s ease;
}
.ask input:focus, .ask textarea:focus { border-color: var(--focus-ring); outline: none; }
:root[data-theme="dark"] .ask input, :root[data-theme="dark"] .ask textarea {
  background: #ffffff; color: #2b2620; border-color: #d8cfbd;
}
/* фокус на белой mint-frost карточке: неон 1.77:1 к белому не виден —
   тёмная рамка-чернила по духу Dub-инпутов (слом Кодекса, деф. №8) */
:root[data-theme="dark"] .ask input:focus,
:root[data-theme="dark"] .ask textarea:focus {
  border-color: #2b2620; box-shadow: 0 0 0 1px #2b2620 inset;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask input, :root:not([data-theme="light"]) .ask textarea {
    background: #ffffff; color: #2b2620; border-color: #d8cfbd;
  }
  :root:not([data-theme="light"]) .ask input:focus,
  :root:not([data-theme="light"]) .ask textarea:focus {
    border-color: #2b2620; box-shadow: 0 0 0 1px #2b2620 inset;
  }
}
.ask textarea { min-height: 80px; resize: vertical; }
.ask .btn-primary {
  width: 100%; padding: 15px; font-size: 16px;
  box-shadow: 0 12px 28px -12px rgba(232,131,74,.55);
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--act) 60%, transparent);
}
.ask .fine { color: var(--mut); font-size: 12.5px; text-align: center; }
:root[data-theme="dark"] .ask .fine { color: #6f685c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ask .fine { color: #6f685c; }
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ok-note {
  max-width: 460px; margin: 0 auto; text-align: center;
  background: var(--mint-wash); color: var(--mint);
  border-radius: var(--r-card); padding: 24px; font-weight: 700;
}
:root[data-theme="dark"] .ok-note { background: rgba(19,35,34,.08); color: #0c7a4b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ok-note { background: rgba(19,35,34,.08); color: #0c7a4b; }
}
.err-note { max-width: 460px; margin: 12px auto 0; text-align: center; color: var(--ember); font-size: 14px; }
:root[data-theme="dark"] .err-note { color: #b23000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .err-note { color: #b23000; }
}

/* ---------- Страница «Как это работает» (модуль Б) ---------- */
.hero-sub { padding-bottom: 8px; }
/* слот атмосферной GPT-ленты за шапкой (включается файлом how-hero-band.png) */
.how-band {
  height: 120px; margin-bottom: -120px;
  background: url("/static/img/landing/how-hero-band.png") center/cover no-repeat;
  opacity: .35;
}
:root[data-theme="dark"] .how-band { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .how-band { display: none; }
}
.how-step {
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: 56px 0 0;
}
.how-step-flip { grid-template-columns: 7fr minmax(280px, 5fr); }
.how-step-flip .how-text { order: 2; }
.how-step-flip .shot-frame { order: 1; }
.how-step > * { min-width: 0; } /* грид не раздувается от длинного слова */
.how-text p, .how-text li { overflow-wrap: anywhere; }
.how-text h2 {
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2;
  font-weight: var(--w-head); letter-spacing: var(--track-head);
  margin-top: 4px;
}
.how-text p { margin-top: 12px; color: var(--sub); font-size: 16px; }
.how-text ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.how-text li {
  position: relative; padding-left: 22px; color: var(--sub); font-size: 14.5px; line-height: 1.5;
}
.how-text li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 6px; border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint); transform: rotate(-45deg);
}
/* окно в продукт (Dub Product Mockup Container): асимметричный верх,
   кольцевая тень; низ прижат — «панель», не «картинка в рамке» */
.shot-frame {
  margin: 0; border-radius: var(--r-mock) var(--r-mock) 0 0; overflow: hidden;
  background: var(--mock-bg); box-shadow: var(--shadow-mock);
  border-bottom: 0;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.how-cta { text-align: center; padding: 80px 0 16px; }
.how-cta h2 {
  font-size: clamp(26px, 4vw, 38px); font-weight: var(--w-head);
  letter-spacing: var(--track-head);
}
.how-cta p { margin-top: 10px; color: var(--sub); }
.how-cta .cta-row { margin-top: 24px; }
@media (max-width: 900px) {
  .how-step { grid-template-columns: 1fr; padding-top: 48px; }
  .how-step-flip .how-text { order: 1; }
  .how-step-flip .shot-frame { order: 2; }
}

/* ---------- Подвал ---------- */
footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  padding: 24px 0 44px; color: var(--mut); font-size: 13.5px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .features .grid4 { grid-template-columns: repeat(2, 1fr); }
  /* на 769–1024 мокапу остаётся ~700px и правые виджеты ложились ПОВЕРХ
     его строк (находка №2) — стекло живёт только на полном десктопе */
  .float-widget { display: none; }
}
@media (max-width: 768px) {
  .metric-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .mock-row { grid-template-columns: 34px 1.5fr 0.9fr auto; }
  .mock-size, .mock-wh { display: none; }
  .float-note { display: none; }
  .mockup { animation: none; transform: none; }
  .hero { padding-top: 48px; }
}
@media (max-width: 640px) {
  .features .grid4 { grid-template-columns: 1fr; }
  .lp-actions .btn-primary { display: none; } /* дублируется хиро-CTA, экономим ширину */
  .cta-row .btn { width: 100%; }
  .mock-tabs { display: none; }
  .wrap { padding: 0 16px; }
}
@media (max-width: 375px) {
  .mock-row { grid-template-columns: 28px 1.4fr auto; }
  .mock-act { display: none; }
  .hero h1 { font-size: 34px; }
}
@media (max-width: 430px) {
  /* на 375–430 шапка (лого + «Вход для команды») вылезала на 3–6px вправо
     и давала горизонтальный скролл всей странице — ужимаем как раньше на 360 */
  .lp-top { padding: 14px 0; }
  .lp-logo { font-size: 16.5px; }
  .lp-actions { gap: 6px; }
  .lp-actions .btn { padding: 9px 13px; font-size: 13px; }
  .theme-toggle { width: 36px; height: 36px; }
}
@media (max-width: 344px) {
  /* 320: шапке нужно ещё −8px — прячем сателлит логотипа, ужимаем кнопку */
  .lp-logo-sub { display: none; }
  .lp-actions .btn { padding: 8px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .theme-toggle { transition: none; }
  .dash-live i { animation: none; } /* LIVE-точка не мигает (находка №8) */
}

/* печать: показать всё, что прячут reveal/анимации, снять тёмную сцену
   и свечения — иначе ночная фаза уходила на бумагу обсидианом с mint-мглой,
   а не успевшие раскрыться блоки печатались пустыми (находка №4) */
@media print {
  /* v6 (слом, находка №1): ночная фаза целиком — на бумагу светлыми токенами; стекло и
     3D-витрина не печатаются (backdrop-filter и perspective в PDF дают мусор) */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light; --canvas: #ffffff; --band-bg: #f5efe5; --mist: #ece3d3; --line: #e4ddcc;
    --card-bg: #ffffff; --panel-bg: #ffffff; --mock-bg: #ffffff; --mock-chrome: #ece3d3;
    --ink: #2b2620; --sub: #665e50; --mut: #6f685c; --act: #c2622c; --act-ink: #ffffff;
    --link: #2f7c8a; --mint: #2e7d4c; --mint-wash: #e0efdc; --ember: #c33b2b; --ember-wash: #f6ded6;
    --band-hero: #f5efe5; --grid: #e7e0d1; --tip-bg: #2b2620; --tip-ink: #ffffff;
  }
  body { background: #ffffff; color: #2b2620; }
  .glass, .lp-bar, .btn-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #ffffff !important; }
  .hero-stage, .stage-glow { display: none !important; }
  .hero-v6 { grid-template-columns: 1fr; }
  .reveal { opacity: 1 !important; transform: none !important; translate: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dash.reveal .dash-line, .dash.reveal .spark-row path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .dash.reveal .dash-donut-value { stroke-dasharray: 242.6 2.4; opacity: 1; }
  .dash.reveal .dash-area, .dash.reveal .dash-end-label,
  .dash.reveal .dash-points circle, .dash.reveal .dash-point-cores circle { opacity: 1; }
  .band-inner, :root[data-theme="dark"] .band-inner { background: #ffffff !important; border: 1px solid #e8e8e8; }
  .band-inner::after { display: none; }
  .hero, :root[data-theme="dark"] .hero { background: none; }
  .mockup, :root[data-theme="dark"] .mockup { box-shadow: none; }
  .float-widget { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* скрины /how — в тон фазы: день и закат показывают светлый интерфейс,
   ночь — тёмный (правка Данила: «скрины должны быть в тему сайта») */
.shot-dark { display: none; }
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }

/* ======================================================================
   v6 (01.09.2026, директива Данила): витрина-хиро, Liquid Glass, цифры
   ====================================================================== */

/* ---------- Liquid Glass: общий материал ---------- */
.glass {
  background: rgba(253,251,247,.72);
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  border: 1px solid rgba(43,38,32,.12);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 30px 60px -28px rgba(43,38,32,.45), 0 12px 24px -16px rgba(43,38,32,.30),
              inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,255,255,.25);
  position: relative; overflow: hidden;
}
.glass::before {
  /* блик-«преломление»: тёплый свет по верхнему левому краю стекла */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 70% at 12% -10%, rgba(255,255,255,.55), transparent 55%);
  background: radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, white 55%, transparent), transparent 55%);
}
:root[data-theme="dark"] .glass {
  background: rgba(44,37,29,.66);
  background: color-mix(in srgb, var(--mock-bg) 66%, transparent);
  border-color: rgba(232,131,74,.22);
  border-color: color-mix(in srgb, var(--act) 22%, transparent);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 12px 24px -16px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(255,255,255,.05);
}
:root[data-theme="dark"] .glass::before {
  background: radial-gradient(120% 70% at 12% -10%, rgba(244,174,125,.16), transparent 55%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass {
    background: rgba(44,37,29,.66);
    background: color-mix(in srgb, var(--mock-bg) 66%, transparent);
    border-color: rgba(232,131,74,.22);
    border-color: color-mix(in srgb, var(--act) 22%, transparent);
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 12px 24px -16px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 .5px rgba(255,255,255,.05);
  }
  :root:not([data-theme="light"]) .glass::before {
    background: radial-gradient(120% 70% at 12% -10%, rgba(244,174,125,.16), transparent 55%);
  }
}

/* ---------- Шапка: липкое стекло ---------- */
.lp-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(245,239,229,.62);
  background: color-mix(in srgb, var(--canvas) 62%, transparent);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid rgba(43,38,32,.08);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] .lp-bar {
  background: rgba(32,26,21,.6); background: color-mix(in srgb, var(--canvas) 60%, transparent);
  border-bottom-color: rgba(255,255,255,.07); box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-bar {
    background: rgba(32,26,21,.6); background: color-mix(in srgb, var(--canvas) 60%, transparent);
    border-bottom-color: rgba(255,255,255,.07); box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
  }
}
.lp-bar .lp-top { padding: 14px 0; }
section[id] { scroll-margin-top: 80px; }
/* стеклянная вторичная кнопка */
.btn-glass {
  background: rgba(253,251,247,.55); background: color-mix(in srgb, var(--card-bg) 55%, transparent);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(43,38,32,.06);
}
.btn-glass:hover { background: rgba(253,251,247,.85); background: color-mix(in srgb, var(--card-bg) 85%, transparent); }
:root[data-theme="dark"] .btn-glass { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
:root[data-theme="dark"] .btn-glass:hover { background: rgba(255,255,255,.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-glass { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .btn-glass:hover { background: rgba(255,255,255,.12); }
}

/* ---------- Хиро v6: две колонки, витрина справа ---------- */
.hero-v6 { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 56px);
           align-items: center; text-align: left; padding: clamp(36px, 6vw, 72px) 0 32px; }
.hero-v6 .hero-eyebrow { color: var(--act); margin-bottom: 14px; }
.hero-v6 h1 { margin: 0; max-width: 620px; font-size: clamp(34px, 4.6vw, 62px); }
.hero-v6 .lead { margin: 20px 0 0; max-width: 540px; font-size: 17px; }
.hero-v6 .cta-row { justify-content: flex-start; }
.hero-v6 .note { margin-top: 14px; }
.hero-stats { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, auto); gap: 8px 28px;
              justify-content: start; border-top: 1px solid var(--line); padding-top: 22px; }
.hero-stats li { display: grid; gap: 3px; min-width: 0; }
.hero-stats b { font-size: 28px; line-height: 1; font-weight: var(--w-display); letter-spacing: -0.04em; color: var(--ink);
                font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-stats b i { font-style: normal; color: var(--act); }
.hero-stats small { color: var(--mut); font-size: 12px; line-height: 1.3; }

.hero-stage { position: relative; min-height: 600px; }
.stage-glow {
  position: absolute; inset: -12% -10%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 38% at 62% 42%, rgba(194,98,44,.28), transparent 70%),
    radial-gradient(30% 28% at 22% 78%, rgba(224,146,95,.22), transparent 72%),
    radial-gradient(rgba(43,38,32,.16) 1px, transparent 1.4px);
  background-size: auto, auto, 24px 24px;
  -webkit-mask-image: radial-gradient(70% 70% at 55% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 55% 50%, #000 30%, transparent 78%);
  filter: blur(.2px);
}
:root[data-theme="dark"] .stage-glow {
  background:
    radial-gradient(44% 40% at 62% 42%, rgba(232,131,74,.36), transparent 70%),
    radial-gradient(30% 28% at 22% 78%, rgba(244,174,125,.16), transparent 72%),
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px);
  background-size: auto, auto, 24px 24px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage-glow {
    background:
      radial-gradient(44% 40% at 62% 42%, rgba(232,131,74,.36), transparent 70%),
      radial-gradient(30% 28% at 22% 78%, rgba(244,174,125,.16), transparent 72%),
      radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.4px);
    background-size: auto, auto, 24px 24px;
  }
}
.stage-3d {
  position: relative; z-index: 1; height: 600px; perspective: 1500px;
  --rx: 7deg; --ry: -13deg;
}
.stage-card { position: absolute; border-radius: var(--r-card); transform-style: preserve-3d; will-change: transform; }
.stage-main {
  left: 6%; top: 44px; width: 80%; padding: 18px 20px 16px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.stage-a { left: 58%; top: 4px; width: 44%; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-radius: 15px;
           transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(70px); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.stage-b { left: -5%; top: 446px; width: 58%; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 15px;
           transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(100px); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.stage-c { left: 56%; top: 486px; width: 50%; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-radius: 15px;
           transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(50px); transition: transform .35s cubic-bezier(.22,1,.36,1); }
/* карточки чуть «дышат» по-разному, входят каскадом */
@media (prefers-reduced-motion: no-preference) {
  .stage-card { animation: stage-in 1s cubic-bezier(.16,1,.3,1) both; }
  .stage-a { animation-delay: .25s; } .stage-b { animation-delay: .45s; } .stage-c { animation-delay: .6s; }
  @keyframes stage-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  .hero-stage.is-live .stage-a { animation: stage-in 1s .25s cubic-bezier(.16,1,.3,1) both, stage-bob 7s 1.3s ease-in-out infinite alternate; }
  .hero-stage.is-live .stage-b { animation: stage-in 1s .45s cubic-bezier(.16,1,.3,1) both, stage-bob 8s 1.6s ease-in-out infinite alternate-reverse; }
  .hero-stage.is-live .stage-c { animation: stage-in 1s .6s cubic-bezier(.16,1,.3,1) both, stage-bob 6.5s 1.9s ease-in-out infinite alternate; }
  @keyframes stage-bob { from { translate: 0 0; } to { translate: 0 -9px; } }
  .stage-main .sc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sc-draw 1.6s .5s cubic-bezier(.22,1,.36,1) forwards; }
  .stage-main .sc-area { opacity: 0; animation: soft-in .9s 1.3s ease forwards; }
  .stage-main .sc-dots circle { opacity: 0; animation: soft-in .4s ease forwards; }
  .stage-main .sc-dots circle:nth-child(1) { animation-delay: .7s; } .stage-main .sc-dots circle:nth-child(2) { animation-delay: 1s; }
  .stage-main .sc-dots circle:nth-child(3) { animation-delay: 1.3s; } .stage-main .sc-dots circle:nth-child(4) { animation-delay: 1.7s; }
  @keyframes sc-draw { to { stroke-dashoffset: 0; } }
  .sc-ring .v { stroke-dasharray: 100.5; stroke-dashoffset: 100.5; animation: sc-ring 1.4s 1s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes sc-ring { to { stroke-dashoffset: 1; } }
}
/* содержимое главной карты */
.sc-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); }
.sc-head b { font-size: 14px; color: var(--ink); letter-spacing: -.02em; }
.sc-head b i { font-style: normal; color: var(--act); }
.sc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.sc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.sc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.sc-kpis > div { padding: 10px 12px; border-radius: 12px; background: rgba(43,38,32,.045); background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.sc-kpis small { display: block; color: var(--mut); font-size: 10.5px; }
.sc-kpis b { display: block; margin-top: 2px; font-size: 22px; line-height: 1.05; letter-spacing: -.04em; font-weight: var(--w-display); }
.sc-kpis b i { font-style: normal; font-size: 13px; color: var(--act); }
.sc-kpis span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--mut); }
.sc-kpis span.up { color: var(--mint); font-weight: 700; }
.sc-chart { margin-top: 14px; }
.sc-chart-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--mut); }
.sc-chart-head em { font-style: normal; font-weight: 700; color: var(--act); }
.sc-chart svg { display: block; width: 100%; height: 118px; margin-top: 6px; overflow: visible; }
.sc-grid line { stroke: var(--grid); stroke-width: 1; }
.sc-area { fill: url(#sc-area); }
.sc-line { fill: none; stroke: var(--act); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-dots circle { fill: var(--card-bg); stroke: var(--act); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.sc-chart-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--mut); }
.sc-chart-foot .hot { color: var(--act); font-weight: 700; }
.sc-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; }
.sc-foot small { display: block; color: var(--mut); font-size: 10px; }
.sc-foot b { display: block; font-size: 12.5px; }
.sc-ring { position: relative; width: 40px; height: 40px; flex: none; }
.sc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-ring circle { fill: none; stroke-width: 4; }
.sc-ring .t { stroke: rgba(43,38,32,.1); stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
.sc-ring .v { stroke: var(--act); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 1; }
.sc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; letter-spacing: -.03em; }
.sc-people { margin-left: auto; text-align: right; }
/* плавающие карты */
.sc-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--act);
          background: rgba(194,98,44,.12); background: color-mix(in srgb, var(--act) 12%, transparent); }
.sc-ico svg { width: 20px; height: 20px; }
.sc-text { display: grid; gap: 2px; min-width: 0; }
.sc-text small { color: var(--mut); font-size: 10px; }
.sc-text b { font-size: 12.5px; line-height: 1.25; letter-spacing: -.01em; }
.sc-text em { font-style: normal; font-size: 10.5px; color: var(--sub); }
.stage-a .mini-bars { width: 62px; height: 36px; margin-left: auto; }
.sc-badge { margin-left: auto; padding: 4px 8px; border-radius: var(--pill); background: var(--mint-wash); color: #0c7a4b; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
:root[data-theme="dark"] .sc-badge { color: var(--mint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sc-badge { color: var(--mint); } }

@media (max-width: 1100px) {
  .hero-v6 { grid-template-columns: 1fr; text-align: center; }
  .hero-v6 h1, .hero-v6 .lead { margin-left: auto; margin-right: auto; }
  .hero-v6 .cta-row { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-stage { width: 100%; max-width: 640px; justify-self: center; margin: 24px 0 0; min-height: 0; }
  .stage-3d { height: 560px; --ry: -8deg; --rx: 6deg; }
}
@media (max-width: 760px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; text-align: left; }
  .stage-3d { height: 500px; }
  .stage-main { left: 0; width: 100%; top: 56px; }
  .stage-a { left: auto; right: 0; top: 0; width: 60%; }
  .stage-b { left: 0; top: 420px; width: 74%; }
  .stage-glow { inset: -12% 0; }
  .stage-c { display: none; }
  .sc-people { display: none; }
}
@media (max-width: 430px) {
  .stage-3d { height: 470px; --ry: -5deg; --rx: 4deg; }
  .stage-main { padding: 14px 14px 12px; top: 48px; }
  .sc-chart svg { height: 96px; }
  .stage-a { width: 68%; }
  .stage-b { top: 398px; width: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-3d { --rx: 0deg; --ry: 0deg; }
  .stage-card, .sc-line, .sc-area, .sc-dots circle, .sc-ring .v { animation: none !important; transition: none !important; }
}

/* ---------- УТП v6: мини-визуалы в карточках ---------- */
.utp-card { display: flex; flex-direction: column; align-items: flex-start; }
.utp-card > p { flex: 1 0 auto; }
.utp-viz { width: 100%; margin-top: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
           background: rgba(43,38,32,.035); background: color-mix(in srgb, var(--ink) 3.5%, transparent); font-size: 11px; color: var(--sub); }
.utp-card .fbadge { margin-top: 12px; }
.utp-card h3 { font-size: 16px; }
/* бары */
.viz-bars { display: grid; gap: 8px; }
.viz-bars > div { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 8px; }
.viz-bars small { color: var(--mut); font-size: 10px; }
.viz-bars b { font-size: 11px; white-space: nowrap; }
.viz-bars b.hot { color: var(--act); }
.viz-track { display: block; height: 8px; border-radius: var(--pill); background: var(--mist); overflow: hidden; }
.viz-track i { display: block; height: 100%; width: var(--w); border-radius: var(--pill); }
.viz-old { background: var(--mut); opacity: .5; }
.viz-new { background: linear-gradient(90deg, var(--act-2, var(--act)), var(--act)); box-shadow: 0 0 8px rgba(194,98,44,.4); box-shadow: 0 0 8px color-mix(in srgb, var(--act) 45%, transparent); }
/* спарклайн */
.viz-spark { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.viz-spark small { display: block; color: var(--mut); font-size: 10px; }
.viz-spark b { display: block; font-size: 17px; letter-spacing: -.03em; line-height: 1.1; }
.viz-spark em { font-style: normal; font-size: 10px; font-weight: 700; }
.viz-spark em.up { color: var(--mint); }
.viz-spark svg { width: 100%; height: 44px; overflow: visible; }
.viz-area { fill: url(#utp-sp); opacity: .9; }
.viz-line { fill: none; stroke: var(--act); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke;
            filter: drop-shadow(0 3px 3px rgba(194,98,44,.3)); filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--act) 30%, transparent)); }
/* чат бота */
.viz-chat { display: grid; gap: 6px; }
.viz-msg { display: flex; align-items: flex-start; gap: 7px; padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: var(--card-bg); border: 1px solid var(--line); font-size: 11px; line-height: 1.3; color: var(--ink); }
.viz-msg i { flex: none; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.viz-msg-warn i { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
/* наклейка */
.viz-label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; background: #ffffff; color: #2b2620; border: 1px dashed rgba(43,38,32,.3); }
.viz-barcode { display: flex; gap: 2px; height: 24px; align-items: stretch; }
.viz-barcode i { width: 2px; background: #2b2620; }
.viz-barcode i:nth-child(3n) { width: 1px; } .viz-barcode i:nth-child(4n) { width: 3px; } .viz-barcode i:nth-child(7n) { opacity: .55; }
.viz-label-text b, .viz-label-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-label-text b { font-size: 11px; letter-spacing: -.01em; }
.viz-label-text small { display: block; font-size: 9.5px; color: #665e50; }
.viz-label em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--act); white-space: nowrap; }
/* телефон */
.viz-phone { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.viz-phone-frame { position: relative; width: 58px; height: 74px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card-bg); overflow: hidden; display: grid; place-content: center; text-align: center; }
.viz-phone-frame b { font-size: 12px; letter-spacing: -.02em; }
.viz-phone-frame small { font-size: 8px; color: var(--mut); }
.viz-scanline { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--act); box-shadow: 0 0 8px var(--act); border-radius: 2px; }
.viz-phone-text b { display: block; font-size: 12px; }
.viz-phone-text small { display: block; color: var(--mut); font-size: 10px; margin-top: 2px; }
.viz-phone-text em { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: var(--pill); background: var(--mint-wash); color: var(--mint); font-style: normal; font-size: 10px; font-weight: 700; }
/* печать по воздуху */
.viz-air { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.viz-air-node { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--act);
                background: rgba(194,98,44,.12); background: color-mix(in srgb, var(--act) 12%, transparent); }
.viz-air-node svg { width: 20px; height: 20px; }
.viz-air-path { position: relative; display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 4px; }
.viz-air-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.viz-air-path i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.viz-air-path em { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--act); box-shadow: 0 0 10px var(--act); }
.viz-air b { font-size: 12px; color: var(--act); white-space: nowrap; }
/* календарь смен */
.viz-cal { display: grid; gap: 4px; }
.viz-cal-days, .viz-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.viz-cal-days i { font-style: normal; font-size: 9.5px; color: var(--mut); text-align: center; }
.viz-cal-row i { height: 12px; border-radius: 3px; background: var(--act); opacity: calc(.12 + var(--l) * .88); }
/* кольцо ЧЗ */
.viz-ring-row { display: flex; align-items: center; gap: 12px; }
.viz-ring { position: relative; width: 44px; height: 44px; flex: none; }
.viz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.viz-ring circle { fill: none; stroke-width: 4; }
.viz-ring .t { stroke: rgba(43,38,32,.1); stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
.viz-ring .v { stroke: var(--act); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 0; }
.viz-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9.5px; letter-spacing: -.03em; }
.viz-ring-text b { display: block; font-size: 12px; }
.viz-ring-text small { display: block; color: var(--mut); font-size: 10px; margin-top: 2px; }
/* широкая карточка: тело + таймлайн */
.utp-wide-body { width: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.utp-viz-timeline { margin-top: 0; }
.viz-tl { display: grid; gap: 10px; position: relative; padding-left: 4px; }
.viz-tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; border-left: 1px dashed var(--line); }
.viz-tl-step { position: relative; display: grid; grid-template-columns: 10px auto 1fr; gap: 10px; align-items: baseline; }
.viz-tl-step i { width: 9px; height: 9px; border-radius: 50%; background: var(--act); box-shadow: 0 0 8px rgba(194,98,44,.5); box-shadow: 0 0 8px color-mix(in srgb, var(--act) 50%, transparent); }
.viz-tl-step:first-child i { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.viz-tl-step b { font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-tl-step small { font-size: 11px; color: var(--sub); }
@media (max-width: 760px) { .utp-wide-body { grid-template-columns: 1fr; } .utp-viz-timeline { margin-top: 14px; } }
/* оживление по входу в кадр */
@media (prefers-reduced-motion: no-preference) {
  .utp-card.reveal .viz-track i { transform: scaleX(0); transform-origin: left; }
  .utp-card.is-in .viz-track i { animation: bar-fill .9s .2s cubic-bezier(.22,1,.36,1) forwards; }
  .utp-card.reveal .viz-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .utp-card.is-in .viz-line { animation: sc-draw 1.4s .2s cubic-bezier(.22,1,.36,1) forwards; }
  .utp-card.reveal .viz-ring .v { stroke-dashoffset: 100.5; }
  .utp-card.is-in .viz-ring .v { animation: viz-ring 1.4s .2s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes viz-ring { to { stroke-dashoffset: 0; } }
  .utp-card.is-in .viz-air-path em { animation: viz-fly 2.4s .3s ease-in-out infinite; }
  @keyframes viz-fly { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
  .utp-card.is-in .viz-scanline { animation: viz-scan 2.2s .3s ease-in-out infinite alternate; }
  @keyframes viz-scan { from { top: 8px; } to { top: 60px; } }
  .utp-card.reveal .viz-cal-row i { opacity: 0; }
  .utp-card.is-in .viz-cal-row i { animation: viz-cell .5s ease forwards; }
  .utp-card.is-in .viz-cal-row i:nth-child(1) { animation-delay: .1s; } .utp-card.is-in .viz-cal-row i:nth-child(2) { animation-delay: .18s; }
  .utp-card.is-in .viz-cal-row i:nth-child(3) { animation-delay: .26s; } .utp-card.is-in .viz-cal-row i:nth-child(4) { animation-delay: .34s; }
  .utp-card.is-in .viz-cal-row i:nth-child(5) { animation-delay: .42s; } .utp-card.is-in .viz-cal-row i:nth-child(6) { animation-delay: .5s; }
  .utp-card.is-in .viz-cal-row i:nth-child(7) { animation-delay: .58s; }
  @keyframes viz-cell { to { opacity: calc(.12 + var(--l) * .88); } }
  .utp-card.reveal .viz-tl-step { opacity: 0; translate: -6px 0; }
  .utp-card.is-in .viz-tl-step { animation: viz-step .5s cubic-bezier(.22,1,.36,1) forwards; }
  .utp-card.is-in .viz-tl-step:nth-child(2) { animation-delay: .25s; } .utp-card.is-in .viz-tl-step:nth-child(3) { animation-delay: .5s; } .utp-card.is-in .viz-tl-step:nth-child(4) { animation-delay: .75s; }
  @keyframes viz-step { to { opacity: 1; translate: 0 0; } }
}
/* v6.1: крупная этикетка ШК + ЧЗ (карточка «Наклейки») */
.utp-viz-label { padding: 12px; }
.viz-label2 { display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #ffffff; color: #2b2620; border: 1px dashed rgba(43,38,32,.35); box-shadow: 0 6px 16px -12px rgba(43,38,32,.5); }
.viz-label2-head b { display: block; font-size: 12.5px; letter-spacing: -.01em; }
.viz-label2-head small { display: block; font-size: 9.5px; color: #665e50; margin-top: 1px; }
.viz-label2-codes { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.viz-l2-bar { display: grid; gap: 3px; min-width: 0; }
.viz-l2-bar .viz-barcode { height: 30px; }
.viz-l2-bar small, .viz-l2-dm small { font-size: 9px; color: #2b2620; letter-spacing: .04em; white-space: nowrap; }
.viz-l2-dm { display: grid; gap: 3px; justify-items: center; }
.viz-dm { display: block; width: 40px; height: 40px; background-color: #2b2620;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 40%, transparent 41%) 0 0 / 4px 4px repeat,
                linear-gradient(#000, #000) 0 0 / 2px 100% no-repeat, linear-gradient(#000, #000) 0 100% / 100% 2px no-repeat;
  mask: radial-gradient(circle at 50% 50%, #000 0 40%, transparent 41%) 0 0 / 4px 4px repeat,
        linear-gradient(#000, #000) 0 0 / 2px 100% no-repeat, linear-gradient(#000, #000) 0 100% / 100% 2px no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add; }
.viz-label2-tag { justify-self: start; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--act); }

/* v6.1: текстовая страница политики */
.legal { max-width: 720px; margin: 8px auto 64px; }
.legal h2 { font-size: 22px; font-weight: var(--w-head); letter-spacing: var(--track-head); margin: 28px 0 8px; }
.legal p { color: var(--sub); font-size: 16px; line-height: 1.6; }
.legal a { color: var(--link); }
.legal-date { margin-top: 28px; font-size: 13px; color: var(--mut); }

/* ---------- футер v6.2: документы · контакты · реквизиты (по образцу RocketSeller) ---------- */
.lp-footer { display: block; padding: 40px 0 28px; border-top: 1px solid var(--line); }
.lp-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; align-items: start; }
.lp-footer-brand p { margin-top: 12px; max-width: 380px; color: var(--sub); font-size: 13.5px; line-height: 1.5; }
.lp-footer-col { display: grid; gap: 8px; align-content: start; font-size: 14px; }
.lp-footer-col b { font-size: 12px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.lp-footer-col a { color: var(--ink); text-decoration: none; }
.lp-footer-col a:hover { color: var(--act); }
.lp-footer-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mut); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 760px) { .lp-footer-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- вход (v6.3): форма слева, витрина справа — как у SelSup ---------- */
.auth-main { min-height: calc(100vh - 70px); display: flex; align-items: center; }
.auth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; padding: 32px 0 48px; }
.auth-form { border-radius: var(--r-band); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: visible; }
.auth-form h1 { margin-top: 18px; font-size: clamp(26px, 3vw, 34px); font-weight: var(--w-head); letter-spacing: var(--track-head); }
.auth-sub { color: var(--sub); font-size: 15px; }
.auth-alert { padding: 10px 14px; border-radius: 12px; background: var(--ember-wash); color: var(--ember); font-weight: 700; font-size: 14px; }
.auth-fields { display: grid; gap: 12px; margin-top: 6px; }
.auth-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sub); }
.auth-fields input { width: 100%; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-input); padding: 13px 14px; font: inherit; font-size: 16px; transition: border-color .15s ease; }
.auth-fields input:focus { border-color: var(--focus-ring); outline: none; }
.auth-btn { width: 100%; padding: 15px; font-size: 16px; margin-top: 4px; }
.auth-switch { margin-top: 4px; color: var(--link); font-size: 14px; }
.auth-packers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.auth-packers .packer-pick { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); cursor: pointer; font-size: 14px; }
.auth-packers .packer-pick:has(input:checked) { border-color: var(--act); box-shadow: 0 0 0 1px var(--act) inset; }
.auth-packers input { accent-color: var(--act); }
.auth-promo { position: relative; overflow: hidden; border-radius: var(--r-band); padding: clamp(28px, 4vw, 48px); color: #ffffff;
  background: radial-gradient(60% 50% at 70% 20%, rgba(232,131,74,.45), transparent 70%), linear-gradient(160deg, #2c251d, #171310); display: flex; flex-direction: column; gap: 18px; }
.auth-promo-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 80%); }
.auth-promo-eyebrow { position: relative; color: #f4ae7d; font-size: 11px; font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.auth-promo h2 { position: relative; max-width: 420px; font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--w-head); letter-spacing: var(--track-head); color: #ffffff; }
.auth-card { position: relative; left: auto; top: auto; width: min(100%, 460px); transform: rotateX(4deg) rotateY(-8deg); margin: 8px 0; color: #ffffff;
  background: rgba(44,37,29,.66); border-color: rgba(232,131,74,.22); }
.auth-card .sc-head b, .auth-card .sc-kpis b, .auth-card .sc-foot b { color: #ffffff; }
.auth-card .sc-kpis > div { background: rgba(255,255,255,.06); }
.auth-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.auth-chips span { padding: 8px 14px; border-radius: var(--pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 600; }
.auth-promo-link { position: relative; margin-top: auto; color: #f4ae7d; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-promo { display: none; } .auth-main { align-items: start; } }
@media (prefers-reduced-motion: no-preference) { .auth-card { animation: stage-in 1s cubic-bezier(.16,1,.3,1) both; } }