/* ============================================================
   glaspro-b · «Янтарный терминал» · ДНК 12-yantarnyy-terminal
   Скетч фазы 3: hero + «Как это работает» (+ живой якорь #demo)
   Палитра: #141210 / #201C17 / #F0EBE3 / #B3A99A / #FFB41D / #363636
   Шрифты: Unbounded (display) · Bitter (body) · IBM Plex Mono (метки)
   ============================================================ */

/* ---------- Шрифты (self-hosted, кириллица + латиница) ---------- */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/unbounded-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/unbounded-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unbounded-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/unbounded-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bitter-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bitter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bitter-cyrillic-400-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bitter-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bitter-cyrillic-500.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bitter-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bitter-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bitter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A;
}

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

:root {
  --bg: #141210;          /* фон 60% — тёплый почти-чёрный, уголь */
  --surface: #201C17;     /* поверхности 30% — тёплый уголь светлее */
  --ink: #F0EBE3;         /* тёплый почти-белый текст */
  --ink-muted: #B3A99A;   /* вторичный тёплый текст */
  --amber: #FFB41D;       /* акцент 10% — Tier 1, иконка логотипа */
  --graphite: #363636;    /* графит вордмарка — текст на светлой плашке */
  --plaque: #F0EBE3;      /* светлая плашка шапки (= --ink как поверхность) */
  --hairline: rgba(240, 235, 227, 0.14);
  --hairline-dark: rgba(54, 54, 54, 0.18);

  /* шкала ×1.333 от 17px */
  --fs-0: 1.0625rem;   /* 17 — body */
  --fs-1: 1.4167rem;   /* 22.7 */
  --fs-2: 1.8889rem;   /* 30.2 */
  --fs-3: 2.5185rem;   /* 40.3 */
  --fs-mono: 0.8125rem;   /* 13 — служебные моно-метки */
  --fs-mono-s: 0.75rem;   /* 12 — мелкие моно-метки */

  /* 8pt-сетка */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;

  --container: 1440px;
  --pad: clamp(20px, 4vw, 64px);
}

/* ---------- База ---------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #141210;
  color: #F0EBE3;
  font-family: "Bitter", "PT Serif", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
}

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

a { color: inherit; }

::selection { background: #FFB41D; color: #141210; }

:focus-visible {
  outline: 2px solid #FFB41D;
  outline-offset: 2px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* моно-метка — единственный носитель акцента вместе с primary-CTA */
.mono {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Шапка: светлая плашка (логотип как есть) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--plaque);
  border-block-end: 1px solid var(--hairline-dark);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 64px;
}

.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 22px; width: auto; }

.site-nav { margin-inline-start: auto; }

/* CTA внутри панели навигации — только для мобильного меню */
@media (min-width: 1024px) {
  .site-nav__cta { display: none; }
}

.site-nav__list {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  padding-block: 4px;
}
.site-nav__list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  padding: 16px 28px;
  cursor: pointer;
}

.btn--primary {
  background: var(--amber);
  color: #141210;
}
.btn--primary:hover { background: #E9A312; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(240, 235, 227, 0.35);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }

.btn--header { padding: 12px 20px; }

/* бургер */
.burger {
  display: none;
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-dark);
  cursor: pointer;
  position: relative;
}
.burger__line {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--graphite);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.burger__line:nth-child(1) { top: 15px; }
.burger__line:nth-child(2) { top: 21px; }
.burger__line:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .burger { display: block; }

  .site-header__cta { display: none; }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--plaque);
    border-block-end: 1px solid var(--hairline-dark);
    padding: var(--s-2) var(--pad) var(--s-3);
  }
  .site-nav.is-open { display: block; }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
  }
  .site-nav__list li + li { border-block-start: 1px solid var(--hairline-dark); }
  .site-nav__list a {
    display: block;
    padding-block: 16px;
  }
  .site-nav__cta { margin-block-start: var(--s-2); }
}

/* ---------- Hero: тип-герой ---------- */

.hero {
  padding-block: clamp(64px, 10vh, 128px) 0;
}

.hero__kicker {
  color: var(--amber);
  margin: 0 0 var(--s-3);
}

.hero h1 {
  font-family: "Unbounded", "Arial Black", sans-serif;
  font-weight: 600;
  font-size: clamp(2.125rem, 1.1rem + 4.4vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  max-width: 18ch;
  text-wrap: balance;
}

.hero__lead {
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 32em;
  margin: 0 0 var(--s-6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}

/* лента бейджей сторов — реальная графика сторов, слот медиа-плана Hero·лента */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-block-end: clamp(48px, 8vh, 96px);
}
.hero__badges img { height: 40px; width: auto; }

/* строка стенограммы — сигнатурный элемент */
.transcript {
  border-block: 1px solid var(--hairline);
  background: var(--surface);
}

.transcript__list {
  margin: 0;
  padding-block: var(--s-3);
  display: grid;
  gap: var(--s-1);
}

.transcript__row {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: var(--s-2);
  align-items: baseline;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.transcript__row dt { color: var(--amber); font-weight: 500; }
.transcript__row dd { margin: 0; color: var(--ink-muted); }
.transcript__row dd strong { color: var(--ink); font-weight: 500; }

@media (max-width: 599px) {
  .transcript__row { grid-template-columns: 1fr; gap: 2px; }
  .transcript__row + .transcript__row { margin-block-start: var(--s-2); }
}

/* ---------- Секция «Как это работает» ---------- */

.how {
  padding-block: clamp(64px, 10vh, 128px);
}

.how__kicker {
  color: var(--amber);
  margin: 0 0 var(--s-2);
}

.how h2 {
  font-family: "Unbounded", "Arial Black", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5185rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-6);
  max-width: 24ch;
}

.how__grid {
  display: grid;
  gap: var(--s-3);
  align-items: start;
}

.steps {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 920px) {
  .steps { grid-template-columns: 1fr 1fr; }
}

/* документальный кадр приложения — вертикальный, из RuStore */
.how__doc {
  margin: 0;
  max-width: 320px;
}
.how__doc img {
  border: 1px solid var(--hairline);
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.how__doc-caption {
  display: block;
  padding-block-start: var(--s-1);
  color: var(--ink-muted);
  font-size: var(--fs-mono-s);
}

@media (min-width: 1200px) {
  .how__grid { grid-template-columns: 1fr minmax(240px, 300px); gap: var(--s-6); }
}

/* на мобиле шаги складываются в колонку — порядок 01→04 читается сверху вниз */

.step {
  background: var(--surface);
  padding: var(--s-3);
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}

.step__index {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.02em;
}

.step__title {
  font-family: "Bitter", "PT Serif", Georgia, serif;
  font-size: var(--fs-0);
  font-weight: 600;
  margin: 0;
}

.step__media {
  border: 1px solid var(--hairline);
  aspect-ratio: 707 / 310;
  overflow: hidden;
}
.step__media img { width: 100%; height: 100%; object-fit: cover; }

/* пример карточки протокола — плотная моно-полоса */
.protocol-facts {
  margin-block-start: var(--s-6);
  border-block-start: 1px solid var(--hairline);
  padding-block-start: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
}

.protocol-facts__label { color: var(--amber); }

.protocol-facts ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.protocol-facts li {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
}

/* ---------- Демо-полоса (живой якорь #demo) ---------- */

.demo {
  background: var(--surface);
  border-block-start: 1px solid var(--hairline);
  padding-block: clamp(64px, 9vh, 112px);
}

.demo__grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 920px) {
  .demo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); }
}

.demo h2 {
  font-family: "Unbounded", "Arial Black", sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 var(--s-2);
  max-width: 22ch;
}

.demo__sub {
  color: var(--ink-muted);
  margin: 0 0 var(--s-4);
  max-width: 34em;
}

.demo-form {
  display: grid;
  gap: var(--s-2);
}

@media (min-width: 600px) {
  .demo-form { grid-template-columns: 1fr 1fr; }
  .demo-form__consent, .demo-form__actions { grid-column: 1 / -1; }
}

.demo-form input[type="text"],
.demo-form input[type="tel"],
.demo-form input[type="email"] {
  width: 100%;
  background: #141210;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: "Bitter", "PT Serif", Georgia, serif;
  font-size: 1rem;
  padding: 16px;
  border-radius: 0;
}
.demo-form input::placeholder { color: var(--ink-muted); opacity: 1; }
.demo-form input:focus-visible { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }

.demo-form__consent {
  display: flex;
  gap: var(--s-1);
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.demo-form__consent input {
  accent-color: #FFB41D;
  width: 18px;
  height: 18px;
  margin-block-start: 2px;
  flex: none;
}
.demo-form__consent a { color: var(--ink); }

.demo-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-1);
}

.demo__media {
  border: 1px solid var(--hairline);
}

.demo__media-caption {
  display: block;
  padding: 8px 16px;
  border-block-start: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: var(--fs-mono-s);
}

/* ---------- Подвал-строка ---------- */

.site-footer {
  border-block-start: 1px solid var(--hairline);
  padding-block: var(--s-3);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: var(--fs-mono-s);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.site-footer__row a { color: var(--ink-muted); }
.site-footer__row a:hover { color: var(--ink); }

/* ---------- Движение ----------
   Единственный момент: единая система reveal (одни keyframes, одна кривая),
   только на КОНТЕЙНЕРАХ секций: .reveal-load — hero при загрузке,
   .reveal — секции при скролле (scroll-driven, прогрессивно через @supports).
   1 момент = в бюджете editorial (1–2); пол (≥1) выполнен. */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.reveal-load { animation: rise 0.42s cubic-bezier(0.2, 0.6, 0.2, 1) both; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: rise 0.42s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-load, .reveal { animation: none; }
  .burger__line { transition: none; }
}