/* Fetch — getfetch.online
   Одна таблица стилей, без фреймворков и без единого внешнего запроса: шрифт
   лежит рядом, иконки инлайновые, текстура — data-URI. Для аудитории в РФ это
   не идеология, а скорость: сторонний CDN отдаётся непредсказуемо.

   ?v= у шрифтов — не украшение: nginx отдаёт /assets/ с `expires 1y`, а имя
   файла не меняется. Поменяли сам woff2 — поднимите номер, иначе у тех, у кого
   он уже в кеше, останется старый.

   Оформление — «бумага из коробки с картриджем»: кремовый фон, чёрный текст,
   красный акцент, нулевые скругления и жёсткие тени со смещением вместо
   размытых. Ретро-игровое ощущение держат геометрия и типографика, а не
   пиксельный шрифт в основном тексте: его на кириллице невозможно читать. */

/* Дисплейный шрифт. Вырезан до нужного набора символов (кириллица, латиница,
   цифры, ₽ и пунктуация) — 16 КБ на начертание вместо 80 КБ у полного файла
   с Google Fonts. Лежит локально: внешних запросов на странице по-прежнему
   ноль. Лицензия OFL. */
@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-400.woff2?v=1") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-700.woff2?v=1") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ токены */

:root {
  color-scheme: light dark;

  /* Светлая тема здесь основная, а не запасная: «бумага» — это и есть замысел,
     тёмная выведена из неё, а не наоборот. */
  --bg:        #f3eee2;
  --bg-soft:   #efe8d9;
  --bg-card:   #fffdf7;
  --bg-sunken: #eae3d3;
  --fg:        #16141a;
  --fg-muted:  #5d574d;
  --fg-faint:  #6f6759;
  --line:      #d8ceb9;
  --line-soft: #e5ddcb;

  --brand:      #c62f27;
  --brand-ink:  #fffdf7;
  --brand-soft: #f7e7e2;
  --brand-line: #dfa9a2;
  --accent:     #1c6b48;
  --warn:       #9a5b00;

  /* Вместо свечения под героем — типографская сетка точек: на бумаге светится
     нечему, а фон всё равно должен быть не пустым. */
  --dot:   rgba(22, 20, 26, .10);
  --grain: 0;

  /* Тень одна на весь сайт — сплошная, со смещением, без размытия. Это и есть
     главный приём: печать со смещённой краской, а не «карточка над фоном». */
  --hard:      rgba(22, 20, 26, .22);
  --shadow-sm: 2px 2px 0 var(--hard);
  --shadow:    4px 4px 0 var(--hard);
  --shadow-lg: 7px 7px 0 var(--hard);

  /* Скруглений нет нигде: угол в 90° — половина всего ретро-впечатления. */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --wrap: 1120px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --display: "Unbounded", "Trebuchet MS", -apple-system, BlinkMacSystemFont, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Та же бумага, напечатанная навыворот: тёплый чёрный и кремовый текст,
       а не серо-синий «ночной режим». */
    --bg:        #14110f;
    --bg-soft:   #191512;
    --bg-card:   #1e1a17;
    --bg-sunken: #100d0b;
    --fg:        #f5efe2;
    --fg-muted:  #a89f90;
    --fg-faint:  #938b7d;
    --line:      #342d26;
    --line-soft: #272119;

    --brand:      #ff6a5e;
    --brand-ink:  #1a0d0b;
    --brand-soft: #2a1714;
    --brand-line: #4d2a25;
    --accent:     #56c98d;
    --warn:       #e0a33c;

    --dot:   rgba(245, 239, 226, .10);
    --grain: .03;

    /* В тёмной теме чёрная тень не видна на чёрном: смещённый дубль делается
       светлым, как оттиск краской по чёрной бумаге. */
    --hard:      rgba(245, 239, 226, .16);
  }
}

/* -------------------------------------------------------------------- база */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Липкая шапка перекрывала бы заголовок при переходе по якорю. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Плёнка зерна поверх всего. В светлой теме --grain: 0, слой просто не виден;
   в тёмной он убирает ощущение «залитого чёрного прямоугольника», которое и
   выдаёт вёрстку по умолчанию. pointer-events снят, кликам не мешает. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--fg); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

::selection { background: var(--brand); color: var(--brand-ink); }

/* ---------------------------------------------------------------- типографика */

/* Дисплейный шрифт — только на витрине: заголовки, цены, интервалы, бейджи и
   кнопки. Основной текст остаётся системным: Unbounded широкий, абзац им
   набирать нельзя. Кегли ниже прежних — эта гарнитура шире привычной. */
h1, h2, h3 {
  margin: 0 0 .5em; font-family: var(--display);
  font-weight: 700; line-height: 1.14; letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem); line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1em; }

.lede {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  line-height: 1.55; color: var(--fg-muted); max-width: 58ch;
}
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  padding: 7px 13px 7px 11px;
  border: 2px solid var(--brand-line); background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.eyebrow .dot {
  width: 7px; height: 7px; background: var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* -------------------------------------------------------------------- сетка */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

section { padding: 92px 0; position: relative; }
section.tight { padding: 44px 0 72px; }
.soft { background: var(--bg-soft); border-block: 1px solid var(--line-soft); }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head h2 { margin-bottom: .35em; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--brand); color: var(--brand-ink);
}
.skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------------- шапка */

.site-head {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* Класс вешает site.js после первой прокрутки: над героем шапка растворена в
   фоне, при прокрутке получает подложку и границу. */
/* Никакого стекла: на бумаге подложка непрозрачная, а границу держит
   двойная линия — так делали шапки в печатных инструкциях. */
.site-head.is-stuck {
  background: var(--bg);
  border-bottom: 2px solid var(--fg);
}
.head-inner { display: flex; align-items: center; gap: 22px; height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 650; }
.brand:hover { color: var(--fg); }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease);
}
.brand:hover .brand-mark { transform: translate(-1px, -1px); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: 0; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--fg-muted); font-size: .93rem; padding: 8px 13px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--fg); background: var(--bg-sunken); }
/* Класс вешает site.js, пока соответствующий раздел в кадре. */
.nav a.is-current { color: var(--fg); background: var(--bg-sunken); }

/* ------------------------------------------------------------------ кнопки */

.btn {
  --btn-bg: var(--brand);
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border: 2px solid var(--fg);
  background: var(--btn-bg); color: var(--brand-ink);
  font-family: var(--display);
  font-weight: 700; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 4px 4px 0 var(--fg);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .18s var(--ease);
}
/* Кнопка не «поднимается над фоном», а вдавливается: тень уезжает под неё.
   Единственная механика, которую все узнают без объяснения. */
.btn:hover { color: var(--brand-ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fg); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-ghost {
  background: var(--bg-card); color: var(--fg); border-color: var(--fg);
  box-shadow: 4px 4px 0 var(--hard);
}
.btn-ghost:hover { color: var(--fg); background: var(--bg-sunken); box-shadow: 2px 2px 0 var(--hard); }
.btn-ghost:active { box-shadow: 0 0 0 var(--hard); }
.btn-sm { padding: 8px 15px; font-size: .85rem; box-shadow: 3px 3px 0 var(--fg); }
.btn-sm:hover { box-shadow: 1px 1px 0 var(--fg); }
.btn-ghost.btn-sm { box-shadow: 3px 3px 0 var(--hard); }
.btn-ghost.btn-sm:hover { box-shadow: 1px 1px 0 var(--hard); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* -------------------------------------------------------------------- герой */

.hero { padding: 84px 0 96px; position: relative; overflow: hidden; }

/* Сетка точек вместо свечения: на бумаге ничего не светится, а пустой фон под
   героем выглядит незаконченным. Маска гасит сетку к низу, чтобы она не
   спорила с текстом. */
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.hero-grid {
  display: grid; gap: 56px 44px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
.hero h1 { margin: 22px 0 20px; max-width: 15ch; }
.hero .lede { max-width: 46ch; }
.hero-cta { margin-top: 30px; }
.hero-note {
  margin-top: 18px; font-size: .92rem; color: var(--fg-faint);
  /* flex-start, а не center: на узком экране текст переносится на две строки,
     и галочка, выровненная по центру, повисает между ними. */
  display: flex; align-items: flex-start; gap: 8px;
}
.hero-note svg { width: 15px; height: 15px; margin-top: 5px; color: var(--accent); flex: none; }

/* ------------------------------------------------- демонстрация: чат в Telegram */

.demo { position: relative; }
/* Подложка-«вторая карточка»: у печатного макета глубина делается смещённым
   дублем, а не размытием. */
.demo::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 2px solid var(--line); background: var(--bg-soft); z-index: -1;
}

.demo-frame {
  background: var(--bg-card);
  border: 2px solid var(--fg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: none;
  transition: transform .3s var(--ease);
}
.demo-frame:hover { transform: translate(-2px, -2px); }

.demo-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  background: var(--bg-sunken);
}
.demo-avatar {
  width: 34px; height: 34px; flex: none;
  background: var(--brand); color: var(--brand-ink);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px;
}
.demo-name { margin: 0; font-weight: 620; font-size: .95rem; letter-spacing: -.015em; }
.demo-sub { margin: 0; font-size: .78rem; color: var(--accent); }

/* Лента утоплена, а пузыри — на уровне карточки: в мессенджере входящее
   сообщение лежит НА фоне переписки, а не проваливается в него. */
.demo-feed {
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  min-height: 392px; justify-content: flex-start;
  background: var(--bg-sunken);
}

.msg {
  display: flex; gap: 12px; padding: 12px;
  background: var(--bg-card); border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(14px); filter: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.msg.is-in { opacity: 1; transform: none; }

.msg-thumb {
  width: 56px; height: 56px; flex: none;
  background: var(--brand-soft); border: 2px solid var(--brand-line);
  display: grid; place-items: center; color: var(--brand);
}
.msg-thumb svg { width: 20px; height: 20px; opacity: .8; }
.msg-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-title {
  margin: 0; font-size: .875rem; font-weight: 580; line-height: 1.35; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-price { margin: 0; font-family: var(--display); font-size: .92rem; font-weight: 700; letter-spacing: -.01em; }
.msg-meta { margin: 0; font-size: .73rem; color: var(--fg-faint); display: flex; gap: 7px; align-items: center; }
.msg-tag { color: var(--accent); font-weight: 600; }

/* Индикатор набора: три точки, пока «ищется» следующее объявление. */
.typing {
  align-self: flex-start; display: flex; gap: 4px; padding: 12px 15px;
  background: var(--bg-card); border: 2px solid var(--line);
  opacity: 0; transition: opacity .3s var(--ease);
}
.typing.is-in { opacity: 1; }
.typing i {
  width: 6px; height: 6px; background: var(--fg-faint);
  animation: blink 1.3s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ----------------------------------------------------------------- карточки */

.card {
  position: relative; padding: 26px;
  background: var(--bg-card); border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover {
  transform: translate(-2px, -2px); box-shadow: var(--shadow);
  border-color: var(--fg);
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 40px; height: 40px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  border: 2px solid var(--brand-line);
}
.card-icon svg { width: 19px; height: 19px; }

/* -------------------------------------------------------------------- шаги */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; position: relative; }
.steps li { position: relative; padding-left: 64px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--brand); border: 2px solid var(--fg);
  color: var(--brand-ink); font-family: var(--display); font-weight: 700; font-size: .95rem;
  box-shadow: var(--shadow-sm);
}
/* Линия от кружка к следующему шагу — читается как последовательность, а не
   как три независимых абзаца. У последнего её нет. */
.steps li::after {
  content: ""; position: absolute; left: 19px; top: 46px; bottom: -34px;
  width: 2px; background: repeating-linear-gradient(var(--line) 0 5px, transparent 5px 10px);
}
.steps li:last-child::after { display: none; }
.steps { counter-reset: step; }
.steps h3 { margin-bottom: .3em; }
.steps p { margin-bottom: 0; color: var(--fg-muted); }

/* ------------------------------------------------------------------ тарифы */

/* Карточки вместо строк таблицы. Планы отличаются одним - частотой проверки,
   и в карточке эта величина стоит рядом со своей ценой, а не в четвёртой
   колонке, куда нужно вести глазом. Бесплатный план вынесен в широкую
   карточку сверху: он и есть вход в сервис, а оставшиеся шесть ровно
   ложатся в три колонки. */
.plans {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
}
/* Внутри узкой колонки текста (страницы-статьи) авторазмётка сама даёт три
   колонки; на полную ширину её пришлось бы фиксировать, иначе шесть платных
   планов встают 4+2 с дыркой в углу. */
@media (min-width: 901px) {
  .plans-wide { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  background: var(--bg-card); border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.plan:hover {
  transform: translate(-2px, -2px); box-shadow: var(--shadow);
  border-color: var(--fg);
}

.plan-name {
  margin: 0 0 14px; color: var(--fg); font-family: var(--display);
  font-size: .98rem; font-weight: 700; letter-spacing: 0;
}
.plan-price {
  margin: 0 0 20px; color: var(--fg); font-family: var(--display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.plan-per {
  display: block; margin-top: 5px;
  font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--fg-faint);
}
.plan-price-free { color: var(--accent); }

/* Прижат к низу карточки, чтобы у соседей по ряду характеристики стояли на
   одной линии независимо от длины названия. */
.plan-foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.plan-int { margin: 0 0 10px; color: var(--fg); font-family: var(--display); font-weight: 700; font-size: .92rem; }
.plan-int-label {
  display: block; margin-bottom: 3px;
  font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-faint);
}
.plan-slots { margin: 10px 0 0; font-size: .89rem; color: var(--fg-muted); }

/* Полоска скорости: семь цен подряд ничего не говорят о том, насколько один
   план быстрее другого, а разница между "раз в 20 мин" и "раз в 1 сек" -
   это и есть весь продукт. */
.plan-meter {
  display: block; height: 10px; padding: 1px;
  background: var(--bg-sunken); border: 2px solid var(--line); overflow: hidden;
}
/* Полоска набрана «клетками», а не сплошной заливкой: то же самое деление на
   шаги, что и у самих тарифов. */
.plan-meter::before {
  content: ""; display: block; height: 100%; width: var(--fill, 50%);
  background: repeating-linear-gradient(90deg, var(--brand) 0 4px, transparent 4px 6px);
}

.plan-pop {
  border-color: var(--brand);
  background: var(--bg-card);
  box-shadow: 4px 4px 0 var(--brand);
}

.plan-free {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(170px, auto) auto;
  gap: 20px 30px; align-items: center;
  background: var(--bg-card);
  border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent);
}
.plan-free:hover { border-color: var(--accent); }
.plan-free .plan-name { margin-bottom: 8px; }
.plan-free .plan-foot { margin-top: 0; padding-top: 0; border-top: none; }
.plan-note { margin: 0; font-size: .92rem; color: var(--fg-muted); max-width: 46ch; }

.badge {
  display: inline-block; margin-left: 10px; padding: 3px 9px;
  border: 2px solid var(--brand-line);
  color: var(--brand); background: var(--brand-soft);
  font-family: var(--display);
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; vertical-align: 1px;
}
.badge-free {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bg-card));
}

/* Докупаемые слоты: та же карточка, но без цифр скорости - на интервал они
   не влияют, и раздувать их до размера тарифа было бы враньём про важность. */
.addons { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); margin: 0 0 1.5em; }
.addon {
  padding: 16px 18px; background: var(--bg-card);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease);
}
.addon:hover { border-color: var(--fg); }
.addon-name { margin: 0 0 6px; font-size: .84rem; color: var(--fg-muted); }
.addon-price {
  margin: 0; font-family: var(--display);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--fg); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- FAQ */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--bg-card); border: 2px solid var(--line);
  padding: 2px 22px;
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.faq details:hover { border-color: var(--fg); }
.faq details[open] { background: var(--bg-soft); }
.faq summary {
  cursor: pointer; padding: 17px 0; font-weight: 590; letter-spacing: -.015em;
  list-style: none; display: flex; justify-content: space-between;
  gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.8px solid var(--fg-faint); border-bottom: 1.8px solid var(--fg-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px); border-color: var(--brand);
}
.faq details > *:not(summary) { margin-bottom: 16px; color: var(--fg-muted); font-size: .96rem; }

/* -------------------------------------------------------------- полоса CTA */

.cta-band { text-align: center; }
.cta-panel {
  position: relative; overflow: hidden;
  padding: 64px 32px;
  border: 2px solid var(--fg); background: var(--bg-card);
  box-shadow: var(--shadow-lg);
}
.cta-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
}
.cta-panel > * { position: relative; }
.cta-panel h2 { margin-bottom: .35em; }
.cta-panel .lede { margin: 0 auto 30px; }
.cta-panel .btn-row { justify-content: center; }

/* ------------------------------------------------------------------- проза */

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem); }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.25em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--fg-faint); }
.prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px;
  border-left: 2px solid var(--brand); color: var(--fg-muted);
}
.prose code {
  background: var(--bg-sunken); border: 1px solid var(--line);
  padding: 2px 7px; font-size: .87em;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .95rem; }
.prose th, .prose td {
  padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.prose th { font-weight: 600; color: var(--fg); }

.crumbs { font-size: .87rem; color: var(--fg-faint); padding: 26px 0 0; }
.crumbs a { color: var(--fg-faint); }
.crumbs a:hover { color: var(--fg); }

.callout {
  background: var(--brand-soft); border: 2px solid var(--brand-line);
  padding: 20px 22px; margin: 1.6em 0;
}
.callout p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- платформы */

.platform-card { display: flex; flex-direction: column; }
.platform-card h3 { margin-bottom: .3em; }
.platform-card p:last-child { margin-bottom: 0; }
.platform-card .platform-link { margin-top: auto; padding-top: 16px; }
.platform-status {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.platform-status::before {
  content: ""; width: 7px; height: 7px;
  background: currentColor;
}
.platform-next { border-style: dashed; }
.platform-next:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
.platform-next .platform-status { color: var(--fg-faint); }

/* ------------------------------------------------------- служебные страницы */

.result { min-height: 66vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.result .icon { width: 60px; height: 60px; margin: 0 auto 22px; }
.result .icon.ok { color: var(--accent); }
.result .icon.warn { color: var(--warn); }
.result .icon.neutral { color: var(--fg-faint); }
.result .lede { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ подвал */

.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 66px 0 32px; margin-top: 24px;
}
.foot-inner { display: grid; gap: 36px; grid-template-columns: 1.7fr 1fr 1fr 1fr; }
.foot-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foot-col a { color: var(--fg-muted); font-size: .93rem; }
.foot-col a:hover { color: var(--fg); }
.foot-col .btn { color: var(--brand-ink); margin-top: 6px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.05rem; margin: 0; }
.foot-h {
  font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--fg-faint); margin: 0 0 4px;
}
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-legal p { font-size: .84rem; margin: 0 0 7px; color: var(--fg-faint); }

/* -------------------------------------------------------------- появление */

/* Стартовое состояние ставит site.js, а не таблица стилей: без JS (и у
   поисковых роботов) контент обязан быть виден, а не спрятан навсегда. */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------- адаптив */

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { max-width: 18ch; }
  .demo-frame { transform: none; }
  .demo-frame:hover { transform: none; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .plan-free { grid-template-columns: 1fr; gap: 18px; }
  .nav { display: none; }
  section { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .cta-panel { padding: 48px 22px; }
  .steps li { padding-left: 54px; }
  .steps li::before { width: 34px; height: 34px; }
  .steps li::after { left: 16.5px; top: 38px; }
  .btn { width: 100%; justify-content: center; }
  .btn-sm { width: auto; }
}

/* Полный отказ от движения: у людей с вестибулярными нарушениями анимации
   вызывают тошноту, и это настройка операционной системы, а не каприз. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .msg, .typing { opacity: 1 !important; transform: none !important; filter: none !important; }
  .demo-frame { transform: none !important; }
}