/* ─────────────────────────────────────────────────────────────────────────
   КтоВзял — единая таблица стилей сайта.  Концепция «Шильдик» (индустриальная).

   ОДИН файл на ВСЕ страницы. До редизайна стили были скопированы в шесть мест
   (лендинг, changelog, referral, build-help.mjs, политика, соглашение) и успели
   разойтись: синий акцент на лендинге был #0F3D6E, а в справке — #2f7de1.
   Правка в одном месте — правка везде. Не заводить локальные <style> в страницах.

   Две темы задаются классом на <body>, а НЕ медиазапросом: тема здесь — решение
   дизайна, а не системная настройка зрителя.
     body.night — тёмный «корпус»: главная, шапка и подвал везде;
     body.paper — светлый «лист»: справка, история версий, политика, соглашение
                  (длинные тексты; тёмный фон под сплошное чтение утомляет).
   Оба режима определяют ОДИН И ТОТ ЖЕ набор переменных, поэтому все компоненты
   ниже работают в любой теме и цвета в них не хардкодятся.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Шрифты (самохост, без CDN: скорость + никаких обращений наружу) ────── */
/* Кириллица и латиница — отдельными подмножествами: браузер тянет только то,
   что реально встретил на странице. */
@font-face{font-family:Oswald;src:url(fonts/Oswald-600-cyr.woff2) format("woff2");font-weight:600;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-600-lat.woff2) format("woff2");font-weight:600;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-500-cyr.woff2) format("woff2");font-weight:500;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/Oswald-500-lat.woff2) format("woff2");font-weight:500;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-400-cyr.woff2) format("woff2");font-weight:400;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-400-lat.woff2) format("woff2");font-weight:400;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-500-cyr.woff2) format("woff2");font-weight:500;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-500-lat.woff2) format("woff2");font-weight:500;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-700-cyr.woff2) format("woff2");font-weight:700;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-700-lat.woff2) format("woff2");font-weight:700;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}
@font-face{font-family:JBMono;src:url(fonts/JetBrainsMono-500-cyr.woff2) format("woff2");font-weight:500;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap}
@font-face{font-family:JBMono;src:url(fonts/JetBrainsMono-500-lat.woff2) format("woff2");font-weight:500;
  unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212;font-display:swap}

/* ── Токены ─────────────────────────────────────────────────────────────── */
:root{
  /* Постоянные величины: не зависят от темы */
  --disp:Oswald,"Arial Narrow","Segoe UI",sans-serif;   /* заголовки: узкий, «гравировка» */
  --body:Golos,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:JBMono,Consolas,ui-monospace,"DejaVu Sans Mono",monospace; /* номера, метки, артикулы */

  --accent:#FF7A18;          /* фирменный оранжевый, выправленный под тёмный фон */
  --accent-ink:#140A02;      /* текст НА оранжевом */
  --ok:#39C476; --warn:#F2A100; --bad:#E2493B; --repair:#8B7BF0;  /* состояния инструмента */

  --w-page:1160px;           /* ширина полосы главной */
  --w-text:760px;            /* ширина колонки сплошного текста (≈70 знаков) */
  --step:8px;                /* шаг сетки отступов */
}

/* Тёмный корпус */
body.night{
  --ground:#0E141A; --plate:#18232E; --plate-2:#212E3B; --raise:#2A3947; --sunk:#0B1117;
  --ink:#EAF1F7; --ink-dim:#B4C4D2; --dim:#94A8BA;
  --hair:rgba(255,255,255,.10); --hair-soft:rgba(255,255,255,.05);
  --steel:#5C93D0;
  --shadow:0 40px 80px -40px #000;
}
/* Светлый лист */
body.paper{
  --ground:#F1F4F7; --plate:#FFFFFF; --plate-2:#F7F9FB; --raise:#FFFFFF; --sunk:#E8EDF2;
  --ink:#131B23; --ink-dim:#33424F; --dim:#5F7284;
  --hair:#D5DDE5; --hair-soft:#E7ECF1;
  --steel:#12508F;
  --shadow:0 30px 60px -45px rgba(19,27,35,.6);
  --accent:#D95400;          /* на белом ярко-оранжевый режет глаз и не добирает контраст */
  --accent-ink:#FFFFFF;
  --ok:#1E874B; --warn:#9A6400; --bad:#B5342A; --repair:#5B49C4;
}

/* ── База ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.62 var(--body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--w-page);margin:0 auto;padding:0 24px}
.wrap-text{max-width:calc(var(--w-text) + 48px);margin:0 auto;padding:0 24px}

/* Ссылка «к содержанию» — первое, что получает фокус с клавиатуры */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:var(--accent-ink);padding:12px 18px;font-weight:700}
.skip:focus{left:0}

/* Утилитарные подписи моноширинным: артикулы, метки разделов, реквизиты */
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.06em}
.tag{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
/* background обязателен: у настоящего <button> он по умолчанию системный светло-серый,
   и кнопка-контур превращалась в пустой белый прямоугольник (наступали на плашке cookie). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:500 14.5px/1 var(--body);padding:13px 21px;border:1px solid transparent;
  background:transparent;color:var(--ink);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:center}
.btn:hover{text-decoration:none}
.btn-solid{background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn-solid:hover{background:#FF8C36}
body.paper .btn-solid:hover{background:#C24A00}
.btn-wire{border-color:var(--hair);color:var(--ink)}
.btn-wire:hover{border-color:var(--dim)}
.btn-lg{padding:16px 27px;font-size:15.5px}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px}
.logo{display:flex;align-items:center;gap:11px;font:600 20px/1 var(--disp);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink);flex:none}
.logo svg{width:30px;height:30px;flex:none}
.menu{display:flex;gap:24px;font-size:14.5px;color:var(--dim)}
.menu a:hover{color:var(--ink)}
.menu a[aria-current]{color:var(--ink)}
.top-act{display:flex;align-items:center;gap:16px}
/* Мобильное меню: на старом сайте навигация просто скрывалась и ничем не заменялась */
.burger{display:none;background:none;border:1px solid var(--hair);color:var(--ink);
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.burger svg{width:20px;height:20px}
.mobile{display:none;border-top:1px solid var(--hair);background:var(--ground)}
.mobile.open{display:block}
.mobile nav{display:flex;flex-direction:column;padding:8px 0 16px}
.mobile nav a{padding:13px 0;border-bottom:1px solid var(--hair-soft);font-size:16px}
.mobile .btn{margin-top:16px;width:100%}

/* ── Заголовки и секции ─────────────────────────────────────────────────── */
h1,h2,h3{text-wrap:balance}
.h-xl{font:600 clamp(36px,5.4vw,64px)/1.02 var(--disp);letter-spacing:.005em;
  text-transform:uppercase;margin:0}
.h-l{font:600 clamp(25px,3.5vw,38px)/1.06 var(--disp);letter-spacing:.01em;
  text-transform:uppercase;margin:0}
.h-m{font:600 22px/1.14 var(--disp);letter-spacing:.01em;text-transform:uppercase;margin:0}
.accent{color:var(--accent)}

section{padding:calc(var(--step) * 10) 0}
.head{display:grid;grid-template-columns:auto 1fr;gap:0 26px;margin-bottom:44px}
.head .no{font:500 11px/1.7 var(--mono);letter-spacing:.18em;color:var(--accent);padding-top:6px}
.head h2{grid-column:2}
.head p{grid-column:2;margin:14px 0 0;color:var(--dim);max-width:58ch;font-size:16.5px}

/* ── Шильдик: рамка вокруг экрана приложения ────────────────────────────── */
.plate{position:relative;background:linear-gradient(160deg,var(--raise),var(--plate-2) 55%,var(--plate));
  padding:16px;border:1px solid var(--hair);box-shadow:var(--shadow)}
body.night .plate{border-color:rgba(255,255,255,.14);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.12)}
.plate .rivet{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#8FA3B4,#3A4A59 62%,#1A242E)}
.plate .rivet.tl{left:9px;top:9px} .plate .rivet.tr{right:9px;top:9px}
.plate .rivet.bl{left:9px;bottom:9px} .plate .rivet.br{right:9px;bottom:9px}
.plate-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase;
  padding:0 6px 12px;border-bottom:1px solid var(--hair);margin-bottom:14px}
.plate-head b{color:var(--accent);font-weight:500}
.screen{background:var(--sunk);overflow:hidden;position:relative}
.screen img{width:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);
  mask-image:linear-gradient(180deg,#000 86%,transparent)}
.plate-foot{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;
  border-top:1px solid var(--hair);padding-top:12px}
.plate-foot div{padding:0 6px}
.plate-foot dt{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.plate-foot dd{margin:6px 0 0;font:600 22px/1 var(--disp);font-variant-numeric:tabular-nums}
.plate-foot .s-free dd{color:var(--ok)} .plate-foot .s-out dd{color:var(--warn)}

/* ── Карточки-ячейки (общая сетка возможностей) ─────────────────────────── */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.cell{background:var(--plate);padding:26px 24px;display:flex;flex-direction:column;gap:11px}
.cell .ic{width:26px;height:26px;color:var(--accent)}
.cell h3{margin:0;font:700 15.5px/1.3 var(--body);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cell p{margin:0;color:var(--dim);font-size:14px;line-height:1.5}
.chip{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);border:1px solid currentColor;padding:3px 7px}

/* ── Таблицы ────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--hair);background:var(--plate)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--hair-soft)}
thead th{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--hair)}
tbody tr:last-child td{border-bottom:0}
td.q{color:var(--dim)}
.yes{color:var(--ok);font-weight:700} .no{color:var(--dim)}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
footer.site{background:#0E141A;color:#94A8BA;padding:52px 0 38px;font-size:14.5px;
  border-top:1px solid rgba(255,255,255,.10)}
footer.site a{color:#C3D0DB}
footer.site a:hover{color:#fff}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot nav{display:flex;flex-direction:column;gap:9px}
.foot .logo{color:#fff;margin-bottom:12px}
.foot-legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  font:500 11.5px/1.75 var(--mono);color:#6B7E90;letter-spacing:.02em}

/* ── Светлый лист: типографика документов и статей ──────────────────────── */
body.paper main{padding:36px 0 72px}
body.paper main h1{font:600 clamp(27px,4vw,38px)/1.08 var(--disp);letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 10px}
body.paper main h2{font:600 21px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase;
  margin:38px 0 12px}
body.paper main h3{font:700 17px/1.35 var(--body);margin:26px 0 8px}
body.paper main p,body.paper main li{color:var(--ink-dim)}
body.paper main p{margin:0 0 16px}
body.paper main ul,body.paper main ol{padding-left:22px;margin:0 0 16px}
body.paper main li{margin:6px 0}
body.paper main a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
body.paper main a:hover{color:var(--accent)}
body.paper code{font:13.5px/1.4 var(--mono);background:var(--sunk);padding:1px 5px}
.page-head{border-bottom:1px solid var(--hair);padding-bottom:22px;margin-bottom:30px}
.page-head .meta{margin:12px 0 0;color:var(--dim);font:500 12px/1.6 var(--mono);letter-spacing:.06em}

/* ── Служебные страницы: /pay/done/ и /r/ ───────────────────────────────── */
/* Обе — тупиковые по замыслу: человек попал сюда из платёжной формы ЮKassa или
   по ссылке-приглашению, и уводить его в меню сайта незачем. Поэтому шапки и
   подвала нет, только карточка по центру. Разметка своя, но токены, кнопки и
   шильдик — общие: локальных <style> в этих страницах нет (см. шапку файла).
   Правила ниже намеренно scoped на body.util-page — иначе типографика документов
   (body.paper main a и т.п.) перебивает кнопки по специфичности. */
body.util-page main.util{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;padding:40px 22px;text-align:center}
/* Логотип — не «ссылка в тексте»: типографика документов (body.paper main a)
   иначе красит его в синий и подчёркивает. */
body.util-page .util .logo{justify-content:center;color:var(--ink);text-decoration:none}
body.util-page .util-card{width:100%;max-width:520px;background:var(--plate);
  border:1px solid var(--hair);box-shadow:var(--shadow);padding:32px 28px}
body.util-page .util-card h1{font:600 clamp(23px,4.4vw,31px)/1.12 var(--disp);
  letter-spacing:.015em;text-transform:uppercase;margin:10px 0 14px}
body.util-page .util-card p{margin:0 0 14px;color:var(--ink-dim)}
body.util-page .util-card p:last-child{margin-bottom:0}
body.util-page .util .btn{text-decoration:none}
body.util-page .util .btn-solid{color:var(--accent-ink)}
body.util-page .util-note{margin-top:22px;padding:15px 17px;background:var(--sunk);
  text-align:left;font-size:14.5px}
body.util-page .util-note p{margin:0 0 9px}
body.util-page .util-note p:last-child{margin:0}
body.util-page .util-steps{text-align:left;margin:20px 0 0;padding-left:20px}
body.util-page .util-steps li{margin:7px 0;color:var(--ink-dim);font-size:15px}
body.util-page .util-foot{color:var(--dim);font-size:13.5px;line-height:1.7}
body.util-page .util-foot a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
body.util-page .util-foot a:hover{color:var(--accent)}
/* Реферальный код — на шильдике: фирменный элемент сайта, а код здесь главное.
   Фон утоплённый, а не градиент .plate: шильдик лежит ВНУТРИ белой карточки и на
   светлой теме сливался бы с ней (на тёмной главной он контрастен сам по себе). */
body.util-page .code-plate{margin:20px 0 22px;padding:20px 16px;background:var(--sunk)}
body.util-page .code-plate dl{margin:0}
body.util-page .code-plate dt{font:500 10.5px/1 var(--mono);letter-spacing:.16em;
  color:var(--dim);text-transform:uppercase}
body.util-page .code-plate dd{margin:13px 0 0;font:500 clamp(29px,7.6vw,40px)/1 var(--mono);
  letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  .menu{display:none}
  .burger{display:flex}
  .cells{grid-template-columns:1fr 1fr}
  section{padding:calc(var(--step) * 7) 0}
  .head{grid-template-columns:1fr}
  .head h2,.head p{grid-column:1}
  .head .no{margin-bottom:10px;padding-top:0}
}
@media(max-width:600px){
  .cells{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ═════════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ СТРАНИЦА
   Блоки только для index.html. Держим здесь же, а не в <style> страницы:
   одна таблица стилей на сайт — правило редизайна (см. шапку файла).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Первый экран ───────────────────────────────────────────────────────── */
.hero{padding:60px 0 68px;
  background:
    linear-gradient(180deg,rgba(255,122,24,.06),transparent 400px),
    repeating-linear-gradient(90deg,var(--hair-soft) 0 1px,transparent 1px 96px),
    var(--ground)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero-kick{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.hero-kick::after{content:"";height:1px;flex:1;background:var(--hair);max-width:120px}
.hero-lead{font-size:18px;color:var(--dim);margin:22px 0 28px;max-width:46ch}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.qr{display:inline-flex;align-items:center;gap:13px;margin-top:26px;padding:10px 16px 10px 10px;
  border:1px solid var(--hair);background:var(--plate)}
.qr img{width:72px;height:72px;background:#fff;padding:5px;flex:none}
.qr span{font:500 11.5px/1.5 var(--mono);color:var(--dim);letter-spacing:.03em}
.hero-plate{display:flex;justify-content:center}
.hero-plate .plate{width:100%;max-width:310px}

/* ── Полоса доверия ─────────────────────────────────────────────────────── */
.trust{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* margin: 0 auto, а не просто 0 — это <dl>, у него свои отступы, но горизонтальное
   auto обязано остаться, иначе полоса единственная на странице съезжает к краю окна. */
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto}
.trust > .wrap > div{padding:22px 26px 22px 0;border-right:1px solid var(--hair)}
.trust > .wrap > div:last-child{border-right:0;padding-right:0}
.trust dt{margin-bottom:9px}
.trust dd{margin:0;font-size:14.5px;color:var(--dim);line-height:1.5}
.trust dd b{color:var(--ink);font-weight:500}
.trust dd a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}

/* ── Боль: живые фото инструмента ───────────────────────────────────────── */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain-card{margin:0;background:var(--plate);border:1px solid var(--hair);
  display:flex;flex-direction:column}
.pain-card img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(.85) contrast(1.05)}
.pain-card figcaption{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px}
.pain-card .quote{font:600 19px/1.2 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.pain-card figcaption span:last-child{color:var(--dim);font-size:14.5px;line-height:1.5}

/* ── Распознавание ──────────────────────────────────────────────────────── */
.ai{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ai-lead{font-size:17px;color:var(--ink-dim);margin:0 0 22px;max-width:44ch}
.ticks{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:28px;color:var(--dim);font-size:15px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:7px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

.recog{margin:0;background:var(--plate);border:1px solid var(--hair);box-shadow:var(--shadow)}
.recog-cap{position:relative;overflow:hidden;background:#000}
.recog-cap img{width:100%}
.rbox{position:absolute;border:2px solid var(--accent);background:rgba(255,122,24,.10);
  opacity:0;animation:rbox 9s infinite}
/* Координаты — доли кадра шильдика Makita BO5031 (900×355). */
.rbox.b1{left:8%;top:19%;width:26%;height:26%;animation-delay:.6s}
.rbox.b2{left:37%;top:36%;width:26%;height:20%;animation-delay:1.1s}
.rbox.b3{left:36%;top:78%;width:20%;height:18%;animation-delay:1.6s}
.recog-badge{position:absolute;right:10px;top:10px;background:var(--accent);color:var(--accent-ink);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;
  opacity:0;animation:badge 9s infinite}
.recog-rows{margin:0;padding:6px 20px 16px}
.recog-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--hair-soft)}
.recog-rows > div:last-child{border-bottom:0}
.recog-rows dt{color:var(--dim);font-size:14px}
.recog-rows dd{margin:0;font:500 15px/1.4 var(--mono);color:var(--ink);
  opacity:0;animation:rfill 9s infinite}
.recog-rows .r1 dd{animation-delay:2.2s}
.recog-rows .r2 dd{animation-delay:2.6s}
.recog-rows .r3 dd{animation-delay:3s}
.recog figcaption{padding:0 20px 18px;color:var(--dim);font-size:13px;line-height:1.5}
@keyframes rbox{0%{opacity:0}4%{opacity:1}82%{opacity:1}90%,100%{opacity:0}}
@keyframes badge{0%{opacity:0}4%{opacity:1}26%{opacity:1}32%,100%{opacity:0}}
@keyframes rfill{0%{opacity:0;transform:translateY(5px)}5%{opacity:1;transform:none}
  82%{opacity:1;transform:none}90%,100%{opacity:0}}
/* Без движения анимация не запускается — показываем конечное состояние. */
@media(prefers-reduced-motion:reduce){
  .rbox{opacity:1}
  .recog-rows dd{opacity:1}
  .recog-badge{display:none}
}

/* ── Крупная возможность ────────────────────────────────────────────────── */
.feat-main{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);
  background:var(--plate);margin-bottom:22px}
.feat-txt{padding:38px 40px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.feat-txt p{margin:0;color:var(--dim);font-size:15.5px;max-width:44ch}
.feat-txt .ticks{margin:6px 0 0}
.feat-vis{border-left:1px solid var(--hair);padding:34px;display:flex;align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 8px,transparent 8px 16px),var(--plate-2)}
.feat-vis .plate{max-width:262px;padding:12px}

/* ── Экраны ─────────────────────────────────────────────────────────────── */
.screens{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:14px}
.shots .plate{padding:10px}
.shots figcaption{display:flex;flex-direction:column;gap:5px;color:var(--dim);
  font-size:14px;line-height:1.45}
.shots figcaption b{font:600 15px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}

/* ── Спецификация данных ────────────────────────────────────────────────── */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin:0}
.spec > div{background:var(--plate);padding:24px}
.spec dt{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.spec dd{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}
.spec dd a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}

/* ── Тарифы ─────────────────────────────────────────────────────────────── */
.calc{border:1px solid var(--hair);background:var(--plate)}
.calc-q{padding:24px 28px;border-bottom:1px solid var(--hair);display:flex;flex-wrap:wrap;
  gap:16px;align-items:center;justify-content:space-between}
.calc-q p{margin:0}
.seg{display:flex;border:1px solid var(--hair);flex-wrap:wrap}
.seg button{background:transparent;border:0;border-right:1px solid var(--hair);color:var(--dim);
  font:500 13.5px/1 var(--body);padding:13px 18px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.calc-body{display:grid;grid-template-columns:1.15fr .85fr}
.calc-plan{padding:30px 28px}
.calc-name{margin:10px 0 2px;font:600 38px/1 var(--disp);text-transform:uppercase}
.calc-lim{margin:0;color:var(--dim);font-size:15px}
.calc-price{margin:16px 0 0;font:600 44px/1 var(--disp);font-variant-numeric:tabular-nums}
.calc-price small{font:500 15px/1 var(--body);color:var(--dim)}
.calc-yr{margin:8px 0 0;color:var(--dim);font-size:13px}
.calc-act{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.toggle{display:flex;border:1px solid var(--hair)}
.toggle button{background:transparent;border:0;border-right:1px solid var(--hair);color:var(--dim);
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:12px 14px;cursor:pointer}
.toggle button:last-child{border-right:0}
.toggle button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.calc-side{border-left:1px solid var(--hair);padding:30px 28px;background:var(--plate-2)}
.calc-side .tag{display:block;margin-bottom:14px;color:var(--dim)}
.calc-side .ticks{margin:0}
.pricing-note{margin:18px 0 0;color:var(--dim);font-size:13.5px;max-width:70ch}
.pricing-note a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}

/* ── Живой продукт ──────────────────────────────────────────────────────── */
.alive{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.alive-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}
.releases{list-style:none;margin:0;padding:0;border:1px solid var(--hair);background:var(--plate)}
.releases li{display:grid;grid-template-columns:74px 104px 1fr;gap:16px;align-items:baseline;
  padding:18px 22px;border-bottom:1px solid var(--hair-soft)}
.releases li:last-child{border-bottom:0}
.rel-v{color:var(--accent);font-size:15px}
.rel-d{color:var(--dim);font-size:12.5px}
.rel-t{color:var(--ink-dim);font-size:14.5px;line-height:1.45}
.alive-side p{margin:0 0 18px;color:var(--dim);font-size:15px}
.alive-act{display:flex;gap:12px;flex-wrap:wrap}

/* ── Вопросы ────────────────────────────────────────────────────────────── */
.faq-list{margin:0;border:1px solid var(--hair);background:var(--plate)}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;font:700 16px/1.4 var(--body);
  padding:19px 52px 19px 22px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:26px;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details > div{padding:0 22px 20px}
.faq details p{margin:0 0 12px;color:var(--dim);font-size:15px;line-height:1.6;max-width:78ch}
.faq details p:last-child{margin-bottom:0}
.faq details a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}

/* ── Финальный призыв ───────────────────────────────────────────────────── */
.final-band{border:1px solid var(--hair);
  background:linear-gradient(150deg,var(--plate-2),var(--plate));padding:44px 42px;
  display:flex;gap:36px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.final-band p{margin:16px 0 26px;color:var(--dim);font-size:16.5px;max-width:52ch}
.qr-final{margin-top:0}
.qr-final img{width:88px;height:88px}

/* ── Кнопка под большим пальцем ─────────────────────────────────────────── */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 16px;
  background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(8px);
  border-top:1px solid var(--hair);transform:translateY(110%);transition:transform .25s;display:none}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%}

@media(max-width:1000px){
  .shots{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
  .hero-grid,.ai-grid,.feat-main,.calc-body,.alive-grid{grid-template-columns:1fr}
  .hero{padding:36px 0 52px}
  .feat-vis{border-left:0;border-top:1px solid var(--hair)}
  .calc-side{border-left:0;border-top:1px solid var(--hair)}
  .pain-grid,.spec{grid-template-columns:1fr 1fr}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust > .wrap > div{border-bottom:1px solid var(--hair);padding-right:26px}
  .trust > .wrap > div:nth-child(2n){border-right:0}
  .sticky-cta{display:block}
  body{padding-bottom:66px}
}
@media(max-width:600px){
  .pain-grid,.spec,.shots,.trust .wrap{grid-template-columns:1fr}
  .trust > .wrap > div{border-right:0}
  .feat-txt,.calc-plan,.calc-side{padding:26px 22px}
  .final-band{padding:30px 24px}
  .releases li{grid-template-columns:1fr;gap:4px}
}

/* ═════════════════════════════════════════════════════════════════════════
   ВНУТРЕННИЕ СТРАНИЦЫ — справка, история версий, реферальная, документы.
   Светлый лист (body.paper), но шапка и подвал остаются частью тёмного корпуса.
   ═══════════════════════════════════════════════════════════════════════ */

/* Шапка на светлых страницах: переопределяем токены в её области, а компоненты
   внутри и так написаны через переменные — ни одного цвета руками. */
body.paper .top{
  --ground:#0E141A; --plate:#18232E; --ink:#EAF1F7; --dim:#94A8BA;
  --hair:rgba(255,255,255,.10); --hair-soft:rgba(255,255,255,.05);
  --accent:#FF7A18; --accent-ink:#140A02;
  color:var(--ink);
}

/* ── Оглавление статьи ──────────────────────────────────────────────────── */
.art-toc{border:1px solid var(--hair);background:var(--plate);padding:20px 24px;margin:0 0 30px}
.art-toc .tag{display:block;margin-bottom:12px}
.art-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  display:flex;flex-direction:column;gap:8px}
.art-toc li{counter-increment:toc;position:relative;padding-left:30px;margin:0}
.art-toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:2px;
  font:500 11px/1.5 var(--mono);color:var(--accent)}
.art-toc a{color:var(--ink);text-decoration:none;font-size:15px}
.art-toc a:hover{color:var(--accent);text-decoration:underline}

/* ── Снимок экрана в статье ─────────────────────────────────────────────── */
.art-shot{margin:24px 0;text-align:center}
.art-shot img{width:100%;max-width:300px;margin:0 auto;border:1px solid var(--hair);
  box-shadow:var(--shadow)}
.art-shot figcaption{color:var(--dim);font-size:13px;margin-top:10px;line-height:1.5}
/* Страница документа (рендер PDF): во всю колонку, иначе текст не прочесть. */
.art-shot--doc img{max-width:100%}

/* ── Читайте дальше ─────────────────────────────────────────────────────── */
.art-next{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--hair)}
.art-next .tag{display:block;margin-bottom:14px}
.art-next > div{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.art-next a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;
  border:1px solid var(--hair);background:var(--plate);text-decoration:none}
.art-next a:hover{border-color:var(--accent)}
.art-next b{font:600 17px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.art-next span{color:var(--dim);font-size:14px;line-height:1.45}

/* ── Оглавление справки ─────────────────────────────────────────────────── */
.help-group{margin:0 0 44px}
.help-group h2{margin:0 0 4px}
.help-hint{margin:0 0 18px;color:var(--dim);font-size:15px}
.help-cards{display:flex;flex-direction:column;gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.help-card{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:18px 22px;
  background:var(--plate);text-decoration:none;transition:background .14s}
.help-card:hover{background:var(--plate-2)}
.help-card b{font:600 18px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.help-card span{grid-column:1;color:var(--dim);font-size:14.5px;line-height:1.5}
.help-card em{grid-column:2;grid-row:1;font-style:normal;font-size:11px;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-top:4px}

/* Секции внутри статьи — не полосы лендинга: глобальный padding у <section> здесь лишний. */
body.paper main section{padding:0}
/* Карточки-ссылки: подчёркивание из текста статьи им не нужно. */
body.paper main .help-card,
body.paper main .art-next a,
body.paper main .art-toc a{text-decoration:none}
body.paper main .art-toc a:hover{text-decoration:underline}
/* Списки компонентов не должны наследовать отступы списков текста статьи —
   у правил «body.paper main ul/li» специфичность выше, чем у одного класса. */
body.paper main .art-toc ol{padding-left:0}
body.paper main .art-toc li{margin:0}

/* ── Длинные документы: политика и соглашение ───────────────────────────── */
body.paper main hr{border:0;border-top:1px solid var(--hair);margin:32px 0}
body.paper main table{min-width:0}
body.paper main .tablewrap{margin:18px 0}

@media(max-width:700px){
  .art-next > div{grid-template-columns:1fr}
  .help-card{grid-template-columns:1fr}
  .help-card em{grid-column:1;grid-row:auto;padding-top:2px}
}

/* ── Уведомление о cookie ───────────────────────────────────────────────────
   Не GDPR-модалка: в РФ баннер с кнопкой «согласен» законом не требуется,
   требуется уведомить. Поэтому плашка не блокирует сайт, закрывается одним
   нажатием и больше не возвращается. Подробности — раздел 15 политики. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:color-mix(in srgb,var(--ground) 96%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);padding:14px 0}
.cookie.show{display:block}
.cookie .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between}
.cookie p{margin:0;color:var(--dim);font-size:14px;line-height:1.5;max-width:82ch}
.cookie a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.cookie a:hover{color:var(--accent)}
.cookie .btn{flex:none}
/* Плашка и кнопка «Скачать» на телефоне не должны стоять друг на друге. */
body.has-cookie .sticky-cta{display:none}

/* ── Отзыв ──────────────────────────────────────────────────────────────────
   Сетка рассчитана на 1–3 отзыва: с одним карточка занимает полосу целиком и
   не выглядит «пустым рядом», с двумя-тремя раскладывается автоматически. */
.voice{background:var(--sunk);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.voices figure{margin:0;background:var(--plate);border:1px solid var(--hair);
  padding:34px 36px;display:flex;flex-direction:column;gap:22px;position:relative}
/* Кавычка — знак, а не украшение: сразу видно, что это чужая речь, а не наш текст. */
.voices figure::before{content:"«";position:absolute;left:34px;top:14px;
  font:600 46px/1 var(--disp);color:var(--accent);opacity:.5}
/* Отступ сверху — под кавычку: без него знак наезжал на первую строку. */
.voices blockquote{margin:0;padding-top:30px;font-size:18px;line-height:1.55;
  color:var(--ink);max-width:62ch}
.voices figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding-top:18px;border-top:1px solid var(--hair)}
.voices figcaption b{font:600 17px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.voices figcaption span{color:var(--dim);font-size:14.5px}
.voices figcaption a{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);text-decoration:underline;text-underline-offset:3px}
.voices figcaption a:hover{color:var(--accent)}
@media(max-width:600px){
  .voices figure{padding:26px 22px}
  .voices blockquote{font-size:16.5px}
  .voices figcaption a{margin-left:0}
}
