/* ============================================================================
   TG Архив — лендинг (factory.testoai.online). Полный редизайн 2026-07.

   Айдентика «ночной форензик-архив»:
   - тёплый графит вместо синей «телеграм-ночи»;
   - ЕДИНЫЙ брендовый акцент = зелёный «зафиксировано» (#3fd07f), CTA с тёмным
     текстом; красный/янтарный живут ТОЛЬКО как семантика продукта
     (удалено / изменено) внутри чат-виньеток и журнала событий;
   - моноширинные временные метки (JetBrains Mono) = фирменная грамматика;
   - Tektur (дисплей) + Onest (текст), всё self-hosted, variable.

   Радиусы (единая система): карточки/панели 18px, пузыри чата 16px (хвост 5px),
   кнопки 12px, чипы/пилюли 999px. Другие значения не используются.

   Все цикличные демо-анимации объявлены ТОЛЬКО под .anim.live — вне вьюпорта
   (класс live снят) они не выполняются вовсе; reduced-motion получает статичное
   конечное состояние.
   ========================================================================== */

/* ── Fonts (variable, cyrillic+latin сабсеты) ─────────────────────────────── */
@font-face{font-family:'Tektur';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/fonts/Tektur-var-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Tektur';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/fonts/Tektur-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/Onest-var-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/Onest-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('assets/fonts/JBMono-var-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('assets/fonts/JBMono-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --ink:       #0c0f0d;                 /* база: тёплый графит с зелёным подтоном */
  --ink-deep:  #090b0a;
  --panel:     #121613;
  --surface:   #181d19;
  --surface-2: #1f2620;
  --text:      #ecf2ec;
  --body:      #b7c2b9;
  --hint:      #8b968c;
  --faint:     #7f8a80;
  --fix:       #3fd07f;                 /* «зафиксировано» = брендовый акцент */
  --fix-soft:  rgba(63,208,127,.12);
  --fix-line:  rgba(63,208,127,.32);
  --btn-txt:   #071209;                 /* тёмный текст на зелёной кнопке */
  --btn-hover: #58dd92;
  --del:       #ff6257;                 /* семантика: удалено */
  --edit:      #f2b04e;                 /* семантика: изменено */
  --line:      rgba(226,236,228,.08);
  --line-2:    rgba(226,236,228,.15);
  --r-card: 18px;
  --r-bubble: 16px;
  --r-btn: 12px;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-io:  cubic-bezier(.77,0,.175,1);
  --f-disp: 'Tektur','Onest',system-ui,sans-serif;
  --f-body: 'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono: 'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  --maxw: 1136px;
  /* z-scale: 50 шапка, 60 тосты внутри демо */
  --z-nav: 50;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block; max-width:100%}
a{color:var(--fix); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
::selection{background:rgba(63,208,127,.3); color:#fff}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--fix); outline-offset:3px}
.container{width:min(var(--maxw),100% - 40px); margin-inline:auto}
section{scroll-margin-top:84px}
time,.vtime{font-family:var(--f-mono)}

.ic{display:inline-block; vertical-align:-.14em; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

#topSentinel{position:absolute; top:0; height:1px; width:1px}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:var(--r-btn);
  font:600 15.5px/1.1 var(--f-body); color:var(--btn-txt); background:var(--fix);
  transition:transform .16s var(--ease-out), background-color .2s ease;
  white-space:nowrap;
}
.btn .ic{font-size:17px}
.btn:hover{background:var(--btn-hover); text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.big{padding:17px 30px; font-size:16.5px}
.btn.ghost{background:var(--surface); border:1px solid var(--line-2); color:var(--text)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:10px 16px; font-size:14px}

/* ── Header ───────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(12,15,13,.84);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(9,11,10,.92)}
.nav-in{display:flex; align-items:center; gap:28px; height:66px}
.brand{display:flex; align-items:center; gap:11px; color:var(--text); font:600 16px/1 var(--f-disp); letter-spacing:.01em}
.brand:hover{text-decoration:none}
.brand-mark{
  width:31px; height:31px; border-radius:9px; flex:none;
  background:var(--surface); border:1px solid var(--line-2);
  display:grid; place-items:center;
}
.brand-mark svg{width:19px; height:19px; fill:none; stroke-linecap:round; stroke-linejoin:round}
.brand-mark .bm-strike{stroke:var(--del); stroke-width:2.1}
.brand-mark .bm-check{stroke:var(--fix); stroke-width:2.4}
.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{color:var(--hint); font:500 14.5px/1 var(--f-body); padding:10px 13px; border-radius:var(--r-btn); transition:color .15s ease, background-color .15s ease}
.nav-links a:hover{color:var(--text); background:var(--surface); text-decoration:none}
.nav .btn{margin-left:6px}
/* ── Language switcher (RU | EN pill, header + footer) ──────────────────────── */
.lang-switch{display:inline-flex; align-items:center; gap:2px; flex:none; background:var(--surface); border:1px solid var(--line-2); border-radius:999px; padding:3px}
.lang-switch a{display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:6px 9px; border-radius:999px; font:600 12.5px/1 var(--f-body); letter-spacing:.04em; color:var(--hint); transition:color .15s ease, background-color .15s ease}
.lang-switch a:hover{color:var(--text); background:var(--surface-2); text-decoration:none}
.lang-switch a[aria-current="page"]{color:var(--btn-txt); background:var(--fix)}
.lang-switch a[aria-current="page"]:hover{background:var(--btn-hover)}
.foot-brand .lang-switch{margin-top:20px}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-in{justify-content:space-between}
  .nav .lang-switch{margin-left:auto}
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:clip}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 540px at 76% 30%, rgba(63,208,127,.07), transparent 65%),
    radial-gradient(460px 400px at 6% 92%, rgba(255,98,87,.04), transparent 60%);
}
.hero-in{
  position:relative;
  display:grid; grid-template-columns:1.04fr .96fr; align-items:center;
  gap:clamp(36px,5vw,72px);
  padding:clamp(44px,7vh,80px) 0 clamp(52px,8vh,92px);
  min-height:min(calc(100svh - 66px), 840px);
}
.hero h1{
  font:700 clamp(30px,4.6vw,55px)/1.1 var(--f-disp);
  letter-spacing:-.01em;
}
.hero h1 .h1-fix{color:var(--fix); position:relative; white-space:nowrap}
.hero h1 .h1-fix::after{ /* «линия протокола» под ключевой фразой */
  content:""; position:absolute; left:2px; right:2px; bottom:-8px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--fix-line), var(--fix) 45%, var(--fix-line));
}
.hero-sub{
  margin-top:26px; max-width:52ch;
  font-size:clamp(16px,1.35vw,17.5px); line-height:1.66; color:var(--body);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

/* точка «идёт запись» (живой статус, в hero-штампе и финале) */
.hs-dot{width:7px; height:7px; border-radius:50%; background:var(--fix); flex:none}

/* ── Телефон с живой демкой ───────────────────────────────────────────────── */
.hero-phone-wrap{position:relative; justify-self:center}
.phone{
  position:relative; width:min(344px,86vw);
  background:#070908; border:1px solid rgba(226,236,228,.12);
  border-radius:46px; padding:10px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    0 40px 90px -28px rgba(0,0,0,.65),
    0 30px 80px -30px rgba(63,208,127,.16);
}
.screen{
  position:relative; border-radius:37px; overflow:hidden; background:var(--ink);
  height:clamp(568px,66vh,656px); display:flex; flex-direction:column;
  contain:layout paint;
}
.notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:96px; height:22px; border-radius:999px; background:#070908; z-index:3}
.app-bar{
  display:flex; align-items:center; gap:10px;
  padding:40px 14px 10px; background:var(--panel);
  border-bottom:1px solid var(--line); flex:none;
}
.app-bar .ic{font-size:18px; color:var(--hint)}
.ava{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:linear-gradient(135deg,#d97a6c,#a34d4d);
  display:grid; place-items:center; color:#fff; font:600 15px/1 var(--f-body);
}
.who{min-width:0; margin-right:auto}
.who b{display:block; font:600 14.5px/1.25 var(--f-body)}
.who span{display:flex; align-items:center; gap:5px; font:400 11px/1.3 var(--f-mono); color:var(--fix)}
.who .dot{width:6px; height:6px; border-radius:50%; background:var(--fix); flex:none}

.chat{
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:2px; padding:14px 12px 16px; position:relative;
  transition:opacity .4s ease;
}
.chat::before{ /* телеграм-обои: едва заметные дудлы */
  content:""; position:absolute; inset:0; opacity:.045; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 30 26 40m10-10-3 15-3.5-7.5L22 34z'/%3E%3Cpath d='M108 96c-2-2.2-5.5-.8-5.5 1.7 0 2.5 2.9 4.2 5.5 6.4 2.6-2.2 5.5-3.9 5.5-6.4 0-2.5-3.5-3.9-5.5-1.7z'/%3E%3Cpath d='m28 106 3.5 3.5 7-8'/%3E%3Cpath d='M116 28a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-6-2.5V28l1.8 1.8'/%3E%3C/g%3E%3C/svg%3E");
}
.chat.resetting{opacity:0}
.date-pill{
  align-self:center; margin-bottom:8px;
  padding:4px 11px; border-radius:999px;
  background:rgba(31,38,32,.75); color:var(--hint);
  font:500 11px/1.4 var(--f-mono);
}

/* строка протокола внизу экрана */
.proto-bar{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:9px 14px 12px; background:var(--panel);
  border-top:1px solid var(--line);
  font:500 11px/1.3 var(--f-mono); color:var(--fix);
}
.proto-bar .hs-dot{width:6px; height:6px}

/* сообщение: раскрытие высоты через grid-rows (0fr→1fr) + сдвиг/прозрачность */
.msg{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease-out)}
.msg>.msg-in{overflow:hidden; min-height:0; display:flex; flex-direction:column}
.msg.shown{grid-template-rows:1fr}
.bbl{
  max-width:82%; margin-top:6px; padding:8px 12px 6px;
  border-radius:var(--r-bubble); background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  font-size:14px; line-height:1.45;
  align-self:flex-start; border-bottom-left-radius:5px;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .3s ease, transform .34s var(--ease-out);
  position:relative;
}
.msg.shown .bbl{opacity:1; transform:none}
.bbl.out{
  align-self:flex-end; background:#24402e; color:#eaf5ec;
  border-radius:var(--r-bubble); border-bottom-right-radius:5px; border-bottom-left-radius:var(--r-bubble);
}
.bbl .meta{
  display:flex; align-items:center; gap:5px; justify-content:flex-end;
  margin-top:2px; font:400 10px/1.4 var(--f-mono); color:var(--faint);
}
.bbl.out .meta{color:rgba(234,245,236,.6)}
.bbl .meta .ic{font-size:11px}
.meta-edit{display:none; align-items:center; gap:4px; color:var(--edit)}
.meta-del{display:none; align-items:center; gap:4px; color:var(--del); font-weight:500}
.bbl.edited .meta-edit{display:inline-flex}
.bbl.deleted .meta-del{display:inline-flex}
.bbl .txt{position:relative; transition:filter .24s ease, opacity .24s ease}
.bbl.swapping .txt{filter:blur(3px); opacity:.3}
.bbl.deleted .txt{text-decoration:line-through; text-decoration-color:var(--del); opacity:.6}

/* исчезающее фото */
.photo{
  display:block;
  width:196px; height:138px; border-radius:var(--r-bubble); position:relative; overflow:hidden;
  background:
    radial-gradient(90px 70px at 28% 30%, #3c5847, transparent 70%),
    radial-gradient(120px 90px at 75% 75%, #27443a, transparent 72%),
    linear-gradient(150deg,#2c4437,#16241d);
  margin:2px 0 4px;
}
.photo::after{ /* блик */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%);
}
.once{
  position:absolute; left:8px; top:8px;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:rgba(7,9,8,.72); color:var(--edit);
  font:600 10.5px/1.2 var(--f-mono);
}
.once .ic{font-size:11px}
.saved-chip{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin:2px 0 3px; padding:5px 10px; border-radius:999px;
  background:var(--fix-soft); border:1px solid var(--fix-line);
  color:var(--fix); font:600 10.5px/1.3 var(--f-mono);
  opacity:0; transform:translateY(4px) scale(.96);
  transition:opacity .3s ease, transform .3s var(--ease-out);
}
.saved-chip.on{opacity:1; transform:none}
.saved-chip .ic{font-size:12px}

/* реакция */
.react{
  position:absolute; right:10px; bottom:-11px;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-2);
  font:600 11.5px/1.4 var(--f-body); color:var(--text);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px) scale(.6);
  /* мягкая пружина, как реакции в самом Telegram (продуктовая демка) */
  transition:opacity .28s ease, transform .34s cubic-bezier(.3,1.3,.55,1);
}
.react.on{opacity:1; transform:none}
.bbl.has-react{margin-bottom:12px}

/* печатает… */
.typing{
  display:none; align-self:flex-start; margin-top:6px;
  padding:11px 14px; border-radius:var(--r-bubble); border-bottom-left-radius:5px;
  background:var(--surface);
}
.typing.on{display:flex; gap:4px}
.typing i{
  width:6px; height:6px; border-radius:50%; background:var(--hint);
  animation:tdot 1.1s ease-in-out infinite;
}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{transform:none; opacity:.45} 30%{transform:translateY(-4px); opacity:1}}

/* тост поверх чата */
.demo-toast{
  position:absolute; left:12px; right:12px; top:12px; z-index:2;
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; border-radius:var(--r-bubble);
  background:rgba(18,22,19,.95); border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font:500 12.5px/1.35 var(--f-body); color:var(--text);
  opacity:0; transform:translateY(-14px);
  transition:opacity .3s ease, transform .38s var(--ease-out);
  pointer-events:none;
}
.demo-toast.on{opacity:1; transform:none}
.demo-toast .ic{font-size:15px; color:var(--del)}
.demo-toast b{color:var(--fix); font-weight:600}

/* подпись под телефоном */
.phone-caption{
  margin-top:18px; text-align:center;
  font:400 12px/1.5 var(--f-mono); color:var(--faint);
}

/* reduced-motion / статичный режим демки */
.demo-static .msg{grid-template-rows:1fr}
.demo-static .bbl{opacity:1; transform:none}
.demo-static .typing{display:none !important}
.demo-static .saved-chip,.demo-static .react{opacity:1; transform:none}

/* ── Журнал событий (бегущая строка) ──────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--line);
  padding:16px 0; overflow:hidden; position:relative;
  background:var(--ink-deep);
}
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:1; pointer-events:none;
}
.ticker::before{left:0; background:linear-gradient(90deg,var(--ink-deep),transparent)}
.ticker::after{right:0; background:linear-gradient(-90deg,var(--ink-deep),transparent)}
.ticker-track{display:flex; width:max-content; animation:tick 52s linear infinite; animation-play-state:paused}
.ticker.live .ticker-track,.ticker:not(.anim) .ticker-track{animation-play-state:running}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ev{
  display:inline-flex; align-items:baseline; gap:9px; flex:none; margin-right:34px;
  font:400 12.5px/1.4 var(--f-mono); color:var(--hint); white-space:nowrap;
}
.ev time{color:var(--faint)}
.ev b{font-weight:600}
.ev .ic.arr{color:var(--faint); font-size:12px; align-self:center}
.ev .red{color:var(--del)}
.ev .orange{color:var(--edit)}
.ev .green{color:var(--fix)}

/* ── Секции ───────────────────────────────────────────────────────────────── */
.sect{padding-top:clamp(88px,11vw,140px)}
.sect-head{text-align:center; max-width:780px; margin-inline:auto}
.sect-head h2{font:600 clamp(25px,3.4vw,38px)/1.16 var(--f-disp); letter-spacing:-.005em}
.sect-head .lead{margin:18px auto 0; max-width:62ch; color:var(--body); font-size:clamp(15.5px,1.25vw,17px); line-height:1.66}

/* ── Виньетка: «запись» из архива ─────────────────────────────────────────── */
.vig{
  width:100%; max-width:474px; justify-self:center;
  background:linear-gradient(180deg,var(--panel),#0e120f);
  border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.6);
  overflow:hidden;
}
.vig-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--line);
  font:500 11.5px/1.4 var(--f-mono); color:var(--hint);
}
.vig-head time,.vig-head .vtime{color:var(--faint); font-size:11px}
.vh-src{display:inline-flex; align-items:center; gap:8px; min-width:0}
.vh-src .ic{font-size:13px; color:var(--faint)}
.vh-ava{
  width:20px; height:20px; border-radius:50%; flex:none; font:600 10px/1 var(--f-body);
  display:inline-grid; place-items:center; color:#fff; font-style:normal;
}
.vh-ava.a1{background:linear-gradient(135deg,#d97a6c,#a34d4d)}
.vh-ava.a2{background:linear-gradient(135deg,#6c96d9,#4d68a3)}
.vig>[class^="d"]{padding:clamp(16px,2vw,20px)}
.mini-chat{display:flex; flex-direction:column; gap:8px}
.mini-chat .bbl,.dA .bbl{opacity:1; transform:none; margin-top:0; font-size:13.5px; max-width:88%}

/* общая «строка архива» (сохранённая копия) */
.arch-row{
  display:flex; align-items:center; gap:10px; margin-top:12px;
  background:var(--ink); border:1px solid var(--fix-line); border-radius:var(--r-bubble);
  padding:11px 13px; font:500 13px/1.4 var(--f-body); color:var(--body);
}
.arch-row .thumb{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(150deg,#2c4437,#16241d);
}
.arch-row>span:not(.thumb){min-width:0; font:400 11px/1.5 var(--f-mono); color:var(--faint)}
.arch-row b{display:block; color:var(--fix); font:600 12.5px/1.4 var(--f-body)}
.arch-row>.ic{margin-left:auto; font-size:16px; color:var(--fix)}

/* ── Фичи: сплит копия+виньетка ───────────────────────────────────────────── */
.feature{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(34px,5.5vw,84px);
  margin-top:clamp(64px,8.5vw,108px);
}
.feature:first-of-type{margin-top:clamp(46px,6vw,70px)}
.feature.flip .f-copy{order:2}
.f-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font:600 13px/1.3 var(--f-body); border-radius:999px;
  padding:7px 13px; margin-bottom:18px;
}
.f-kicker .ic{font-size:15px}
.f-kicker.red{color:var(--del); background:rgba(255,98,87,.1)}
.f-kicker.orange{color:var(--edit); background:rgba(242,176,78,.1)}
.f-kicker.green{color:var(--fix); background:var(--fix-soft)}
.f-copy h3,.f-copy .h3like{font:600 clamp(21px,2.5vw,28px)/1.24 var(--f-disp); letter-spacing:-.005em}
.f-copy p{margin-top:14px; color:var(--body); font-size:16px; line-height:1.66; max-width:52ch}
.f-copy .f-note{margin-top:12px; color:var(--faint); font-size:13.5px}

/* — демо A: фильтр «Удалённые» — */
.dA{--cycle:9.5s}
.dA-chips{display:flex; gap:8px; margin-bottom:12px}
.dA-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  font:500 13px/1.3 var(--f-body); color:var(--hint);
}
.dA-chip .ic{font-size:13px}
.dA-chip.c2 .ic{color:var(--del)}
.anim.live .dA-chip.c1{animation:dA-c1 var(--cycle) infinite}
.anim.live .dA-chip.c2{animation:dA-c2 var(--cycle) infinite}
.anim:not(.live) .dA-chip.c1{background:var(--surface-2); border-color:transparent; color:var(--text)}
@keyframes dA-c1{
  0%,20%{background:var(--surface-2); border-color:transparent; color:var(--text)}
  26%,88%{background:transparent; border-color:var(--line); color:var(--hint)}
  94%,100%{background:var(--surface-2); border-color:transparent; color:var(--text)}
}
@keyframes dA-c2{
  0%,20%{background:transparent; border-color:var(--line); color:var(--hint)}
  26%,88%{background:var(--surface-2); border-color:var(--fix-line); color:var(--text)}
  94%,100%{background:transparent; border-color:var(--line); color:var(--hint)}
}
.dA-row{display:grid; grid-template-rows:1fr; overflow:hidden}
.dA-row>div{min-height:0; overflow:hidden; display:flex; flex-direction:column}
.anim.live .dA-row.hide{animation:dA-hide var(--cycle) infinite}
@keyframes dA-hide{
  0%,22%{grid-template-rows:1fr; opacity:1}
  30%,86%{grid-template-rows:0fr; opacity:0}
  94%,100%{grid-template-rows:1fr; opacity:1}
}
.dA-count{
  align-self:center; margin-top:10px;
  font:500 11px/1.4 var(--f-mono); color:var(--faint);
  opacity:0;
}
.anim.live .dA-count{animation:dA-count var(--cycle) infinite}
@keyframes dA-count{0%,24%{opacity:0} 34%,86%{opacity:1} 92%,100%{opacity:0}}

/* — демо B: правка с зачёркиванием старого текста — */
.dB{--cycle:9s}
.dB .bbl{overflow:visible}
.dB-old{display:inline-block}
.dB-strike{position:relative; display:inline}
.dB-strike::after{ /* линия зачёркивания растёт слева направо */
  content:""; position:absolute; left:0; top:54%; height:1.5px; width:100%;
  background:var(--del); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
}
.anim.live .dB-strike::after{animation:dB-strike var(--cycle) var(--ease-io) infinite}
@keyframes dB-strike{0%,24%{transform:scaleX(0)} 32%,94%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.anim.live .dB-old{animation:dB-fade var(--cycle) infinite}
@keyframes dB-fade{0%,30%{opacity:1} 38%,94%{opacity:.55} 100%{opacity:1}}
.dB-new{display:grid; grid-template-rows:0fr}
.dB-new>span{min-height:0; overflow:hidden; display:block}
.anim.live .dB-new{animation:dB-new var(--cycle) var(--ease-out) infinite}
@keyframes dB-new{0%,30%{grid-template-rows:0fr; opacity:0} 38%,96%{grid-template-rows:1fr; opacity:1} 100%{grid-template-rows:0fr; opacity:0}}
.dB-meta{opacity:0; display:inline-flex !important}
.anim.live .dB-meta{animation:dB-meta var(--cycle) infinite}
@keyframes dB-meta{0%,34%{opacity:0} 40%,96%{opacity:1} 100%{opacity:0}}
.dB-vers{display:grid; grid-template-rows:0fr}
.dB-vers>div{min-height:0; overflow:hidden}
.dB-vers .vers-card{margin-top:10px}
.anim.live .dB-vers{animation:dB-vers var(--cycle) var(--ease-out) infinite}
@keyframes dB-vers{0%,46%{grid-template-rows:0fr; opacity:0} 54%,92%{grid-template-rows:1fr; opacity:1} 98%,100%{grid-template-rows:0fr; opacity:0}}
.vers-card{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-bubble); padding:12px 14px;
}
.vers-card h4{margin:0 0 8px; font:600 11px/1.4 var(--f-mono); color:var(--hint); display:flex; gap:6px; align-items:center}
.vers-card h4 .ic{font-size:13px; color:var(--edit)}
.vers-row{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font:400 13px/1.45 var(--f-body)}
.vers-row+.vers-row{border-top:1px solid var(--line)}
.vers-row .old{color:var(--faint); text-decoration:line-through; text-decoration-color:var(--del)}
.vers-row time{color:var(--faint); font-size:11px; flex:none}

/* ── Дуэт-карточки: исчезающие + сторис ───────────────────────────────────── */
.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,28px);
  margin-top:clamp(64px,8.5vw,108px);
}
.duo-card{
  background:linear-gradient(180deg,var(--panel),#0e120f);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(22px,3vw,30px);
}
.duo-card h3{font:600 clamp(19px,2.1vw,23px)/1.28 var(--f-disp); margin-top:2px}
.duo-card>p{margin-top:12px; color:var(--body); font-size:15px; line-height:1.62; max-width:52ch}
.duo-card .dC,.duo-card .dS{margin-top:20px}

/* — демо C: исчезающее фото — */
.dC{--cycle:10s}
.dC-stage{position:relative; width:min(230px,100%)}
.dC .photo{width:100%; height:150px; margin:0}
.dC-ring{position:absolute; right:8px; top:8px; width:26px; height:26px}
.dC-ring svg{width:26px; height:26px; transform:rotate(-90deg)}
.dC-ring .track{fill:none; stroke:rgba(255,255,255,.25); stroke-width:2.5}
.dC-ring .arc{
  fill:none; stroke:var(--edit); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:57; stroke-dashoffset:0;
}
.anim.live .dC-ring .arc{animation:dC-arc var(--cycle) linear infinite}
@keyframes dC-arc{0%{stroke-dashoffset:0} 42%,100%{stroke-dashoffset:57}}
.dC-gone{
  position:absolute; inset:0; border-radius:var(--r-bubble);
  background:rgba(7,9,8,.9); display:grid; place-content:center; gap:8px;
  justify-items:center; text-align:center;
  color:var(--hint); font:500 12.5px/1.4 var(--f-body);
  opacity:0;
}
.dC-gone .ic{font-size:20px; color:var(--edit)}
.anim.live .dC-gone{animation:dC-gone var(--cycle) infinite}
@keyframes dC-gone{0%,43%{opacity:0} 48%,92%{opacity:1} 97%,100%{opacity:0}}
.anim.live .dC-arch>.ic{animation:dC-pulse var(--cycle) infinite}
@keyframes dC-pulse{0%,44%{transform:scale(1)} 50%{transform:scale(1.35)} 56%,100%{transform:scale(1)}}

/* — демо S: сторис — */
.dS{--cycle:10s}
.st-frame{
  position:relative; display:block; overflow:hidden;
  width:min(230px,100%); height:150px; border-radius:var(--r-bubble);
  background:
    radial-gradient(120px 90px at 70% 20%, #4a3b58, transparent 72%),
    radial-gradient(100px 80px at 20% 85%, #2c4437, transparent 70%),
    linear-gradient(160deg,#33304a,#16241d);
}
.st-head{position:absolute; left:10px; top:10px; display:flex; align-items:center; gap:8px}
.st-ring{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:2px solid var(--fix); padding:2px;
  display:grid; place-items:center;
}
.st-ring b{
  width:100%; height:100%; border-radius:50%;
  background:linear-gradient(135deg,#8c6cd9,#5a4da3);
  display:grid; place-items:center; color:#fff; font:600 12px/1 var(--f-body);
}
.st-who b{display:block; font:600 12.5px/1.3 var(--f-body); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.st-who em{display:block; font:400 10.5px/1.4 var(--f-mono); font-style:normal; color:rgba(255,255,255,.75)}
.st-del{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding:7px 10px; border-radius:999px;
  background:rgba(7,9,8,.85); border:1px solid rgba(255,98,87,.4);
  color:var(--del); font:600 10.5px/1.3 var(--f-mono);
  opacity:0; transform:translateY(8px);
}
.st-del .ic{font-size:12px}
.anim.live .st-del{animation:st-del var(--cycle) var(--ease-out) infinite}
@keyframes st-del{0%,38%{opacity:0; transform:translateY(8px)} 46%,92%{opacity:1; transform:none} 98%,100%{opacity:0}}
.anim.live .st-frame{animation:st-dim var(--cycle) infinite}
@keyframes st-dim{0%,40%{filter:none} 50%,92%{filter:saturate(.55) brightness(.75)} 100%{filter:none}}
.th-story{background:linear-gradient(160deg,#33304a,#16241d) !important}
.anim.live .dS-arch>.ic{animation:dC-pulse var(--cycle) infinite}

/* ── Трио мини-карточек: звонки / реакции / очистка ───────────────────────── */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px);
  margin-top:clamp(48px,6vw,72px);
}
.trio-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 20px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.trio-head{display:flex; align-items:center; gap:9px; font:600 15px/1.3 var(--f-body)}
.trio-head .ic{font-size:16px; color:var(--hint)}
.trio-card>p{color:var(--hint); font-size:13.5px; line-height:1.55; margin-top:auto}

.react-log{display:flex; flex-direction:column; gap:7px}
.rl-bbl{
  align-self:flex-start; position:relative;
  background:var(--surface); border-radius:var(--r-bubble); border-bottom-left-radius:5px;
  padding:8px 12px; font-size:13px; margin-bottom:8px;
}
.rl-react{
  position:absolute; right:-6px; bottom:-9px; font-style:normal; font-size:12px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px;
  padding:2px 7px;
}
.trio-card.anim.live .rl-react{animation:rl-react 7s infinite}
@keyframes rl-react{0%,12%{opacity:0; transform:scale(.5)} 20%,60%{opacity:1; transform:none} 68%,100%{opacity:.25}}
.rl-row{display:flex; justify-content:space-between; gap:10px; font:400 11px/1.5 var(--f-mono); color:var(--hint)}
.rl-row time{color:var(--faint)}
.rl-row.off{color:var(--del)}
.trio-card.anim.live .rl-row.on{animation:rl-on 7s infinite}
.trio-card.anim.live .rl-row.off{animation:rl-off 7s infinite}
@keyframes rl-on{0%,14%{opacity:0} 22%,100%{opacity:1}}
@keyframes rl-off{0%,60%{opacity:0} 70%,100%{opacity:1}}

.clear-log{display:flex; flex-direction:column; gap:8px}
.cl-toast,.cl-keep{
  display:flex; align-items:center; gap:8px;
  border-radius:var(--r-bubble); padding:10px 12px;
  font:500 12px/1.4 var(--f-body);
}
.cl-toast{background:var(--ink); border:1px solid rgba(255,98,87,.32); color:var(--body)}
.cl-toast .ic{font-size:13px; color:var(--del)}
.cl-keep{background:var(--fix-soft); border:1px solid var(--fix-line); color:var(--fix)}
.cl-keep .ic{font-size:13px}
.trio-card.anim.live .cl-keep{animation:cl-keep 6s infinite}
@keyframes cl-keep{0%,28%{opacity:0; transform:translateY(5px)} 40%,100%{opacity:1; transform:none}}

/* ── Таймлайн фиксации ────────────────────────────────────────────────────── */
.fix-band{
  --cycle:11s;
  margin-top:clamp(40px,5vw,56px);
  background:linear-gradient(180deg,var(--panel),#0e120f);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(28px,4vw,48px);
}
.fix-line{
  display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:start;
  gap:clamp(10px,1.6vw,18px);
}
.fx-node{display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; min-width:106px}
.fx-t{font:600 13px/1.2 var(--f-mono); color:var(--text); letter-spacing:.02em}
.fx-dot{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-2); color:var(--hint);
}
.fx-dot .ic{font-size:17px}
.fx-node.arch .fx-dot{background:var(--fix-soft); border-color:var(--fix-line); color:var(--fix)}
.fx-node.del .fx-dot{background:rgba(255,98,87,.1); border-color:rgba(255,98,87,.35); color:var(--del)}
.fx-node b{font:600 13.5px/1.35 var(--f-body)}
.fx-node em{font:400 12px/1.45 var(--f-body); font-style:normal; color:var(--faint); max-width:19ch}
.fx-node.arch b{color:var(--fix)}
.fx-node.del b{color:var(--del)}
.fx-track{position:relative; height:2px; margin-top:45px; background:var(--line-2); border-radius:2px; overflow:hidden}
.fx-track i{
  position:absolute; inset:0; border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
}
.fx-track.t1 i{background:var(--fix)}
.fx-track.t2 i{background:var(--del)}
.anim.live .fx-track.t1 i{animation:fx-t1 var(--cycle) var(--ease-io) infinite}
.anim.live .fx-track.t2 i{animation:fx-t2 var(--cycle) var(--ease-io) infinite}
@keyframes fx-t1{0%,6%{transform:scaleX(0)} 16%,96%{transform:scaleX(1)} 100%{transform:scaleX(1)}}
@keyframes fx-t2{0%,40%{transform:scaleX(0)} 52%,96%{transform:scaleX(1)} 100%{transform:scaleX(0)}}
.fx-node.arch{opacity:.35; transition:opacity .3s}
.fx-node.del{opacity:.35}
.anim.live .fx-node.arch{animation:fx-show var(--cycle) infinite}
.anim.live .fx-node.del{animation:fx-show2 var(--cycle) infinite}
@keyframes fx-show{0%,14%{opacity:.35} 20%,100%{opacity:1}}
@keyframes fx-show2{0%,50%{opacity:.35} 58%,100%{opacity:1}}
.anim:not(.live) .fx-node.arch,.anim:not(.live) .fx-node.del{opacity:1}
.anim:not(.live) .fx-track i{transform:scaleX(1)}

.fix-proof{
  display:flex; align-items:center; gap:20px;
  margin-top:clamp(26px,3.5vw,40px); padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);
}
.fix-proof .qr{
  width:76px; height:76px; border-radius:12px; flex:none;
  background:var(--text); padding:8px;
}
.fix-proof .qr svg{width:100%; height:100%; fill:#0c0f0d; stroke:none}
.fix-proof b{display:block; font:600 16px/1.3 var(--f-body)}
.fix-proof p{margin-top:6px; color:var(--hint); font-size:14px; line-height:1.6; max-width:58ch}

/* ── История профиля ──────────────────────────────────────────────────────── */
.dP{--cycle:10s}
.prof-card{
  display:flex; align-items:center; gap:13px;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-bubble);
  padding:14px 16px;
}
.prof-ava{position:relative; width:46px; height:46px; flex:none}
.prof-ava b{
  position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center; color:#fff; font:600 18px/1 var(--f-body);
}
.prof-ava .pa1{background:linear-gradient(135deg,#8c6cd9,#5a4da3)}
.prof-ava .pa2{background:linear-gradient(135deg,#3d4a42,#252d28); opacity:0}
.anim.live .prof-ava .pa2{animation:dP-in var(--cycle) infinite}
.anim.live .prof-ava .pa1{animation:dP-out var(--cycle) infinite}
.prof-id{min-width:0; display:flex; flex-direction:column; gap:3px}
.prof-name{position:relative; height:20px}
.prof-name b{position:absolute; left:0; top:0; font:600 15.5px/1.3 var(--f-body); white-space:nowrap}
.prof-name .pn2{opacity:0}
.anim.live .prof-name .pn2{animation:dP-in var(--cycle) infinite}
.anim.live .prof-name .pn1{animation:dP-out var(--cycle) infinite}
.prof-user{position:relative; height:16px}
.prof-user span{position:absolute; left:0; top:0; font:400 12px/1.35 var(--f-mono); color:var(--hint); white-space:nowrap}
.prof-user .pu2{opacity:0; color:var(--del)}
.anim.live .prof-user .pu2{animation:dP-in var(--cycle) infinite}
.anim.live .prof-user .pu1{animation:dP-out var(--cycle) infinite}
@keyframes dP-out{0%,30%{opacity:1; filter:blur(0)} 37%,94%{opacity:0; filter:blur(3px)} 100%{opacity:1; filter:blur(0)}}
@keyframes dP-in{0%,32%{opacity:0; filter:blur(3px)} 39%,96%{opacity:1; filter:blur(0)} 100%{opacity:0}}
.anim:not(.live) .prof-name .pn2,.anim:not(.live) .prof-user .pu2,.anim:not(.live) .prof-ava .pa2{opacity:1}
.anim:not(.live) .prof-name .pn1,.anim:not(.live) .prof-user .pu1,.anim:not(.live) .prof-ava .pa1{opacity:0}

.prof-tl{margin-top:12px; display:flex; flex-direction:column}
.ptl-row{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 4px; font:400 13px/1.5 var(--f-body); color:var(--body);
}
.ptl-row+.ptl-row{border-top:1px solid var(--line)}
.ptl-row time{font:500 11px/1.4 var(--f-mono); color:var(--faint); flex:none; min-width:44px}
.ptl-row s{color:var(--faint); text-decoration-color:var(--del)}
.ptl-row.r1,.ptl-row.r2{opacity:0; transform:translateY(4px)}
.anim.live .ptl-row.r1{animation:ptl var(--cycle) var(--ease-out) infinite}
.anim.live .ptl-row.r2{animation:ptl2 var(--cycle) var(--ease-out) infinite}
@keyframes ptl{0%,40%{opacity:0; transform:translateY(4px)} 48%,97%{opacity:1; transform:none} 100%{opacity:0}}
@keyframes ptl2{0%,46%{opacity:0; transform:translateY(4px)} 54%,97%{opacity:1; transform:none} 100%{opacity:0}}
.anim:not(.live) .ptl-row.r1,.anim:not(.live) .ptl-row.r2{opacity:1; transform:none}

/* ── Теневой архив ────────────────────────────────────────────────────────── */
.shadow-band{
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  background:
    radial-gradient(560px 300px at 88% 0%, rgba(63,208,127,.06), transparent 65%),
    linear-gradient(180deg,var(--panel),#0d110e);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);
  padding:clamp(30px,4.5vw,52px);
  align-items:center;
}
.shadow-band h3,.shadow-band .h3like{font:600 clamp(20px,2.4vw,27px)/1.25 var(--f-disp)}
.shadow-band .lead2{margin-top:14px; color:var(--body); font-size:15.5px; line-height:1.66; max-width:54ch}
.shadow-band .f-note{margin-top:12px; color:var(--faint); font-size:13.5px}
.shadow-vis{display:flex; flex-direction:column; gap:9px; min-width:0}
.sh-row{
  display:flex; align-items:center; gap:11px;
  background:rgba(9,11,10,.7); border:1px solid var(--line); border-radius:var(--r-bubble);
  padding:11px 14px;
}
.sh-row i{width:26px; height:26px; border-radius:50%; flex:none; background:var(--surface-2)}
.sh-row div{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.sh-row b{height:7px; width:46%; border-radius:4px; background:var(--surface-2)}
.sh-row s{height:6px; width:70%; border-radius:4px; background:rgba(255,255,255,.05)}
.sh-row .ic{font-size:14px; color:var(--faint)}
.sh-row.dim{opacity:.55; position:relative; overflow:hidden}
.sh-row.dim::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.045) 50%,transparent 70%);
  transform:translateX(-100%);
}
.anim.live .sh-row.dim::after{animation:shim 3.6s var(--ease-io) infinite}
@keyframes shim{60%,100%{transform:translateX(100%)}}
.sh-row.open{border-color:var(--fix-line)}
.sh-row.open .ic{color:var(--fix)}
.sh-row.open em{font:600 10.5px/1.3 var(--f-mono); color:var(--fix); font-style:normal; flex:none}

/* — демо D: поиск — */
.dD{--cycle:10.5s}
.dD-input{
  display:flex; align-items:center; gap:9px;
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-bubble);
  padding:11px 13px; font:400 14px/1.3 var(--f-body); color:var(--text);
}
.dD-input .ic{font-size:15px; color:var(--hint)}
.dD-q{position:relative; white-space:nowrap; overflow:hidden}
.dD-q span{display:inline-block}
.anim.live .dD-q span{animation:dD-type var(--cycle) steps(6,end) infinite}
@keyframes dD-type{
  0%,6%{clip-path:inset(0 100% 0 0)}
  24%,96%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 100% 0 0)}
}
.dD-caret{width:1.5px; height:16px; background:var(--fix)}
.anim.live .dD-caret{animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dD-res{display:flex; flex-direction:column; gap:9px; margin-top:12px}
.dD-hit{
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-bubble); padding:11px 13px;
}
.anim.live .dD-hit.h1{animation:dD-h1 var(--cycle) infinite}
.anim.live .dD-hit.h2{animation:dD-h2 var(--cycle) infinite}
@keyframes dD-h1{0%,26%{opacity:0; transform:translateY(9px)} 33%,94%{opacity:1; transform:none} 99%,100%{opacity:0}}
@keyframes dD-h2{0%,32%{opacity:0; transform:translateY(9px)} 39%,94%{opacity:1; transform:none} 99%,100%{opacity:0}}
.dD-hit .src{display:flex; align-items:center; gap:7px; font:500 11px/1.4 var(--f-mono); color:var(--hint); margin-bottom:6px}
.dD-hit .src .vh-ava{width:17px; height:17px; font-size:9px}
.dD-hit .src .tagd{margin-left:auto; font:600 9.5px/1.3 var(--f-mono); color:var(--del); border:1px solid rgba(255,98,87,.35); border-radius:999px; padding:2px 7px}
.dD-hit p{font:400 13.5px/1.5 var(--f-body); color:var(--body)}
.dD-hit p.strike{text-decoration:line-through; text-decoration-color:var(--del); opacity:.65}
.dD-hit mark{background:var(--fix-soft); color:var(--fix); border-radius:3px; padding:0 2px}

/* ── Два способа подключения ──────────────────────────────────────────────── */
.ways{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,24px);
  margin-top:clamp(38px,5vw,54px);
}
.way{
  background:linear-gradient(180deg,var(--panel),#0e120f);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(22px,3vw,30px);
}
.way.alt{border-color:var(--fix-line)}
.way-head{display:flex; align-items:center; gap:13px}
.way-ic{
  width:44px; height:44px; border-radius:var(--r-btn); flex:none;
  background:var(--surface); border:1px solid var(--line-2); color:var(--hint);
  display:grid; place-items:center;
}
.way.alt .way-ic{background:var(--fix-soft); border-color:var(--fix-line); color:var(--fix)}
.way-ic .ic{font-size:20px}
.way-head b{display:block; font:600 17px/1.3 var(--f-disp)}
.way-head span{display:block; font:400 12px/1.5 var(--f-mono); color:var(--faint)}
.way>p{margin-top:14px; color:var(--body); font-size:14.5px; line-height:1.62}
.way ul{list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px}
.way li{display:flex; gap:9px; font:400 13.5px/1.5 var(--f-body); color:var(--body)}
.way li .ic{font-size:14px; color:var(--fix); margin-top:3px}

/* матрица покрытия */
.matrix{
  margin-top:clamp(16px,2.2vw,24px);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
}
.mx-row{
  display:grid; grid-template-columns:1fr 128px 128px; align-items:center;
  padding:11px clamp(14px,2vw,22px);
  font:400 14px/1.5 var(--f-body); color:var(--body);
}
.mx-row:nth-child(even){background:rgba(226,236,228,.025)}
.mx-head{
  background:var(--panel) !important;
  font:500 11.5px/1.4 var(--f-mono); color:var(--hint);
  border-bottom:1px solid var(--line);
}
.mx-row .yes,.mx-row .no{justify-self:center}
.mx-row .yes .ic{font-size:16px; color:var(--fix)}
.mx-row .no .ic{font-size:15px; color:var(--faint)}
.mx-head span:nth-child(2),.mx-head span:nth-child(3){justify-self:center; text-align:center}

.backup-note{
  margin-top:clamp(16px,2.2vw,24px);
  display:flex; gap:14px; align-items:flex-start;
  background:var(--fix-soft); border:1px solid var(--fix-line); border-radius:var(--r-card);
  padding:18px clamp(16px,2.4vw,24px);
}
.backup-note .ic{font-size:19px; color:var(--fix); margin-top:3px}
.backup-note p{color:var(--body); font-size:14.5px; line-height:1.62}
.backup-note b{color:var(--text)}

/* ── Доверие ──────────────────────────────────────────────────────────────── */
.sec-safe{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,84px);
  align-items:start;
}
.sec-safe .sticky{position:sticky; top:96px}
.sec-safe h2{font:600 clamp(25px,3.2vw,36px)/1.2 var(--f-disp); letter-spacing:-.005em}
.sec-safe .lead{margin-top:16px; color:var(--body); font-size:16.5px; line-height:1.66; max-width:46ch}
.safe-list{display:flex; flex-direction:column}
.safe-row{display:flex; gap:18px; padding:26px 2px; border-bottom:1px solid var(--line)}
.safe-row:first-child{padding-top:6px}
.safe-row:last-child{border-bottom:0}
.safe-ic{
  width:44px; height:44px; border-radius:var(--r-btn); flex:none;
  background:var(--fix-soft); color:var(--fix);
  display:grid; place-items:center;
}
.safe-ic .ic{font-size:20px}
.safe-row b{display:block; font:600 16.5px/1.35 var(--f-body)}
.safe-row p{margin-top:6px; color:var(--hint); font-size:14.5px; line-height:1.62; max-width:56ch}

/* ── Тарифы ───────────────────────────────────────────────────────────────── */
.seg-wrap{display:flex; justify-content:center; margin-top:34px}
.seg{
  position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px;
}
.seg-thumb{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3);
  border-radius:999px; background:var(--fix);
  transition:transform .3s var(--ease-out);
  transform:translateX(calc(var(--i,0) * 100%));
}
.seg button{
  position:relative; z-index:1; padding:9px 22px; border-radius:999px;
  font:500 14px/1.3 var(--f-body); color:var(--hint);
  transition:color .2s ease;
}
.seg button[aria-pressed="true"]{color:var(--btn-txt); font-weight:600}
.seg button:active{transform:scale(.97)}
.seg-note{text-align:center; margin-top:12px; font:400 13px/1.5 var(--f-body); color:var(--faint); min-height:20px}

.plans{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-top:30px; align-items:stretch;
}
.plan{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel),#0d110e);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:24px 22px;
  transition:transform .25s var(--ease-out), border-color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-4px); border-color:var(--line-2)}
}
.plan.hot{
  border-color:var(--fix-line);
  box-shadow:0 0 0 1px rgba(63,208,127,.18), 0 30px 70px -34px rgba(63,208,127,.25);
}
.plan-flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:4px 12px; border-radius:999px; white-space:nowrap;
  background:var(--fix); color:var(--btn-txt); font:600 11.5px/1.4 var(--f-body);
}
.plan-flag.freeflag{background:var(--surface-2); color:var(--fix); border:1px solid var(--fix-line)}
.plan-name{display:flex; align-items:center; gap:9px; font:600 16.5px/1.3 var(--f-disp)}
.plan-name .ic{font-size:17px; color:var(--hint)}
.plan.hot .plan-name .ic{color:var(--fix)}
.plan-tag{margin-top:5px; font:400 12.5px/1.5 var(--f-body); color:var(--faint)}
.plan-price{margin-top:18px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.plan-price .num{
  font:600 clamp(23px,1.9vw,27px)/1 var(--f-disp); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  transition:filter .16s ease, opacity .16s ease;
}
.plan-price .per{font:400 12.5px/1.3 var(--f-body); color:var(--hint)}
.plan.morphing .num,.plan.morphing .plan-sub{filter:blur(4px); opacity:.25}
.plan-sub{
  margin-top:7px; font:400 12.5px/1.5 var(--f-body); color:var(--faint);
  min-height:38px; transition:filter .16s ease, opacity .16s ease;
}
.plan-sub .save{color:var(--fix); font-weight:600; margin-left:6px}
.plan-feats{list-style:none; margin:18px 0 22px; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:9px}
.plan-feats li{display:flex; gap:9px; font:400 13.5px/1.45 var(--f-body); color:var(--body)}
.plan-feats .ic{font-size:15px; color:var(--fix); margin-top:2px}
.plan-feats li.mut{color:var(--faint)}
.plan-feats li.mut .ic{color:var(--faint)}
.plan .btn{margin-top:auto; width:100%}
.plans-foot{
  margin-top:26px; text-align:center;
  color:var(--faint); font-size:13.5px; line-height:1.7;
}
.plans-foot .ic{font-size:13px; vertical-align:-2px; color:var(--edit)}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq{max-width:760px; margin:clamp(36px,5vw,52px) auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:21px 2px; text-align:left;
  font:600 16.5px/1.4 var(--f-body); color:var(--text);
}
.faq-q .ic{font-size:18px; color:var(--hint); transition:transform .28s var(--ease-out)}
.faq-item.open .faq-q .ic{transform:rotate(180deg)}
.faq-a{display:grid; grid-template-rows:1fr; transition:grid-template-rows .32s var(--ease-out)}
html.js .faq-item:not(.open) .faq-a{grid-template-rows:0fr}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden; min-height:0}
.faq-a p{
  padding:0 2px 22px; color:var(--body); font-size:15px; line-height:1.68; max-width:66ch;
}

/* ── Финальный CTA ────────────────────────────────────────────────────────── */
.final{padding:clamp(84px,11vw,140px) 0 clamp(90px,11vw,130px)}
.final-card{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:
    radial-gradient(720px 340px at 50% -10%, rgba(63,208,127,.1), transparent 70%),
    linear-gradient(180deg,var(--panel),#0d110e);
  padding:clamp(52px,7vw,88px) clamp(22px,4vw,60px);
}
.final-proto{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--fix-line); background:rgba(9,11,10,.6);
  font:500 11.5px/1.4 var(--f-mono); color:var(--fix);
}
.final h2{font:700 clamp(26px,3.8vw,44px)/1.15 var(--f-disp); letter-spacing:-.01em}
.final .lead{margin:18px auto 0; max-width:52ch; color:var(--body); font-size:16.5px; line-height:1.6}
.final .btn{margin-top:32px}
.final-mini{margin-top:18px; color:var(--faint); font-size:13.5px}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); background:var(--ink-deep)}
.foot-in{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,64px);
  padding:clamp(44px,5vw,64px) 0 40px;
}
.foot-brand p{margin-top:14px; color:var(--faint); font-size:14px; line-height:1.6; max-width:34ch}
.foot-col b{display:block; font:600 13.5px/1.4 var(--f-body); color:var(--hint); margin-bottom:14px}
.foot-col a{display:block; color:var(--body); font-size:14.5px; padding:6px 0}
.foot-col a:hover{color:var(--text); text-decoration:none}
.foot-bottom{
  border-top:1px solid var(--line);
  padding:20px 0 26px; display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  color:var(--faint); font-size:12.5px; line-height:1.6;
}
.foot-bottom .fine{max-width:72ch}

/* ── Reveal on scroll (только при включённом JS; контент виден по умолчанию) ─ */
html.js .rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .7s var(--ease-out); transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1; transform:none}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html.js .rv{opacity:1; transform:none}
  .ticker-track{animation:none; flex-wrap:wrap; width:auto; gap:14px 0}
  /* статичные конечные состояния демо */
  .anim:not(.live) .dA-chip.c1{background:transparent; border-color:var(--line); color:var(--hint)}
  .dA-chip.c2{background:var(--surface-2); border-color:var(--fix-line); color:var(--text)}
  .dA-row.hide{grid-template-rows:0fr; opacity:0}
  .dA-count{opacity:1}
  .dB-strike::after{transform:scaleX(1)}
  .dB-old{opacity:.55}
  .dB-new{grid-template-rows:1fr}
  .dB-vers{grid-template-rows:1fr}
  .dB-meta{opacity:1}
  .dC-gone{opacity:1}
  .dC-ring .arc{stroke-dashoffset:57}
  .st-del{opacity:1; transform:none}
  .st-frame{filter:saturate(.55) brightness(.75)}
  .fx-node.arch,.fx-node.del{opacity:1}
  .fx-track i{transform:scaleX(1)}
  .prof-name .pn2,.prof-user .pu2,.prof-ava .pa2{opacity:1}
  .prof-name .pn1,.prof-user .pu1,.prof-ava .pa1{opacity:0}
  .ptl-row.r1,.ptl-row.r2{opacity:1; transform:none}
  .rl-row.on,.rl-row.off,.rl-react{opacity:1}
  .cl-keep{opacity:1; transform:none}
  .dD-q span{clip-path:inset(0 0 0 0)}
  .dD-hit.h1,.dD-hit.h2{opacity:1; transform:none}
  .sh-row.dim::after{display:none}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr; text-align:center; padding-top:40px; min-height:0}
  .hero h1 .h1-fix{white-space:normal}
  .hero-sub{margin-inline:auto}
  .hero-cta{justify-content:center}
  .hero-phone-wrap{margin-top:8px}
  .plans{grid-template-columns:repeat(2,1fr); gap:18px; max-width:760px; margin-inline:auto}
  .trio{grid-template-columns:1fr; max-width:520px; margin-inline:auto; margin-top:clamp(48px,6vw,72px)}
  .trio-card>p{margin-top:0}
}
@media (max-width:880px){
  .feature{grid-template-columns:1fr; gap:26px}
  .feature.flip .f-copy{order:0}
  .vig{max-width:520px; justify-self:stretch}
  .duo{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr}
  .sec-safe{grid-template-columns:1fr}
  .sec-safe .sticky{position:static}
  .shadow-band{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr; gap:32px}
  /* таймлайн фиксации: вертикально */
  .fix-line{grid-template-columns:1fr; justify-items:center; gap:0}
  .fx-node{min-width:0}
  .fx-track{width:2px; height:44px; margin:10px 0}
  .fx-track i{transform:scaleY(0); transform-origin:top center}
  .anim:not(.live) .fx-track i{transform:scaleY(1)}
  @media (prefers-reduced-motion:reduce){ .fx-track i{transform:scaleY(1)} }
  .anim.live .fx-track.t1 i{animation-name:fx-t1v}
  .anim.live .fx-track.t2 i{animation-name:fx-t2v}
  .mx-row{grid-template-columns:1fr 84px 84px; font-size:13px}
  .mx-head{font-size:10px}
}
@keyframes fx-t1v{0%,6%{transform:scaleY(0)} 16%,96%{transform:scaleY(1)} 100%{transform:scaleY(1)}}
@keyframes fx-t2v{0%,40%{transform:scaleY(0)} 52%,96%{transform:scaleY(1)} 100%{transform:scaleY(0)}}
@media (max-width:560px){
  .container{width:calc(100% - 32px)}
  .nav-in{gap:12px}
  .nav .btn.sm{padding:9px 12px; font-size:13px; gap:7px}
  .brand{font-size:14.5px}
  .plans{grid-template-columns:1fr; max-width:420px}
  .hero-cta .btn{width:100%}
  .seg button{padding:9px 14px; font-size:13px}
  .screen{height:min(600px,72vh)}
  .plan-sub{min-height:0}
  .fix-proof{flex-direction:column; align-items:flex-start}
  .mx-row{grid-template-columns:1fr 74px 74px; padding-inline:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   Фишки: сетка живых карточек (2026-07-16). Примеры анимируются прямо на
   странице: ioAnim вешает .live по вьюпорту (как у виньеток), каскад .sg
   раздаёт JS transition-delay. Только transform/opacity; reduced-motion
   получает конечные состояния.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Заголовок + сетка ───────────────────────────────────────────────────── */
.morehead{text-align:center; margin-top:clamp(64px,8vw,96px)}
.morehead .h3like{font:600 clamp(20px,2.6vw,27px)/1.25 var(--f-disp); letter-spacing:-.005em}
.morehead p{margin-top:10px; color:var(--hint); font-size:14.5px}
.fgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,20px);
  margin-top:clamp(20px,3vw,30px);
}
@media (max-width:1100px){ .fgrid{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .fgrid{grid-template-columns:1fr; max-width:520px; margin-inline:auto} }
.fcard{
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg,var(--panel),#0e120f);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:17px 16px 18px;
}
.fc-head{display:flex; align-items:center; gap:9px}
.fc-head .ic{font-size:17px; color:var(--fix)}
.fc-head h3{font:600 15px/1.3 var(--f-body)}
.fc-p{color:var(--hint); font-size:13px; line-height:1.55}
.fcard .fd-note{margin-top:auto; color:var(--faint); font:400 11px/1.5 var(--f-mono)}

/* двойной вертикальный зазор: секция + первая фича (поиск, профиль) */
.sect>.container>.feature:first-child{margin-top:clamp(6px,1.5vw,14px)}

/* ── Сцена примера + общие атомы ─────────────────────────────────────────── */
.fd-demo{
  position:relative; overflow:hidden; min-height:148px;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-bubble);
  padding:14px; display:flex; flex-direction:column; gap:9px; justify-content:center;
}
.fd-demo .mini-chat{gap:6px}
.fd-demo .bbl{font-size:12.5px; max-width:94%}
.fd-log{
  display:flex; align-items:center; gap:9px;
  background:var(--panel); border:1px solid var(--fix-line); border-radius:12px;
  padding:9px 11px; font:500 12px/1.45 var(--f-body); color:var(--body);
}
.fd-log .ic{color:var(--fix); font-size:14px; flex:none}
.fd-log b{color:var(--text); font-family:var(--f-mono); font-size:11.5px}
.fd-log.warn{border-color:rgba(242,176,78,.35)}
.fd-log.warn .ic{color:var(--edit)}
.fd-srow{
  display:flex; align-items:center; gap:9px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:9px 11px; font:400 12px/1.45 var(--f-body); color:var(--body);
}
.fd-srow .ic{font-size:14px; flex:none}
.fd-srow time{margin-left:auto; color:var(--faint); font-size:10px; flex:none}
.fd-srow b{color:var(--text); font-weight:600}
.fd-srow.red .ic{color:var(--del)}
.fd-srow.amber .ic{color:var(--edit)}
.fd-srow.green .ic{color:var(--fix)}
@keyframes fdIn{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@keyframes fdPop{0%{opacity:0; transform:scale(.55)} 60%{opacity:1; transform:scale(1.12)} 100%{opacity:1; transform:scale(1)}}

/* каскад появления содержимого карточки */
.fcard .sg{opacity:0; transform:translateY(10px)}
.fcard.live .sg{
  opacity:1; transform:none;
  transition:opacity .45s ease, transform .5s var(--ease-out);
  transition-delay:var(--sd,0s);
}

/* — статус прочтения — */
.dR-ticks{position:relative; display:inline-flex; width:15px; height:12px; justify-content:flex-end}
.dR-ticks .ic{position:absolute; right:0; top:0}
.live .dR .tk1{animation:drTk1 2.4s both}
.live .dR .tk2{color:var(--fix); animation:drTk2 2.4s both}
@keyframes drTk1{0%,55%{opacity:1} 66%,100%{opacity:0}}
@keyframes drTk2{0%,55%{opacity:0; transform:scale(.6)} 70%{opacity:1; transform:scale(1.15)} 80%,100%{opacity:1; transform:scale(1)}}
.dR-log{opacity:0}
.live .dR-log{animation:fdIn .5s var(--ease-out) 1.9s both}

/* — печатал, но не отправил (цикл; живёт в трио-карточке) — */
.dT{display:flex; flex-direction:column; gap:8px}
.dT-typing{
  align-self:flex-start; display:flex; gap:4px;
  padding:11px 14px; border-radius:var(--r-bubble); border-bottom-left-radius:5px;
  background:var(--surface); opacity:0;
}
.dT-typing i{width:6px; height:6px; border-radius:50%; background:var(--hint)}
.live .dT-typing i{animation:tdot 1.1s ease-in-out infinite}
.dT-typing i:nth-child(2){animation-delay:.15s}
.dT-typing i:nth-child(3){animation-delay:.3s}
.live .dT-typing{animation:dtTyp 6.5s infinite}
@keyframes dtTyp{0%,7%{opacity:0; transform:translateY(6px)} 12%,52%{opacity:1; transform:none} 58%,100%{opacity:0; transform:translateY(2px)}}
.dT-log{opacity:0}
.live .dT-log{animation:dtLog 6.5s infinite}
@keyframes dtLog{0%,58%{opacity:0; transform:translateY(9px)} 66%,93%{opacity:1; transform:none} 98%,100%{opacity:0}}

/* — онлайн-активность — */
.dO-head{display:flex; align-items:center; gap:9px; font:500 11.5px/1.4 var(--f-mono); color:var(--hint); padding-bottom:2px}
.dO-head b{color:var(--text); font-family:var(--f-body); font-size:12.5px}
.dO .ptl-row{padding:8px 2px; font-size:12.5px}
.dO .ptl-row.hl span,.dO .ptl-row.hl time{color:var(--fix)}

/* — сервисные события — */
.dV{gap:8px}

/* — live-гео — */
.dG-map{
  position:relative; height:112px; border-radius:12px; overflow:hidden;
  background:
    linear-gradient(rgba(226,236,228,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,236,228,.04) 1px, transparent 1px),
    var(--ink-deep);
  background-size:26px 26px, 26px 26px, auto;
  border:1px solid var(--line);
}
.dG-map svg{position:absolute; inset:0; width:100%; height:100%}
.dG-path{fill:none; stroke:var(--fix); stroke-width:2; stroke-linecap:round; opacity:.8; stroke-dasharray:340; stroke-dashoffset:340}
.live .dG-path{animation:dgDraw 1.7s var(--ease-io) .35s forwards}
@keyframes dgDraw{to{stroke-dashoffset:0}}
.dG-p{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:var(--fix); border:2px solid #0c1a12; transform:translate(-50%,-50%) scale(0);
}
.dG-p.p1{left:8.5%; top:80%}
.dG-p.p2{left:53%; top:33%}
.dG-p.p3{left:91.5%; top:20%}
.live .dG-p{animation:dgPop .4s var(--ease-out) forwards}
.live .dG-p.p1{animation-delay:.35s}
.live .dG-p.p2{animation-delay:1.1s}
.live .dG-p.p3{animation-delay:1.95s}
@keyframes dgPop{60%{transform:translate(-50%,-50%) scale(1.25)} 100%{transform:translate(-50%,-50%) scale(1)}}
.live .dG-p.p3::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  animation:dgPulse 2.2s ease-out 2.4s infinite;
}
@keyframes dgPulse{0%{box-shadow:0 0 0 0 rgba(63,208,127,.45)} 70%,100%{box-shadow:0 0 0 11px rgba(63,208,127,0)}}
.dG-t{position:absolute; font:500 10px/1 var(--f-mono); color:var(--faint); opacity:0}
.dG-t.t1{left:10%; top:60%}
.dG-t.t2{left:55%; top:14%}
.dG-t.t3{right:2%; top:38%}
.live .dG-t{animation:fdIn .4s ease forwards}
.live .dG-t.t1{animation-delay:.5s}
.live .dG-t.t2{animation-delay:1.25s}
.live .dG-t.t3{animation-delay:2.1s}

/* — опросы — */
.dQ-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 13px; display:flex; flex-direction:column; gap:8px;
}
.dQ-card>b{font:600 13px/1.35 var(--f-body)}
.dQ-card>em{font:400 10px/1.4 var(--f-mono); font-style:normal; color:var(--faint); margin-top:-4px}
.dQ-opt{
  position:relative; display:flex; align-items:center; gap:8px; overflow:hidden;
  padding:7px 10px; border-radius:9px; background:var(--ink);
  font:400 12px/1.4 var(--f-body); color:var(--body);
}
.dQ-opt span,.dQ-opt>b{position:relative; z-index:1}
.dQ-opt>b{margin-left:auto; font:600 11px/1 var(--f-mono); color:var(--text)}
.dQ-opt .bar{
  position:absolute; left:0; top:0; bottom:0; border-radius:9px;
  transform:scaleX(0); transform-origin:left center;
}
.dQ-opt .b1{width:58%; background:var(--fix-soft)}
.dQ-opt .b2{width:42%; background:rgba(226,236,228,.05)}
.live .dQ-opt .bar{animation:dqBar .9s var(--ease-out) forwards}
.live .dQ-opt .b1{animation-delay:.55s}
.live .dQ-opt .b2{animation-delay:.7s}
@keyframes dqBar{to{transform:scaleX(1)}}

/* — ключевые слова — */
.dK-mark{border-radius:3px; padding:0 2px; background:transparent; color:inherit}
.live .dK-mark{animation:dkMark 1.4s both}
@keyframes dkMark{0%,30%{background:transparent; color:inherit} 55%,100%{background:var(--fix-soft); color:var(--fix)}}
.dK-notif{
  display:flex; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--fix-line); border-radius:12px;
  padding:10px 11px; opacity:0;
}
.live .dK-notif{animation:dkNotif .55s var(--ease-out) 1.25s both}
@keyframes dkNotif{from{opacity:0; transform:translateY(-12px) scale(.97)} to{opacity:1; transform:none}}
.dK-bell{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:var(--fix-soft); color:var(--fix); display:grid; place-items:center;
}
.live .dK-bell .ic{animation:dkRing .7s ease 1.85s}
@keyframes dkRing{15%{transform:rotate(-13deg)} 35%{transform:rotate(9deg)} 55%{transform:rotate(-5deg)} 75%,100%{transform:none}}
.dK-notif b{display:block; font:600 12px/1.35 var(--f-body); color:var(--text)}
.dK-notif em{display:block; font:400 10px/1.5 var(--f-mono); font-style:normal; color:var(--faint)}

/* — автозахват — */
.dAT-toast{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-2);
  font:500 11.5px/1.3 var(--f-body); color:var(--text);
}
.dAT-row{opacity:0}
.live .dAT-row{animation:fdIn .5s var(--ease-out) .95s both}

/* — авточтение — */
.dAR-chat{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 11px;
}
.dAR-chat .vh-ava{width:30px; height:30px; font-size:12px}
.dAR-who b{display:block; font:600 12.5px/1.3 var(--f-body)}
.dAR-who em{display:block; font:400 10px/1.5 var(--f-mono); font-style:normal; color:var(--faint)}
.dAR-state{margin-left:auto; position:relative; width:24px; height:22px; flex:none}
.dAR-badge{
  position:absolute; inset:0; margin:auto; width:22px; height:22px;
  border-radius:999px; background:var(--fix); color:var(--btn-txt);
  font:700 11px/22px var(--f-body); text-align:center;
}
.live .dAR-badge{animation:darBadge 2.3s both}
@keyframes darBadge{0%,50%{opacity:1; transform:scale(1)} 64%,100%{opacity:0; transform:scale(.5)}}
.dAR-done{position:absolute; inset:0; display:grid; place-items:center; color:var(--fix); opacity:0}
.dAR-done .ic{font-size:15px}
.live .dAR-done{animation:darDone 2.3s both}
@keyframes darDone{0%,56%{opacity:0; transform:scale(.6)} 72%{opacity:1; transform:scale(1.18)} 82%,100%{opacity:1; transform:scale(1)}}
.dAR-log{opacity:0}
.live .dAR-log{animation:fdIn .5s var(--ease-out) 2s both}

/* — папки — */
.dF{gap:9px}
.dF-rows{display:flex; flex-direction:column; gap:8px}
.dF-row{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 11px;
}
.dF-row .vh-ava{width:28px; height:28px; font-size:11px}
.dF-row b{display:block; font:600 12px/1.3 var(--f-body)}
.dF-row em{display:block; font:400 10.5px/1.45 var(--f-body); font-style:normal; color:var(--hint)}
.dF-row.drop::after{
  content:"вне папки"; margin-left:auto; flex:none;
  font:500 9px/1 var(--f-mono); color:var(--faint);
  border:1px solid var(--line); border-radius:999px; padding:4px 7px;
}
.live .dF-row.drop{animation:dfDim 1.6s both .8s}
@keyframes dfDim{0%,25%{opacity:1} 60%,100%{opacity:.28}}
.dF-count{align-self:center; font:500 10px/1.4 var(--f-mono); color:var(--faint); opacity:0}
.live .dF-count{animation:fdIn .45s ease 1.7s both}

/* — несколько аккаунтов — */
.dM-pills{display:flex; gap:6px; flex-wrap:wrap}
.dM-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line);
  font:500 11px/1.3 var(--f-body); color:var(--hint);
}
.dM-pill.on{background:var(--surface-2); border-color:var(--line-2); color:var(--text)}
.dM-pill i{width:7px; height:7px; border-radius:50%}
.dM-pill .d1,.dM-pill i.d1{background:#d97a6c}
.dM-pill .d2,.dM-pill i.d2{background:#6c96d9}
.dM-tag{
  display:table; margin-bottom:5px; padding:2.5px 7px; border-radius:999px;
  font:600 9px/1.2 var(--f-mono); font-style:normal;
}
.dM-tag.t1{color:#e29a8e; border:1px solid rgba(217,122,108,.4)}
.dM-tag.t2{color:#8fb3ea; border:1px solid rgba(108,150,217,.4)}

/* — загрузка истории — */
.dBF{gap:9px}
.dBF-bar{height:8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); overflow:hidden}
.dBF-bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, rgba(63,208,127,.4), var(--fix));
  transform:scaleX(0); transform-origin:left center;
}
.live .dBF-bar i{animation:dbfFill 2.1s var(--ease-io) .4s forwards}
@keyframes dbfFill{to{transform:scaleX(.86)}}
.dBF-meta{display:flex; justify-content:space-between; gap:10px; font:400 10px/1.5 var(--f-mono); color:var(--faint)}
.dBF-meta b{color:var(--text); font-weight:600; font-variant-numeric:tabular-nums}
.dBF-log{opacity:0}
.live .dBF-log{animation:fdIn .5s var(--ease-out) 1.9s both}

/* — вход в браузере — */
.dW{gap:9px}
.dW-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:10px;
  background:var(--fix); color:var(--btn-txt); font:600 12px/1.2 var(--f-body);
}
.live .dW-btn{animation:dwPress 5s .1s}
@keyframes dwPress{24%,30%{transform:none} 27%{transform:scale(.95)}}
.dW-win{
  background:var(--ink-deep); border:1px solid var(--line-2); border-radius:10px;
  overflow:hidden; opacity:0;
}
.live .dW-win{animation:fdIn .6s var(--ease-out) 1.55s both}
.dW-bar{display:flex; align-items:center; gap:5px; padding:7px 10px; border-bottom:1px solid var(--line)}
.dW-bar i{width:8px; height:8px; border-radius:50%; background:var(--surface-2)}
.dW-bar em{margin-left:8px; font:400 9px/1.3 var(--f-mono); font-style:normal; color:var(--faint)}
.dW-line{display:block; height:7px; border-radius:4px; background:var(--surface); margin:9px 12px 0}
.dW-line.short{width:55%; margin-bottom:11px}

/* — пруф — */
.dPr-row{display:flex; align-items:center; gap:13px}
.dPr-qr{width:60px; height:60px; border-radius:10px; background:var(--text); padding:6px; flex:none}
.dPr-qr svg{width:100%; height:100%; fill:#0c0f0d; stroke:none}
.dPr-info b{display:block; font:600 12.5px/1.4 var(--f-body)}
.dPr-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  padding:5px 9px; border-radius:8px;
  background:var(--panel); border:1px solid var(--line);
  font:400 10.5px/1.3 var(--f-mono); color:var(--hint);
}
.dPr-check{color:var(--fix); opacity:0}
.live .dPr-check{animation:fdPop .45s var(--ease-out) 1.35s both}
.dPr-log{opacity:0}
.live .dPr-log{animation:fdIn .5s var(--ease-out) .9s both}

/* — демо-режим — */
.dDm-frame{
  background:var(--ink-deep); border:1px solid var(--line-2); border-radius:14px;
  padding:11px; display:flex; flex-direction:column; gap:9px;
}
.dDm-top{display:flex; align-items:center; gap:7px; font:500 10px/1.3 var(--f-mono); color:var(--fix)}
.dDm-bbl{align-self:flex-start; opacity:1; transform:none; margin-top:0; font-size:12.5px}
.dDm-txt{position:relative; display:inline-block}
.dDm-txt::after{
  content:""; position:absolute; left:0; right:0; top:54%; height:1.5px;
  border-radius:2px; background:var(--del);
  transform:scaleX(0); transform-origin:left center;
}
.live .dDm-txt::after{animation:ddmStrike .5s var(--ease-io) 1.35s forwards}
@keyframes ddmStrike{to{transform:scaleX(1)}}
.live .dDm-txt{animation:ddmDim .4s ease 1.5s forwards}
@keyframes ddmDim{to{opacity:.55}}
.dDm .meta-del{display:inline-flex; opacity:0}
.live .dDm .meta-del{animation:fdIn .4s ease 1.75s both}
.dDm-bar{
  align-self:center; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); font:500 9.5px/1.4 var(--f-mono); color:var(--faint);
  opacity:0;
}
.live .dDm-bar{animation:fdIn .5s ease 2.15s both}

/* — рефералка — */
.dRef{gap:9px}
.dRef-link{
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px dashed var(--fix-line); border-radius:12px;
  padding:10px 11px; font:400 10.5px/1.4 var(--f-mono); color:var(--text);
}
.dRef-link>.ic{color:var(--fix); font-size:14px; flex:none}
.dRef-copied{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px; flex:none;
  font:600 9.5px/1.2 var(--f-mono); font-style:normal; color:var(--fix); opacity:0;
}
.live .dRef-copied{animation:fdPop .45s var(--ease-out) 1.15s both}
.dRef-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.dRef-stats span{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 6px; text-align:center;
}
.dRef-stats b{display:block; font:600 16px/1.1 var(--f-disp); color:var(--fix)}
.dRef-stats em{display:block; margin-top:4px; font:400 9px/1.3 var(--f-mono); font-style:normal; color:var(--faint)}

/* ── Reduced motion: конечные состояния примеров ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fcard .sg{opacity:1; transform:none}
  .dT-typing{display:none}
  .dT-log,.dR-log,.dAT-row,.dAR-log,.dBF-log,.dPr-log,.dK-notif,.dW-win,
  .dF-count,.dPr-check,.dRef-copied,.dDm-bar,.dG-t,.dDm .meta-del{opacity:1; animation:none}
  .dR .tk1{opacity:0} .dR .tk2{opacity:1; color:var(--fix)}
  .dAR-badge{opacity:0} .dAR-done{opacity:1}
  .dG-path{stroke-dashoffset:0}
  .dG-p{transform:translate(-50%,-50%) scale(1)}
  .dQ-opt .bar{transform:scaleX(1)}
  .dK-mark{background:var(--fix-soft); color:var(--fix)}
  .dF-row.drop{opacity:.28}
  .dBF-bar i{transform:scaleX(.86)}
  .dDm-txt{opacity:.55}
  .dDm-txt::after{transform:scaleX(1)}
}

/* ── Skip-link ───────────────────────────────────────────────────────────── */
.skip{
  position:absolute; left:12px; top:-60px; z-index:60;
  padding:10px 16px; border-radius:10px;
  background:var(--fix); color:var(--btn-txt); font:600 13.5px/1.2 var(--f-body);
}
.skip:focus{top:12px; text-decoration:none}

/* ── Print: тёмные токены → печатные ─────────────────────────────────────── */
@media print{
  :root{--ink:#fff; --ink-deep:#fff; --panel:#fff; --surface:#f2f4f2; --surface-2:#e8ece8;
        --text:#111; --body:#222; --hint:#444; --faint:#666;
        --line:rgba(0,0,0,.15); --line-2:rgba(0,0,0,.25); --btn-txt:#fff}
  body{background:#fff}
  .ticker,.hero-phone-wrap,.nav .btn,.demo-toast{display:none !important}
  .nav{position:static; background:#fff}
  html.js .rv{opacity:1; transform:none}
  html.js .faq-item:not(.open) .faq-a{grid-template-rows:1fr}
  .fcard .sg{opacity:1; transform:none}
}