/* ==========================================================================
   Общие стили Kaskadr — единый источник оформления для страниц сайта.
   Раньше стили жили внутри каждой страницы; теперь один файл на всё.
   ========================================================================== */
:root { color-scheme: dark; --blue:#2E6CF6; --green:#16a34a; --amber:#f59e0b;
  --bg:#0b1220; --card:#101a30; --brd:#22304e; --tx:#e7edf7; --mut:#93a1bd; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--tx); background:var(--bg); line-height:1.6; }
a { color:var(--blue); }
.wrap { max-width:1040px; margin:0 auto; padding:0 18px; }

/* Шапка */
header { position:sticky; top:0; z-index:20; backdrop-filter:blur(8px);
  background:rgba(11,18,32,.82); border-bottom:1px solid var(--brd); }
.nav { display:flex; align-items:center; gap:14px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px;
  text-decoration:none; color:var(--tx); }
.brand img { width:30px; height:30px; border-radius:7px; }
.nav .links { margin-left:auto; display:flex; gap:20px; align-items:center; }
.nav .links a { color:var(--mut); text-decoration:none; font-size:14.5px; }
.nav .links a:hover { color:var(--tx); }

/* Кнопки */
.btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:#fff;
  background:var(--blue); border-radius:11px; padding:12px 18px; font-weight:650;
  font-size:15.5px; border:0; cursor:pointer; }
.btn.green { background:var(--green); }
.btn.ghost { background:transparent; border:1px solid var(--brd); color:var(--tx); }
.btn:hover { filter:brightness(1.08); }

/* Типографика */
h1 { font-size:clamp(28px,5vw,44px); line-height:1.1; margin:0 0 16px; letter-spacing:-.5px; }
h2 { font-size:clamp(22px,3.4vw,30px); margin:34px 0 10px; letter-spacing:-.3px; }
h3 { font-size:18px; margin:22px 0 8px; }
.lead { color:var(--mut); font-size:18px; max-width:680px; }
.card { background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:20px; }
footer { border-top:1px solid var(--brd); padding:30px 0; color:var(--mut); font-size:13px; margin-top:40px; }
footer b { color:var(--tx); }

/* ---- Документ (инструкция): оглавление слева + текст ---- */
.doc { display:grid; grid-template-columns:230px 1fr; gap:36px; padding:34px 0; align-items:start; }
.toc { position:sticky; top:78px; font-size:14px; }
.toc a { display:block; color:var(--mut); text-decoration:none; padding:5px 0; border-left:2px solid transparent; padding-left:12px; }
.toc a:hover { color:var(--tx); }
.toc a.on { color:var(--tx); border-left-color:var(--blue); }
.doc-body { max-width:720px; }
.doc-body p, .doc-body li { color:#d6def0; }
.doc-body h2 { scroll-margin-top:74px; }
.doc-body ol, .doc-body ul { padding-left:22px; }
.doc-body li { margin:7px 0; }
.step-num { display:inline-flex; width:24px; height:24px; border-radius:50%; background:#16233f;
  border:1px solid var(--brd); align-items:center; justify-content:center; font-size:13px;
  font-weight:700; margin-right:8px; }
.note { background:#16233f; border:1px solid var(--brd); border-left:3px solid var(--blue);
  border-radius:10px; padding:12px 16px; margin:16px 0; font-size:14.5px; color:#cfe0ff; }
.note.soon { border-left-color:var(--amber); color:#ffe6bd; }
kbd { background:#0c1526; border:1px solid var(--brd); border-radius:6px; padding:1px 7px;
  font-family:inherit; font-size:13px; }
.pill { display:inline-block; font-size:12px; font-weight:700; border-radius:6px;
  padding:2px 9px; margin-right:6px; }
.pill.pc { background:#16233f; color:#9ec1ff; }
.pill.phone { background:#0f2a1c; color:#8ff0bd; }

/* ---- Презентация (веб): крупные секции-«слайды» ---- */
.slide { min-height:auto; padding:60px 0; border-bottom:1px solid var(--brd); }
.slide.hero { padding:80px 0 60px; }
.kicker { color:var(--amber); font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  font-size:13px; margin-bottom:12px; }
.big { font-size:clamp(30px,5.5vw,52px); font-weight:800; line-height:1.08; letter-spacing:-.6px; margin:0 0 18px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.stat { text-align:center; }
.stat b { display:block; font-size:40px; font-weight:800; color:var(--blue); letter-spacing:-1px; }
.stat span { color:var(--mut); font-size:14px; }
.ic { font-size:28px; }
.center { text-align:center; }

@media (max-width:820px){
  .doc { grid-template-columns:1fr; }
  .toc { position:static; margin-bottom:20px; }
  .two,.grid3,.grid2 { grid-template-columns:1fr; }
  .nav .links a:not(.btn){ display:none; }
}

/* ---- Окно оплаты ---- */
.modal { display:none; position:fixed; inset:0; z-index:100; background:rgba(6,10,20,.72);
  backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:20px; }
.modal-box { position:relative; width:100%; max-width:420px; background:var(--card);
  border:1px solid var(--brd); border-radius:16px; padding:26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); max-height:92vh; overflow:auto; }
.modal-x { position:absolute; top:10px; right:12px; background:none; border:0;
  color:var(--mut); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; }
.modal-x:hover { color:var(--tx); }
.fld { display:block; font-size:14px; color:var(--mut); margin-bottom:14px; }
.fld input { display:block; width:100%; margin-top:6px; padding:11px 13px;
  background:var(--bg); border:1px solid var(--brd); border-radius:10px;
  color:var(--tx); font:inherit; font-size:15px; box-sizing:border-box; }
.fld input:focus { outline:none; border-color:var(--blue); }
.agree { display:flex; gap:10px; align-items:flex-start; font-size:13.5px;
  color:var(--mut); margin:4px 0 16px; cursor:pointer; }
.agree input { margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--blue); }
.pay-err { display:none; background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.4);
  color:#fca5a5; border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:14px; }
.btn:disabled { opacity:.6; cursor:default; }