/* Пути рынка ЦФА — дизайн-система в духе systemlands.quest:
   тёплая нейтральная палитра, тихая типографика, карточки на 1px-линиях. */

:root {
  --bg: #151515;
  --fg: #d6d6d6;
  --muted: #8c8c8c;
  --line: #2f2f2f;
  --subtle: #222;
  --card: rgba(27, 27, 27, 0.78);
  --danger: #ff6b5e;
  --ok: #4ade80;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --radius: 10px;
}
html[data-theme="light"] {
  --bg: #f1f1ef;
  --fg: #262626;
  --muted: #6e6e6e;
  --line: #d9d9d6;
  --subtle: #e7e7e4;
  --card: rgba(247, 247, 245, 0.78);
  --danger: #c4261b;
  /* A11y 1.4.3: #15803d давал 4.43:1 на #f1f1ef (ниже 4.5) — ключи зелёных вердиктов;
     #137333 даёт 5.26:1 */
  --ok: #137333;
}

/* A11y 1.4.3 — тема light: контраст фирменных цветов на тексте. Рамки/точки остаются
   на var(--pc)/var(--rc), темнеет только текст (замер: все 6 цветов персон ≥4.83:1 на
   #f1f1ef и ≥5.05:1 на #f6f6f4 при доле 40%; реестры ≥5.86:1 при 45% на light). */
html[data-theme="light"] .step-case .case-label { color: #5a5a5a; } /* 5.57:1 на #e7e7e4 */
html[data-theme="light"] .rail-idx,
html[data-theme="light"] .step.is-active .step-n { color: color-mix(in srgb, var(--pc, var(--fg)) 40%, #262626); }
html[data-theme="light"] .ac-abbr { color: color-mix(in srgb, var(--rc, var(--fg)) 45%, #262626); }
html[data-theme="dark"] .ac-abbr { color: color-mix(in srgb, var(--rc, var(--fg)) 60%, #d6d6d6); } /* ≥5.22:1 на #1a1a1a */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Без глобального scroll-behavior:smooth (QA wave-3): плавная прокрутка всей страницы
   гоняла анимации хеш-навигации наперегонки с клавиатурным скроллом — PageDown улетал
   вверх (−3545 px в воспроизведении) и терял якорь (переход #timeline не срабатывал).
   Плавность там, где она задумана, задаёт код: app.js rail-tick → scrollIntoView({behavior:"smooth"}). */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* фон-канвас: тихий граф */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

main { position: relative; z-index: 2; }

/* прогресс скролла */
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: transparent; }
#progress-bar { height: 100%; width: 0%; background: var(--fg); opacity: 0.45; transition: width 0.1s linear; }

/* верхняя панель */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.12em;
  color: var(--fg); text-decoration: none;
}
.brand span { color: var(--muted); }
.topnav { display: flex; gap: 2px; flex: 1; margin-left: 6px; }
.topnav a {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: 6px; transition: color 0.15s;
}
.topnav a:hover { color: var(--fg); }
.controls { display: flex; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg);
  background: transparent; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--muted); }
.chip.is-on { border-color: var(--fg); color: var(--fg); }

/* типографика секций */
.kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; }
h2 { font-size: clamp(21px, 2.6vw, 30px); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.lead { color: var(--muted); font-size: 15.5px; max-width: 640px; }
.section-head { max-width: 920px; margin: 0 auto; padding: 0 24px 36px; }
.section-head .lead { margin-top: 10px; }
.footnote { font-family: var(--mono); font-size: 11px; color: var(--muted); max-width: 920px; margin: 18px auto 0; padding: 0 24px; }

/* герой */
.hero { min-height: 92vh; display: flex; align-items: center; }
.hero-inner { max-width: 920px; margin: 0 auto; padding: 140px 24px 80px; width: 100%; }
.hero .lead { margin: 18px 0 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--bg); background: var(--fg); border: 1px solid var(--fg);
  border-radius: 8px; padding: 10px 18px; text-decoration: none; cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn-ghost { color: var(--fg); background: transparent; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); opacity: 1; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero-stat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hero-stat b { color: var(--fg); font-weight: 600; margin-right: 6px; }

/* земли */
.lands { padding: 110px 0 60px; }
.lands-grid {
  max-width: 920px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px;
}
.land-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 16px; text-decoration: none; color: var(--fg); display: block;
  transition: border-color 0.15s;
}
.land-card:hover { border-color: var(--pc, var(--muted)); }
.land-card .lc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.land-card .lc-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.land-card .lc-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--pc); flex: none; }
.land-card h3 { font-size: 15.5px; }
.land-card p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.land-card .lc-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 12px; }

/* главы-сценарии */
.chapter { padding: 90px 0 40px; border-top: 1px solid var(--line); }
.chapter-grid {
  max-width: 920px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px;
  align-items: start;
}
.chapter-rail { position: sticky; top: 78px; }
.rail-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.chapter-rail h2 { font-size: 22px; }
.rail-summary { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.rail-now { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.rail-idx { font-family: var(--mono); font-size: 11px; color: var(--pc); letter-spacing: 0.1em; text-transform: uppercase; }
.rail-q { font-size: 14px; font-weight: 500; margin-top: 6px; min-height: 3em; }
.rail-progress { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.rail-tick {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  cursor: pointer; background: none; border: none; padding: 0; text-align: left;
}
.rail-tick .t-n {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; flex: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rail-tick.is-active { color: var(--fg); }
.rail-tick.is-active .t-n, .rail-tick.is-done .t-n { background: var(--pc); border-color: var(--pc); color: var(--bg); }
.rail-tick .t-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* шаги */
.chapter-steps { display: flex; flex-direction: column; gap: 40px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; scroll-margin-top: 90px;
  transition: border-color 0.25s;
}
.step.is-active { border-color: var(--pc, var(--fg)); }
.step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.step.is-active .step-n { color: var(--pc); }
.step-q { font-size: 16.5px; font-weight: 600; margin-bottom: 10px; }
.step-body { color: var(--fg); font-size: 14.5px; }
.step-mode { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.step-mode .mode-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 6px;
}
.step-mode p { color: var(--muted); font-size: 13.5px; }
.law {
  display: inline-block; font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; margin-top: 14px;
}
.step-breakfix { margin-top: 16px; display: grid; gap: 8px; }
.bf-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.bf-row span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.bf-row.danger span { color: var(--danger); }
.bf-row.ok span { color: var(--ok); }
.bf-row p { font-size: 13.5px; }
.bf-row.danger p { color: var(--fg); }
.bf-row.ok p { color: var(--fg); }
.step-arsenal {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em;
}

/* финал главы */
.chapter-outro {
  max-width: 920px; margin: 36px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.outro-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.outro-card h3 { font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.outro-card.warn h3 { color: var(--danger); }
.outro-card.finish h3 { color: var(--ok); }
.outro-card ul { list-style: none; }
.outro-card li { color: var(--fg); font-size: 13.5px; padding: 5px 0 5px 16px; position: relative; }
.outro-card.warn li::before { content: "—"; position: absolute; left: 0; color: var(--danger); }
.outro-card.finish p { color: var(--fg); font-size: 13.5px; }

/* арсенал */
.arsenal { padding: 110px 0 60px; border-top: 1px solid var(--line); }
.arsenal-grid {
  max-width: 920px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
.arsenal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: border-color 0.15s; }
.arsenal-card:hover { border-color: var(--rc, var(--muted)); }
.arsenal-card .ac-abbr { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--rc, var(--fg)); }
.arsenal-card h3 { font-size: 13.5px; margin-top: 8px; font-weight: 500; }
.arsenal-card p { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.arsenal-card .ac-count { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 12px; display: block; }
.arsenal-platforms {
  max-width: 920px; margin: 14px auto 0; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pl-chip {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}

/* страны */
.countries { padding: 90px 0 60px; border-top: 1px solid var(--line); }
.country-list { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.country-row {
  display: grid; grid-template-columns: 34px 1fr 90px minmax(0, 2fr); gap: 14px; align-items: center;
  padding: 13px 10px; border-bottom: 1px solid var(--line);
  cursor: default; transition: background 0.15s;
}
.country-row:hover { background: var(--subtle); }
.country-row .c-flag { font-size: 17px; }
.country-row h3 { font-size: 14px; font-weight: 600; }
.country-row .c-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.country-row p { color: var(--muted); font-size: 12.5px; }

/* финал */
.outro { padding: 110px 24px 40px; text-align: center; border-top: 1px solid var(--line); }
.outro .lead { margin: 12px auto 28px; }
.outro .hero-actions { justify-content: center; }
.footer { max-width: 720px; margin: 80px auto 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.footer p + p { margin-top: 8px; }

/* появление и счётчики */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* мобильная раскладка */
@media (max-width: 860px) {
  .topnav { display: none; }
  .chapter-grid { grid-template-columns: 1fr; gap: 22px; }
  .chapter-rail { position: static; }
  .rail-progress { flex-direction: row; flex-wrap: wrap; }
  .rail-tick .t-title { display: none; }
  .chapter-outro { grid-template-columns: 1fr; }
  .country-row { grid-template-columns: 30px 1fr 70px; }
  .country-row p { display: none; }
  .section-head, .lands-grid, .arsenal-grid, .arsenal-platforms, .footnote, .country-list, .chapter-grid, .chapter-outro { padding-left: 20px; padding-right: 20px; }
}

#local-badge {
  position: fixed; bottom: 12px; right: 12px; z-index: 95;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; pointer-events: none;
}