
:root {
  --navy: #000c2d; --navy2: #141f3d; --navy3: #122457;
  --blue: #366fb7; --blue2: #0473ff; --blue-light: #eaf6ff;
  --muted: rgba(255,255,255,0.78); --border: rgba(255,255,255,0.12);
  --bg: var(--navy); --card: var(--navy2); --text: #ffffff;
  --header-grad: linear-gradient(180deg,#0a1430,var(--navy));
}
/* Светлая тема */
body.light {
  --navy: #f4f7fb; --navy2: #ffffff; --navy3: #e8eff8;
  --blue: #2a6bc0; --blue2: #0473ff; --blue-light: #0d3a7a;
  --muted: #5a6b85; --border: #dde5f0;
  --bg: #f4f7fb; --card: #ffffff; --text: #000c2d;
  --header-grad: linear-gradient(180deg,#ffffff,#f4f7fb);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:hidden; max-width:100vw; }
body { background:var(--bg); color:var(--text); font-family:'Manrope',Arial,sans-serif; line-height:1.6; -webkit-text-size-adjust:100%; transition:background .3s, color .3s; }
img { max-width:100%; }
a { color:var(--blue2); text-decoration:none; }

/* Header */
header.site { position:sticky; top:0; z-index:100; background:var(--header-grad); border-bottom:1px solid var(--border); }
.hrow { display:flex; align-items:center; justify-content:space-between; padding:10px 20px; gap:14px; }
.hlogo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; white-space:nowrap; flex-shrink:0; }
.hlogo img { height:26px; }
body.light .hlogo img { filter:brightness(0); }
.hlogo a { color:#fff; }
body.light .hlogo a { color:var(--text); }
.hlinks { display:flex; gap:18px; align-items:center; }
.hlinks a { color:rgba(255,255,255,0.8); font-size:14px; font-weight:500; white-space:nowrap; }
body.light .hlinks a { color:#3a4a66; }
body.light .hlinks a.btn-demo { color:#fff; }
.hlinks a:hover { color:#fff; }
.btn-demo { background:var(--blue2); color:#fff !important; border-radius:10px; padding:9px 20px; font-weight:700 !important; }
.btn-demo:hover { background:#001b9b; }
.burger { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* Anchor nav */
nav.anchors { position:sticky; top:56px; z-index:99; background:rgba(0,12,45,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
body.light nav.anchors { background:rgba(244,247,251,0.94); }
nav.anchors .inner { display:flex; gap:6px; overflow-x:auto; padding:8px 16px; max-width:1100px; margin:0 auto; }
nav.anchors a { flex-shrink:0; padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600; color:var(--muted); border:1px solid transparent; }
nav.anchors a:hover, nav.anchors a.active { color:#fff; border-color:var(--blue); background:rgba(54,111,183,0.15); }

main { max-width:1100px; margin:0 auto; padding:0 20px 60px; }
section { padding:56px 0 8px; }
section[id] { scroll-margin-top:120px; }
h1 { font-size:36px; font-weight:800; line-height:1.25; letter-spacing:-0.5px; }
h2 { font-size:26px; font-weight:800; margin-bottom:10px; }
.sub { color:var(--muted); font-size:16px; max-width:720px; margin-bottom:24px; }

/* Hero */
.hero { padding:56px 0 30px; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center; }
.hero-sub { font-size:17px; color:var(--muted); margin:14px 0 8px; max-width:560px; }
.hero-note { font-size:14px; color:var(--blue-light); opacity:0.8; margin-bottom:22px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.btn { display:inline-block; background:var(--blue2); color:#fff; border:none; border-radius:12px; padding:14px 30px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn:hover { background:#001b9b; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.35); color:#fff; }
.btn.ghost:hover { background:rgba(255,255,255,0.08); border-color:#fff; }
.hero-adv { display:flex; gap:20px; flex-wrap:wrap; }
.adv { display:flex; gap:10px; align-items:flex-start; max-width:200px; }
.adv .ic { font-size:22px; }
.adv b { display:block; font-size:14px; }
.adv span { font-size:12px; color:var(--muted); }

/* Hero scheme */
.scheme { background:var(--navy2); border:1px solid var(--border); border-radius:16px; padding:22px; }
.scheme svg { width:100%; height:auto; display:block; }
.scheme .hint { text-align:center; font-size:12px; color:var(--muted); margin-top:10px; }

/* Cards */
.grid { display:grid; gap:16px; }
.g3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.g5 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:var(--navy2); border:1px solid var(--border); border-radius:14px; padding:22px; transition:transform .2s, border-color .2s; }
.card:hover { transform:translateY(-3px); border-color:var(--blue); }
.card h3 { font-size:17px; margin-bottom:8px; }
.card p { font-size:14px; color:var(--muted); }
.card .ic { font-size:28px; margin-bottom:12px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:26px 0; counter-reset:step; }
.step { background:var(--navy2); border:1px solid var(--border); border-radius:14px; padding:18px 16px; position:relative; counter-increment:step; }
.step::before { content:counter(step); position:absolute; top:-12px; left:14px; width:26px; height:26px; border-radius:50%; background:var(--blue2); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.step h4 { font-size:14px; margin:6px 0 6px; }
.step p { font-size:12.5px; color:var(--muted); }

/* Roles */
.role-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.role-tab { padding:10px 18px; border-radius:10px; background:var(--navy2); border:1px solid var(--border); color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; }
.role-tab.active { background:var(--blue2); color:#fff; border-color:var(--blue2); }
.role-box { background:var(--navy2); border:1px solid var(--border); border-radius:14px; padding:26px; min-height:120px; }
.role-box b { color:#fff; font-size:17px; display:block; margin-bottom:8px; }
.role-box p { color:var(--muted); font-size:15px; }

/* Programs */
.prog { background:var(--navy2); border:1px solid var(--border); border-radius:14px; padding:22px; }
.prog h3 { font-size:18px; margin-bottom:10px; }
.prog p { font-size:14px; color:var(--muted); margin-bottom:14px; }
.prog .open-btn { background:none; border:1px solid var(--blue); color:var(--blue-light); border-radius:10px; padding:10px 18px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; width:100%; }
.prog .det { display:none; margin-top:14px; border-top:1px solid var(--border); padding-top:14px; }
.prog .det.open { display:block; }
.prog .det dl { display:grid; grid-template-columns:120px 1fr; gap:6px 12px; font-size:13px; }
.prog .det dt { color:var(--blue); font-weight:700; }
.prog .det dd { color:var(--muted); }

/* Timeline */
.timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.tl { background:var(--navy2); border:1px solid var(--border); border-radius:14px; padding:20px; position:relative; }
.tl .ph { display:inline-block; background:rgba(54,111,183,0.2); color:var(--blue-light); border-radius:20px; padding:4px 14px; font-size:12px; font-weight:800; margin-bottom:12px; }
.tl ul { list-style:none; }
.tl li { font-size:13.5px; color:var(--muted); padding:4px 0 4px 18px; position:relative; }
.tl li::before { content:'—'; position:absolute; left:0; color:var(--blue); }
.notice { background:rgba(54,111,183,0.12); border:1px solid rgba(54,111,183,0.4); border-radius:12px; padding:14px 20px; font-size:14px; color:var(--blue-light); margin:18px 0; }

/* FAQ accordion */
.faq { border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%; text-align:left; background:var(--navy2); color:#fff; border:none; padding:16px 20px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; justify-content:space-between; gap:12px; }
.faq-q::after { content:'+'; color:var(--blue); font-size:20px; flex-shrink:0; }
.faq-item.open .faq-q::after { content:'−'; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s; }
.faq-item.open .faq-a { max-height:400px; }
.faq-a div { padding:0 20px 16px; font-size:14px; color:var(--muted); }

/* Pricing */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; }
.price { background:var(--navy2); border:1px solid var(--border); border-radius:16px; padding:26px; }
.price h3 { font-size:20px; margin-bottom:6px; }
.price .cost { font-size:24px; font-weight:800; color:var(--blue-light); margin-bottom:14px; }
.price ul { list-style:none; margin-bottom:18px; }
.price li { font-size:14px; color:var(--muted); padding:4px 0 4px 18px; position:relative; }
.price li::before { content:'—'; position:absolute; left:0; color:var(--blue); }
.price .btn { width:100%; }
.small-note { font-size:12.5px; color:var(--muted); margin-top:14px; }

/* Form */
.form-section { background:linear-gradient(160deg,var(--navy3),#1a3a75); border:1px solid rgba(54,111,183,0.35); border-radius:18px; padding:36px; margin-top:40px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-field { margin-bottom:4px; }
.f-field.full { grid-column:1/-1; }
.f-field label { display:block; font-size:13px; font-weight:600; color:var(--blue-light); margin-bottom:5px; }
.f-field label em { color:#e74c3c; font-style:normal; }
.f-field input, .f-field select, .f-field textarea { width:100%; background:var(--navy); border:1px solid var(--border); border-radius:10px; padding:11px 14px; color:#fff; font-size:14px; font-family:inherit; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-color:var(--blue); outline:none; }
.f-field textarea { min-height:80px; resize:vertical; }
.f-check { grid-column:1/-1; display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); }
.f-check input { margin-top:3px; flex-shrink:0; }
.f-error { grid-column:1/-1; color:#ff7675; font-size:13px; display:none; }
.form-ok { text-align:center; padding:30px 10px; display:none; }
.form-ok h3 { color:#2ecc71; margin-bottom:10px; }

/* Footer */
footer { border-top:1px solid var(--border); margin-top:50px; padding:26px 0; text-align:center; font-size:13px; color:var(--muted); }
footer a { color:var(--muted); }
footer a:hover { color:#fff; }

/* Bion widget */
.bion-fab { position:fixed; right:18px; bottom:18px; z-index:120; }
.bion-btn { background:var(--blue2); border:none; border-radius:50px; padding:14px 22px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 10px 30px rgba(4,115,255,0.4); }
.bion-pop { position:fixed; right:18px; bottom:78px; width:320px; max-width:calc(100vw - 36px); background:var(--navy2); border:1px solid var(--border); border-radius:16px; padding:20px; z-index:121; display:none; }
.bion-pop.open { display:block; }
.bion-pop h4 { font-size:16px; margin-bottom:4px; }
.bion-pop .who { font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.bion-pop .qq { display:block; width:100%; text-align:left; background:var(--navy); border:1px solid var(--border); border-radius:10px; color:var(--blue-light); font-size:13px; padding:9px 12px; margin-bottom:7px; cursor:pointer; font-family:inherit; }
.bion-pop .qq:hover { border-color:var(--blue); }
.bion-pop .row { display:flex; gap:8px; margin-top:12px; }
.bion-pop .row a { flex:1; text-align:center; border-radius:10px; padding:10px 6px; font-size:13px; font-weight:700; }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:300; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open { display:flex; }
.modal-box { background:var(--navy2); border:1px solid var(--border); border-radius:16px; padding:30px; width:100%; max-width:520px; position:relative; }
.modal-box h3 { margin-bottom:12px; }
.modal-box p { color:var(--muted); font-size:15px; line-height:1.7; }
.modal-x { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--muted); font-size:24px; cursor:pointer; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .timeline { grid-template-columns:1fr; }
  .price-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  h1 { font-size:26px; }
  h2 { font-size:21px; }
  .burger { display:block; }
  .hlinks a:not(.btn-demo) { display:none; }
  .hlinks.open a:not(.btn-demo) { display:block; position:absolute; top:52px; right:14px; background:var(--navy2); padding:12px 20px; border:1px solid var(--border); border-radius:10px; }
}

/* ===== Светлая тема: адаптация компонентов ===== */
body.light .hero-sub, body.light .hero-note { color:#4a5b78; }
body.light .card p, body.light .tl li, body.light .price li, body.light .prog p, body.light .role-box p, body.light .small-note { color:#5a6b85; }
body.light .step p { color:#5a6b85; }
body.light .btn.ghost { border-color:#b8c6dd; color:#0a3a8c; }
body.light .btn.ghost:hover { background:rgba(4,115,255,0.08); border-color:var(--blue2); }
body.light .notice { background:rgba(4,115,255,0.07); border-color:rgba(42,107,192,0.35); color:#0d3a7a; }
body.light .scheme { background:#ffffff; border-color:#dde5f0; }
body.light .scheme .hint { color:#5a6b85; }
body.light .scheme rect[fill="#122457"], body.light .scheme rect[fill="#141f3d"], body.light .scheme rect[fill="#000c2d"] { fill:#e8eff8; }
body.light .scheme text[fill="#fff"] { fill:#000c2d; }
body.light .scheme text[fill="#a0b0c8"] { fill:#5a6b85; }
body.light .scheme rect[stroke="#366fb7"] { stroke:#9db8dd; }
body.light .scheme rect[stroke="#0473ff"] { stroke:#0473ff; }
body.light .scheme path[stroke="#366fb7"], body.light .scheme line[stroke="#366fb7"] { stroke:#7a94bd; }
body.light .faq-q { background:#ffffff; color:#000c2d; }
body.light .role-tab { background:#ffffff; color:#3a4a66; }
body.light .form-section { background:linear-gradient(160deg,#e8eff8,#d6e4f5); border-color:#c3d4ea; }
body.light .f-field label { color:#0d3a7a; }
body.light .f-field input, body.light .f-field select, body.light .f-field textarea { background:#ffffff; color:#000c2d; border-color:#c3d4ea; }
body.light .bion-pop { background:#ffffff; }
body.light .bion-pop .qq { background:#f0f5fb; color:#0d3a7a; }
body.light .bion-pop .who { color:#5a6b85; }
body.light .bion-pop .row a:last-child { color:#3a4a66; border-color:#c3d4ea; }
body.light .modal-box { background:#ffffff; }
body.light .modal-box p { color:#5a6b85; }
body.light .modal { background:rgba(10,20,40,0.5); }
body.light footer { color:#7a8aa5; }
body.light .form-ok p { color:#5a6b85; }
body.light .prog .det dt { color:var(--blue); }
body.light .prog .det dd { color:#5a6b85; }
body.light .tl .ph { background:rgba(42,107,192,0.12); color:#0d3a7a; }
body.light .price .cost { color:#0a3a8c; }
body.light .price p { color:#5a6b85; }
body.light .f-error { color:#c0392b; }
body.light .faq-a div { color:#5a6b85; }
/* --- Fix: hardcoded white text / dark backgrounds in light theme --- */
body.light nav.anchors a:hover, body.light nav.anchors a.active { color:#0d3a7a; border-color:var(--blue); background:rgba(54,111,183,0.15); }
body.light .role-box b { color:#000c2d; }
body.light .burger { color:#000c2d; }
body.light .hlinks a:hover { color:#000c2d; }
body.light footer a:hover { color:#000c2d; }
body.light .faq-q::after { color:var(--blue); }
body.light .prog .open-btn { color:#0a3a8c; border-color:rgba(42,107,192,0.45); background:rgba(42,107,192,0.06); }
body.light .prog .open-btn:hover { background:rgba(42,107,192,0.12); }
body.light .card:hover { border-color:var(--blue); }
body.light .bion-pop h4 { color:#000c2d; }
body.light .modal-box h3 { color:#000c2d; }
body.light .form-ok h3 { color:#1e8e4e; }
body.light .bion-pop .row a:last-child:hover { color:#000c2d; border-color:var(--blue); }


/* ---- */

/* Ссылки в согласии */
.f-check a{color:#7fb4ff;text-decoration:underline;text-underline-offset:2px;}
body.light .f-check a{color:#0457c8;}
.f-check a:hover{color:#ffffff;}
body.light .f-check a:hover{color:#003b8f;}
/* Шапка на узких экранах: элементы не должны выходить за экран */
@media (max-width:560px){
  .hrow{padding:9px 11px;gap:8px;}
  .hlogo{gap:0;}
  .hlogo a{display:none;}          /* на телефоне остаётся только знак */
  .hlogo img{height:24px;}
  .hlinks{gap:8px;}
  .hlinks a.btn-demo{padding:8px 12px;font-size:13px;}
  #themeToggle{padding:6px 9px;font-size:14px;border-radius:8px;}
  .burger{font-size:20px;padding:0;line-height:1;}
}
@media (max-width:360px){
  .hlinks a.btn-demo{padding:8px 10px;font-size:12.5px;}
  #themeToggle{padding:6px 7px;font-size:13px;}
  .burger{font-size:18px;}
}

/* ===== Линия «Образование»: ступени, метрики, навигация раздела ===== */
.line-nav{background:var(--navy2);border-bottom:1px solid var(--border);padding:10px 0}
.line-nav .inner{max-width:1108px;margin:0 auto;padding:0 24px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.line-nav a{font-size:14px;color:var(--muted);text-decoration:none;padding:7px 14px;border-radius:9px;border:1px solid transparent}
.line-nav a:hover{color:var(--text);border-color:var(--border)}
.line-nav a.cur{background:var(--blue2);color:#fff}
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.seg{background:var(--navy2);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.seg:hover{transform:translateY(-3px);border-color:var(--blue)}
.seg .tagline{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:8px}
.seg h3{font-size:19px;margin-bottom:8px}
.seg p{font-size:14px;color:var(--muted);margin-bottom:12px}
.seg ul{list-style:none;margin:0 0 16px;padding:0}
.seg ul li{font-size:13.5px;color:var(--muted);padding:3px 0 3px 16px;position:relative}
.seg ul li::before{content:'—';position:absolute;left:0;color:var(--blue)}
.seg .seg-link{margin-top:auto;font-size:14px;font-weight:700;color:var(--blue-light);text-decoration:none}
.seg .seg-link:hover{color:var(--blue2)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.metric{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:18px}
.metric b{display:block;font-size:15px;margin-bottom:6px;color:var(--text)}
.metric span{font-size:13px;color:var(--muted);line-height:1.5}
.req{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.req .card p{margin-bottom:6px}
.levels{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.levels th,.levels td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted)}
.levels th{color:var(--text);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.levels td:first-child{color:var(--blue);font-weight:700;width:56px}
body.light .seg .seg-link{color:#0a3a8c}
body.light .seg .seg-link:hover{color:var(--blue2)}
body.light .metric b{color:#000c2d}
body.light .levels th{color:#000c2d}
body.light .line-nav{background:#ffffff}
@media (max-width:900px){
  .seg-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .req{grid-template-columns:1fr}
  .levels{font-size:13px}
}
@media (max-width:560px){ .metrics{grid-template-columns:1fr} }

/* четыре шага пилота и двухколоночный список требований */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .steps.four{grid-template-columns:1fr} }

/* правая колонка hero: карточка с фактами */
.scheme.aside h3{font-size:16px;margin-bottom:12px}
.aside-list{list-style:none;margin:0 0 14px;padding:0}
.aside-list li{font-size:14px;color:var(--muted);padding:5px 0 5px 18px;position:relative;line-height:1.45}
.aside-list li::before{content:'—';position:absolute;left:0;color:var(--blue)}
.aside-list li b{color:var(--blue-light);font-size:15px}
body.light .aside-list li b{color:#0a3a8c}
body.light .hero-note{opacity:1;color:#31465f}
body.light .scheme .hint{color:#4a5b78}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:20px} }

.scheme.aside .hint{text-align:left;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
