@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-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: 600;
  font-display: swap;
  src: url('../fonts/inter-600-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ЗАГРУЖЕННЫЕ НАЧЕРТАНИЯ:
   Inter: 400, 600
   JetBrains Mono: 400
   НИКОГДА не используй другие значения font-weight — браузер синтезирует поддельное утолщение.
   Это портит геометрию букв и отличает текст от остального набора того же семейства.
*/

:root {
  --bg: #0E0F11;
  --surface: #16181C;
  --border: #262A31;
  --text: #E8EAED;
  --text-dim: #8B929E;
  --accent: #4ADE80;
  --wrap: 1200px;
  --gap: 24px;
  --bottom-stack-h: 0px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  padding-bottom: var(--bottom-stack-h);
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.section { padding: 120px 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: 0; }

h1, h2, h3 {
  margin: 0 0 24px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h1 { font-size: clamp(40px, 8vw, 88px); }
h2 { font-size: clamp(28px, 4.5vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }

p { margin: 0 0 20px; max-width: 65ch; }
.dim { color: var(--text-dim); }

.marker {
  display: block;
  margin-bottom: 32px;
  color: var(--text-dim);
  font: 400 13px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  background: var(--text);
  color: var(--bg);
  font: 600 16px/1 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease-out;
}
.btn:hover { opacity: .85; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.stats { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stat__value {
  display: block;
  color: var(--accent);
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat__delta {
  display: block;
  margin-top: 8px;
  color: var(--accent);
  font: 400 20px/1 'JetBrains Mono', monospace;
}
.stat__label {
  display: block;
  margin-top: 16px;
  color: var(--text-dim);
  font: 400 14px/1.4 'JetBrains Mono', monospace;
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.phases { width: 100%; border-collapse: collapse; font-size: 16px; }
.phases th, .phases td { padding: 20px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.phases th { color: var(--text-dim); font: 400 13px/1 'JetBrains Mono', monospace; letter-spacing: .08em; white-space: nowrap; }
.phases td:first-child { color: var(--accent); font: 400 15px/1 'JetBrains Mono', monospace; }

.case { padding: 40px 0; border-bottom: 1px solid var(--border); }
.case:last-child { border-bottom: 0; }
.case__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.case__key { display: block; margin-bottom: 8px; color: var(--text-dim); font: 400 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em; }
.case__result { color: var(--accent); }

@media (max-width: 767px) {
  body { font-size: 17px; }
  .section { padding: 72px 0; }
}

.form { max-width: 520px; margin-top: 40px; }
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; }
.field input[type="text"], .field input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: 400 17px/1 'Inter', sans-serif;
}
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field--check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.field--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.field--check label { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.field--check a { color: var(--text); }
/* Третий ребёнок грида (#consentError) без этого правила падает в первую
   колонку второго ряда — ширина 24px, сообщение об обязательном по 152-ФЗ
   поле разъезжается по одной-две буквы в строке на любом экране. Явно
   помещаем ошибку во вторую колонку — под подписью, во всю её ширину. */
.field--check .field__error { grid-column: 2; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field__error { display: block; margin-top: 8px; min-height: 20px; font-size: 14px; color: var(--accent); }
.form__status { margin-top: 20px; min-height: 24px; }
.is-invalid { border-color: var(--accent) !important; }
button[disabled] { opacity: .5; cursor: default; }

/* Успех — сообщение вместо формы (спека, раздел 8), но не через
   form.innerHTML: тогда пропал бы #formStatus, единственный aria-live-
   регион формы, и фокус улетел бы в body. Вместо этого JS ставит
   data-submitted и переиспользует #formStatus для сообщения — эти правила
   только визуально прячут поля, разметка и обработчики событий остаются
   на месте. */
.form[data-submitted="true"] .field,
.form[data-submitted="true"] #submitBtn {
  display: none;
}
.form[data-submitted="true"] .form__status {
  margin-top: 0;
  font-size: 20px;
  color: var(--text);
}

/* Нижний стек: один фиксированный контейнер, колоночный флекс — cookie-баннер
   первым, плашка второй. Плашка скрывается через высоту потока (не display),
   поэтому баннер над ней опускается сам, без ручной синхронизации координат.

   Контейнер сам по себе не рисует ничего (нет фона, нет отступа под safe
   area), пока data-active="true" не установлен из JS. Иначе после отказа от
   cookie и скрытия плашки контейнер оставался бы прозрачным носителем
   отступа env(safe-area-inset-bottom) и рисовал бы полосу фона высотой с
   home-индикатор поверх страницы даже без единого видимого потомка. */
.bstack {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.bstack[data-active="true"] {
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg);
}
.bstack > * { pointer-events: auto; }

/* Раскладка в два ряда, не в один: текст со ссылкой сверху, кнопки снизу.
   Ссылка "Подробнее" — это ссылка на политику обработки персональных данных
   (152-ФЗ), её нельзя обрезать text-overflow/nowrap ни при какой ширине.
   Бюджет высоты (88px) держим коротким текстом и плотными отступами, а не
   обрезкой контента. */
.cookie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  max-height: 88px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.25;
}
.cookie a { color: var(--text); }
.cookie__actions { display: flex; gap: 8px; }
.cookie__actions .btn { flex: 1 1 0; }

.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }

/* Специфичность .cookie {display:flex} и встроенного UA-правила [hidden]
   {display:none} совпадает (0,1,0 у обоих), но авторский normal-стиль
   побеждает user-agent normal независимо от специфичности — поэтому без
   этого переопределения атрибут hidden на баннере визуально не работал бы:
   баннер оставался бы flex-контейнером той же высоты после banner.hidden =
   true, и .bstack продолжал бы занимать место под него. */
.cookie[hidden] { display: none; }

.ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 16px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--bg);
  transition: height .2s ease-out, transform .2s ease-out;
}
.ctabar__text { font-size: 15px; }
.bstack[data-bar="hidden"] .ctabar { height: 0; padding: 0 16px; border-top: 0; transform: translateY(100%); }

@media (min-width: 768px) {
  .ctabar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ctabar { transition: none; }
}

.footer__legal { font-size: 13px; line-height: 1.6; }
#footer a { color: var(--text); }

main ul { margin: 0 0 20px; padding-left: 24px; max-width: 65ch; }
main li { margin-bottom: 8px; }