/* ANaThyr Landing — стили посадочной страницы.
   Палитра — Ocean Breeze (тема tweakcn, utils/theme-presets.ts), выбрана владельцем 2026-09-25:
   токены выводятся из семян --rail-a/--rail-b/--accent/--tint через color-mix. */
/* ═════════════════════════════════════════════════════════════
   ANaThyr Landing — прототип посадочной страницы
   Палитра Ocean Breeze (до 2026-09-25 была «Индиго» из оболочки приложения):
   --rail-a / --rail-b — рельса, --accent — акцент, --tint — подмес
   ═════════════════════════════════════════════════════════════ */

:root{
  /* — семена палитры (Ocean Breeze) — */
  --rail-a:#1E293B;
  --rail-b:#0F172A;
  --accent:#22C55E;
  --accent-2:#34D399;
  --tint:#334155;

  /* — шрифты и кривые — */
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22,.7,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* — радиусы — */
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px;

  /* — светлая тема (по умолчанию) — */
  --ground:   color-mix(in oklab, var(--tint) 4%, #FFFFFF);
  --surface:  #FFFFFF;
  --surface-2:color-mix(in oklab, var(--tint) 6%, #FFFFFF);
  --surface-3:color-mix(in oklab, var(--tint) 11%, #FFFFFF);
  --line:     color-mix(in oklab, var(--tint) 13%, #E3E3E9);
  --line-soft:color-mix(in oklab, var(--tint) 8%, #EDEDF2);
  --ink:      color-mix(in oklab, var(--tint) 9%, #16161B);
  --ink-2:    color-mix(in oklab, var(--tint) 10%, #5A5A66);
  --ink-3:    color-mix(in oklab, var(--tint) 8%, #8A8A96);

  --ok:#1F8A5B; --warn:#B47C0E; --crit:#C8433A; --info:#2F6FD0;
  --ok-bg:color-mix(in oklab, var(--ok) 12%, transparent);
  --warn-bg:color-mix(in oklab, var(--warn) 14%, transparent);
  --crit-bg:color-mix(in oklab, var(--crit) 12%, transparent);
  --info-bg:color-mix(in oklab, var(--info) 12%, transparent);

  --shadow-sm: 0 1px 2px color-mix(in oklab, var(--rail-b) 8%, transparent), 0 1px 0 color-mix(in oklab, var(--rail-b) 4%, transparent);
  --shadow-md: 0 2px 4px -1px color-mix(in oklab, var(--rail-b) 8%, transparent), 0 12px 28px -14px color-mix(in oklab, var(--rail-b) 30%, transparent);
  --shadow-lg: 0 4px 8px -2px color-mix(in oklab, var(--rail-b) 10%, transparent), 0 36px 70px -28px color-mix(in oklab, var(--rail-b) 42%, transparent);
  --shadow-stage: 0 0 0 1px color-mix(in oklab, var(--rail-b) 10%, transparent), 0 50px 100px -40px color-mix(in oklab, var(--rail-b) 60%, transparent);
  --ring: color-mix(in oklab, var(--accent) 40%, transparent);
  /* Акцент как цвет мелкого текста на поверхности: чистый #22C55E на светлом — 2,3:1,
     смесь с чернилами — 6,4:1 (на плашке шапки поверх героя со свечением — от 4,9:1).
     В тёмной теме чистый акцент и так читается. */
  --accent-text: color-mix(in oklab, var(--accent) 50%, var(--ink));

  /* — тёмная зона (герой, CTA, подвал) — не зависит от темы — */
  --dz-bg-a: var(--rail-a);
  --dz-bg-b: var(--rail-b);
  --dz-ink: #FFFFFF;
  --dz-ink-2: color-mix(in oklab, #FFFFFF 66%, transparent);
  --dz-ink-3: color-mix(in oklab, #FFFFFF 44%, transparent);
  --dz-line: color-mix(in oklab, #FFFFFF 13%, transparent);
  --dz-fill: color-mix(in oklab, #FFFFFF 7%, transparent);
  --dz-fill-2: color-mix(in oklab, #FFFFFF 12%, transparent);
}

/* ── тёмная тема ─────────────────────────────────────────────── */
/* три состояния: явный выбор в шапке, тема артефакта, системная тема */
:root[data-mode="dark"],
:root[data-theme="dark"]:not([data-mode="light"]){
  --ground:   color-mix(in oklab, var(--tint) 9%, #0C0C10);
  --surface:  color-mix(in oklab, var(--tint) 11%, #16161C);
  --surface-2:color-mix(in oklab, var(--tint) 13%, #1D1D24);
  --surface-3:color-mix(in oklab, var(--tint) 16%, #24242D);
  --line:     color-mix(in oklab, var(--tint) 16%, #303038);
  --line-soft:color-mix(in oklab, var(--tint) 12%, #26262E);
  --ink:      color-mix(in oklab, var(--tint) 5%, #F3F3F6);
  --ink-2:    color-mix(in oklab, var(--tint) 8%, #A6A6B2);
  --ink-3:    color-mix(in oklab, var(--tint) 8%, #7A7A87);
  --ok:#47B786; --warn:#D9A63A; --crit:#E3695E; --info:#6098E8;
  --ok-bg:color-mix(in oklab, var(--ok) 18%, transparent);
  --warn-bg:color-mix(in oklab, var(--warn) 18%, transparent);
  --crit-bg:color-mix(in oklab, var(--crit) 18%, transparent);
  --info-bg:color-mix(in oklab, var(--info) 18%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.45), 0 40px 76px -30px rgba(0,0,0,.85);
  --shadow-stage: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -40px rgba(0,0,0,.95);
  --accent-text: var(--accent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode="light"]):not([data-theme="light"]){
  --ground:   color-mix(in oklab, var(--tint) 9%, #0C0C10);
  --surface:  color-mix(in oklab, var(--tint) 11%, #16161C);
  --surface-2:color-mix(in oklab, var(--tint) 13%, #1D1D24);
  --surface-3:color-mix(in oklab, var(--tint) 16%, #24242D);
  --line:     color-mix(in oklab, var(--tint) 16%, #303038);
  --line-soft:color-mix(in oklab, var(--tint) 12%, #26262E);
  --ink:      color-mix(in oklab, var(--tint) 5%, #F3F3F6);
  --ink-2:    color-mix(in oklab, var(--tint) 8%, #A6A6B2);
  --ink-3:    color-mix(in oklab, var(--tint) 8%, #7A7A87);
  --ok:#47B786; --warn:#D9A63A; --crit:#E3695E; --info:#6098E8;
  --ok-bg:color-mix(in oklab, var(--ok) 18%, transparent);
  --warn-bg:color-mix(in oklab, var(--warn) 18%, transparent);
  --crit-bg:color-mix(in oklab, var(--crit) 18%, transparent);
  --info-bg:color-mix(in oklab, var(--info) 18%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.7);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.45), 0 40px 76px -30px rgba(0,0,0,.85);
  --shadow-stage: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -40px rgba(0,0,0,.95);
  --accent-text: var(--accent);
  }
}

/* ── база ────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; font-family:var(--ui); color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16px; line-height:1.5; overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:20px; height:20px; flex:none; }
.ic-sm{ width:15px; height:15px; flex:none; }
.ic-xs{ width:12px; height:12px; flex:none; }
.tnum{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--mono); }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── каркас ──────────────────────────────────────────────────── */
.wrap{ width:min(1180px, 100% - 44px); margin-inline:auto; }
.wrap-narrow{ width:min(820px, 100% - 44px); margin-inline:auto; }
section{ position:relative; }
.pad{ padding-block: clamp(72px, 9vw, 132px); }
.pad-sm{ padding-block: clamp(52px, 6vw, 88px); }

/* ── типографика ─────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:color-mix(in oklab, var(--accent) 88%, var(--ink));
}
.eyebrow::before{ content:""; width:18px; height:1.5px; background:currentColor; opacity:.55; border-radius:2px; }
.dark-zone .eyebrow{ color:color-mix(in oklab, var(--accent) 55%, #fff); }

h1,.h1{ font-size:clamp(2.35rem, 1.1rem + 4.4vw, 4.5rem); line-height:.99; letter-spacing:-.038em; font-weight:760; }
h2,.h2{ font-size:clamp(1.85rem, 1.15rem + 2.3vw, 3.05rem); line-height:1.06; letter-spacing:-.032em; font-weight:740; }
h3,.h3{ font-size:clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height:1.25; letter-spacing:-.018em; font-weight:680; }
.lead{ font-size:clamp(1.02rem, .96rem + .42vw, 1.24rem); line-height:1.58; color:var(--ink-2); }
.dark-zone .lead{ color:var(--dz-ink-2); }
.muted{ color:var(--ink-3); }
.sect-head{ display:flex; flex-direction:column; gap:16px; max-width:660px; }
.sect-head.center{ margin-inline:auto; text-align:center; align-items:center; }
.grad-ink{
  background:linear-gradient(96deg, var(--accent) 0%, var(--accent-2) 58%, color-mix(in oklab, var(--accent-2) 60%, #7DD3FC) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── кнопки ──────────────────────────────────────────────────── */
.btn{
  --bh:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); padding:0 20px; border-radius:11px;
  font-size:14.5px; font-weight:640; letter-spacing:-.008em; white-space:nowrap;
  transition:transform .16s var(--ease), background .18s var(--ease), box-shadow .22s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn-lg{ --bh:52px; padding:0 26px; font-size:15.5px; border-radius:13px; }
/* Текст главной кнопки — тёмный (рельса): белый на ярком акценте даёт 2,1–2,3:1,
   тёмный — 7,8:1 внизу и 8,4:1 на осветлённом верху градиента. Фон от темы не зависит. */
.btn-primary{
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 92%, #fff), var(--accent));
  color:var(--rail-b);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 34%, transparent) inset,
              0 8px 22px -8px color-mix(in oklab, var(--accent) 68%, transparent),
              0 2px 5px -2px color-mix(in oklab, var(--rail-b) 40%, transparent);
}
.btn-primary:hover{ transform:translateY(-1.5px); box-shadow: 0 1px 0 color-mix(in oklab, #fff 40%, transparent) inset, 0 14px 30px -10px color-mix(in oklab, var(--accent) 78%, transparent), 0 3px 8px -3px color-mix(in oklab, var(--rail-b) 45%, transparent); }
.btn-ghost{ border:1px solid var(--line); color:var(--ink); background:var(--surface); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:color-mix(in oklab, var(--accent) 40%, var(--line)); transform:translateY(-1.5px); box-shadow:var(--shadow-md); }
.dark-zone .btn-ghost{ background:var(--dz-fill); border-color:var(--dz-line); color:var(--dz-ink); box-shadow:none; backdrop-filter:blur(8px); }
.dark-zone .btn-ghost:hover{ background:var(--dz-fill-2); border-color:color-mix(in oklab, #fff 26%, transparent); }
.btn-quiet{ color:var(--ink-2); padding:0 12px; }
.btn-quiet:hover{ color:var(--ink); background:var(--surface-2); }
.dark-zone .btn-quiet{ color:var(--dz-ink-2); }
.dark-zone .btn-quiet:hover{ color:var(--dz-ink); background:var(--dz-fill); }

/* ── чипы и бейджи ───────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 10px; border-radius:999px;
  font-size:11.5px; font-weight:620; letter-spacing:.005em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  white-space:nowrap;
}
.chip-ok{ color:var(--ok); background:var(--ok-bg); border-color:color-mix(in oklab, var(--ok) 26%, transparent); }
.chip-info{ color:var(--info); background:var(--info-bg); border-color:color-mix(in oklab, var(--info) 26%, transparent); }
.chip-warn{ color:var(--warn); background:var(--warn-bg); border-color:color-mix(in oklab, var(--warn) 26%, transparent); }
.chip-crit{ color:var(--crit); background:var(--crit-bg); border-color:color-mix(in oklab, var(--crit) 26%, transparent); }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pulse{ position:relative; }
.pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; animation:ping 2.4s var(--ease-out) infinite;
}
@keyframes ping{ 0%{ transform:scale(.6); opacity:.7; } 70%,100%{ transform:scale(1.9); opacity:0; } }

/* ── навигация ───────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:64px;
  display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav-in{ display:flex; align-items:center; gap:10px; width:min(1180px, 100% - 44px); margin-inline:auto; }
.nav.stuck, .nav.menu-open{
  height:58px; background:color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom-color:var(--line-soft); box-shadow:0 6px 24px -18px color-mix(in oklab, var(--rail-b) 55%, transparent);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:720; font-size:17.5px; letter-spacing:-.03em; color:var(--dz-ink); transition:color .3s var(--ease); }
.nav.stuck .brand, .nav.menu-open .brand{ color:var(--ink); }
/* Знак — ромб из двух блоков с муравьём, без плашки: блоки — акцентом, муравей — цветом надписи. */
.mark{ width:34px; height:34px; flex:none; display:grid; place-items:center; }
.mark svg{ width:34px; height:34px; }
/* Расшифровка ANT рядом с названием: первые буквы — акцентом. Показываем с 1280 px, где шапка
   уже упёрлась в 1180 px: с расшифровкой ru занимает ~1167 px, en ~975 px. В hy ссылки длиннее
   и шапка с ней занимает все 1180 px без запаса, поэтому в hy её нет (замер 2026-10-09).
   Приглушаем цветом, а не opacity: opacity гасила бы и буквы-акценты. Над героем шапка лежит
   на зелёном свечении (.glow, акцент 40%): чистый акцент там 3,0:1, поэтому буквы светлее —
   4,6:1 на свечении и 9,9:1 на рельсе; остальной текст — 80% белого, 5,0:1 на свечении.
   На плашке закреплённой шапки буквы — --accent-text (светлая тема 4,9–6,4:1, тёмная 6,7:1). */
.ant-tag{ margin-left:4px; padding-left:12px; border-left:1px solid currentColor; font-size:11.5px; font-weight:500;
  line-height:1.25; letter-spacing:.02em; white-space:nowrap; color:color-mix(in oklab, currentColor 80%, transparent); }
.ant-tag b{ color:color-mix(in oklab, var(--accent) 50%, #fff); font-weight:800; }
.nav.stuck .ant-tag b, .nav.menu-open .ant-tag b{ color:var(--accent-text); }
@media (max-width: 1279px){ .ant-tag{ display:none; } }
:lang(hy) .ant-tag{ display:none; }
.nav-links{ display:flex; align-items:center; gap:2px; margin-left:18px; }
.nav-links a{
  padding:7px 12px; border-radius:9px; font-size:14px; font-weight:560;
  color:var(--dz-ink-2); transition:color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover{ color:var(--dz-ink); background:var(--dz-fill); }
.nav.stuck .nav-links a, .nav.menu-open .nav-links a{ color:var(--ink-2); }
.nav.stuck .nav-links a:hover, .nav.menu-open .nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav .btn-ghost, .nav .btn-quiet{ --bh:36px; font-size:13.5px; border-radius:9px; }
.nav .btn-primary{ --bh:36px; font-size:13.5px; border-radius:9px; padding:0 16px; }
.mode-btn{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  color:var(--dz-ink-2); transition:background .16s var(--ease), color .16s var(--ease);
}
.mode-btn:hover{ background:var(--dz-fill); color:var(--dz-ink); }
.nav.stuck .mode-btn, .nav.menu-open .mode-btn{ color:var(--ink-3); }
.nav.stuck .mode-btn:hover, .nav.menu-open .mode-btn:hover{ background:var(--surface-2); color:var(--ink); }
:root[data-mode="dark"] .mode-btn .i-sun,
:root[data-mode="light"] .mode-btn .i-moon{ display:none; }
.burger{ display:none; place-items:center; width:36px; height:36px; border-radius:9px; color:var(--dz-ink); }
.nav.stuck .burger, .nav.menu-open .burger{ color:var(--ink); }
/* Ссылки уходят в бургер, когда шапка их не вмещает. В ru и hy подписи длиннее, чем в en,
   поэтому порог у них выше общего 920 px (замер 2026-10-09: ru нужно ≥1030 px, hy ≥1095 px). */
@media (max-width: 1060px){ :lang(ru) .nav-links{ display:none; } :lang(ru) .burger{ display:grid; } }
@media (max-width: 1120px){ :lang(hy) .nav-links{ display:none; } :lang(hy) .burger{ display:grid; } }
.mobile-menu{
  position:fixed; inset:58px 0 auto 0; z-index:59; display:none; flex-direction:column; gap:2px;
  padding:12px 22px 20px; background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:12px 10px; border-radius:10px; font-size:15px; font-weight:600; color:var(--ink); transition:background .16s var(--ease); }
.mobile-menu a:hover{ background:var(--surface-2); }
.mobile-menu .sep{ height:1px; background:var(--line-soft); margin:8px 0; }
.mobile-menu .btn{ margin-top:6px; }

/* ── тёмная зона ─────────────────────────────────────────────── */
.dark-zone{ color:var(--dz-ink); background:linear-gradient(163deg, var(--dz-bg-a) 0%, var(--dz-bg-b) 66%); position:relative; isolation:isolate; }
.dark-zone .muted{ color:var(--dz-ink-3); }
.glow{ position:absolute; pointer-events:none; z-index:-1; border-radius:50%; filter:blur(80px); }
.mesh{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(color-mix(in oklab, #fff 12%, transparent) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 72%);
}

/* ── герой ───────────────────────────────────────────────────── */
.hero{ padding-top:132px; padding-bottom:0; overflow:hidden; }
.hero-grid{ display:grid; gap:clamp(28px, 4vw, 56px); text-align:center; justify-items:center; }
.hero h1{ max-width:16ch; }
.hero .lead{ max-width:60ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:center; font-size:13px; color:var(--dz-ink-3); }
.hero-meta li{ display:flex; align-items:center; gap:7px; }
.hero-meta svg{ color:color-mix(in oklab, var(--ok) 70%, #fff); }

.badge-top{
  display:inline-flex; align-items:center; gap:9px; min-height:32px; padding:5px 12px 5px 6px; border-radius:999px;
  background:var(--dz-fill); border:1px solid var(--dz-line); backdrop-filter:blur(10px);
  font-size:12.5px; color:var(--dz-ink-2); font-weight:540;
}
.badge-top b{ color:var(--dz-ink); font-weight:640; }
.badge-top .tag{
  display:inline-flex; align-items:center; flex:none; height:22px; padding:0 9px; border-radius:999px;
  background:color-mix(in oklab, var(--accent) 88%, #fff); color:#fff; font-size:10.5px; font-weight:680;
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono);
}

/* ── сцена: макет приложения ─────────────────────────────────── */
.stage{ position:relative; width:min(1180px, 100%); margin-top:8px; text-align:left; }
.stage-glow{ position:absolute; left:50%; top:8%; width:64%; height:60%; transform:translateX(-50%);
  background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 62%, transparent), transparent);
  filter:blur(70px); z-index:0; opacity:.75; }
.app{
  position:relative; z-index:1; width:min(980px, 100%); margin-inline:auto;
  border-radius:clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px) 0 0;
  background:var(--surface); box-shadow:var(--shadow-stage); overflow:hidden;
  border:1px solid color-mix(in oklab, var(--rail-b) 14%, transparent); border-bottom:0;
  transform:perspective(2000px) rotateX(4deg); transform-origin:50% 0;
}
.app-bar{
  height:38px; display:flex; align-items:center; gap:10px; padding:0 14px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--rail-a) 96%, #000), var(--rail-b));
  border-bottom:1px solid color-mix(in oklab, #fff 8%, transparent);
}
.tl{ display:flex; gap:6px; }
.tl i{ width:10px; height:10px; border-radius:50%; background:color-mix(in oklab, #fff 20%, transparent); }
.tl i:nth-child(1){ background:#FF5F57; } .tl i:nth-child(2){ background:#FEBC2E; } .tl i:nth-child(3){ background:#28C840; }
.app-title{
  margin-inline:auto; display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:color-mix(in oklab, #fff 58%, transparent); font-family:var(--mono); letter-spacing:.02em;
}
.app-title b{ color:color-mix(in oklab, #fff 88%, transparent); font-weight:600; }
.app-body{ display:grid; grid-template-columns:60px 1fr; min-height:clamp(360px, 42vw, 520px); }

/* рельса макета */
.m-rail{ background:color-mix(in oklab, var(--rail-b) 90%, #000); display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 0; }
.m-rail .r{ width:44px; padding:6px 0 5px; border-radius:9px; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:color-mix(in oklab, #fff 48%, transparent); font-size:8px; font-weight:620; }
.m-rail .r svg{ width:16px; height:16px; }
.m-rail .r.on{ background:color-mix(in oklab, #fff 13%, transparent); color:#fff; }
.m-rail .sp{ flex:1; }
.m-rail .av{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff;
  background:linear-gradient(140deg, var(--accent), var(--accent-2)); }

/* рабочая область макета */
.m-work{ background:var(--ground); color:var(--ink); display:flex; flex-direction:column; min-width:0; }
.m-head{ min-height:46px; display:flex; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid var(--line-soft); background:var(--surface); flex-wrap:wrap; }
.m-crumb{ font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.m-h1{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; }
.m-head .btn-mini{ margin-left:auto; }
.btn-mini{
  height:26px; padding:0 11px; border-radius:7px; font-size:11px; font-weight:640;
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:#fff; box-shadow:0 4px 10px -4px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn-mini.quiet{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); box-shadow:none; }

.m-split{ flex:1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:0; }
.m-form{ padding:16px; display:flex; flex-direction:column; gap:11px; border-right:1px solid var(--line-soft); background:var(--surface); min-width:0; }
.m-sec{ font-family:var(--mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.m-sec::after{ content:""; flex:1; height:1px; background:var(--line-soft); }
.f{ display:flex; flex-direction:column; gap:5px; }
.f label{ font-size:10.5px; font-weight:600; color:var(--ink-2); }
.f .inp{
  height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; padding:0 10px; font-size:11.5px; color:var(--ink); gap:7px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.f .inp .val{ white-space:nowrap; overflow:hidden; }
.f.armed .inp{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.f .inp .caret{ width:1.5px; height:14px; background:var(--accent); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seg{ display:flex; gap:4px; }
.seg .s{ height:26px; padding:0 10px; border-radius:7px; border:1px solid var(--line); font-size:10.5px; font-weight:600; color:var(--ink-3); display:grid; place-items:center; }
.seg .s.on{ background:color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color:color-mix(in oklab, var(--accent) 45%, transparent); color:var(--accent); }

/* PDF-предпросмотр */
.m-prev{ padding:16px; display:grid; place-items:center; background:
  linear-gradient(180deg, color-mix(in oklab, var(--tint) 6%, var(--ground)), var(--ground)); min-width:0; }
.paper{
  width:min(322px, 100%); aspect-ratio:1/1.32; background:#fff; border-radius:4px; position:relative;
  box-shadow:0 1px 2px rgba(16,16,22,.1), 0 22px 44px -22px rgba(16,16,22,.5);
  padding:20px 18px; display:flex; flex-direction:column; gap:9px; color:#16161B; overflow:hidden;
}
.paper::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.p-top{ display:flex; align-items:center; gap:7px; margin-top:5px; }
.p-logo{ width:20px; height:20px; border-radius:6px; background:linear-gradient(145deg, var(--accent), var(--accent-2)); display:grid; place-items:center; color:#fff; }
.p-logo svg{ width:12px; height:12px; }
.p-org{ font-size:9px; font-weight:700; letter-spacing:-.01em; }
.p-no{ margin-left:auto; font-family:var(--mono); font-size:7.5px; color:#8A8A96; }
.p-title{ font-size:15px; font-weight:760; letter-spacing:-.02em; text-align:center; margin-top:8px; }
.p-sub{ font-size:7.5px; text-align:center; color:#8A8A96; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.p-rows{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.p-row{ display:flex; align-items:baseline; gap:8px; font-size:8.5px; }
.p-row .k{ color:#8A8A96; width:78px; flex:none; }
.p-row .v{ font-weight:620; flex:1; border-bottom:1px dotted #D6D6DE; min-height:11px; }
.p-row .v.fill{ animation:fillIn .5s var(--ease-out) both; }
@keyframes fillIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.p-foot{ margin-top:auto; display:flex; align-items:flex-end; gap:12px; }
.p-sign{ flex:1; }
.p-sign .line{ height:1px; background:#D6D6DE; margin-bottom:4px; }
.p-sign span{ font-size:6.5px; color:#8A8A96; }
.p-qr{ width:34px; height:34px; border-radius:4px; background:
  repeating-conic-gradient(#16161B 0 25%, #fff 0 50%) 0 0/8px 8px; opacity:.85; flex:none; }
.stamp{
  position:absolute; right:16px; top:38%; transform:rotate(-13deg) scale(.7); opacity:0;
  border:2px solid var(--ok); color:var(--ok); border-radius:7px; padding:4px 10px;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  animation:stampIn .5s var(--ease-out) forwards; animation-delay:3.1s;
}
@keyframes stampIn{ 0%{ opacity:0; transform:rotate(-13deg) scale(1.5); } 60%{ opacity:1; transform:rotate(-13deg) scale(.94); } 100%{ opacity:.9; transform:rotate(-13deg) scale(1); } }

/* парящие карточки вокруг сцены */
.float{
  position:absolute; z-index:2; display:flex; align-items:center; gap:9px;
  padding:9px 13px 9px 10px; border-radius:12px;
  background:color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid color-mix(in oklab, #fff 22%, var(--line)); box-shadow:var(--shadow-lg);
  font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap;
  animation:bob 6s var(--ease) infinite;
}
.float small{ display:block; font-size:10.5px; font-weight:520; color:var(--ink-3); letter-spacing:-.005em; }
.float .ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none; }
.float-1{ left:0; top:36%; animation-delay:-.6s; }
.float-2{ right:1%; top:-4%; animation-delay:-2.4s; }
.float-3{ right:0; bottom:11%; animation-delay:-4.1s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* ── полоса доверия ──────────────────────────────────────────── */
.trust{ border-block:1px solid var(--line-soft); background:var(--surface); }
.trust-in{ display:flex; align-items:center; gap:clamp(20px,4vw,54px); flex-wrap:wrap; justify-content:center; padding-block:26px; }
.trust-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.logo-row{ display:flex; align-items:center; gap:clamp(18px,3.4vw,42px); flex-wrap:wrap; justify-content:center; }
.logo-row .lg{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:-.03em; color:var(--ink-3); opacity:.82; transition:opacity .2s var(--ease), color .2s var(--ease); }
.logo-row .lg:hover{ opacity:1; color:var(--ink-2); }
.logo-row .lg svg{ width:17px; height:17px; }

/* ── метрики ─────────────────────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--surface); padding:26px 22px; display:flex; flex-direction:column; gap:6px; }
.stat .n{ font-size:clamp(1.9rem,1.4rem+1.4vw,2.6rem); font-weight:760; letter-spacing:-.035em; line-height:1; }
.stat .n .u{ font-size:.52em; color:var(--accent); margin-left:2px; letter-spacing:-.02em; }
.stat .t{ font-size:13.5px; font-weight:620; }
.stat .d{ font-size:12.5px; color:var(--ink-3); line-height:1.45; }

/* ── до / после ──────────────────────────────────────────────── */
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.panel{ border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:var(--surface); display:flex; flex-direction:column; gap:14px; position:relative; }
.panel.before{ background:var(--surface-2); border-style:dashed; }
.panel.after{ box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--accent) 28%, var(--line)); }
.panel.after::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, color-mix(in oklab, var(--accent) 40%, transparent), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.panel h3{ display:flex; align-items:center; gap:9px; }
.plist li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--ink-2); padding:7px 0; }
.plist li + li{ border-top:1px solid var(--line-soft); }
/* Базовое поведение плашки со значком. Раньше центрирование было прописано
   только в `.plist .mk` и `.spot-list .mk`, а плашка в заголовке колонки
   (`.panel h3`) лежит вне обоих — и оставалась обычным inline-спаном: галочка
   прижималась к базовой линии текста вместо центра плашки. Размер и скругление
   там задавались инлайном, из-за чего расхождение было незаметно в коде. */
.mk{ display:grid; place-items:center; flex:none; }
.plist .mk{ width:19px; height:19px; border-radius:6px; margin-top:1px; }
.panel h3 .mk{ width:26px; height:26px; border-radius:8px; }
.mk-bad{ background:var(--crit-bg); color:var(--crit); }
.mk-good{ background:var(--ok-bg); color:var(--ok); }
.panel.after .plist li{ color:var(--ink); }

/* ── бенто-сетка возможностей ────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.card{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:24px; display:flex; flex-direction:column; gap:12px;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(340px 200px at var(--mx,50%) var(--my,0%), color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in oklab, var(--accent) 26%, var(--line)); }
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.c-6{ grid-column:span 6; } .c-4{ grid-column:span 4; } .c-3{ grid-column:span 3; } .c-2{ grid-column:span 2; }
.card p{ font-size:14px; line-height:1.55; color:var(--ink-2); }
.icobox{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg, color-mix(in oklab, var(--accent) 16%, var(--surface)), color-mix(in oklab, var(--accent-2) 12%, var(--surface)));
  border:1px solid color-mix(in oklab, var(--accent) 22%, transparent); color:var(--accent);
}
.card-wide{ grid-column:span 6; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:26px; align-items:center; padding:0; overflow:hidden; }
.card-wide .txt{ padding:30px; display:flex; flex-direction:column; gap:12px; }
.card-wide .viz{ align-self:stretch; min-height:220px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in oklab, var(--tint) 7%, var(--surface)), var(--surface-2)); border-left:1px solid var(--line-soft); }

/* мини-виджеты внутри карточек */
.mini{ border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); }
.mini-h{ height:30px; display:flex; align-items:center; gap:7px; padding:0 11px; border-bottom:1px solid var(--line-soft); background:var(--surface-2); font-size:10.5px; font-weight:640; color:var(--ink-2); }
.mini-b{ padding:10px 11px; display:flex; flex-direction:column; gap:8px; }
.row-line{ display:flex; align-items:center; gap:9px; font-size:11.5px; }
.row-line .bar{ height:6px; border-radius:99px; background:var(--surface-3); flex:1; overflow:hidden; }
.row-line .bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:12px; }
.kcol{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.kcol .kh{ font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:4px; }
.kcard{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 8px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow-sm); }
.kcard .t{ font-size:9.5px; font-weight:620; line-height:1.3; }
.kcard .m{ font-size:8px; color:var(--ink-3); font-family:var(--mono); }
.kcard.drag{ transform:rotate(-2.5deg) translateY(-2px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--accent) 45%, transparent); }
.stack{ display:flex; flex-direction:column; gap:7px; }
.file-row{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:var(--surface); border:1px solid var(--line-soft); font-size:11.5px; }
.file-row .ft{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:7.5px; font-weight:750; font-family:var(--mono); flex:none; }
.file-row .sz{ margin-left:auto; font-family:var(--mono); font-size:9.5px; color:var(--ink-3); }
.avatars{ display:flex; }
.avatars .a{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff; border:2px solid var(--surface); margin-left:-7px; }
.avatars .a:first-child{ margin-left:0; }

/* ── как это работает ────────────────────────────────────────── */
.flow{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; counter-reset:step; }
.step{ position:relative; display:flex; flex-direction:column; gap:11px; padding-top:34px; }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; top:0; left:0; font-family:var(--mono); font-size:11.5px; font-weight:700;
  color:var(--accent); letter-spacing:.08em;
}
.step::after{
  content:""; position:absolute; top:6px; left:34px; right:-18px; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 10px);
}
.step:last-child::after{ display:none; }
.step h3{ font-size:16px; }
.step p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.step .art{
  height:112px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center; overflow:hidden; position:relative; box-shadow:var(--shadow-sm);
}

/* ── спотлайты ───────────────────────────────────────────────── */
.spot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:clamp(28px,4.4vw,60px); align-items:center; }
.spot.flip .spot-txt{ order:2; }
.spot-txt{ display:flex; flex-direction:column; gap:18px; }
.spot-list{ display:flex; flex-direction:column; gap:11px; }
.spot-list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.spot-list b{ color:var(--ink); font-weight:640; }
.spot-list .mk{ width:20px; height:20px; border-radius:7px; background:var(--ok-bg); color:var(--ok); margin-top:1px; }
.frame{
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.frame-h{ height:36px; display:flex; align-items:center; gap:8px; padding:0 13px; border-bottom:1px solid var(--line-soft); background:var(--surface-2); }
.frame-h .tl i{ width:8px; height:8px; }
.frame-h .lbl{ font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-inline:auto; }

/* таблица сертификатов */
.tbl-scroll{ overflow-x:auto; }
.tbl{ width:100%; min-width:430px; border-collapse:collapse; font-size:12.5px; }
.tbl th{ text-align:left; font-size:9.5px; font-family:var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface-2); }
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .16s var(--ease); }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .name{ display:flex; align-items:center; gap:9px; font-weight:600; }
.tbl .thumb{ width:26px; height:32px; border-radius:4px; background:#fff; border:1px solid var(--line); position:relative; flex:none; overflow:hidden; box-shadow:var(--shadow-sm); }
.tbl .thumb::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.tbl .thumb::after{ content:""; position:absolute; left:4px; right:4px; top:9px; height:1px; background:#DADAE2; box-shadow:0 4px 0 #DADAE2, 0 8px 0 #DADAE2, 0 12px 0 #E8E8EE; }

/* конструктор форм */
.builder{ display:grid; grid-template-columns:104px 1fr; min-height:290px; }
.b-side{ border-right:1px solid var(--line-soft); padding:11px 9px; display:flex; flex-direction:column; gap:6px; background:var(--surface-2); }
.b-side .bt{ font-family:var(--mono); font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding:2px 3px; }
.b-side .bi{ display:flex; align-items:center; gap:6px; padding:6px 7px; border-radius:7px; border:1px solid var(--line); background:var(--surface); font-size:10px; font-weight:600; color:var(--ink-2); cursor:grab; transition:border-color .16s var(--ease), transform .16s var(--ease); }
.b-side .bi:hover{ border-color:color-mix(in oklab, var(--accent) 45%, transparent); color:var(--accent); transform:translateX(2px); }
.b-side .bi svg{ width:11px; height:11px; }
.b-canvas{ padding:14px; display:flex; flex-direction:column; gap:9px; background:
  radial-gradient(color-mix(in oklab, var(--tint) 12%, transparent) .8px, transparent .8px) 0 0/14px 14px, var(--ground); }
.b-field{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 11px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow-sm); position:relative; }
.b-field .fl{ font-size:10px; font-weight:640; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.b-field .fl .req{ color:var(--crit); }
.b-field .fi{ height:26px; border-radius:6px; border:1px solid var(--line-soft); background:var(--surface-2); }
.b-field.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.b-field.sel::after{ content:"Поле · подпись"; position:absolute; top:-9px; right:9px; font-family:var(--mono); font-size:7.5px; padding:1px 6px; border-radius:99px; background:var(--accent); color:#fff; letter-spacing:.04em; }
.b-drop{ height:34px; border-radius:9px; border:1.5px dashed color-mix(in oklab, var(--accent) 45%, var(--line)); display:grid; place-items:center; font-size:9.5px; color:var(--accent); font-weight:620; background:color-mix(in oklab, var(--accent) 5%, transparent); }

/* ── отзыв ───────────────────────────────────────────────────── */
.quote-card{
  border-radius:var(--r-xl); padding:clamp(30px,4.4vw,54px); position:relative; overflow:hidden;
  background:linear-gradient(158deg, var(--dz-bg-a), var(--dz-bg-b) 72%); color:var(--dz-ink);
  box-shadow:var(--shadow-lg);
}
.quote-card .qm{ position:absolute; right:-14px; top:-40px; font-size:230px; line-height:1; font-weight:800; color:color-mix(in oklab, #fff 6%, transparent); font-family:Georgia, serif; pointer-events:none; }
.quote-card blockquote{ font-size:clamp(1.15rem,.95rem+1.05vw,1.72rem); line-height:1.42; letter-spacing:-.024em; font-weight:600; max-width:34ch; position:relative; }
.q-by{ display:flex; align-items:center; gap:13px; margin-top:26px; position:relative; }
.q-by .av{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(140deg, var(--accent), var(--accent-2)); flex:none; }
.q-by .nm{ display:block; font-size:14.5px; font-weight:660; }
.q-by .ro{ display:block; font-size:12.5px; color:var(--dz-ink-3); margin-top:2px; }
.q-metrics{ display:flex; gap:30px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--dz-line); position:relative; }
.q-metrics div{ display:flex; flex-direction:column; gap:3px; }
.q-metrics .n{ font-size:1.7rem; font-weight:740; letter-spacing:-.03em; line-height:1; }
.q-metrics .l{ font-size:12px; color:var(--dz-ink-3); }

/* ── тарифы ──────────────────────────────────────────────────── */
.toggle{
  display:inline-flex; padding:4px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); gap:2px;
}
.toggle button{ height:32px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:620; color:var(--ink-3); transition:all .18s var(--ease); }
.toggle button.on{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.toggle .save{ font-size:10.5px; font-weight:700; color:var(--ok); margin-left:6px; }
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.tier{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:26px; display:flex; flex-direction:column; gap:18px; position:relative; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tier:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tier.hot{ border-color:color-mix(in oklab, var(--accent) 42%, transparent); box-shadow:var(--shadow-lg); }
/* Текст бейджа приходит из CMS через data-badge. */
.tier.hot[data-badge]::before{
  content:attr(data-badge); position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  height:22px; padding:0 12px; border-radius:99px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--accent), var(--accent-2)); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; box-shadow:0 5px 14px -5px color-mix(in oklab, var(--accent) 75%, transparent);
}
.tier .tn{ font-size:15px; font-weight:700; letter-spacing:-.02em; }
.tier .td{ font-size:13px; color:var(--ink-3); line-height:1.45; }
.price{ display:flex; align-items:baseline; gap:5px; }
.price .v{ font-size:2.5rem; font-weight:760; letter-spacing:-.04em; line-height:1; }
.price .v.text{ font-size:1.65rem; letter-spacing:-.03em; }
.price .p{ font-size:13px; color:var(--ink-3); }
.tier ul{ display:flex; flex-direction:column; gap:9px; }
.tier li{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--ink-2); }
.tier li svg{ color:var(--ok); margin-top:2px; flex:none; }
.tier li.off{ color:var(--ink-3); } .tier li.off svg{ color:var(--ink-3); opacity:.5; }
.tier .btn{ width:100%; margin-top:auto; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  display:flex; align-items:center; gap:16px; padding:22px 4px; cursor:pointer; list-style:none;
  font-size:16px; font-weight:620; letter-spacing:-.015em; transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary .pm{ margin-left:auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--line); display:grid; place-items:center; flex:none; color:var(--ink-3); transition:transform .28s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.faq details[open] summary .pm{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:#fff; }
.faq .ans{ padding:0 60px 24px 4px; font-size:14.5px; line-height:1.62; color:var(--ink-2); animation:slideDown .3s var(--ease-out); }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ── финальный CTA ───────────────────────────────────────────── */

/* ── подвал ──────────────────────────────────────────────────── */
.foot{ border-top:1px solid var(--dz-line); background:var(--dz-bg-b); }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:36px; padding-block:52px 40px; }
.foot-brand{ display:flex; flex-direction:column; gap:14px; max-width:32ch; }
.foot-brand p{ font-size:13.5px; line-height:1.6; color:var(--dz-ink-3); }
.foot h4{ font-size:12px; font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--dz-ink-3); margin-bottom:14px; font-weight:600; }
.foot ul{ display:flex; flex-direction:column; gap:10px; }
.foot ul a{ font-size:13.5px; color:var(--dz-ink-2); transition:color .16s var(--ease); }
.foot ul a:hover{ color:var(--dz-ink); }
.foot-bot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:22px; border-top:1px solid var(--dz-line); font-size:12.5px; color:var(--dz-ink-3); }
.foot-bot .sp{ margin-left:auto; display:flex; gap:8px; }
.foot-bot .sp a{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; border:1px solid var(--dz-line); color:var(--dz-ink-2); transition:all .18s var(--ease); }
.foot-bot .sp a:hover{ background:var(--dz-fill); color:var(--dz-ink); border-color:color-mix(in oklab,#fff 25%,transparent); }

/* ── появление при скролле ───────────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--d,0ms); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ── адаптив ─────────────────────────────────────────────────── */
@media (max-width:1080px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
  .step:nth-child(2)::after{ display:none; }
  .float-1,.float-2,.float-3{ display:none; }
}
@media (max-width:920px){
  .nav-links{ display:none; }
  .burger{ display:grid; }
  .nav .btn-ghost{ display:none; }
  .split2{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .c-6,.c-4,.c-3,.c-2,.card-wide{ grid-column:span 2; }
  .card-wide{ grid-template-columns:1fr; }
  .card-wide .viz{ border-left:0; border-top:1px solid var(--line-soft); min-height:200px; }
  .spot{ grid-template-columns:1fr; }
  .spot.flip .spot-txt{ order:0; }
  .tiers{ grid-template-columns:1fr; }
  .tier.hot{ order:-1; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .m-split{ grid-template-columns:1fr; }
  .m-form{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .app-body{ min-height:0; }
}
@media (max-width:640px){
  .wrap,.wrap-narrow{ width:calc(100% - 32px); }
  .nav .btn-quiet{ display:none; }
  .nav-in{ gap:6px; width:calc(100% - 32px); }
  .nav .btn-primary{ padding:0 13px; font-size:13px; }
  .m-head .chip{ display:none; }
  .hero{ padding-top:104px; }
  .bento{ grid-template-columns:1fr; }
  .c-6,.c-4,.c-3,.c-2,.card-wide{ grid-column:span 1; }
  .flow{ grid-template-columns:1fr; }
  .step::after{ display:none; }
  .stats{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .kanban,
  .board{ grid-template-columns:repeat(2,1fr); }
  .faq .ans{ padding-right:8px; }
  .q-metrics{ gap:20px; }
  .app{ transform:none; }
}

/* — иллюстрации шагов — */
.art .sheet{ width:64px; aspect-ratio:1/1.32; background:var(--surface); border:1px solid var(--line); border-radius:4px; position:relative; box-shadow:var(--shadow-sm); }
.art .sheet::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:4px 4px 0 0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.art .sheet .ln{ position:absolute; left:7px; right:7px; height:2px; border-radius:2px; background:var(--line); }
.art .pinbox{ position:absolute; height:11px; border-radius:3px; background:color-mix(in oklab,var(--accent) 16%,transparent); border:1px dashed var(--accent); }
.art .pinbox::after{ content:""; position:absolute; right:-3px; top:-3px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.art .fields{ display:flex; flex-direction:column; gap:6px; width:112px; }
.art .fields i{ display:block; height:9px; border-radius:3px; background:var(--surface-3); }
.art .fields i.a{ background:color-mix(in oklab,var(--accent) 30%,var(--surface-3)); animation:typeIn 2.6s var(--ease) infinite; }
@keyframes typeIn{ 0%,100%{ width:34%; } 45%,65%{ width:100%; } }
.art .burst{ position:absolute; inset:0; display:grid; place-items:center; }
.art .ok-ring{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--ok-bg); color:var(--ok); border:1.5px solid color-mix(in oklab,var(--ok) 40%,transparent); }
.art .tline{ display:flex; flex-direction:column; gap:8px; width:120px; }
.art .tl-row{ display:flex; align-items:center; gap:7px; font-size:8.5px; color:var(--ink-3); font-family:var(--mono); }
.art .tl-row .d{ width:7px; height:7px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); flex:none; }
.art .tl-row.on .d{ border-color:var(--accent); background:var(--accent); }
.art .tl-row .b{ flex:1; height:5px; border-radius:99px; background:var(--surface-3); }
.art .tl-row.on .b{ background:color-mix(in oklab,var(--accent) 35%,var(--surface-3)); }

/* Иллюстрации шагов живые — каждая проигрывает свой маленький сюжет по кругу.
   Пока карточка не проявилась (.in от data-reveal), анимации стоят на паузе. */
.step:not(.in) .art *{ animation-play-state:paused; }

/* 1 · свой PDF: лист приезжает, поля проступают по одному, по листу идёт развёртка */
.art .sheet.tpl{ overflow:hidden; animation:tplIn 4.8s var(--ease) infinite; }
.art .sheet.tpl .pinbox{ animation:pinPop 4.8s var(--ease) calc(.5s + var(--i, 0) * .45s) infinite both; }
.art .sheet.tpl .scan{ position:absolute; left:0; right:0; top:-14px; height:14px;
  background:linear-gradient(transparent, color-mix(in oklab,var(--accent) 30%,transparent)); border-bottom:1px solid var(--accent);
  animation:tplScan 4.8s linear infinite; }
@keyframes tplIn{ 0%{ transform:translateY(14px); opacity:0; } 10%,88%{ transform:none; opacity:1; } 100%{ transform:translateY(-6px); opacity:0; } }
@keyframes pinPop{ 0%{ opacity:0; transform:scale(.5); } 8%{ opacity:1; transform:scale(1.08); } 12%,70%{ opacity:1; transform:none; } 80%,100%{ opacity:0; } }
@keyframes tplScan{ 0%,8%{ transform:translateY(0); opacity:0; } 12%{ opacity:1; } 55%{ transform:translateY(98px); opacity:1; } 60%,100%{ transform:translateY(98px); opacity:0; } }

/* 3 · готово: галочка с волной, документ и счёт уезжают клиенту */
.art .sheet.iss-back{ grid-area:1/1; opacity:.45; transform:translateX(-16px) rotate(-6deg); }
.art .sheet.iss-fly{ grid-area:1/1; display:grid; place-items:end; padding:6px; animation:issFly 3.6s var(--ease) infinite; }
.art .sheet.iss-fly b{ font:700 11px/1 var(--mono); color:var(--accent); }
.art .burst .ok-ring{ position:relative; animation:okPop 3.6s var(--ease) infinite; }
.art .burst .ok-ring::after{ content:""; position:absolute; inset:-1.5px; border-radius:50%; border:1.5px solid var(--ok); opacity:0; animation:okWave 3.6s var(--ease-out) infinite; }
@keyframes issFly{
  0%{ opacity:0; transform:translate(6px, 10px) rotate(4deg); }
  12%,42%{ opacity:1; transform:translate(10px, 0) rotate(4deg); }
  70%,100%{ opacity:0; transform:translate(78px, -20px) rotate(14deg) scale(.7); }
}
@keyframes okPop{ 0%,30%{ transform:scale(0); opacity:0; } 40%{ transform:scale(1.18); opacity:1; } 48%,88%{ transform:none; opacity:1; } 100%{ transform:scale(.9); opacity:0; } }
@keyframes okWave{ 0%,40%{ transform:scale(1); opacity:0; } 42%{ opacity:.8; } 70%,100%{ transform:scale(2); opacity:0; } }

/* 4 · история: запрос набирается, строки загораются по очереди, нужная — подсвечена */
.art .tl-q{ display:flex; align-items:center; gap:5px; height:16px; padding:0 6px; border-radius:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink-3); }
.art .tl-q .ic{ width:9px; height:9px; flex:none; }
.art .tl-q i{ display:block; height:4px; border-radius:2px; background:color-mix(in oklab,var(--accent) 45%,var(--surface-3)); animation:tlType 4.4s steps(6) infinite; }
.art .tline .tl-row{ animation:tlRow 4.4s var(--ease) calc(1s + var(--i, 0) * .22s) infinite both; }
.art .tline .tl-row.hit{ border-radius:5px; animation-name:tlHit; }
@keyframes tlType{ 0%{ width:0; } 22%,90%{ width:42px; } 100%{ width:0; } }
@keyframes tlRow{ 0%,100%{ opacity:.35; } 12%,60%{ opacity:1; } 75%{ opacity:.35; } }
@keyframes tlHit{
  0%,100%{ opacity:.35; box-shadow:none; }
  12%{ opacity:1; }
  25%,70%{ opacity:1; box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent); background:color-mix(in oklab,var(--accent) 10%,transparent); }
}
.art .tline .tl-row.hit .d{ border-color:var(--accent); }
/* без движения — статичный кадр «всё на месте», а не конец цикла (там всё погашено) */
@media (prefers-reduced-motion:reduce){ .art *, .art *::after{ animation:none !important; } }
/* — канбан крупнее в спотлайте — */
.board{ padding:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; background:
  radial-gradient(color-mix(in oklab,var(--tint) 10%,transparent) .8px, transparent .8px) 0 0/16px 16px, var(--ground); min-height:300px; }
.board .kh{ font-size:9.5px; }
.board .kcard .t{ font-size:10.5px; }
.board .kcard .m{ font-size:8.5px; }

/* ── скриншоты приложения (герой и спотлайты) ────────────────── */
/* Пара картинок на обе темы: показывается та, что совпадает с текущей.
   Логика состояний повторяет блок токенов тёмной темы выше. */
.shot{ display:block; line-height:0; }
.shot img{ width:100%; height:auto; display:block; }
.shot .shot-light{ display:none; }
:root[data-mode="light"] .shot .shot-dark,
:root[data-theme="light"]:not([data-mode="dark"]) .shot .shot-dark{ display:none; }
:root[data-mode="light"] .shot .shot-light,
:root[data-theme="light"]:not([data-mode="dark"]) .shot .shot-light{ display:block; }
@media (prefers-color-scheme: light){
  :root:not([data-mode]):not([data-theme]) .shot .shot-dark{ display:none; }
  :root:not([data-mode]):not([data-theme]) .shot .shot-light{ display:block; }
}

/* Герой: настоящий скриншот в «окне приложения» со сценой и перспективой. */
.hero-shot{
  border-radius:clamp(14px, 1.6vw, 20px);
  border-bottom:1px solid color-mix(in oklab, var(--rail-b) 14%, transparent);
}

/* Спотлайты: рамка браузера вокруг скриншота. */
.shot-frame .shot{ background:var(--surface-2); }

/* ── переключатель языка ─────────────────────────────────────── */
.flag{
  width:18px; height:12px; border-radius:2.5px; overflow:hidden;
  display:inline-flex; flex:none;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent) inset;
}
.flag svg{ width:100%; height:100%; display:block; }
.lang{ position:relative; }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:70;
  display:none; flex-direction:column; gap:2px; min-width:170px; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg);
}
.lang.open .lang-menu{ display:flex; }
.lang.open .lang-btn{ background:var(--dz-fill); }
.nav.stuck .lang.open .lang-btn, .nav.menu-open .lang.open .lang-btn{ background:var(--surface-2); }
.lang-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  font-size:13.5px; font-weight:560; color:var(--ink);
  transition:background .16s var(--ease);
}
.lang-menu a:hover{ background:var(--surface-2); }
.lang-menu a.on{ color:var(--ink-3); pointer-events:none; }
.mobile-langs{ display:flex; gap:6px; }
.mobile-langs a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; border:1px solid var(--line-soft); border-radius:10px;
  font-size:13.5px; font-weight:600;
}
.mobile-langs a.on{ border-color:color-mix(in oklab, var(--accent) 45%, var(--line)); color:var(--ink); }
/* три языка во всю ширину телефона: подписи сжимаются, а не выталкивают строку за край */
.mobile-langs a{ min-width:0; white-space:nowrap; overflow:hidden; }
.mobile-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mobile-row a{ flex:1; }
.mobile-mode{ display:none; width:40px; height:40px; border:1px solid var(--line-soft); border-radius:10px; color:var(--ink-2); }
.mobile-mode:hover{ background:var(--surface-2); color:var(--ink); }
/* Телефон: в шапке — знак, «Попробовать бесплатно» и бургер. Язык и тема уходят в
   мобильное меню, иначе на 375 px шапка шире экрана на ~90 px и кнопка обрезается. */
@media (max-width:480px){
  .nav-right > .lang, .nav-right > #mode{ display:none; }
  .mobile-mode{ display:grid; }
  .nav .btn-primary{ padding:0 11px; font-size:12.5px; }
}
@media (max-width:400px){
  .nav .btn-primary{ padding:0 9px; font-size:12px; }
  .mobile-langs a{ padding:10px 6px; gap:6px; font-size:13px; }
}
/* совсем узкие (320–350 px): название прячем, остаётся знак */
@media (max-width:350px){
  .brand{ font-size:0; gap:0; }
}

/* ── тарифы: сетка на две карточки в бете ────────────────────── */
.tiers.two{ grid-template-columns:repeat(2, minmax(0, 430px)); justify-content:center; }
@media (max-width:920px){
  .tiers.two{ grid-template-columns:1fr; }
}

/* Тарифы. Фон заголовка — коллаж мастеров на вызовах (tools/trades-collage), переехал сюда из
   убранной финальной полосы. Приглушён и растворяется книзу маской: за карточками тарифов
   его уже нет, цены читаются на чистом фоне. */
.pricing-sec{ position:relative; isolation:isolate; overflow:hidden; background:var(--surface); border-block:1px solid var(--line-soft); }
.pricing-sec .anchor{ position:absolute; top:0; }
.pricing-photos{ position:absolute; inset:0 0 auto; height:min(760px, 85%); z-index:-1; pointer-events:none; opacity:.22;
  background:url(/assets/trades/trades-1640.webp) center 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(#000 25%, transparent); mask-image:linear-gradient(#000 25%, transparent); }
:root[data-mode="dark"] .pricing-photos{ opacity:.3; }
@media (max-width: 900px){ .pricing-photos{ background-image:url(/assets/trades/trades-820.webp); } }
/* под заголовком фото притушено ещё сильнее — подзаголовок читается поверх лиц и инструментов */
.pricing-sec .sect-head{ position:relative; }
.pricing-sec .sect-head::before{ content:""; position:absolute; inset:-36px -80px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--surface) 82%, transparent), transparent); }

/* ── плавная прокрутка (Lenis, src/client/scroll.ts) ─────────────
   Нативный scroll-behavior:smooth спорит с Lenis — при нём выключаем. */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:clip; }

/* ── живое демо: каркас секции ────────────────────────────────────
   Нужен до загрузки скрипта демо, поэтому здесь, а не в demo.css.
   Трек высокий: его высота — длина прокрутки, за которую проходят шаги
   (--demo-steps ставит сервер); стенд прилипает к экрану через sticky —
   высота известна заранее, и страница под секцией не прыгает. */
/* clip, а не hidden: hidden сделал бы секцию скролл-контейнером и сломал sticky у стенда.
   Без обрезки свечения (.glow) вылезают за край и дают окну горизонтальный скролл. */
.demo-sec{ padding-top:clamp(72px, 9vw, 132px); overflow-x:clip; }
.demo-track{ position:relative; height:calc(100svh + var(--demo-len, var(--demo-steps, 1) * 90svh)); }
.demo-pin{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; gap:12px; padding:72px 0 14px; }
.demo-rail{ display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; }
.demo-steps{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none; }
.demo-step{
  min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:10px; row-gap:2px;
  padding:8px 14px 8px 8px; border-radius:14px; border:1px solid var(--dz-line); background:var(--dz-fill); color:var(--dz-ink-2);
  transition:border-color .3s, background-color .3s;
}
.demo-step .n{ grid-row:span 2; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--dz-fill-2); color:var(--dz-ink); font:600 12px/1 var(--mono); }
.demo-step .t{ font-size:14px; font-weight:600; color:var(--dz-ink); }
.demo-step .x{ font-size:12.5px; color:var(--dz-ink-3); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
/* при живом демо невыбранные шаги — только номер (полное имя — в title): иначе семь шагов не влезут */
.demo-rail.live .demo-step:not(.cur){ width:42px; height:42px; flex:none; padding:0; display:grid; place-items:center; grid-template-columns:auto; }
/* Текущий шаг — фиксированной ширины: соседние квадратики не прыгают при смене шага. */
.demo-rail.live .demo-step.cur{ flex:0 1 440px; min-width:220px; }
.demo-rail.live .demo-step:not(.cur) .n{ grid-row:auto; }
.demo-rail.live .demo-step:not(.cur) .t, .demo-rail.live .demo-step:not(.cur) .x{ display:none; }
.demo-step.cur{ border-color:color-mix(in oklab, var(--accent) 55%, transparent); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.demo-step.cur .n, .demo-step.done .n{ background:var(--accent); color:#04160D; }
.demo-ctl{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.demo-ctl button[hidden]{ display:none; }
.demo-rail:not(.live) .demo-ctl{ display:none; }
.demo-ctl button{
  height:34px; padding:0 12px; border-radius:10px; border:1px solid var(--dz-line); background:var(--dz-fill);
  color:var(--dz-ink-2); font:500 13px/1 var(--ui); cursor:pointer; transition:background-color .2s, color .2s;
}
.demo-ctl button:hover{ background:var(--dz-fill-2); color:var(--dz-ink); }
.demo-ctl .go{ display:inline-flex; align-items:center; gap:6px; border-color:transparent; background:var(--accent); color:#04160D; font-weight:600; }
.demo-ctl .go:hover{ background:var(--accent-2); color:#04160D; }
.demo-mode{ display:inline-flex; align-items:center; gap:7px; margin-right:6px; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dz-ink-3); }
.demo-mode:empty{ display:none; }
.demo-mode::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.demo-mode[data-mode="autopilot"]::before{ background:var(--accent); animation:demo-blink 1.4s ease-in-out infinite; }
.demo-mode[data-mode="yourTurn"], .demo-mode[data-mode="stepDone"]{ color:color-mix(in oklab, var(--accent) 70%, #fff); }
@keyframes demo-blink{ 50%{ opacity:.25; } }
.demo-stage{ position:relative; flex:1; min-height:0; width:min(1880px, 100% - 24px); margin-inline:auto; }
/* финал сюжета: призыв поверх стенда; проявляет его последний шаг демо */
.demo-final{ position:absolute; left:0; right:0; top:58%; display:flex; justify-content:center; padding:0 22px; pointer-events:none; z-index:6; }
.demo-final-card{
  visibility:hidden; pointer-events:auto; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:26px 30px; border-radius:var(--r-xl); text-align:center; color:var(--dz-ink);
  background:color-mix(in oklab, var(--rail-b) 82%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--dz-line); box-shadow:0 40px 80px -30px rgb(0 0 0 / .7);
}
.demo-final-card h3{ margin:0; font-size:clamp(22px, 2.6vw, 30px); letter-spacing:-.02em; }
.demo-final-card p{ margin:0; color:var(--dz-ink-2); }
.demo-final-card .hero-cta{ margin-top:6px; }

@media (max-width:640px){
  .demo-pin{ padding-top:68px; gap:10px; }
  .demo-step .x{ display:none; }
  .demo-rail:not(.live) .demo-steps{ flex-wrap:wrap; }
  /* Семь шагов в 343 px не встают даже квадратами: текущий — карточкой во всю
     ширину, остальные — точки прогресса (пройденные — акцентом). */
  .demo-steps{ gap:5px; }
  .demo-rail.live .demo-step:not(.cur){ width:8px; height:8px; border:0; border-radius:3px; background:var(--dz-fill-2); }
  .demo-rail.live .demo-step.done:not(.cur){ background:var(--accent); }
  .demo-rail.live .demo-step:not(.cur) .n{ display:none; }
  .demo-rail.live .demo-step.cur{ flex:1 1 auto; min-width:0; margin-inline:3px; padding:6px 10px 6px 6px; }
  .demo-step .t{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* управление — одной строкой: подпись режима сжимается в две строки, кнопки — нет */
  .demo-ctl{ width:100%; flex-wrap:nowrap; }
  .demo-mode{ flex:1; min-width:0; margin-right:0; font-size:10px; line-height:1.25; }
  .demo-ctl button{ flex:none; height:32px; padding:0 10px; font-size:12.5px; }
  /* когда есть «Дальше», «Заново» не нужна — она есть и в финале */
  .demo-ctl:has(.go:not([hidden])) [data-ctl="restart"]{ display:none; }
  /* призыв финала от 58 % высоты уходил за нижний край — прижат к низу */
  .demo-final{ top:auto; bottom:16px; padding:0 12px; }
  .demo-final-card{ padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .demo-mode[data-mode="autopilot"]::before{ animation:none; }
}

/* ── витрина «Все документы — в одном месте» (render/docs.ts, client/docs.ts) ──
   Трек высокий — его высота задаёт длину прокрутки, за которую влетают листы
   и собирается библиотека; сцена прилипает к экрану (sticky). */
.docs-sec{ overflow-x:clip; }
.docs-track{ position:relative; height:calc(100svh + var(--docs-n, 9) * 38svh + 130svh); }
.docs-pin{ position:sticky; top:0; height:100svh; display:flex; align-items:center; padding-top:64px; }
.docs-grid{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:56px; align-items:center; }
.docs-copy{ display:flex; flex-direction:column; gap:16px; }
.docs-copy h2{ margin:0; font-size:clamp(30px, 3.6vw, 48px); line-height:1.05; letter-spacing:-.03em; }
.docs-list{ display:flex; flex-direction:column; gap:2px; margin:6px 0 0; padding:0; list-style:none; counter-reset:doc; }
.docs-list li{
  display:grid; grid-template-columns:14px auto 1fr; align-items:baseline; column-gap:10px; padding:6px 10px; border-radius:10px;
  color:var(--dz-ink-3); transition:color .35s, background-color .35s;
}
.docs-list li i{ width:8px; height:8px; border-radius:2px; align-self:center; background:var(--dz-fill-2); transition:background-color .35s, box-shadow .35s; }
.docs-list li b{ font-size:15px; font-weight:600; }
.docs-list li span{ font-size:13px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docs-list li[data-on="true"]{ color:var(--dz-ink); background:var(--dz-fill); }
.docs-list li[data-on="true"] i{ background:var(--c); box-shadow:0 0 12px 2px color-mix(in oklab, var(--c) 70%, transparent); }
.docs-list li[data-on="done"]{ color:var(--dz-ink-2); }
.docs-list li[data-on="done"] i{ background:var(--c); }
/* Счётчик — в строке с eyebrow, а не под списком: колонка бывает выше экрана,
   и внизу он уезжал за край. Ширина цифры фиксирована — «9» и «10» не дёргают
   подпись. Знаменатель — ∞: свой PDF может быть любым. */
.docs-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.docs-count{ display:inline-flex; align-items:baseline; gap:6px; font:600 13px/1 var(--mono); color:var(--dz-ink-3); white-space:nowrap; }
.docs-count b{ font-size:28px; line-height:1; color:var(--dz-ink); font-variant-numeric:tabular-nums; min-width:1.2ch; text-align:right; }
.docs-count em{ font-style:normal; font-size:22px; }
.docs-count b.inf{ min-width:0; font-size:30px; background:linear-gradient(90deg, #2BB8B0, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.docs-count span{ margin-left:4px; }
/* невысокий экран — колонка должна влезть в прилипшую сцену целиком */
@media (max-height:860px) and (min-width:1001px){
  .docs-copy{ gap:12px; }
  .docs-copy .lead{ display:none; }
  .docs-list li{ padding-block:4px; }
}

.docs-stage{ position:relative; height:min(76svh, 640px); }
.docs-lib{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:linear-gradient(160deg, #2BB8B0, #1FA25E); box-shadow:0 60px 120px -50px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .08);
  font-family:'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
}
.docs-lib-h{ height:32px; flex:none; display:flex; align-items:center; gap:6px; padding:0 14px; color:rgb(255 255 255 / .85); font-size:11px; }
.docs-lib-h i{ width:9px; height:9px; border-radius:50%; background:rgb(255 255 255 / .35); }
.docs-lib-h span{ margin-inline:auto; padding:3px 12px; border-radius:7px; background:rgb(255 255 255 / .16); }
.docs-lib-in{ flex:1; min-height:0; display:flex; flex-direction:column; margin:0 8px 8px; border-radius:12px; background:#EFEFEF; color:#141414; }
:root[data-mode="dark"] .docs-lib-in{ background:#141414; color:#EDEDED; }
.docs-lib-t{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid rgb(0 0 0 / .08); }
.docs-lib-t b{ font-size:14px; }
.docs-lib-t span{ display:flex; gap:6px; flex-wrap:wrap; }
.docs-lib-t em{ padding:4px 8px; border-radius:7px; border:1px solid rgb(0 0 0 / .12); font-style:normal; font-size:10.5px; }
.docs-lib-t em.on{ border-color:transparent; background:#22B45E; color:#fff; }
:root[data-mode="dark"] .docs-lib-t, :root[data-mode="dark"] .docs-lib-t em{ border-color:rgb(255 255 255 / .1); }
.docs-slots{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3, auto); grid-template-rows:repeat(3, minmax(0, 1fr)); justify-content:center; gap:12px 18px; padding:12px; }
.docs-slot{ height:100%; aspect-ratio:240 / 330; border-radius:4px; background:rgb(0 0 0 / .05); }
:root[data-mode="dark"] .docs-slot{ background:rgb(255 255 255 / .05); }

/* лист документа */
.doc{
  position:absolute; left:50%; top:50%; width:240px; height:330px; margin:-165px 0 0 -120px; display:flex; flex-direction:column; gap:8px;
  padding:14px 14px 12px; border-radius:4px; background:#FFFFFF; color:#1B2330; overflow:hidden; will-change:transform;
  font:400 9px/1.35 Georgia, "Times New Roman", serif; box-shadow:0 1px 0 rgb(0 0 0 / .05), 0 30px 60px -24px rgb(0 0 0 / .55);
}
.doc header{ display:flex; align-items:center; gap:7px; padding-bottom:7px; border-bottom:2px solid var(--c); }
.doc-logo{ width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--c); color:#fff; font:700 8px/1 Georgia, serif; font-style:normal; }
.doc header span{ flex:1; display:flex; flex-direction:column; }
.doc header b{ font-size:7.5px; letter-spacing:.08em; }
.doc header small{ font-size:6.5px; color:#6B7280; }
.doc header em{ font:700 8px/1 ui-monospace, monospace; font-style:normal; color:var(--c); }
.doc h4{ margin:2px 0 0; font:700 14px/1.15 Georgia, serif; color:var(--c); }
.doc-body{ flex:1; display:flex; flex-direction:column; gap:5px; }
.doc-th{ display:grid; grid-template-columns:1.6fr .8fr .8fr; padding-bottom:3px; border-bottom:1px solid #E5E7EB; font-size:6.5px; letter-spacing:.06em; text-transform:uppercase; color:#6B7280; }
.doc-row{ display:flex; justify-content:space-between; gap:8px; padding:3px 0; border-bottom:1px dotted #D1D5DB; }
.doc-row b{ font-weight:600; white-space:nowrap; }
.doc-row.tot{ border-bottom:0; border-top:1.5px solid #1B2330; font-size:10px; font-weight:700; }
.doc-row em{ font-style:normal; font-weight:700; }
.doc em.ok{ color:#15803D; }
.doc-lines{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.doc .ln{ display:block; height:4px; border-radius:2px; background:#E5E7EB; }
.doc-grid4{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.doc-grid4 div{ padding:5px 6px; border-radius:3px; background:#F3F4F6; }
.doc-grid4 small{ display:block; font-size:6.5px; color:#6B7280; }
.doc-grid4 b{ font:700 11px/1.2 ui-monospace, monospace; }
.doc-checks{ display:flex; flex-direction:column; gap:4px; margin:0; padding:0; list-style:none; }
.doc-checks li{ display:flex; align-items:center; gap:6px; }
.doc-checks i{ width:11px; height:11px; display:grid; place-items:center; border-radius:2px; background:var(--c); color:#fff; font-size:7px; font-style:normal; }
.doc-opts{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.doc-opts div{ display:flex; flex-direction:column; gap:2px; padding:7px; border-radius:4px; border:1px solid #E5E7EB; }
.doc-opts .pick{ border-color:var(--c); box-shadow:0 0 0 1px var(--c); }
.doc-opts small{ font-size:6.5px; color:#6B7280; }
.doc-opts b{ font-size:10px; }
.doc-opts em{ font:700 11px/1 ui-monospace, monospace; font-style:normal; color:var(--c); }
.doc-pics{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.doc-pics i{ position:relative; height:58px; border-radius:3px; background:linear-gradient(135deg, #CBD5E1, #94A3B8); }
.doc-pics i:nth-child(n+3){ background:linear-gradient(135deg, #A7F3D0, #34D399); }
.doc-pics em{ position:absolute; left:4px; bottom:4px; padding:1px 4px; border-radius:2px; background:#1B2330; color:#fff; font:700 6px/1.4 ui-monospace, monospace; font-style:normal; }
.doc-fields{ display:flex; flex-direction:column; gap:7px; padding:8px; border-radius:3px; background:repeating-linear-gradient(0deg, transparent 0 9px, #F1F5F9 9px 10px); }
.doc-fields span{ padding:5px 6px; border-radius:3px; border:1.5px dashed var(--c); background:color-mix(in oklab, var(--c) 8%, #fff); font:500 8px/1 ui-monospace, monospace; color:#15803D; }
.doc footer{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; min-height:26px; }
.doc-sign{ width:90px; height:26px; overflow:visible; }
.doc-sign path{ fill:none; stroke:#1F3A8A; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.doc-stamp{ padding:3px 7px; border:2px solid var(--c); border-radius:4px; color:var(--c); font:800 9px/1 ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-8deg); }
.doc-stamp.ok{ border-color:#15803D; color:#15803D; }
.doc-status{ margin-left:auto; padding:3px 7px; border-radius:4px; background:#F3F4F6; color:#4B5563; font:600 8px/1 ui-monospace, monospace; }

/* без JS — просто сетка листов */
.docs-sec:not(.live) .docs-track{ height:auto; }
.docs-sec:not(.live) .docs-pin{ position:relative; height:auto; padding-block:120px; }
.docs-sec:not(.live) .docs-lib{ display:none; }
.docs-sec:not(.live) .docs-stage{ height:auto; display:grid; grid-template-columns:repeat(3, 240px); gap:16px; justify-content:center; }
.docs-sec:not(.live) .doc{ position:relative; left:auto; top:auto; margin:0; }
@media (max-width:1000px){
  .docs-grid{ grid-template-columns:1fr; }
  .docs-copy .lead, .docs-list{ display:none; }
  .docs-stage{ height:min(60svh, 520px); }
}