/* «Форма» — общий стиль сайта.
   Палитра и шрифты взяты один в один из приложения (константа C в src/App.jsx),
   чтобы сайт читался как его продолжение, а не как чужая страница. */

:root {
  --ink: #070E15;      /* фон — холодный сине-чёрный */
  --panel: #0F1B24;    /* панели */
  --panel2: #17262F;   /* вложенные панели */
  --line: #243642;     /* волосяные линии вместо рамок */
  --text: #EEF3F6;     /* основной текст */
  --muted: #8CA0AE;    /* второстепенный */
  --faint: #54646F;    /* слабый */
  --blue: #10A9B7;     /* акцент — циан-бирюза */
  --green: #34C759;
  --amber: #F5A623;
  --gold: #FFD60A;     /* рекорды */
  --glow: rgba(16, 201, 214, .14); /* неон-свечение как на сплэше */

  --wrap: 1080px;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  /* Горизонтальная прокрутка на узком экране — самый частый дефект такой вёрстки.
     Режем её на корне и следим, чтобы ни один блок не вылезал за ширину. */
  overflow-x: hidden;
}

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

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ── Типографика ─────────────────────────────────────────────────────────
   Приёмы те же, что в приложении: заголовок узким плотным шрифтом,
   надзаголовок — мелкие прописные с разрядкой, цифра-герой крупно. */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(38px, 8vw, 68px); }
h2 { font-size: clamp(28px, 5.5vw, 42px); }
h3 { font-size: clamp(20px, 3.6vw, 26px); font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }

p { margin: 0 0 16px; }

/* Надзаголовок: мелкий, прописной, с разрядкой. Он задаёт раздел, не крича. */
.kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px;
}
.kicker--muted { color: var(--faint); }

.lead { font-size: clamp(17px, 2.4vw, 20px); color: var(--muted); max-width: 62ch; }

.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 14px; }

/* ── Секции и линии ─────────────────────────────────────────────────────
   Волосяная линия сверху вместо рамки вокруг: она делит, но не рисует
   лишнюю коробку и не крадёт место на узком экране. */

section { padding: clamp(56px, 9vw, 104px) 0; }
section + section > .wrap { border-top: 1px solid var(--line); padding-top: clamp(48px, 8vw, 88px); }

.hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ── Шапка ──────────────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 14, 21, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 62px; flex-wrap: wrap;
}
.logo {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--text); letter-spacing: -.01em; margin-right: auto;
}
.logo:hover { text-decoration: none; }
.logo b { color: var(--blue); }
.site-head nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-head nav a { color: var(--muted); font-size: 14px; font-weight: 500; }
.site-head nav a:hover { color: var(--text); text-decoration: none; }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 14px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
  cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ── Экран-герой ────────────────────────────────────────────────────────── */

.hero { padding: clamp(48px, 8vw, 90px) 0 clamp(40px, 6vw, 72px); position: relative; }
.hero::before {
  /* Свечение как на полу зала на сплэше приложения. */
  content: ''; position: absolute; inset: -20% 0 auto 0; height: 420px;
  background: radial-gradient(60% 100% at 50% 0%, var(--glow), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero h1 { max-width: 19ch; }
.hero .lead { margin-top: 20px; }

/* ── Цифра-герой ────────────────────────────────────────────────────────
   Число крупным display-шрифтом, подпись под ним мелкой. Так цифра читается
   раньше слов — а в этом продукте цифра и есть содержание. */

.figures {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 64px);
}
.figure { background: var(--ink); padding: 22px 18px; }
/* Цифра-герой набрана как в приложении (компонент HeroNumber): Barlow 700,
   а не 800, и обязательно табличными цифрами — без них числа гуляют по ширине. */
.figure .num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 6vw, 46px); line-height: 1; color: var(--text);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.figure .num.gold { color: var(--gold); }
.figure .num.blue { color: var(--blue); }
.figure .cap {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin-top: 8px; font-weight: 600;
}

/* ── Сетка карточек ─────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
/* ⚠️ Начертание 600, а не 700: из Inter подключены только 400/500/600 — тот же
   набор, что в приложении. Попросив 700, получим синтетический жир от браузера. */
.card .tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); background: var(--glow);
  padding: 4px 9px; border-radius: 6px; margin-bottom: 12px;
}
.card .tag--gold { color: var(--gold); background: rgba(255, 214, 10, .12); }

/* ── Снимки экранов ─────────────────────────────────────────────────────── */

.shots {
  display: grid; gap: 20px;
  /* 280px → на широком экране ровно три колонки, шесть снимков ложатся 3+3.
     При 220px получалось 4+2 с двумя сиротами во втором ряду. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: 36px;
}
.shot { min-width: 0; }
.shot img {
  width: 100%; border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.shot figcaption {
  margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.45;
}
.shot figcaption b { color: var(--text); font-weight: 600; display: block; }

/* ── Тарифы ─────────────────────────────────────────────────────────────── */

.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.plan--pro { border-color: var(--blue); }
.plan .price {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 6vw, 46px); line-height: 1; margin: 6px 0 4px;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.plan ul { list-style: none; padding: 0; margin: 18px 0 0; }
.plan li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.plan li b { color: var(--text); font-weight: 600; }

/* ── Юридические страницы ───────────────────────────────────────────────── */

.doc { padding: clamp(36px, 6vw, 64px) 0 80px; }
.doc .wrap { max-width: 760px; }
.doc h2 { font-size: clamp(22px, 4vw, 28px); margin: 42px 0 14px; }
.doc h3 { font-size: 18px; margin: 26px 0 10px; }
.doc p, .doc li { color: var(--muted); }
.doc li { margin-bottom: 8px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc strong { color: var(--text); font-weight: 600; }
.doc .updated { font-size: 13px; color: var(--faint); margin-top: 4px; }

/* Врезка-предупреждение — для важных обещаний, которые нельзя проглядеть. */
.note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }
.note--gold { border-left-color: var(--gold); }

/* Таблица. Обёртка с прокруткой оставлена страховкой, но на узком экране
   таблицы с классом .stack разворачиваются в столбик (см. медиазапрос ниже) —
   боковой прокрутки не остаётся вовсе, даже внутри блока. */
.table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
td { color: var(--muted); }

/* Блок реквизитов — единственное место, где они хранятся.
   Остальные страницы на него ссылаются, чтобы менять в одном месте. */
.req { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 20px; margin: 24px 0; }
.req dl { margin: 0; }
.req dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding-top: 16px; }
.req dd { margin: 4px 0 16px; color: var(--text); font-size: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.req dd:last-child { border-bottom: 0; }

/* Заполнитель: должен быть заметен, чтобы его нельзя было не заполнить. */
.fill {
  color: var(--gold); background: rgba(255, 214, 10, .1);
  border: 1px dashed rgba(255, 214, 10, .5);
  padding: 1px 7px; border-radius: 5px;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: .9em; font-weight: 600;
  /* Длинный заполнитель обязан переноситься, иначе он растянет страницу. */
  overflow-wrap: anywhere;
}

/* ── Вопрос-ответ ───────────────────────────────────────────────────────── */

.faq { margin-top: 28px; }
.faq details {
  border-top: 1px solid var(--line); padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--blue); font-size: 22px; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--muted); padding-bottom: 8px; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--line); padding: 40px 0 56px; margin-top: 20px; }
.site-foot .wrap { display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a, .site-foot p { font-size: 14px; }
.site-foot p { color: var(--faint); margin: 0; }
.site-foot nav a { color: var(--muted); }

/* ── Движение ────────────────────────────────────────────────────────────
   Три правила, которые здесь важнее красоты:

   1. Скрывать блоки до появления можно ТОЛЬКО когда скрипт заведомо жив.
      Поэтому селектор начинается с `.js` — этот класс ставит крошечный
      инлайновый скрипт в <head>. Не сработал скрипт, отключён JS, упал
      IntersectionObserver — класса нет, и страница просто показывает весь
      текст. Обратный порядок («прятать всегда, показывать скриптом») — самый
      частый способ отдать человеку пустую страницу.
   2. Двигаем только `opacity` и `transform`. Они не влияют на поток, поэтому
      ни один блок не меняет своё место: до появления и после элемент стоит
      там же. Анимировать `height`, `margin` или `top` тут нельзя.
   3. Никакого движения по горизонтали: `translateX` на узком экране создаёт
      боковую прокрутку, которую потом ищут полдня.                        */

.reveal {
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1),
    transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0s);
}
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Свечение на сплэше приложения медленно «дышит». Псевдоэлемент вынесен из
   потока (position:absolute), поэтому строчки текста он не двигает.

   ⚠️ Масштабирование здесь ТОЛЬКО по вертикали, и это не вкусовщина.
   Элемент растянут на всю ширину (`inset: … 0 … 0`), и `scale(1.08)` выводил
   его правый край за экран: документ становился на 3–4 px шире окна, то есть
   появлялась горизонтальная прокрутка. Увидеть её глазом нельзя — `overflow-x:
   hidden` на body прячет полосу, — поэтому дефект нашёлся только замером
   scrollWidth. Рост вниз безопасен: свечение живёт у верха десятитысячной
   страницы и до её нижней границы не достаёт. */
@keyframes glow-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: .82; }
  50%      { transform: translateY(-14px) scaleY(1.12); opacity: 1; }
}
.hero::before { animation: glow-breathe 14s ease-in-out infinite; }

/* Карточка при наведении меняет только цвет и тень.
   ⚠️ Приподнимать её на несколько точек нельзя: текст уезжает из-под курсора
   ровно в тот момент, когда его собрались читать. */
.card, .plan, .shot img {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.card:hover, .plan:hover {
  border-color: rgba(16, 201, 214, .45);
  box-shadow: 0 0 0 1px rgba(16, 201, 214, .12), 0 12px 32px rgba(0, 0, 0, .35);
}
.shot img:hover { border-color: rgba(16, 201, 214, .45); }

/* Кнопка: подсветка вместо смещения. */
.btn { transition: filter .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.btn:hover { box-shadow: 0 8px 26px rgba(16, 201, 214, .28); }
.btn--ghost:hover { border-color: var(--blue); box-shadow: none; }

/* Подчёркивание в шапке растёт из середины. Псевдоэлемент, а не border —
   border добавил бы высоту и сдвинул бы всю шапку на пиксель. */
.site-head nav a { position: relative; transition: color .2s ease; }
.site-head nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -4px;
  height: 2px; background: var(--blue); border-radius: 2px;
  transition: left .22s ease, right .22s ease;
}
.site-head nav a:hover { text-decoration: none; }
/* То же самое с клавиатуры: подсветка только для мыши оставляет тех, кто ходит
   по сайту табом, без единого признака, где они сейчас находятся. */
.site-head nav a:hover::after,
.site-head nav a:focus-visible::after { left: 0; right: 0; }

/* Цифра-счётчик. В разметке лежит готовое итоговое значение, скрипт лишь
   перебирает промежуточные — если он не отработал, человек видит число, а не
   ноль и не пустоту.
   ⚠️ `inline-block` задан здесь, а не в скрипте: смена типа отображения на
   ходу могла бы изменить высоту строки на пиксель, и блок «поехал» бы ровно в
   тот момент, когда мы уверяем, что ничего не двигается. */
[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Пункт-отличие: полоса слева наливается цветом при появлении.
   ⚠️ Цвет по умолчанию — уже акцентный, а гасится он только под `.js`. Иначе
   без скрипта все четыре полосы навсегда остались бы серыми: правило
   «показывать скриптом» и здесь портит страницу тому, у кого скрипта нет. */
.edge {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 0 16px 16px 0;
  padding: 22px 24px;
  transition: border-left-color .5s ease .25s, border-color .25s ease;
}
.js .edge { border-left-color: var(--line); }
.js .edge.is-in, .edge:hover { border-left-color: var(--blue); }
.edge h3 { margin-bottom: 8px; }
.edge p:last-child { margin-bottom: 0; }
.edge .no { font-family: var(--display); font-size: 13px; color: var(--faint); letter-spacing: .1em; }

/* Плавная прокрутка к якорям + отступ под липкую шапку, иначе заголовок
   раздела оказывается ровно под ней и его не видно. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 78px; }

@media (max-width: 560px) {
  /* Таблица в столбик: заголовочная строка прячется, а её подписи
     подставляются перед каждой ячейкой из data-label. Три колонки текста на
     360 точках иначе либо жмутся до нечитаемости, либо едут вбок. */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr:first-child { display: none; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 14px 0; }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 3px 0; }
  table.stack td::before {
    content: attr(data-label);
    display: block; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint); font-weight: 600;
    margin-bottom: 3px;
  }
  table.stack td:first-child { color: var(--text); font-weight: 600; }

  .site-head .wrap { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
  .site-head nav { gap: 14px; width: 100%; }
  .site-head nav a { font-size: 13px; }
  .card { padding: 18px; }
  .plan { padding: 20px; }
  .edge { padding: 18px 18px 18px 20px; }
  .req { padding: 4px 16px; }

  /* На узком экране меню переносится на вторую строку, и липкая шапка
     становится вдвое выше. Отступ под неё обязан вырасти вместе с ней —
     иначе переход по ссылке в меню прячет заголовок раздела под шапкой. */
  section[id] { scroll-margin-top: 140px; }
}

/* ── Движение выключено человеком ────────────────────────────────────────
   Часть людей от движения на экране укачивает — это не придирка, а причина,
   по которой в системе есть отдельная настройка.

   ⚠️ Самая частая ошибка здесь — отключить появление вместе с содержимым:
   анимация не играет, `.is-in` не ставится, и блок навсегда остаётся с
   `opacity: 0`. Поэтому первым правилом текст возвращается на место
   безусловно, и только потом гасится всё остальное движение.

   Блок стоит последним в файле сознательно: он обязан перебивать всё
   написанное выше.                                                        */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}