/* Токены сайта + золотое сечение.
   φ = 1.618. Колонки: 61.8% / 38.2%.
   Шрифт: 16 → 26 → 42 → 68 → 110 (×φ). Отступы: 8 13 21 34 55 89 144 (Фибоначчи). */
:root{
  --bg:#080808;--panel:#111111;--red:#b42b3d;--red-bright:#d33b4d;--white:#f5f3ee;--muted:#8d8b88;--line:#2b2a29;
  --font-head:Oswald,Impact,'Arial Narrow',sans-serif;--font-body:Manrope,Arial,sans-serif;
  --phi:1.618fr;--s1:8px;--s2:13px;--s3:21px;--s4:34px;--s5:55px;--s6:89px;--s7:144px;
  --t0:16px;--t1:26px;--t2:42px;--t3:68px;--t4:110px;--gutter:4.4vw;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font-body);font-size:var(--t0);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}
.noise{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}

/* header (как на сайте) */
.site-header{height:88px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1d;position:absolute;left:0;right:0;z-index:60}
.wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:-.055em;line-height:1}
.mark{color:var(--red-bright);font-family:Arial,sans-serif;font-size:30px;line-height:0}.wordmark-dot{color:var(--red-bright)}
.nav{display:flex;gap:34px}.nav a,.btn-line{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;transition:color .25s}
.nav a:hover{color:var(--red-bright)}.btn-line{border:1px solid #6b6563;padding:13px 16px}

/* общие */
.wrap{padding-inline:var(--gutter);max-width:1600px;margin-inline:auto}
.eyebrow{display:inline-flex;gap:var(--s2);align-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright)}
.eyebrow i{width:var(--s4);height:1px;background:var(--red-bright)}
.section-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:var(--s3);margin-bottom:var(--s5)}
.display{font-family:var(--font-head);text-transform:uppercase;font-weight:600;line-height:.95;margin:0;letter-spacing:-.01em;text-wrap:balance}
.display em{font-style:normal;color:var(--red-bright)}
.phi{display:grid;grid-template-columns:var(--phi) 1fr;gap:var(--s5);align-items:start}
.phi-rev{grid-template-columns:1fr var(--phi)}
section{padding-block:var(--s6)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--red);color:#fff;padding:var(--s3) var(--s4);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .25s;border:0;cursor:pointer}
.btn:hover{background:var(--red-bright)}.btn.ghost{background:transparent;border:1px solid #6b6563}.btn.ghost:hover{border-color:var(--red-bright)}
.muted{color:var(--muted)}

/* 1. HERO — 61.8 / 38.2 */
.hero{padding-top:calc(88px + var(--s6));padding-bottom:var(--s5)}
.hero .display{font-size:clamp(46px,8.2vw,var(--t4));margin:var(--s3) 0 var(--s4)}
.hero-lead{font-size:var(--t1);line-height:1.3;max-width:24ch;margin:0 0 var(--s4);font-weight:500}
.chain{display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:62ch;margin-bottom:var(--s5)}
.chain span:not(:last-child)::after{content:"→";color:var(--red-bright);margin-inline:10px}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);border-bottom:1px solid var(--line);padding:var(--s3) 0}
.fact b{font-family:var(--font-head);font-weight:600;font-size:var(--t3);line-height:1;letter-spacing:-.02em}
.fact span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.fact.accent b{color:var(--red-bright)}
.hero-visual{margin-top:var(--s5);position:relative;border:1px solid var(--line);aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:var(--s3);bottom:var(--s3);background:#080808e6;border:1px solid var(--line);padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* 2. КАК УСТРОЕН — демонстрационная страница-урок */
.lesson-demo{border:1px solid var(--line);background:var(--panel)}
.lesson-demo .pic{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.lesson-demo .pic img{width:100%;height:100%;object-fit:cover}
.lesson-body{padding:var(--s4)}
.lesson-body .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lesson-body h3{font-family:var(--font-head);text-transform:uppercase;font-weight:600;font-size:var(--t1);margin:var(--s1) 0 var(--s2)}
.lesson-body p{margin:0 0 var(--s2);max-width:56ch;color:#d8d5cf}
.lesson-body .key{font-family:var(--font-head);text-transform:uppercase;font-weight:600;font-size:var(--t1);line-height:1.15;color:var(--white);border-left:2px solid var(--red-bright);padding-left:var(--s3);margin-top:var(--s3)}
.how{display:grid;gap:var(--s4);counter-reset:h}
.how li{list-style:none;display:grid;grid-template-columns:var(--s5) 1fr;gap:var(--s2);counter-increment:h}
.how li::before{content:counter(h,decimal-leading-zero);font-family:var(--font-head);font-size:var(--t1);color:var(--red-bright);line-height:1}
.how h4{margin:0 0 4px;font-family:var(--font-head);text-transform:uppercase;font-weight:600;font-size:21px}
.how p{margin:0;color:var(--muted);font-size:15px}
.how{padding:0;margin:0}

/* 3. ПРОГРАММА — 38.2 слева (список этапов) / 61.8 справа (этап) */
.program-grid{display:grid;grid-template-columns:1fr var(--phi);gap:var(--s5);align-items:start}
.stage-list{display:grid;border-top:1px solid var(--line);position:sticky;top:var(--s4)}
.stage-btn{display:grid;grid-template-columns:var(--s5) 1fr auto;gap:var(--s2);align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:var(--s3) var(--s2);cursor:pointer;transition:background .2s}
.stage-btn:hover{background:#ffffff06}
.stage-btn .num{font-family:var(--font-head);font-size:var(--t1);color:var(--muted);line-height:1}
.stage-btn .ttl{font-family:var(--font-head);text-transform:uppercase;font-weight:500;font-size:21px;line-height:1.1}
.stage-btn .cnt{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.stage-btn[aria-selected=true]{background:#ffffff0a;box-shadow:inset 2px 0 0 var(--red-bright)}
.stage-btn[aria-selected=true] .num{color:var(--red-bright)}
.stage-btn:focus-visible{outline:2px solid var(--red-bright);outline-offset:-2px}
.stage-panel{min-width:0}
.stage-cover{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;background:var(--panel);margin-bottom:var(--s4)}
.stage-cover img{width:100%;height:100%;object-fit:cover}
.stage-cover.soon{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#111 0 14px,#0d0d0d 14px 28px)}
.stage-cover.soon span{border:1px dashed #6b6563;padding:var(--s2) var(--s3);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stage-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s2)}
.stage-head h3{font-size:var(--t2);margin:0}
.stage-head .pill{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:6px 12px}
.stage-desc{color:#d8d5cf;max-width:52ch;margin:0 0 var(--s4);font-size:18px}
.lessons{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--s5);border-top:1px solid var(--line)}
.lessons li{break-inside:avoid;display:grid;grid-template-columns:var(--s5) 1fr auto;gap:var(--s2);align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.lessons .n{font-family:var(--font-head);color:var(--muted);font-size:15px}
.lessons .t{font-size:15px}
.lessons .st{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lessons li.open .t{color:var(--white);font-weight:700}
.lessons li.open .st{color:var(--red-bright)}
.lessons li.soon .t{color:#6f6d6a}
.legend{margin-top:var(--s3);font-size:12px;color:var(--muted)}

/* 4. СВЕТОФОР — цитата-тезис */
.thesis{border-block:1px solid var(--line);padding-block:var(--s6)}
.thesis .display{font-size:clamp(34px,6vw,var(--t3));max-width:18ch}
.thesis p{color:var(--muted);max-width:44ch;margin:var(--s3) 0 0}
.lights{display:grid;gap:var(--s2)}
.light{display:grid;grid-template-columns:var(--s4) 1fr;gap:var(--s2);align-items:center;border:1px solid var(--line);background:var(--panel);padding:var(--s2) var(--s3)}
.light i{width:21px;height:21px;border-radius:50%}
.light.g i{background:#3d9b5f}.light.y i{background:#d6a436}.light.r i{background:var(--red-bright)}
.light b{display:block;font-family:var(--font-head);text-transform:uppercase;font-weight:600;font-size:21px}
.light span{font-size:13px;color:var(--muted)}

/* 5. ДАЛЬШЕ — лестница */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{border-right:1px solid var(--line);padding:var(--s3) var(--s3) var(--s4)}
.step:last-child{border-right:0}
.step .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.step h4{font-family:var(--font-head);text-transform:uppercase;font-weight:600;font-size:21px;line-height:1.1;margin:var(--s2) 0}
.step p{margin:0;color:var(--muted);font-size:14px}
.step.now{background:#ffffff08;box-shadow:inset 0 2px 0 var(--red-bright)}
.step.now .k{color:var(--red-bright)}

/* 6. ФИНАЛ */
.final{padding-block:var(--s7) var(--s6);border-top:1px solid var(--line)}
.final .display{font-size:clamp(46px,9vw,var(--t4));margin:var(--s3) 0 var(--s4)}
.final p{font-size:var(--t1);line-height:1.3;max-width:26ch;margin:0 0 var(--s4);font-weight:500}
.buy{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.price{font-family:var(--font-head);font-weight:600;font-size:var(--t2);line-height:1}
.price small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px}
footer{border-top:1px solid var(--line);padding:var(--s4) var(--gutter);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media (max-width:1000px){
  .phi,.phi-rev,.program-grid{grid-template-columns:1fr;gap:var(--s4)}
  .stage-list{position:static;display:flex;overflow-x:auto;border-top:0;gap:0;border:1px solid var(--line);scrollbar-width:thin}
  .stage-btn{grid-template-columns:auto;gap:2px;min-width:160px;border-bottom:0;border-right:1px solid var(--line);padding:var(--s2) var(--s3)}
  .stage-btn .cnt{display:none}
  .stage-btn[aria-selected=true]{box-shadow:inset 0 -2px 0 var(--red-bright)}
  .lessons{columns:1}
  .ladder{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)}
  .nav{display:none}
  section{padding-block:var(--s5)}
  .fact b{font-size:var(--t2)}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .btn-line{display:none}
  .ladder{grid-template-columns:1fr}.step{border-right:0}
  .lesson-body{padding:var(--s3)}
  .hero{padding-top:calc(88px + var(--s5))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* бывшие inline-стили (CSP: style-src без unsafe-inline) */
.lesson-body .after-key{margin-top:21px}
.how-title{font-size:var(--t2);margin-bottom:34px}
.program-title{font-size:clamp(40px,6vw,var(--t3));margin-bottom:55px}
.thesis-title{margin-top:21px}
.after-title{font-size:clamp(34px,5vw,var(--t2));margin-bottom:34px}

/* Brand mark: the СК logo replaces the former ✳︎ glyph. */
.mark img{display:block;height:.62em;width:auto}