@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0b0b0e;
  --card: #121216;
  --card-2: #16161b;
  --muted: #9aa0a6;
  --dim: #b7bbc3;
  /* Ступень между основным и приглушённым: подзаголовок первого экрана
     на --dim проваливался рядом с белым 44-м заголовком. */
  --text-2: #d4d7dd;
  --text: #e9eaee;
  --accent: #40baf7;
  --warn: #e0a94a;
  --warn-bg: rgba(224, 169, 74, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  /* Граница между блоками заметнее внутренних рамок: 8% белого на почти
     чёрном фоне глазом почти не читается. */
  --rule: rgba(255, 255, 255, 0.16);
  /* Свечение шапки: 15% было рассчитано на единственный слой. Теперь
     поверх лежит ещё и сквозное затухание, и у верхнего края они
     складывались почти в четверть — отсюда пересвет. */
  --glow: rgba(0, 183, 255, 0.08);
  /* Сквозное затухание от верха к низу страницы. Слабее верхнего пятна:
     оно не акцент, а связка, чтобы середина не проваливалась в чёрный. */
  --glow-fade: rgba(0, 183, 255, 0.06);

  /* шкала кеглей: семь ступеней, шаг ~1,25.
     Новые размеры берём только отсюда, иначе шкала расползётся. */
  --fs-xs: 12px;   /* только метки: капс, бейджи, интерфейс макета */
  --fs-sm: 14px;   /* вторичный текст, меню, микротекст */
  --fs-md: 16px;   /* основной текст, списки, карточки */
  --fs-lg: 20px;   /* подзаголовок первого экрана, определение, оффер */
  --fs-xl: 26px;   /* заголовки блоков на мобильном */
  --fs-2xl: 32px;  /* заголовки блоков, цены, крупные цифры */
  --fs-3xl: 44px;  /* H1 */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  color: var(--text);
  /* Два слоя. Первый — пятно над первым экраном, оно даёт акцент в шапке.
     Второй — ровное линейное затухание от верха документа до самого низа:
     проценты линейного градиента считаются от высоты body, поэтому убыль
     равномерна на всей странице, какой бы длинной она ни стала. */
  background:
    radial-gradient(80% 60% at 50% 0, var(--glow), transparent 60%),
    linear-gradient(180deg, var(--glow-fade) 0%, transparent 100%),
    var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- шапка --- */
/* Селектор именно body > header: правила ниже задают липкость, тёмный
   фон и z-index 1000. Без ограничения они цепляли <header> внутри
   карточек шагов — те получали чёрную плашку и прилипали к верху окна
   поверх всего. Отсюда и «заголовки наезжают на шапку».
   Шапка почти непрозрачная: на 85% сквозь неё просвечивал контент,
   и заголовки, проезжая под ней, читались как наложенные поверх.
   Размытие усилено — на случай, если backdrop-filter не поддержан,
   фона в 96% хватает самого по себе. */
/* Кнопка в шапке: на узком экране полная подпись не влезала и текст
   вылезал за скруглённый фон. Показываем короткий вариант — смысл
   («подключить к ВК ОРД») сохраняется, длина падает на треть. */
.btn-narrow { display: none; }
@media (max-width: 700px) {
  .btn-wide { display: none; }
  .btn-narrow { display: inline; }
}
/* На узких экранах (320px и подобные) в шапке помещаются только лого,
   название раздела и короткая кнопка: там ужимаем ярлык и снимаем
   уточнение «к ВК ОРД» — остаётся глагол, а куда подключать, человек
   узнает на следующем экране. */
@media (max-width: 380px) {
  body > header .btn-primary { padding: 8px 12px; font-size: var(--fs-xs); }
  .btn-tail { display: none; }
}

body > header {
  position: sticky; top: 0; z-index: 1000;
  -webkit-backdrop-filter: saturate(1.3) blur(18px);
  backdrop-filter: saturate(1.3) blur(18px);
  background: rgba(11, 11, 14, 0.72);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 64px; transition: height .3s ease;
}
body > header.shrunk .nav { height: 48px; }
.brand {
  display: flex; gap: 10px; align-items: center;
  font-weight: 800; letter-spacing: .2px; white-space: nowrap;
}
.brand img { width: 30px; height: 30px; }
.brand-tag {
  font-weight: 400; font-size: var(--fs-xs); color: var(--muted);
}
.menu { display: flex; gap: 22px; font-size: var(--fs-sm); color: var(--dim); }
.menu a:hover { color: var(--text); }
/* Меню прячем раньше: между 900 и 1100px пунктам не хватало ширины,
   и подписи ломались на две строки внутри шапки. */
.menu a { white-space: nowrap; }
@media (max-width: 1100px) { .menu { display: none; } }
@media (max-width: 900px) { .brand-tag { display: none; } }

/* --- кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 18px; border-radius: 16px;
  font-weight: 600; font-size: var(--fs-md); border: 1px solid var(--border);
  cursor: pointer; transition: transform .15s ease, background .15s ease;
  /* Без этих двух строк <button class="btn"> брал системные цвета
     браузера — «Назад» под инструкцией выходил чёрным на светлом. */
  background: transparent; color: var(--text);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px;
}
/* Главная кнопка — рамкой, а не заливкой. На сплошном голубом фоне
   тёмный текст и цветные логотипы мессенджеров читались плохо: синий
   самолётик Telegram почти сливался с фоном кнопки. Светлый текст на
   тёмном и яркая рамка дают тот же акцент без потери читаемости. */
.btn-primary {
  background: rgba(64, 186, 247, .18);
  color: #eaf7ff;
  border: 1.5px solid var(--accent);
}
.btn-primary:hover {
  background: rgba(64, 186, 247, .28);
  border-color: #7cd2ff;
}
/* Два пузыря переписки: верхний слева — вопрос, нижний справа —
   ответ, он перекрывает первый. Знак читают без объяснений: «дальше
   диалог». Собран из скруглённых прямоугольников, а не из кривых —
   так он перекликается с плашками и кнопками страницы.
   Перекрытие сделано вырезом (маской) в верхнем пузыре: кнопка
   полупрозрачная, и залить перекрытие цветом фона нельзя — на ней
   это было бы видно как пятно. */
.pick-caret { flex: none; opacity: .8; }
/* В блоке сообщества кнопки двухстрочные: шеврон прижимаем к правому
   краю, иначе он висит вплотную к подписи и ломает ровный столбец. */
.community-actions .pick-caret { margin-left: auto; }

/* Лёгкий блик на кнопках запуска бота: страница читается как статья,
   и подвижная деталь помогает отличить главное действие от текста.
   Только на кнопках-ссылках в бота: на «Далее» и «Назад» внутри
   инструкции блик отвлекал бы от самой инструкции, а на текстовой
   ссылке «Есть и бот в MAX» выглядел бы неуместно.
   [data-bot-pick] — кнопки, открывающие выбор мессенджера: после
   перехода на модалку они перестали быть ссылками с data-bot, и блик
   с них пропал вместе с селектором. */
.btn[data-bot], .btn[data-bot-pick], .strip-btn { position: relative; overflow: hidden; }
.btn[data-bot]::after, .btn[data-bot-pick]::after, .strip-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(
    100deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: btn-shine 6s ease-in-out infinite;
}
/* На прозрачной кнопке-пилюле белая полоса была бы грубой. */
.btn-primary::after,
.strip-btn::after {
  background: linear-gradient(
    100deg, transparent, rgba(64, 186, 247, .28), transparent);
}
/* Блик проходит один раз за цикл и большую часть времени стоит
   за краем: непрерывное движение на странице раздражает. */
@keyframes btn-shine {
  0%, 86% { left: -60%; }
  100% { left: 130%; }
}
body > header .btn { padding: 9px 16px; font-size: var(--fs-sm); white-space: nowrap; }
/* Ориентир вместо кнопки: показываем только на мобильном и только
   в прокрученном состоянии — на десктопе там живёт меню. */
.nav-section {
  display: none; min-width: 0; margin-left: 16px;
  /* Подпись не должна теснить логотип: занимает не больше половины
     шапки, лишнее срезается многоточием. */
  max-width: 50%; flex: 0 1 auto;
  color: var(--dim); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
body > header .brand { flex: 0 0 auto; }
/* Полоса прочитанного под шапкой: масштабируем по X, а не меняем
   ширину — трансформация не заставляет браузер пересчитывать раскладку
   на каждый кадр прокрутки. */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  /* Приглушённый акцент: полоса — фоновый ориентир, а не элемент,
     за которым следят. Сплошной акцентный цвет тянул взгляд к шапке. */
  background: rgba(64, 186, 247, .45); transform: scaleX(0);
  transform-origin: 0 50%; will-change: transform;
}
@media (max-width: 900px) {
  body > header.shrunk .nav-section { display: block; }
}
@media (max-width: 560px) {
  body > header .btn { padding: 8px 12px; font-size: var(--fs-xs); }
  .btn-more { display: none; }
}
.brand { min-width: 0; }

/* --- секции --- */
section { padding: 88px 0; position: relative; }
@media (max-width: 700px) {
  section { padding: 64px 0; }
  /* На телефоне плашка над заголовком только съедает первый экран:
     она повторяет мысль заголовка, а места по высоте там меньше всего. */
  .hero .badge { display: none; }
  /* Экранный блок подчиняется той же точке перелома, иначе между 620
     и 700px у него оставались бы десктопные отступы. */
  .screen { padding: 40px 0; }
}

/* Блоки разделены волосяной линией. Линию рисует верхняя граница
   следующего блока — так у соседей не складывается двойная черта. */
main > section + section { border-top: 1px solid var(--rule); }

/* Фон несут только короткие блоки-перебивки: длинные идут на фоне
   страницы. Своих границ им не нужно — их даёт общее правило выше.
   Площадки — тоже перебивка: заголовок и ряд плашек, две строки.
   Финальный призыв короткий по сути и возвращает ритм в нижнюю
   половину страницы, где длинные разделы идут подряд. */
#platforms, #numbers, #try, #compare, #tools, .strip, .note-strip {
  background: rgba(255, 255, 255, .045);
}
/* Полоса с оговоркой: обычный текст, без карточки — рамка внутри блока
   с подложкой читалась как коробка в коробке. Правила восстановлены:
   их снесло вместе со стилями .note при чистке. */
.note-strip { padding: 32px 0; }
.note-plain {
  margin: 0; color: var(--dim); font-size: var(--fs-md);
  line-height: 1.6; text-wrap: pretty;
}
.note-plain + .note-plain { margin-top: 10px; }
.note-plain .sep { margin: 0 10px; color: var(--muted); }
/* Отступ после заголовка полосы живёт по той же системе, что и после
   заголовков разделов (32 до текста, 36 до блоков), только в масштабе
   более мелкого заголовка: 20 до текста, 24 до плашек. Раньше здесь
   стояло 10px, и блок «Это тоже реклама» выбивался из ритма страницы. */
.note-plain-title {
  margin: 0 0 20px; line-height: 1.2;
  font-size: var(--fs-lg); font-weight: 700; color: var(--text);
}
.note-plain-title + .chips { margin-top: 24px; }

/* Связка цены и цены ошибки — отдельной короткой полосой под тарифами.
   Не .fineprint: та намеренно тусклая и мелкая, а эту строку человек
   должен прочитать перед решением. */
.price-vs-fine {
  margin: 0; max-width: 800px;
  font-size: var(--fs-md); line-height: 1.6; color: var(--text);
}
.price-vs-fine a { color: var(--accent); white-space: nowrap; }

/* Плашки-ярлыки внутри коротких полос: и «Это тоже реклама», и блок
   про сообщество. Четыре-пять коротких ярлыков читаются одним взглядом,
   тогда как список строк в этих местах выглядел бы ещё одним абзацем. */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px; padding: 0; list-style: none;
}
.chips li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 18px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
}
@media (max-width: 700px) {
  .chips { gap: 8px; }
  .chips li { padding: 8px 14px; font-size: var(--fs-xs); }
}

.compare-strip { padding: 36px 0; }

/* Инструменты — короткая полоса, а не полноценный раздел: это боковой
   вход для тех, кто ещё не подключал бота, а не часть рассказа о нём. */
.tools-strip { padding: 36px 0; }
.tools-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px;
}
.tools-lead { flex: 0 0 auto; }
.tools-title {
  margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.2;
}
.tools-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.tools-links {
  flex: 1 1 420px; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tool-link {
  display: block; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--card);
  text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
.tool-link:hover { border-color: rgba(64, 186, 247, .45); background: var(--card-2); }
.tool-link b { display: block; color: var(--accent); font-size: var(--fs-md); }
.tool-link span {
  display: block; margin-top: 2px;
  color: var(--dim); font-size: var(--fs-sm); line-height: 1.35;
}
@media (max-width: 860px) {
  .tools-links { grid-template-columns: 1fr; }
}
.compare-strip .compare { margin: 0 auto; text-align: center; }
/* Цифры — короткая перебивка: заголовок и ряд плашек, как у площадок. */
#numbers { padding: 44px 0; }


.section-title {
  /* 1.15 годится для однострочного заголовка, но «Маркировка, сбор
     статистики и отчётность в ОРД…» переносится, и строки слипались. */
  font-size: var(--fs-2xl); font-weight: 800; margin: 0; line-height: 1.25;
}
@media (max-width: 600px) { .section-title { font-size: var(--fs-xl); } }
/* 720px обрывали подзаголовок тарифов на последнем слове: строка в 88
   знаков не помещалась буквально чуть-чуть. 800px хватает, а
   text-wrap: pretty не даёт остаться висячему слову там, где перенос
   всё-таки нужен — например, в подзаголовке про штрафы. */
/* Раньше подзаголовок подтягивался к заголовку отрицательным отступом
   в -12px: в разделах с подзаголовком расстояние выходило 14px, а без
   него — 26px. Теперь после заголовка везде одинаковые 20px. */
.section-sub {
  color: var(--dim); max-width: 800px; margin: 32px 0 32px;
  font-size: var(--fs-md); text-wrap: pretty;
}
/* Отступ после заголовка задаёт не заголовок, а сам блок под ним.
   Причина: у карточек и плашек своё внутреннее поле, и при одинаковом
   margin текст внутри них оказывается на 40–57px от заголовка против
   23px у обычного абзаца. Значения подобраны так, чтобы первая строка
   текста везде начиналась примерно на одной высоте. */
.section-title + .plat-row { margin-top: 32px; }
/* У блоков с рамкой считаем не по тексту внутри, а по краю коробки:
   прижатая к заголовку рамка читается как ошибка, даже если первая
   строка внутри стоит на нужной высоте. Держим 36px до края — столько же,
   сколько до текста в разделах с подзаголовком. */
.section-title + .who-rows,
.section-title + .cases,
.section-title + .kpi,
.section-title + .faq-grid,
.section-title + .quotes { margin-top: 36px; }
.section-title + .about-grid { margin-top: 0; }
@media (max-width: 1000px) {
  /* В одну колонку под заголовком оказывается обычный текст,
     а не выровненная по центру сетка — отступ нужен полный. */
  .section-title + .about-grid { margin-top: 32px; }
}
.section-title + .screens-wrap { margin-top: 32px; }
/* В «Что такое AdMarkBot» сетка идёт вплотную к заголовку намеренно:
   её первая строка — текст. В блоке сообщества справа сразу макет
   телефона, и без отступа заголовок ложится на него. */
#community .section-title + .about-grid { margin-top: 36px; }

.cards { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .cards, .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .cards, .cards-3, .cards-2 { grid-template-columns: 1fr; }
}
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
}
.card h3 {
  margin: 0 0 8px; font-size: var(--fs-md); font-weight: 600;
  line-height: 1.25;
}
.card p { margin: 0; color: var(--dim); font-size: var(--fs-md); }
.card ul { margin: 12px 0 0; padding-left: 20px; color: var(--dim); font-size: var(--fs-md); }
.card li { margin-bottom: 7px; }

/* ссылку в тексте нельзя отличать одним цветом — добавляем подчёркивание */
p a, li a, details a, .fineprint a {
  text-decoration: underline; text-underline-offset: 2px;
}
.max-link { text-decoration: underline; text-underline-offset: 3px; }
.center { text-align: center; }
/* Скрыто визуально, но остаётся в разметке: читают скринридеры,
   краулеры и сборщик markdown-дампа. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.mt24 { margin-top: 34px; }

/* --- первый экран --- */
/* Первый экран живёт по своим отступам, а не по общим 88px секции:
   с якорем доверия он вырос, и на ноутбучных 1366x768 кнопка уходила
   под плашку согласия — на самом ходовом разрешении входа в бота
   просто не было видно. */
.hero { padding: 44px 0 56px; }
@media (max-width: 700px) { .hero { padding: 28px 0 48px; } }
/* Ноутбуки 1366x768 и 1280x800: высоты меньше, чем у монитора, а низ
   экрана ещё и занят плашкой согласия. Поджимаем первый экран по
   вертикали, чтобы кнопка входа в бота оставалась над ней. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero { padding: 24px 0 40px; }
  .sub { margin-top: 18px; }
  .hero-trust { margin-top: 16px; gap: 7px; }
  .hero .actions { margin-top: 20px; }
}
.hero .grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px;
  align-items: center; max-width: 1080px; margin: 0 auto;
}
/* элементы сетки не сжимаются по умолчанию: без min-width:0 макет
   телефона в 320px распирает колонку на узких экранах */
.hero .grid > * { min-width: 0; }
@media (max-width: 900px) {
  .hero .grid { grid-template-columns: 1fr; gap: 28px; }
  /* Макет переписки встаёт под текстом — отделяем его линией, иначе
     первый экран и демонстрация читаются как один сплошной поток. */
  .hero .demo {
    padding-top: 28px; border-top: 1px solid var(--rule);
  }
}
.badge {
  display: inline-flex; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--dim); font-size: var(--fs-xs); margin-bottom: 24px;
}
/* Заголовок разбит на три строки жёстко: каждая строка — неразрывная
   связка в разметке, поэтому результат одинаков в любом браузере
   и не зависит от поддержки text-wrap: balance и от того, загрузился
   ли Inter. Мера 24ch даёт запас на более широкие подменные шрифты:
   самая длинная строка — 612px при кегле 44px, мера — около 710px. */
h1 {
  /* 1.06 на 44px читалось хуже соседнего текста: три строки почти
     слипались. Крупный кегль набирают теснее мелкого, но не настолько:
     1.28 — верхняя граница, за ней строки заголовка начинают читаться
     как отдельные фразы. */
  font-size: var(--fs-3xl); line-height: 1.28; margin: 0;
  /* Без text-wrap: balance — он «уравнивает» строки и, получив право
     переноса от <wbr>, ломал третью строку даже там, где она влезала.
     Мера в em, а не в ch: она масштабируется вместе с кеглем, и
     самая длинная строка «за минуты через AdMarkBot» помещается
     целиком на любом брейкпоинте. */
  font-weight: 800; max-width: 15.5em;
}
@media (max-width: 900px) { h1 { font-size: var(--fs-2xl); } }
/* Связка «и отчитывайтесь в ОРД» не переносится, поэтому её ширина —
   жёсткий минимум для заголовка: 374px при кегле 32px и 304px при 26px.
   На узких экранах спускаемся по шкале, чтобы связка помещалась
   в контейнер (ширина экрана минус 48px полей). */
/* Третья строка заголовка. На десктопе держим её одной строкой через
   nowrap — иначе заголовок разъезжается на четыре строки. На мобильном
   эта связка шире экрана: раньше её склеивали неразрывные пробелы, и
   «AdMarkBot» обрезался по правому краю без всякого многоточия. Ниже
   700px nowrap снимаем, пробелы внутри обычные — строка переносится
   по словам. (<wbr> здесь не годится: Chrome рвёт строку по нему даже
   внутри nowrap.) */
h1 .h1-tail { white-space: nowrap; }
@media (max-width: 700px) { h1 .h1-tail { white-space: normal; } }
@media (max-width: 430px) { h1 { font-size: var(--fs-xl); } }
@media (max-width: 360px) { h1 { font-size: var(--fs-lg); } }
/* Первый экран дышит: между заголовком, подзаголовком и оффером
   больше воздуха, места вверху для этого достаточно. */
/* Жирное в подзаголовке — это обещание результата, а не просто акцент:
   поднимаем его до основного цвета текста, иначе на приглушённом фоне
   выделение почти не читается. */
.sub b { color: var(--text); font-weight: 700; }
/* Подзаголовок — та самая ступень, ради которой в шкале есть --fs-lg:
   после 44-го белого заголовка 16px приглушённым читались как сноска,
   хотя это единственная фраза, объясняющая продукт. */
.sub {
  margin: 26px 0 0; color: var(--text-2); font-size: var(--fs-lg);
  line-height: 1.5; max-width: 620px;
}
.offer {
  margin: 34px 0 0; padding-left: 14px; border-left: 3px solid var(--accent);
  font-size: var(--fs-lg); font-weight: 600; max-width: 620px;
  /* Две короткие строки одного высказывания: при 1.6 они распадались
     на два независимых утверждения. */
  line-height: 1.35;
}
      /* Кнопки первого экрана одинаковой ширины: inline-grid с равными
         колонками растягивает обе по самой широкой, а сам блок остаётся
         по содержимому и не тянется на всю колонку. */
      .actions {
        display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        gap: 10px; margin-top: 34px;
      }
      @media (max-width: 560px) {
        .actions { display: grid; grid-auto-flow: row; }
      }
/* Полоса доверия под кнопками первого экрана: три коротких факта
   вместо обещаний. Маркер — точка-разделитель, а не буллет: строка
   должна читаться как одна фраза, а не как список задач. */
.hero-trust {
  list-style: none; margin: 30px 0 0; padding: 0;
  /* Колонкой, а не строкой: пунктов пять, в строку они рассыпаются
     на рваные обрывки и перестают читаться как список. */
  display: flex; flex-direction: column; gap: 9px;
  max-width: 620px; font-size: var(--fs-md); color: var(--dim);
}
/* Цена — те же буллиты, но голосом громче: раньше она стояла
   отдельным блоком с полосой и не должна потеряться в списке. */
.hero-trust .is-key { color: var(--text); font-weight: 600; }
/* Цвет вместо отдельного блока с полосой: «бесплатно навсегда» было
   самым сильным словом экрана и не должно теряться в ровном списке. */
.hero-trust .is-key b { color: var(--accent); }
/* Воздух между ценой и доказательствами: без него пять пунктов
   читаются одной простынёй без иерархии. */
.hero-trust .is-key + li:not(.is-key) { margin-top: 7px; }
/* Маркер позиционируем абсолютно, а не флексом: внутри флекс-строки
   <b> становится отдельной колонкой, и длинный пункт разрывался
   на «Автоматические отчёты в ОРД —» и «от 3000 ₽ в месяц» рядом. */
.hero-trust li { position: relative; padding-left: 16px; }
.hero-trust li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.hero-trust b { color: var(--text); font-weight: 700; }

.max-link {
  display: inline-block; margin-top: 24px; color: var(--accent);
  font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px;
}

/* Пара «Telegram | MAX» там, где места на две полные кнопки нет:
   в карточках тарифов. Telegram у части людей не открывается, поэтому
   второй путь обязан стоять рядом, а не прятаться за словами. */
.bot-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;
}
.bot-pair .btn { padding: 10px 12px; font-size: var(--fs-sm); }
/* В полосе «Узнали себя?» кнопки стоят в строку и переносятся вместе
   с текстом — иначе на узком экране вторая уезжает за край. */
.strip-cta { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* Карточка инструмента перестала быть ссылкой целиком: внутри два
   пути в бота. Вид не меняем — меняется только то, что кликабельно. */
.tool-link-static { cursor: default; }
.tool-bots { display: flex; gap: 10px; margin-top: 8px; }
.tool-bots a {
  color: var(--accent); font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
.head-cta { display: inline-flex; align-items: center; }

/* --- макет переписки --- */
.demo-caption { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 10px; text-align: center; }
.phone-wrap {
  width: min(320px, 100%); margin: 0 auto; border-radius: 36px; padding: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid var(--border);
}
.phone { border-radius: 28px; background: #0f1014; padding: 12px; }
.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.chat-header img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--accent); }
.chat-header .name { font-weight: 600; font-size: var(--fs-sm); }
.chat-header .status { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.chat {
  height: 470px; overflow: hidden; border: 1px solid var(--border);
  background: #0b0c10; border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.bubble {
  max-width: 88%; padding: 10px 12px; border-radius: 16px; font-size: var(--fs-xs);
  line-height: 1.35; opacity: .25; transform: translateY(6px);
  transition: .35s cubic-bezier(.2,.8,.2,1);
}
.bubble.bot { align-self: flex-start; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.bubble.user { align-self: flex-end; background: var(--accent); color: #08121a; font-weight: 600; }
.bubble.show { opacity: 1; transform: none; }
.bubble img {
  width: 100%; max-height: 110px; object-fit: cover;
  border-radius: 8px; margin-bottom: 6px; display: block;
}
.chat-input {
  display: flex; gap: 8px; margin-top: 10px; align-items: center;
}
.chat-input span {
  flex: 1; border: 1px solid var(--border); background: #171822;
  color: var(--muted); padding: 10px 12px; border-radius: 16px; font-size: var(--fs-xs);
}
@media (max-width: 900px) {
  /* на мобильных демо не прячем, а показываем под кнопками:
     высота чата становится свободной, чтобы ничего не обрезалось */
  .demo { margin: 32px auto 0; }
  .demo-caption { text-align: center; }
  .phone-wrap { width: min(320px, 100%); }
  .chat { height: auto; }
}

/* Лента канала в макете телефона. Прокрутка здесь — смысл блока
   («почитать канал прямо на странице»), поэтому она разрешена, в
   отличие от экранов инструкции, где прокрутка внутри мешала. */
.tg-feed {
  height: 430px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); background: #0b0c10;
  border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  /* Прижимаем ленту к низу: последний пост виден сразу, история
     уходит вверх — как в переписке. justify-content работает и когда
     постов мало: они не повиснут у верхнего края. */
  justify-content: flex-end;
  scrollbar-width: thin;
  /* Затемняем только верхний край: внизу стоит последний пост, и
     гасить его нельзя — именно его человек и должен прочитать. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px);
}
/* Флекс с прижатием к низу обрезает верх при прокрутке: элементы
   вылезают за начало контейнера. Отступ-распорка это лечит. */
.tg-feed > :first-child { margin-top: auto; }
.tg-post {
  display: block; text-decoration: none; color: var(--text);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
  border-radius: 16px; padding: 10px 12px;
  font-size: var(--fs-xs); line-height: 1.45;
}
.tg-post:hover { border-color: rgba(255, 255, 255, .22); }
/* Переводы строк в постах значащие — это верстка автора канала. */
.tg-text { margin: 0; white-space: pre-wrap; }
.tg-meta {
  margin: 8px 0 0; display: flex; gap: 8px; align-items: center;
  color: var(--muted); font-size: var(--fs-xs);
}
/* Кнопки столбиком, а не в ряд: они двухстрочные, и в ряд три штуки
   не помещались — получалось 2 + 1, с рваным вторым рядом. Столбик
   читается как список мест, куда можно пойти, и не зависит от ширины
   колонки. Заодно текст рядом стал шире. */
.community-actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-top: 28px;
}
.community-actions .btn { width: min(320px, 100%); justify-content: flex-start; }
/* Иконка в кнопке: не сжимается и чуть приглушена, чтобы не спорить
   с подписью — читают всё-таки слово, а не рисунок. */
.btn-ico { flex: none; opacity: .8; }
.community-actions .btn img { flex: none; }
/* Кнопки запуска бота здесь выделены рамкой, а не заливкой: две сплошные
   синие плашки подряд перетягивали внимание с ленты канала и спорили
   с кнопкой в шапке. Акцент остаётся, вес — нет. */
.btn-accent {
  border-color: rgba(64, 186, 247, .55);
  background: rgba(64, 186, 247, .07);
}
.btn-accent:hover {
  border-color: var(--accent);
  background: rgba(64, 186, 247, .14);
}
/* Подпись под названием кнопки: живое число участников. Текст в две
   строки, поэтому кнопка перестаёт быть однострочной — выравниваем
   содержимое по левому краю, иначе вторая строка «плавает». */
.btn-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; text-align: left;
}
.btn-sub {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  margin-top: 3px;
}
.community-actions .btn { padding: 10px 16px; }
.tg-views { display: inline-flex; align-items: center; gap: 4px; }
.tg-views svg { opacity: .75; }
.tg-open { margin-left: auto; color: var(--accent); white-space: nowrap; }
.tg-note { margin: auto; color: var(--muted); font-size: var(--fs-xs); text-align: center; }
/* Ниже 1000px колонки складываются в одну, и лента конкурирует за
   высоту с текстом: подрезаем её, чтобы блок оставался обозримым. */
@media (max-width: 1100px) { .tg-feed { height: 380px; } }
@media (max-width: 700px) {
  .tg-feed { height: 300px; }
  /* Второй абзац на мобильном скрываем: там колонки складываются в
     столбик, и блок перестаёт помещаться в экран. Смысл абзаца —
     «отвечает человек» — уже сказан плашкой выше. */
  #community .about-p + .about-p { display: none; }
}

/* --- простые списки --- */
.col-title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
  line-height: 1.4;
}
.plain-list { margin: 0; padding-left: 20px; color: var(--dim); font-size: var(--fs-md); }
.plain-list li { margin-bottom: 10px; }
.plain-list b { color: var(--text); font-weight: 600; }

/* --- пошаговая демонстрация --- */
/* Блок уже контейнера и отцентрован: иначе абзац, ограниченный длиной
   строки, заканчивается задолго до телефона и между ними зияет пустота. */
/* Четыре экрана в ряд: название шага сверху, под ним макет переписки.
   Подробная инструкция не дублируется — она есть в самом боте. */
/* Лента прокручивается на любой ширине: четыре макета в ряд не влезают
   даже на десктопе, а прокрутка честнее, чем сжимать их до нечитаемого
   размера. На десктопе видно три с половиной — край четвёртого
   подсказывает, что лента продолжается. */
/* Лента идёт от края до края окна: в покое первая карточка стоит
   на линии заголовка, а при прокрутке карточки уходят под левый и
   правый срез окна. Обёртка растягивается отрицательными полями,
   внутренний отступ возвращает стартовую позицию на место. */
.screens-wrap {
  position: relative; margin-top: 8px;
  margin-inline: calc(50% - 50vw);
}
/* 100vw включает полосу прокрутки, поэтому вынос может дать лишние
   пиксели по горизонтали — обрезаем их на уровне main. Липкая шапка
   лежит вне main, её это не касается. */
main { overflow-x: hidden; }
.screens {
  display: flex; gap: 72px; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 0 8px; scroll-behavior: smooth;
  /* Отступ по краям равен полю контейнера: в покое первая карточка
     стоит на линии заголовка, при прокрутке уходит под срез окна.
     Объявлен после padding, иначе сокращённое свойство его затрёт. */
  /* 600px — половина контейнера, 20px — его боковое поле: сумма даёт
     точную координату левого края текста над лентой. */
  padding-inline: max(20px, calc(50vw - 580px));
  scroll-padding-inline: max(20px, calc(50vw - 580px));
  /* По краям лента растворяется: уезжающая карточка тает, приходящая
     выплывает из прозрачности. Ширина затухания равна полю контейнера,
     поэтому в покое крайние карточки стоят уже за ним и видны целиком. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0,
    #000 max(20px, calc(50vw - 580px)),
    #000 calc(100% - max(20px, calc(50vw - 580px))), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0,
    #000 max(20px, calc(50vw - 580px)),
    #000 calc(100% - max(20px, calc(50vw - 580px))), transparent 100%);
}
/* Ниже 700px поле контейнера 24px. Правило идёт после базового:
   при равной специфичности побеждает объявленное позже. */
@media (max-width: 700px) {
  .screens { padding-inline: 24px; scroll-padding-inline: 24px; }
  scrollbar-width: none; -ms-overflow-style: none;
}
.screens::-webkit-scrollbar { display: none; }
.screen-card {
  flex: 0 0 clamp(260px, 30%, 340px); scroll-snap-align: start;
}
/* Стрелка между экранами: показывает, что шаги идут слева направо.
   Рисуем на псевдоэлементе карточки — отдельные узлы в ленте сбили бы
   прилипание при свайпе. */
.screen-card + .screen-card::before {
  content: ""; position: absolute; left: -54px; top: 387px;
  width: 34px; height: 1px; background: rgba(255, 255, 255, .3);
}
.screen-card + .screen-card::after {
  content: ""; position: absolute; left: -22px; top: 383px;
  border: 4px solid transparent;
  border-left-color: rgba(255, 255, 255, .3);
}
@media (max-width: 900px) {
  /* Зазор на телефоне 36px — стрелку раздвигаем под него. */
  .screen-card + .screen-card::before { left: -40px; width: 24px; }
  .screen-card + .screen-card::after { left: -18px; }
}
/* Кнопки прокрутки: появляются, только когда есть куда листать.
   Стоят на фиксированной высоте — по центру макета телефона, а не
   по центру карточки, иначе прыгали бы вместе с длиной подписи. */
.screens-nav {
  /* Центр макета телефона — 387px от верха карточки; вычитаем
     половину кнопки, чтобы её центр совпал с ним. */
  position: absolute; top: 363px; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--rule); background: rgba(18, 18, 22, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.screens-nav:hover { border-color: var(--accent); background: var(--card-2); }
.screens-nav::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; margin: -6px 0 0 -7px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
}
.screens-prev { left: 10px; }
.screens-prev::before { margin-left: -3px; transform: rotate(135deg); }
.screens-next { right: 10px; }

/* Пока лентой не пользовались, кнопка «дальше» подмигивает: страница
   выглядит статичной, и без подсказки не догадаться, что справа есть
   продолжение. После первой прокрутки анимация выключается навсегда. */
.screens-next.is-hint {
  animation: nav-nudge 2.2s ease-in-out infinite;
  border-color: rgba(64, 186, 247, .5);
}
.screens-next.is-hint::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(64, 186, 247, .45);
  animation: nav-halo 2.2s ease-out infinite;
}
@keyframes nav-nudge {
  0%, 52%, 100% { transform: translateX(0) scale(1); }
  62% { transform: translateX(10px) scale(1.12); }
  72% { transform: translateX(0) scale(1); }
  82% { transform: translateX(8px) scale(1.08); }
  92% { transform: translateX(0) scale(1); }
}
@keyframes nav-halo {
  0%, 55% { opacity: .55; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 700px) {
  /* На телефоне листают пальцем, но подсказка нужна и там —
     оставляем кнопку, только меньше и ближе к краю. */
  .screens-nav { width: 40px; height: 40px; top: 367px; }
  .screens-prev { left: 6px; }
  .screens-next { right: 6px; }
}
/* position: relative обязателен: скрытые абзацы .sr-only спозиционированы
   абсолютно, и без своего контейнера они цеплялись за секцию, вылезая
   за пределы прокручиваемой ленты и растягивая страницу вбок. */
.screen-card {
  display: flex; flex-direction: column; gap: 18px; position: relative;
}
/* Заголовок по центру над макетом. Высота фиксирована: если у одной
   карточки заголовок уйдёт в две строки, её макет опустится ниже
   соседних и ряд «поедет». */
.screen-head {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 46px; text-align: left;
}
.screen-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #08121a;
  font-size: var(--fs-sm); font-weight: 800;
}
.screen-head h3 {
  margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.25;
}
.screens .phone-wrap { width: 100%; border-radius: 28px; padding: 6px; }
/* Высота меньше самой длинной переписки: приглушённый «хвост» прошлого
   шага уходит под верхнюю кромку наполовину — так видно, что разговор
   продолжается, и макет не вырастает в полтора экрана. Прокрутки внутри
   нет: всё существенное видно сразу. */
.screens .chat {
  height: 545px; justify-content: flex-end; overflow: hidden;
}
/* Подсказка про свайп нужна только там, где есть что листать. */
.screens-hint { display: none; }

@media (max-width: 900px) {
  /* Между экранами на телефоне нужен просвет заметнее: карточки
     почти во всю ширину, и при малом зазоре они читаются как одна
     непрерывная лента, а не как отдельные шаги. */
  .screens { gap: 48px; }
  .screen-card { flex: 0 0 min(82%, 320px); }
  .screens .chat { height: 545px; }
  .screens-hint {
    display: flex; align-items: center; gap: 8px;
    margin: -18px 0 18px; color: var(--muted); font-size: var(--fs-sm);
  }
}
@media (max-width: 560px) {
  /* Ширину карточки ограничиваем и на телефоне: без потолка макет
     растягивался до 390px при фиксированной высоте чата и переставал
     быть похожим на телефон — выходил квадрат. */
  .screen-card { flex: 0 0 min(90%, 320px); }
}


.bubble.card b { color: var(--text); }
.bubble .muted-line { color: var(--muted); }
.bubble .tag { color: var(--accent); }
/* сообщение об обнаружении держим одной строкой на строку —
   разорванный посередине идентификатор читается как ошибка */
.bubble.nowrap { white-space: nowrap; }
/* на узких экранах строка не должна ни переноситься, ни обрезаться:
   отдаём пузырю всю ширину и слегка уменьшаем кегль */
@media (max-width: 420px) {
  .bubble.nowrap { font-size: 11px; max-width: 100%; padding: 10px 8px; }
}
/* Нажатая кнопка в макете: показываем, какое действие человек совершил
   на этом шаге. Приглушение предыдущего сообщения её не касается —
   иначе главный элемент шага оказался бы самым тусклым. */
.bubble-btn.is-tapped {
  background: var(--accent); border-color: var(--accent); color: #08121a;
}
/* Сообщение с нажатой кнопкой приглушаем слабее остальных «хвостов»:
   поднять прозрачность у самой кнопки нельзя — дочерний элемент не
   может быть непрозрачнее родителя. */
.bubble.faded { opacity: .55; }
.bubble.faded.show { opacity: .55; }
/* Правило идёт после .faded.show — у них одинаковая специфичность,
   и без этого порядка пузырь остался бы на .55. */
.bubble.faded:has(.is-tapped),
.bubble.faded.show:has(.is-tapped) { opacity: .8; }
.erid {
  display: block; margin-top: 10px; padding: 10px 12px;
  border-radius: 8px; background: rgba(64,186,247,.10);
  border: 1px dashed rgba(64,186,247,.4);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sm); color: var(--text); line-height: 1.5;
}
/* Режимы ERID в боте стоят одной строкой — на макете тоже,
   иначе карточка растягивается на четыре кнопки. */
.btn-row {
  display: flex; gap: 6px; margin-top: 10px;
}
.btn-row .bubble-btn {
  flex: 1 1 0; margin-top: 0; padding: 8px 4px;
  font-size: var(--fs-xs); white-space: nowrap;
}
.bubble-btn {
  display: block; margin-top: 10px; padding: 8px 12px; text-align: center;
  border-radius: 8px; background: rgba(64,186,247,.14);
  border: 1px solid rgba(64,186,247,.35); color: var(--accent);
  font-weight: 600; font-size: var(--fs-sm);
}

/* --- площадки --- */
.plat-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px;
}
.plat {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 18px; font-size: var(--fs-md);
  font-weight: 600; white-space: nowrap;
}
/* Логотип площадки в заголовке: высота по букве, чтобы строка не
   разъезжалась, и небольшое скругление — у max и likee логотипы
   квадратные растровые. */
/* Логотип и название — одним словом: между картинкой и текстом перенос
   разрешён по умолчанию, и «TikTok» уезжал на строку без своего знака.
   Неразрывным пробелом это не лечится — нужен запрет переноса. */
.h1-plat { white-space: nowrap; }
.h1-logo {
  height: .78em; width: auto; vertical-align: -.06em;
  margin-right: .22em; border-radius: 4px;
}
.plat-on {
  border-color: var(--accent);
  background: rgba(64, 186, 247, .12);
}
.plat img {
  width: 22px; height: 22px; flex: none; display: block;
}
@media (max-width: 600px) {
  .plat { font-size: var(--fs-sm); padding: 8px 14px; }
  .plat img { width: 20px; height: 20px; }
  .plat-row { gap: 8px; }
}

/* --- шаги --- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step-num {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  color: var(--accent); margin-bottom: 8px;
}
.step-wide { margin-top: 20px; }

/* --- что такое --- */
.lead-def {
  font-size: var(--fs-lg); line-height: 1.5; max-width: 820px;
  margin: 0 0 18px;
}
/* Две колонки: слева определение, справа схема. В одну колонку блок
   в высоту экрана оставлял под текстом пустое поле в треть экрана. */
.about-grid {
  display: grid; grid-template-columns: 1fr minmax(340px, .85fr);
  gap: 64px; align-items: center;
}
.about-text { max-width: 46ch; }
#community .about-text { max-width: 56ch; }
.about-p { color: var(--dim); margin: 18px 0 0; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-text { max-width: none; }
}

/* --- штрафы --- */
.why .card { background: var(--warn-bg); border-color: rgba(224,169,74,.22); }
.why .card h3 { color: var(--text); }
.why .norm { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 12px; }
table.fines { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.fines td { padding: 8px 0; border-top: 1px solid var(--border); color: var(--dim); }
table.fines tr:first-child td { border-top: none; }
table.fines td:last-child {
  text-align: right; white-space: nowrap; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.case {
  border-left: 3px solid var(--warn); padding: 4px 0 4px 18px;
  color: var(--dim); font-size: var(--fs-md); margin: 26px 0 0;
}
.case p { margin: 0; max-width: 82ch; }
.compare { font-size: var(--fs-lg); font-weight: 600; margin: 20px 0 0; max-width: 860px; }

/* --- цифры --- */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .kpi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi { grid-template-columns: 1fr; } }
.kpi .card {
  text-align: center; display: flex; flex-direction: column;
}
/* Годы работы — хронометраж: линия с точками по годам.
   Сетка из равных колонок, поэтому центры точек приходятся ровно
   на 1/8, 3/8, 5/8 и 7/8 ширины, а линия соединяет крайние. */
.kpi-years {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; margin-top: auto; padding-top: 24px;
}
.kpi-years::before {
  content: ""; position: absolute; top: 20px; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--rule);
}
.kpi-years b {
  position: relative; text-align: center; padding-top: 14px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  line-height: 1.25;
}
.kpi-years b::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--rule);
  box-sizing: border-box;
}
/* Текущий год — закрашенная точка: видно, что отсчёт продолжается. */
.kpi-years b:last-child { color: var(--text); }
.kpi-years b:last-child::before {
  background: var(--accent); border-color: var(--accent);
}
.kpi .big {
  font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.1; display: block; margin-bottom: 6px;
}
.kpi .cap { color: var(--muted); font-size: var(--fs-sm); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 700px) { .quotes { grid-template-columns: 1fr; } }
.quote p { font-size: var(--fs-md); color: var(--text); margin: 0 0 10px; }
.quote .who { color: var(--muted); font-size: var(--fs-sm); }

/* --- тарифы --- */
.plan { display: flex; flex-direction: column; }
.plan .price {
  font-size: var(--fs-2xl); font-weight: 800; margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}
.plan .price small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.plan .limit { color: var(--muted); font-size: var(--fs-sm); margin: 14px 0 0; }
.plan .btn { margin-top: 20px; width: 100%; }
.plan-body { flex: 1; }
.plan-top {
  border-color: rgba(64,186,247,.45);
}
.plan-badge {
  display: inline-block; background: var(--accent); color: #08121a;
  font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px;
  border-radius: 999px; margin-bottom: 10px;
}
.fineprint { color: var(--muted); font-size: var(--fs-sm); margin-top: 20px; max-width: 900px; }

/* --- FAQ --- */
/* вопросы — отдельная узкая колонка по центру: длинные строки в ответах
   читать тяжело, а прижатый влево аккордеон выглядит как обрыв вёрстки */
#faq .container { max-width: 940px; }
.faq-grid { display: grid; gap: 14px; }
details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px;
}
summary {
  cursor: pointer; list-style: none; font-weight: 600;
  position: relative; padding-right: 30px;
}
summary::-webkit-details-marker { display: none; }
summary { transition: color .15s ease; }
summary:hover { color: var(--accent); }
details:hover { border-color: rgba(64, 186, 247, .28); }
details { transition: border-color .15s ease; }
summary::after {
  content: "+"; position: absolute; right: 0; top: -2px;
  font-size: var(--fs-lg); font-weight: 300; color: var(--accent);
}
details[open] summary::after { content: "−"; }
details p { color: var(--dim); font-size: var(--fs-md); margin: 12px 0 0; }
details a { color: var(--accent); }

/* --- подвал --- */
footer { border-top: 1px solid var(--border); padding: 32px 0 40px; font-size: var(--fs-sm); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-about { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; max-width: 62ch; }
.foot-about p { margin: 0 0 12px; }
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links a { text-decoration: underline; text-underline-offset: 3px; color: var(--dim); }
.foot-bottom {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--fs-sm);
}

/* --- выбор мессенджера --- */
.pick {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6, 6, 9, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pick[hidden] { display: none; }
.pick-card {
  position: relative; width: min(420px, 100%);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 20px; padding: 26px 24px 24px;
}
.pick-title { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 700; }
.pick-sub { margin: 0 0 20px; color: var(--dim); font-size: var(--fs-sm); line-height: 1.5; }
.pick-row { display: flex; gap: 10px; }
.pick-row .btn { flex: 1 1 0; justify-content: center; }
/* Пара логотипов на кнопке: показывает, что дальше будет выбор из двух
   мессенджеров, а не переход в один конкретный. */
/* Закрыть должно быть так же легко, как выбрать. Цель 40x32 из
   приглушённого глифа рядом с двумя крупными яркими кнопками — и
   случайно открывший модалку тычет мимо, попадая в мессенджер: за
   14-26.09 на 1746 визитов пришлось 3261 открытие, по 1,9 на человека.
   44px — минимум, ниже которого палец промахивается. */
.pick-close {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: none; border-radius: 12px;
  color: var(--dim); font-size: 26px; line-height: 1; cursor: pointer;
}
.pick-close:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.pick-close:active { background: rgba(255, 255, 255, .1); }
/* Заголовок не должен заезжать под крестик на узкой карточке. */
.pick-title { padding-right: 40px; }
.pick-qr-toggle {
  display: block; margin: 16px auto 0; padding: 6px 4px;
  background: none; border: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
/* Коды разводим к краям карточки, а не жмём в центр: так каждый читается
   как самостоятельный вариант рядом со своей кнопкой сверху. */
.pick-qr {
  display: flex; justify-content: space-between;
  gap: 16px; margin-top: 18px; padding: 0 6px;
}
.pick-qr[hidden] { display: none; }
.pick-qr figure { margin: 0; text-align: center; }
.pick-qr figcaption { margin-top: 8px; color: var(--muted); font-size: var(--fs-xs); }
/* Белая подложка обязательна: сканеры плохо читают инверсный код. */
.pick-qr-img {
  width: 148px; height: 148px; padding: 8px;
  background: #fff; border-radius: 12px;
}
.pick-qr-img img, .pick-qr-img canvas { display: block; width: 100%; height: 100%; }
/* На телефоне сканировать нечем: там мессенджер открывается по ссылке. */
@media (max-width: 900px) { .pick-qr-toggle, .pick-qr { display: none; } }

@media (max-width: 420px) { .pick-row { flex-direction: column; } }

/* --- прилипшая кнопка на мобильных --- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 14, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  transform: translateY(120%); transition: transform .25s ease;
  display: none;
}
/* Две кнопки в ряд: у человека сразу выбор мессенджера, а не один
   вход в Telegram. Ширина делится поровну. */
.sticky-cta { display: none; }
.sticky-title {
  margin: 0 0 5px; text-align: center;
  color: var(--text); font-size: var(--fs-xs); font-weight: 600;
}
.sticky-row { display: flex; align-items: center; gap: 10px; }
/* Кнопки ниже обычных: полоса не должна съедать экран на телефоне. */
.sticky-cta .btn {
  flex: 1 1 0; width: auto; gap: 6px;
  padding: 6px 12px; font-size: var(--fs-sm); border-radius: 12px;
}
.sticky-cta .btn img { width: 18px; height: 18px; }
.sticky-cta .btn img { border-radius: 4px; }
/* Обе кнопки одинаковые: на сплошной акцентной заливке синий логотип
   Telegram сливался с фоном. Тёмная подложка с акцентной рамкой
   оставляет логотипам их собственный цвет. */
.btn-alt {
  background: var(--card-2); color: var(--text);
  border: 1px solid rgba(64, 186, 247, .45);
}
.btn-alt:hover { border-color: var(--accent); background: var(--card); }
.sticky-cta.on { transform: none; }
@media (max-width: 900px) {
  .sticky-cta { display: block; }
  /* Как только внизу появляется полоса с ботами, кнопка в шапке
     становится лишней: два одинаковых призыва на одном экране.
     Прячем её в прокрученном состоянии, освобождая место логотипу. */
  body > header.shrunk .btn { display: none; }
}
/* очень узкие экраны: таблица штрафов не должна распирать карточку */
@media (max-width: 420px) {
  /* Раньше здесь поля карточек ужимались до 18px — ровно там, где
     воздуха и так меньше всего. */
  .card { padding: 20px; }
  table.fines { font-size: var(--fs-xs); }
  table.fines td { padding: 7px 0; }
}
/* --- кому подходит: блок в размер экрана --- */
/* svh, а не vh: на мобильных с прячущейся адресной строкой vh считается
   по развёрнутому viewport, и низ блока уезжает под панель браузера. */
/* Блок в высоту экрана. Отступ 48px вместо общих 88px — осознанное
   исключение: блок и так занимает экран целиком, здесь отступ работает
   как поля, а не как ритм между секциями, и с 88px содержимое
   перестаёт помещаться на ноутбучном экране. */
.screen {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 48px 0;
}
.screen .container { width: 100%; }
/* 36px вместо общих 26px: у других блоков после заголовка идёт текст,
   а тут сразу линейка первой строки — с 26px она липнет к заголовку.
   Столько же даёт .section-sub в блоках с подзаголовком. */
/* Заголовок блока выровнен влево, как у всех остальных разделов. */
/* Собственный отступ у заголовка здесь не нужен: расстояние задаёт
   блок под ним, как и во всех остальных разделах. */
.who-screen .section-title { margin-bottom: 0; }
/* Заголовок сверху, пункты под ним: сбоку список читался как отдельная
   колонка и терял связь с категорией. */
.who-row {
  display: grid; gap: 16px 48px;
  /* Колонка схемы фиксированной ширины, а не по содержимому: иначе
     у строки с одной короткой цепочкой она сжималась, и цепочка
     уезжала вправо, не совпадая с соседними строками. */
  grid-template-columns: minmax(0, 1fr) 680px;
  grid-template-areas: "title chain" "list chain";
  align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.who-row h3 { grid-area: title; align-self: end; }
.who-row ul { grid-area: list; align-self: start; }
.who-row .chain { grid-area: chain; min-width: 0; }
.who-row:first-child { border-top: 1px solid var(--border); padding-top: 20px; }
/* Нижнюю линейку последней строки рисует рамка полосы под блоком —
   иначе они складываются в двойную черту. */
.who-row:last-child { border-bottom: none; }
.who-row h3 {
  margin: 0; font-size: var(--fs-xl); font-weight: 700;
  line-height: 1.15;
}
/* Пункты идут строго столбиком: в строку они выстраивались в сплошную
   полосу через весь экран, и читать её невозможно. */
.who-row ul { margin: 0; padding: 0; list-style: none; max-width: 56ch; }
.who-row li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  color: var(--dim); font-size: var(--fs-md); line-height: 1.6;
}
.who-row li:last-child { margin-bottom: 0; }
.who-row li::before {
  content: "·"; position: absolute; left: 4px; top: -1px;
  color: var(--accent); font-weight: 700;
}
/* Дела из канала — как сообщения бота: одинаковые по высоте карточки
   в ряд, у каждой ссылка на первоисточник. */
/* Шесть карточек — два ровных ряда по три. */
.cases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: stretch;
}
.case-post {
  display: flex; flex-direction: column;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 16px; border-top-left-radius: 8px; padding: 18px;
}
.case-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.case-head img { border-radius: 50%; flex: none; }
.case-name { color: var(--text); font-size: var(--fs-md); font-weight: 600; }
/* Подпись под именем, как в шапке чата: сразу видно, что карточки —
   посты канала, а не сообщения бота пользователю. */
.case-kind { color: var(--muted); font-size: var(--fs-sm); }
.case-who { display: flex; flex-direction: column; line-height: 1.25; }
.case-date { color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }
.case-sum {
  margin: 0 0 8px; color: var(--warn);
  font-size: var(--fs-xl); font-weight: 800; line-height: 1.2;
}
/* «Штраф» — подпись над суммой: в сумме без слова легко прочитать
   тариф или выручку, особенно рядом с блоком цен. */
.case-label {
  display: block; margin-bottom: 2px;
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600;
}
.case-text {
  margin: 0 0 14px; color: var(--dim); font-size: var(--fs-md);
  line-height: 1.6; text-wrap: pretty;
}
/* Ссылка прижата к низу, иначе в карточках с разным текстом она
   скачет по высоте и ряд перестаёт читаться как ряд. */
.case-src {
  margin-top: auto; color: var(--accent); font-size: var(--fs-md);
  text-decoration: none;
}
.case-src:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }

/* Схема «мессенджеры → сервис → кабинет ОРД». Та же грамматика, что
   у цепочек договоров, но с логотипами: человек должен увидеть, что
   AdMarkBot стоит между ним и его кабинетом, а не вместо кабинета.
   Идёт сверху вниз — в колонке это читается как путь. */
.pipe-figure { margin: 0; }
.pipe {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Два бота — альтернатива друг другу, поэтому стоят в ряд, а не
   цепочкой один под другим. */
.pipe-side {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
/* Схема — картинка, а не текст: на 8% рамке и приглушённом тексте
   пилюли сливались с фоном. Рамка на уровне разделителей, текст
   основного цвета, подложка светлее карточек. */
.pipe-node {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card-2);
  color: var(--text); font-size: var(--fs-md); white-space: nowrap;
}
.pipe-node img { flex: none; border-radius: 8px; }
/* Последнее звено — вне сервиса: туда сведения передаёт оператор,
   а не AdMarkBot. Пунктир показывает границу ответственности. */
.pipe-node.is-out {
  border-style: dashed; background: transparent; color: var(--dim);
}
.pipe-node.is-core {
  border-color: rgba(64, 186, 247, .45); background: rgba(64, 186, 247, .1);
  color: var(--text); font-weight: 600; font-size: var(--fs-lg);
  padding: 14px 22px;
}
/* Стрелка смотрит вниз: линия вертикальная, наконечник снизу. */
.pipe-arrow {
  position: relative; display: block; width: 1px; height: 28px;
  background: rgba(255, 255, 255, .3);
}
.pipe-arrow::after {
  content: ""; position: absolute; left: -3.5px; bottom: -1px;
  border: 4px solid transparent; border-top-color: rgba(255, 255, 255, .3);
}

/* Схема договорной цепочки: кто с кем заключает договор в этой роли.
   Роль строки подсвечена, при наведении на строку цепочка оживает. */
/* Три независимые цепочки. На десктопе каждая идёт горизонтально,
   а сами цепочки стоят одна под другой: в широкой колонке слева
   направо читается быстрее. На узком экране всё переворачивается —
   цепочки встают рядом и читаются сверху вниз. */
/* На десктопе цепочки идут строками одна под другой, и 10px читались
   как один слипшийся блок: у агентства и у блогера их по три. Ниже
   1000px раскладка меняется на три колонки, и там свой gap. */
.chain-cols {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px; width: 100%;
}
.chain-col {
  display: flex; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: 10px; min-width: 0;
}
.chain-col .chain-arrow {
  width: 26px; height: 1px; background: rgba(255, 255, 255, .3);
}
.chain-col .chain-arrow::after {
  left: auto; bottom: auto; right: -1px; top: -3.5px;
  border-top-color: transparent;
  border-left-color: rgba(255, 255, 255, .3);
}
/* Подписи белые и в невыделенных звеньях: это схема, а не второстепенный
   текст. Роль строки отличается рамкой и заливкой, а не тусклостью —
   приглушать надписи ради контраста означало бы делать их хуже читаемыми
   ровно там, где человек разбирается, кто с кем заключает договор. */
.chain-node {
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card-2);
  color: var(--text); font-size: var(--fs-md); white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.chain-node.is-role {
  border-color: rgba(64, 186, 247, .45); background: rgba(64, 186, 247, .1);
  color: var(--text); font-weight: 600;
}
.who-row:hover .chain-node { border-color: rgba(255, 255, 255, .26); }
.who-row:hover .chain-node.is-role {
  color: var(--text); border-color: var(--accent);
  background: rgba(64, 186, 247, .18);
}
.chain-arrow, .flow-arrow {
  position: relative; display: block; width: 26px; height: 1px;
  background: rgba(255, 255, 255, .18);
}
.chain-arrow::after, .flow-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3.5px;
  border: 4px solid transparent; border-left-color: rgba(255, 255, 255, .18);
}

/* Ритм страницы: экран — узкая полоса — экран. Полоса не должна
   соперничать с блоками, поэтому кнопка тут размером с плашку площадки,
   а не как главные кнопки страницы. */
.strip { padding: 44px 0; }
.strip-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 16px 24px;
}
/* Строка работает как заголовок полосы, но остаётся абзацем: настоящий
   h2 здесь засорил бы структуру документа и оглавление дампа. */
.strip-inner p {
  margin: 0; color: var(--text);
  font-size: var(--fs-xl); font-weight: 700; line-height: 1.35;
}
/* На телефоне вторая половина фразы уходит на свою строку: в одну
   строку она всё равно переносится, но в случайном месте. */
@media (max-width: 700px) {
  .strip-break { display: block; height: 0; }
  .strip-inner p { line-height: 1.45; }
}
.strip-btn {
  /* gap нужен из-за шеврона: у .btn он задан, а здесь его не было,
     и стрелка прилипала к последней букве. */
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 10px 18px;
  border: 1px solid rgba(64, 186, 247, .45);
  background: rgba(64, 186, 247, .1); color: var(--accent);
  font-size: var(--fs-md); font-weight: 600; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.strip-btn:hover {
  background: rgba(64, 186, 247, .18); border-color: var(--accent);
}
@media (max-width: 560px) {
  .strip-inner { flex-direction: column; gap: 14px; text-align: center; }
  .strip-inner p { font-size: var(--fs-lg); }
  .strip-btn { font-size: var(--fs-sm); padding: 8px 14px; }
}
@media (max-width: 1000px) {
  /* Схему не прячем: она объясняет роль не хуже текста. Просто
     переносим под список и отпускаем переносы внутри цепочки. */
  /* Схема встаёт под список, поэтому между ними нужен зазор больше,
     чем между заголовком и списком, а до линейки — воздух снизу. */
  .who-row {
    /* minmax(0, 1fr), а не 1fr: у грид-колонки минимум по умолчанию —
       min-content, и цепочка с запретом переноса растягивала колонку
       шире экрана, давая горизонтальную прокрутку всей страницы. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "list" "chain";
    gap: 12px; padding: 44px 0 48px;
  }
  .who-row .chain { margin-top: 10px; }
  /* Когда схема встаёт под список, она занимает всю ширину строки
     и колонки расползаются. Держим её в той же плотности, что
     на десктопе, и центрируем. */
  .who-row h3 { margin-bottom: 0; font-size: var(--fs-lg); }
}
@media (max-width: 620px) {
  /* На узком экране строки в один экран не влезут при любой вёрстке —
     отпускаем высоту, чтобы текст не жался. */
  .screen { min-height: 0; }
  .who-row { padding: 40px 0 44px; }
}

/* Цепочки всегда стоят рядом и читаются сверху вниз: переносить их
   друг под друга нельзя — сравнение путей и есть смысл схемы. Вместо
   переноса ужимаем пилюли и разрешаем перенос текста внутри них. */
@media (max-width: 780px) {
  .chain-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .chain-cols--one { grid-template-columns: minmax(0, 1fr); }
  /* Направление флекса меняется на вертикальное, и justify-content
     с десктопа (flex-end) начинает прижимать узлы к низу — короткие
     цепочки повисали внизу колонки. Выравниваем по верху. */
  .chain-col {
    flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 8px;
  }
  .chain-cols { align-items: start; }
  .chain-col .chain-arrow { width: 1px; height: 16px; }
  .chain-col .chain-arrow::after {
    right: auto; top: auto; left: -3.5px; bottom: -1px;
    border-left-color: transparent;
    border-top-color: rgba(255, 255, 255, .3);
  }
  .chain-node {
    padding: 6px 10px; font-size: var(--fs-sm);
    white-space: normal; text-align: center; overflow-wrap: anywhere;
  }
}
@media (max-width: 560px) {
  .chain-cols { gap: 6px; }
  .chain-node { padding: 5px 8px; font-size: var(--fs-xs); }
}

/* Чат с менеджером в правом нижнем углу — там, где привыкли искать
   связь с живым человеком. Запуск бота живёт в шапке и в нижней полосе
   на мобильном, здесь другой сценарий: спросить перед подключением. */
.desk-cta {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(18, 18, 22, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.desk-cta.on { opacity: 1; transform: none; pointer-events: auto; }
.desk-cta-title {
  margin: 0 0 8px; text-align: center;
  color: var(--text); font-size: var(--fs-xs); font-weight: 600;
}
.desk-cta-row { display: flex; gap: 8px; }
/* Связь с человеком — отдельной кнопкой под чертой: сценарий другой,
   чем запуск бота, но такой же явный. */
.desk-cta-support {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.desk-cta-support .btn { flex: 1 1 auto; justify-content: center; }
.desk-cta-note {
  margin: 8px 0 0; text-align: center;
  color: var(--muted); font-size: var(--fs-xs);
}
.desk-cta .btn {
  gap: 6px; padding: 7px 12px; font-size: var(--fs-sm); border-radius: 12px;
}
@media (max-width: 900px) { .desk-cta { display: none; } }
/* Полоса согласия и кнопки делят низ экрана. Раньше кнопки просто
   прятались, пока согласие не принято, — то есть человек, впервые
   открывший сайт, вообще не видел входа в бота. Теперь поднимаем их
   над полосой: высоту полосы скрипт кладёт в --consent-h. */
body.consent-on .desk-cta { bottom: calc(var(--consent-h, 84px) + 20px); }

/* --- согласие на обработку персональных данных --- */
/* Тот же механизм, что на kktu.admarkbot.ru: полоса внизу и кнопка
   «Принимаю», выбор запоминается в localStorage. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(18, 18, 22, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.consent[hidden] { display: none; }
.consent-content {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  color: var(--dim); font-size: var(--fs-sm);
}
.consent-content p { margin: 0; }
.consent-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent .btn { padding: 8px 18px; font-size: var(--fs-sm); white-space: nowrap; }
body.consent-on .sticky-cta { bottom: var(--consent-h, 84px); }
/* На телефоне полоса стояла в две строки с кнопкой во всю ширину и
   съедала до трети экрана на каждой прокрутке. Оставляем одну строку:
   укороченный текст + компактная кнопка справа. */
@media (max-width: 560px) {
  .consent { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .consent-content {
    flex-wrap: nowrap; align-items: center; gap: 10px; text-align: left;
    font-size: var(--fs-xs); line-height: 1.35;
  }
  .consent-content p { min-width: 0; }
  .consent-long { display: none; }
  .consent .btn { flex: none; padding: 9px 14px; font-size: var(--fs-xs); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* Мобильный воздух. На телефоне страница вытягивается в одну ленту,
   и та же плотность, что на десктопе, читается как сплошной текст:
   разводим блоки, строки и карточки, не трогая объём написанного.
   Блок стоит в конце таблицы намеренно — иначе его перекрывают
   правила самих компонентов, объявленные ниже. */
@media (max-width: 700px) {
  /* Мелкий текст на телефоне: 12px — граница читаемости, а вторичных подписей
     на странице 66 штук. Поднимаем шкалу на шаг, макет от этого не едет:
     плашки и кнопки пересчитаны под новый кегль. */
  :root { --fs-xs: 13px; --fs-sm: 15px; }
  /* Палец попадает в 44 пикселя — рекомендация и Apple, и Google. Кнопки были
     38px по высоте, ссылки «Источник →» — 26px. */
  .btn, .strip-btn { min-height: 44px; }
  .case-src { display: inline-block; padding: 8px 0; }
  /* Ссылки подвала — столбик, по ним попадают пальцем: 24px высоты мало. */
  .foot-links a { padding: 10px 0; }
  .foot-links { gap: 0; }
  .container { padding: 0 24px; }
  /* Один интервал для всего текста на мобильном. Классы перечислены
     не для красоты: у .who-row li, .note-plain и .case-text свой
     line-height, и их специфичность выше, чем у голого «p, li» —
     без явного упоминания они остались бы на 1.6, а остальной текст
     уехал бы на 1.7. Отсюда и ощущение скачущих интервалов. */
  p, li, .note-plain, .case-text, .screen-cap { line-height: 1.7; }
  /* Пункты внутри аудитории — короткие реплики, а не абзацы: держим их
     плотнее, чтобы группа читалась как одна, а воздух работал между
     самими аудиториями. */
  .who-row li { line-height: 1.5; margin-bottom: 6px; }
  /* Схема цепочки — отдельная мысль после списка, а не его продолжение:
     на мобильном она стоит под ним, и зазора в 12px (gap) + 10px было
     мало — блоки читались как один. */
  .who-row .chain { margin-top: 26px; }
  .step-list li { margin-bottom: 12px; }
  .cards, .cards-2, .cards-3, .cases { gap: 16px; }
  .faq-grid { gap: 16px; }
  details { padding: 20px; }
  .case-post { padding: 20px; }
  .step-need { padding: 18px 20px; }
  .kpi { gap: 16px; }
  /* Плашки площадок — по три в ряд одной ширины: при свободном
     переносе ширины разъезжались (90–169px). Флекс, а не сетка:
     неполная последняя строка встаёт по центру, а не липнет к левому
     краю. Правило стоит здесь, в конце таблицы: компонентный
     .plat-row объявлен выше по файлу и иначе побеждал бы. */
  .plat-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  }
  /* min-width: 0 обязателен: без него у флекс-элемента минимум —
     min-content, и «Одноклассники» распирало плашку на 133px против
     109px у соседей, ломая ряд. Мягкий перенос в разметке даёт
     аккуратную вторую строку вместо разъехавшейся сетки. */
  .plat {
    flex: 0 0 calc((100% - 16px) / 3);
    min-width: 0; text-align: center;
    /* nowrap снят на всякий случай: если подпись когда-нибудь
       окажется длиннее плашки, она перенесётся, а не вылезет. */
    white-space: normal; line-height: 1.2;
    justify-content: center; gap: 6px;
    padding: 8px 6px; font-size: var(--fs-xs);
  }
  /* Подпись — отдельный span: у голого текстового узла внутри флекса
     нельзя задать min-width, и он не сжимался, вылезая за плашку. */
  .plat > span { min-width: 0; }
  .plat img { width: 18px; height: 18px; }
}

    

/* --- длинные разделы на телефоне ---------------------------------------
   «Реальные дела» и FAQ занимали по две тысячи пикселей каждый. Показываем
   первые три дела, остальные — по кнопке; ответы в FAQ закрыты по умолчанию.
   На десктопе всё остаётся как было: там прокрутка дешевле. */
@media (max-width: 700px) {
  .cases.is-collapsed .case-post:nth-child(n + 4) { display: none; }
  .cases-more {
    display: block; width: 100%; margin-top: 16px; min-height: 44px;
    background: none; border: 1px solid var(--rule); border-radius: 16px;
    color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  }
  .cases-more:hover { border-color: rgba(255, 255, 255, .22); }
}
@media (min-width: 701px) {
  .cases-more { display: none; }
}

@media (max-width: 700px) {
  .hero-trust { margin-top: 24px; gap: 8px; }
  /* На узком экране 20px растягивают подзаголовок на шесть строк и
     уводят кнопку за сгиб. Кегль возвращаем к основному, светлый цвет
     оставляем — заметность держится на нём, а не на размере. */
  .sub { font-size: var(--fs-md); margin-top: 22px; }
}