/* ============================================================
   Направление A · «Ночной терминал» — холодный редакционный dark
   ДНК 04-holodnyy-dark · Lora + Onest + IBM Plex Mono
   Палитра (WCAG AA посчитана в манифесте, Phase A)
   ============================================================ */

@font-face { font-family:"Lora"; src:url("fonts/lora-cyrillic-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Lora"; src:url("fonts/lora-latin-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Lora"; src:url("fonts/lora-cyrillic-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Lora"; src:url("fonts/lora-latin-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Lora"; src:url("fonts/lora-cyrillic-700.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Lora"; src:url("fonts/lora-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }

@font-face { font-family:"Onest"; src:url("fonts/onest-cyrillic-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; src:url("fonts/onest-latin-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Onest"; src:url("fonts/onest-cyrillic-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; src:url("fonts/onest-latin-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Onest"; src:url("fonts/onest-cyrillic-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; src:url("fonts/onest-latin-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Onest"; src:url("fonts/onest-cyrillic-700.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; src:url("fonts/onest-latin-700.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }

@font-face { font-family:"IBM Plex Mono"; src:url("fonts/plexmono-cyrillic-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/plexmono-latin-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/plexmono-cyrillic-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/plexmono-latin-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }

/* ---------- Токены ---------- */
:root {
  /* палитра 60/30/10 — «ночной терминал» */
  --ink-bg:      #0E0F12;  /* 60% фон, холодный почти-чёрный */
  --ink-surface: #16181D;  /* 30% поверхности */
  --ink-raise:   #1C1F26;  /* приподнятые панели */
  --text:        #E9EBEF;  /* body на тёмном · 16.06:1 */
  --text-hi:     #F4F6F9;  /* заголовки · 17.7:1 */
  --muted:       #9BA1AC;  /* вторичный · 7.38:1 */
  --frost:       #BFC7D2;  /* холодный светлый: кикеры, база H1, mono-метки · 11.24:1 */
  --gold:        #D9B36C;  /* акцент ≤3% площади · ТОЛЬКО CTA + точечные mono-метки · 9.69:1 */
  --gold-deep:   #C9A35C;  /* hover CTA · 8.1:1 */
  --green:       #7FB894;  /* dataviz «плюс» · 7.77:1 */
  --paper:       #F2F4F7;  /* холодная светлая секция (полный сайт) */
  --paper-ink:   #15171A;
  --line:        rgba(233,235,239,0.10);

  /* шкала ×1.333, база 16 */
  --fs-0: 1rem;        /* 16 body */
  --fs-1: 1.333rem;    /* 21.3 */
  --fs-2: 1.777rem;    /* 28.4 */
  --fs-3: 2.369rem;    /* 37.9 */
  --fs-4: 3.157rem;    /* 50.5 */
  --fs-5: 4.209rem;    /* 67.3 */

  --font-display: "Lora", Georgia, serif;
  --font-body: "Onest", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* одна кривая на сайт */
  --shadow-key: 0 12px 32px -12px rgba(62,111,142,0.22); /* холодная, не чёрная */
  --shadow-amb: 0 1px 2px rgba(62,111,142,0.10);
  --r: 16px;
}

/* ---------- База ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--ink-bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--gold); color:#15171A; }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }
img { max-width:100%; display:block; }
h1,h2,h3 { margin:0; font-family:var(--font-display); color:var(--text-hi); text-wrap:balance; }
p { margin:0; }

.shell { max-width:1240px; margin-inline:auto; padding-inline:24px; }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#15171A; padding:8px 16px; border-radius:0 0 8px 0;
  font-weight:600; text-decoration:none;
}
.skip-link:focus-visible { left:0; }

/* ---------- Шапка ---------- */
.site-header {
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line);
}
/* blur на псевдоэлементе: backdrop-filter на самом header сделал бы его
   containing block для fixed-панели мобильного меню */
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(14,15,18,0.86);
  backdrop-filter:blur(14px);
}
.header-row { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text-hi); }
.brand-mark {
  display:grid; place-items:center; width:36px; height:36px; border-radius:8px;
  background:linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
  color:#15171A; font-family:var(--font-display); font-weight:700; font-size:19px;
}
.brand-name { font-family:var(--font-body); font-weight:700; font-size:17px; letter-spacing:0.01em; }
.brand-name em { font-style:normal; color:var(--frost); }

.site-nav { display:flex; align-items:center; gap:32px; }
.nav-list { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-list a {
  color:var(--muted); text-decoration:none; font-size:15px; font-weight:500;
  transition:color .3s var(--ease);
}
.nav-list a:hover { color:var(--text-hi); }
.btn-ghost {
  color:var(--text-hi); text-decoration:none; font-weight:600; font-size:15px;
  padding:12px 24px; border-radius:999px; background:var(--ink-raise);
  transition:background .3s var(--ease);
}
.btn-ghost:hover { background:#242833; }

.burger {
  display:none; position:relative; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:0;
}
.burger-line {
  position:absolute; left:10px; width:24px; height:2px; background:var(--text-hi);
  transition:transform .4s var(--ease), top .4s var(--ease);
}
.burger-line:nth-child(1) { top:18px; }
.burger-line:nth-child(2) { top:26px; }
.burger[aria-expanded="true"] .burger-line:nth-child(1) { top:22px; transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger-line:nth-child(2) { top:22px; transform:rotate(-45deg); }

/* ---------- Kicker ---------- */
.kicker {
  font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--frost); margin-bottom:24px;
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding-block:96px 104px; }
.hero::before { /* холодная виньетка сцены, 2–4% */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 78% 30%, rgba(62,111,142,0.10) 0%, rgba(14,15,18,0) 55%);
}
.hero-grid {
  position:relative;
  display:grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr);
  gap:64px; align-items:center;
}
.hero-copy h1 {
  font-size:clamp(2.35rem, 4.6vw, var(--fs-5));
  font-weight:600; line-height:1.08; letter-spacing:-0.015em;
  color:var(--frost); /* база H1 — холодный светлый; акцент выносится светлотой, не теплом */
}
.h1-accent { color:var(--text-hi); }
.lead {
  margin-top:28px; max-width:34em;
  font-size:var(--fs-1); line-height:1.5; color:var(--muted);
}
.hero-cta { margin-top:40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.btn-gold {
  display:inline-flex; align-items:center; gap:14px;
  background:var(--gold); color:#15171A; text-decoration:none;
  font-weight:700; font-size:17px;
  padding:8px 8px 8px 28px; border-radius:999px;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.btn-gold:hover { background:var(--gold-deep); }
.btn-gold:active { transform:scale(0.98); }
.btn-orb {
  display:grid; place-items:center; width:40px; height:40px; border-radius:999px;
  background:rgba(14,15,18,0.16); font-size:18px;
  transition:transform .35s var(--ease);
}
.btn-gold:hover .btn-orb { transform:translateX(3px); }
.cta-note { max-width:21em; font-size:14px; line-height:1.5; color:var(--muted); }

.hero-facts {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  list-style:none; margin:56px 0 0; padding:32px 0 0;
  border-top:1px solid var(--line);
}
.hero-facts li { display:flex; align-items:baseline; gap:12px; }
.fact-num {
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-2);
  color:var(--text-hi); font-variant-numeric:tabular-nums; line-height:1;
}
.fact-text { font-size:14px; line-height:1.45; color:var(--muted); }

/* Сцена: слот + терминал */
.hero-stage { position:relative; min-height:600px; }
.scene-slot {
  position:relative; margin:0; overflow:hidden;
  width:min(84%, 420px); aspect-ratio:4/5;
  border-radius:var(--r);
  background:linear-gradient(168deg, #1B1E25 0%, #121419 62%, #101116 100%);
  box-shadow:var(--shadow-amb), var(--shadow-key);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.scene-glow { /* единственное свечение сайта — холодный свет сцены (тепло живёт внутри будущего кадра, не в CSS-заливке) */
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 55% at 32% 22%, rgba(148,176,199,0.14) 0%, rgba(148,176,199,0) 62%);
}
.scene-body { position:relative; padding:32px 32px 12px; max-width:88%; }
.scene-tag {
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--frost); margin-bottom:12px;
}
.scene-title { font-family:var(--font-display); font-weight:600; font-size:var(--fs-1); color:var(--text-hi); line-height:1.25; }
.scene-desc { margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }
.scene-caption {
  position:relative; padding:16px 32px 24px;
  font-size:12px; color:var(--muted); letter-spacing:0.02em;
}
.scene-caption::before { content:""; display:block; width:40px; height:1px; background:var(--frost); opacity:.5; margin-bottom:8px; }

.terminal {
  position:absolute; right:0; bottom:-32px;
  width:min(82%, 400px);
  background:var(--ink-raise);
  border-radius:var(--r);
  box-shadow:var(--shadow-amb), var(--shadow-key);
  padding:24px;
}
.terminal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.terminal-title { font-size:13px; font-weight:600; color:var(--text-hi); letter-spacing:0.02em; }
.flag {
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}
.flag-ok { background:rgba(127,184,148,0.14); color:var(--green); }
.kpi-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.kpi-label { display:block; font-size:11px; color:var(--muted); letter-spacing:0.04em; margin-bottom:8px; }
.kpi-value {
  font-family:var(--font-mono); font-weight:500; font-size:15px;
  color:var(--text-hi); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kpi-value.plus, .plus { color:var(--green); }
.dds-rows { list-style:none; margin:0; padding:0; }
.dds-rows li {
  display:flex; align-items:baseline; gap:12px;
  padding:8px 0; border-top:1px solid var(--line);
  font-size:14px;
}
.dds-rows span { color:var(--muted); }
.dds-rows i { flex:1; border-bottom:1px dotted rgba(233,235,239,0.16); transform:translateY(-4px); }
.dds-rows b { font-family:var(--font-mono); font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dds-exc b { color:var(--gold); }
.terminal-note { margin-top:16px; font-size:11px; color:var(--muted); }

/* ---------- Секция ДДС ---------- */
.dds {
  position:relative; padding-block:112px 120px;
  background:linear-gradient(180deg, var(--ink-bg) 0%, #121419 18%, #121419 82%, var(--ink-bg) 100%);
}
.section-head { max-width:720px; }
.section-head h2 { font-size:clamp(1.9rem, 3.4vw, var(--fs-4)); font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
.section-lead { margin-top:24px; font-size:var(--fs-0); line-height:1.6; color:var(--muted); max-width:40em; }

.formula {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 20px;
  margin-top:64px; padding:40px 40px;
  background:var(--ink-surface); border-radius:var(--r);
  box-shadow:var(--shadow-amb);
  font-family:var(--font-mono);
}
.f-part { font-size:clamp(15px, 1.7vw, 21px); color:var(--text); font-weight:400; }
.f-op { font-size:clamp(17px, 1.9vw, 24px); color:var(--muted); }
.f-eq { color:var(--gold); font-weight:500; }
.f-res { color:var(--text-hi); font-weight:500; }
.formula-note { margin-top:16px; font-size:14px; color:var(--muted); }

.dds-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:64px; }
.card {
  background:var(--ink-surface); border-radius:var(--r);
  padding:32px 28px 36px;
  box-shadow:var(--shadow-amb);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-amb), var(--shadow-key); }
.card-idx {
  font-family:var(--font-mono); font-size:12px; color:var(--gold);
  letter-spacing:0.08em;
}
.card h3 { font-size:var(--fs-1); font-weight:600; line-height:1.25; margin-top:16px; }
.card p { margin-top:16px; font-size:15px; line-height:1.55; color:var(--muted); }

.roadmap {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:64px; padding-top:32px; border-top:1px solid var(--line);
}
.rm-now { /* нейтральный светлый чип — золото зарезервировано за CTA */
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  color:#15171A; background:var(--text); padding:8px 16px; border-radius:999px; font-weight:500;
}
.rm-sep { width:40px; height:1px; background:var(--line); }
.rm-next {
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  color:var(--muted); background:var(--ink-surface); padding:8px 16px; border-radius:999px;
}

/* ---------- Подвал ---------- */
.site-footer { border-top:1px solid var(--line); padding-block:32px; }
.footer-row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-motto { font-family:var(--font-display); font-size:var(--fs-1); color:var(--text-hi); }
.footer-link { color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.footer-link:hover { color:var(--text-hi); }

/* ---------- Движение ----------
   Момент 1: единая система reveal (scroll-driven, одна кривая) —
   hero-вход на тех же keyframes = участник той же системы.
   Момент 2: счётчики терминала (script.js, reduced-motion учтён). */
@keyframes rise {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.reveal {
  animation:rise .9s var(--ease) both;
  animation-timeline:view();
  animation-range:entry 0% cover 26%;
}
.hero-copy, .hero-stage { animation:rise .9s var(--ease) both; }
.hero-stage { animation-delay:.08s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal, .hero-copy, .hero-stage { animation:none; }
  .card, .btn-gold, .btn-orb, .burger-line { transition:none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 1023px) {
  .site-nav {
    position:fixed; inset:72px 0 0 0; z-index:39;
    display:none;
    flex-direction:column; align-items:flex-start; gap:8px;
    background:var(--ink-bg);
    padding:40px 24px;
    overflow-y:auto;
  }
  .site-nav.is-open { display:flex; }
  .nav-list { flex-direction:column; gap:8px; width:100%; }
  .nav-list a { display:block; font-size:var(--fs-2); font-family:var(--font-display); color:var(--text-hi); padding:8px 0; }
  .nav-login { margin-top:24px; font-size:17px; }
  .burger { display:block; }
}

@media (max-width: 900px) {
  .hero { padding-block:64px 72px; }
  .hero-grid { grid-template-columns:1fr; gap:56px; }
  .hero-stage { min-height:0; padding-bottom:48px; }
  .scene-slot { width:min(100%, 420px); aspect-ratio:auto; min-height:300px; }
  .terminal { position:relative; right:auto; bottom:auto; width:100%; margin-top:-40px; margin-left:auto; max-width:440px; }
  .dds { padding-block:80px 88px; }
  .dds-grid { grid-template-columns:1fr; gap:16px; margin-top:48px; }
  .formula { padding:28px 24px; margin-top:48px; }
}

@media (max-width: 480px) {
  .shell { padding-inline:16px; }
  .hero-facts { grid-template-columns:1fr; gap:16px; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .footer-row { flex-direction:column; align-items:flex-start; }
}