:root{
  --bg:#04060A;
  --panel:#0A0E13;
  --panel-2:#0D131A;
  --line:rgba(255,255,255,.07);
  --ink:#EAF2EC;
  --mute:#6E8079;
  --acid:#3BFF9E;
  --acid-soft:rgba(59,255,158,.16);
  --acid-line:rgba(59,255,158,.42);
  --radius:14px;
  --display:'Unbounded','Golos Text',system-ui,sans-serif;
  --body:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- shared section chrome ---------- */
.sec{padding:104px 0;position:relative}
.sec + .sec{border-top:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin:0 0 18px
}
.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.4vw,50px);line-height:1.06;
  letter-spacing:-.02em;margin:0;max-width:16ch
}
.h2 em{font-style:normal;color:var(--acid);text-shadow:0 0 26px rgba(59,255,158,.45)}
.lede{color:var(--mute);font-size:16px;line-height:1.55;margin:18px 0 0;max-width:46ch}

/* ---------- program spine ---------- */
.prog{margin-top:56px;position:relative;padding-left:44px}
.prog::before{
  content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;
  background:rgba(255,255,255,.08);border-radius:2px
}
.charge{
  position:absolute;left:13px;top:12px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,rgba(59,255,158,0),var(--acid));
  box-shadow:0 0 14px 1px rgba(59,255,158,.65);
  transition:height 1.9s cubic-bezier(.22,.61,.36,1)
}
.mod{
  position:relative;display:flex;gap:18px;align-items:baseline;
  padding:15px 20px;margin-bottom:8px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  opacity:.34;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease,border-color .5s ease,box-shadow .5s ease,background .5s ease
}
.mod::before{ /* diode on the spine */
  content:"";position:absolute;left:-38px;top:24px;
  width:11px;height:11px;border-radius:50%;
  background:#0A0E13;border:2px solid rgba(255,255,255,.16);
  transition:border-color .45s ease,box-shadow .45s ease,background .45s ease
}
.mod.on{
  opacity:1;transform:none;background:var(--panel-2);
  border-color:var(--acid-line);
  box-shadow:0 0 0 1px rgba(59,255,158,.1),0 18px 44px -28px rgba(59,255,158,.75),
             inset 0 0 44px -30px rgba(59,255,158,.9)
}
.mod.on::before{
  background:var(--acid);border-color:rgba(59,255,158,.3);
  box-shadow:0 0 12px 2px rgba(59,255,158,.7)
}
.mod .n{
  font-family:var(--mono);font-size:12px;color:var(--mute);
  min-width:26px;letter-spacing:.04em;transition:color .45s ease,text-shadow .45s ease
}
.mod.on .n{color:var(--acid);text-shadow:0 0 14px rgba(59,255,158,.6)}
.mod .t{font-size:16px;line-height:1.42;font-weight:500}

/* части курса */
.part{
  display:flex;align-items:baseline;gap:14px;
  margin:34px 0 14px;padding-left:2px
}
.part:first-of-type{margin-top:0}
.part .pn{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acid);opacity:.75
}
.part .pt{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.part .pnote{font-size:13px;color:var(--mute);margin-left:auto;text-align:right}

/* метрики курса */
.stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:34px}
.stat b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:28px;letter-spacing:-.02em;color:var(--acid);
  text-shadow:0 0 22px rgba(59,255,158,.4)
}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}


/* ---------- квиз ---------- */
.qdots{display:flex;gap:7px;margin-bottom:26px}
.qdot{
  width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);
  transition:background .35s ease,box-shadow .35s ease
}
.qdot.on{background:var(--acid);box-shadow:0 0 10px 1px rgba(59,255,158,.6)}
.q{animation:rise .4s ease both}
.q h4{
  font-family:var(--display);font-weight:600;font-size:19px;
  letter-spacing:-.01em;margin:0 0 20px;line-height:1.3
}
.opts{display:grid;gap:9px}
.opt{
  text-align:left;width:100%;cursor:pointer;
  font-family:var(--body);font-size:15px;color:#C6D4CD;line-height:1.4;
  padding:14px 17px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px;
  transition:border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease
}
.opt:hover{
  border-color:var(--acid-line);color:var(--ink);transform:translateX(3px);
  box-shadow:0 0 26px -14px rgba(59,255,158,.9)
}
.opt:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.opt.picked{
  border-color:var(--acid);color:var(--ink);
  box-shadow:0 0 0 1px rgba(59,255,158,.25),0 0 30px -12px rgba(59,255,158,1)
}
.skip{
  display:block;margin:22px auto 0;padding:6px 4px;
  background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--mute);text-decoration:underline;text-underline-offset:3px;
  transition:color .2s ease
}
.skip:hover{color:var(--acid)}
.skip:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* вывод по ответам */
.payoff{
  margin:0 0 26px;padding:17px 19px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);
  border-left:2px solid var(--acid);
  box-shadow:inset 0 0 50px -34px rgba(59,255,158,.9)
}
.payoff p{margin:0;font-size:14.5px;line-height:1.55;color:#C6D4CD}
.payoff p + p{margin-top:9px}
.payoff b{color:var(--acid);font-weight:600}


/* ---------- access / payment ---------- */
.access{
  margin-top:52px;background:var(--panel);
  border:1px solid var(--line);border-radius:20px;
  padding:36px;max-width:520px;position:relative;overflow:hidden
}
.access::after{
  content:"";position:absolute;inset:-1px;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 90px -60px rgba(59,255,158,.9)
}
/* loader */
.load{min-height:132px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.load p{
  margin:0;font-family:var(--mono);font-size:12.5px;color:var(--mute);
  letter-spacing:.03em;opacity:0;transform:translateY(4px);
  transition:opacity .35s ease,transform .35s ease
}
.load p.on{opacity:1;transform:none}
.load p.done{color:var(--ink)}
.load p .tick{color:var(--acid);margin-right:9px}
.bar{height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-top:6px}
.bar i{
  display:block;height:100%;width:0;background:var(--acid);
  box-shadow:0 0 12px 1px rgba(59,255,158,.7);
  transition:width 2.4s cubic-bezier(.3,.7,.3,1)
}
/* offer */
.offer{display:none}
.offer.on{display:block;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.offer h3{
  font-family:var(--display);font-weight:600;font-size:23px;
  letter-spacing:-.01em;margin:0 0 20px
}
.incl{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.incl li{
  font-size:15px;color:#B9C7C0;display:flex;gap:11px;align-items:flex-start;line-height:1.45
}
.incl li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:var(--acid);box-shadow:0 0 9px 1px rgba(59,255,158,.75)
}
.price{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:22px 0 26px;border-top:1px solid var(--line)
}
.price .old{
  font-family:var(--display);font-weight:600;font-size:24px;
  color:var(--mute);text-decoration:line-through;
  text-decoration-color:rgba(59,255,158,.7);text-decoration-thickness:2px
}
.price .new{
  font-family:var(--display);font-weight:700;
  font-size:44px;letter-spacing:-.03em;line-height:1;
  text-shadow:0 0 30px rgba(59,255,158,.3)
}
.price .save{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#04060A;background:var(--acid);padding:5px 10px;border-radius:6px;
  box-shadow:0 0 20px -4px rgba(59,255,158,.8)
}
.field{display:block;margin-bottom:20px}
.field span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:9px
}
.field input{
  width:100%;padding:14px 16px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink);font-family:var(--body);font-size:15px;
  transition:border-color .2s ease,box-shadow .2s ease
}
.field input::placeholder{color:#4B5A54}
.field input:focus{
  outline:none;border-color:var(--acid-line);
  box-shadow:0 0 26px -12px rgba(59,255,158,.9)
}
.consent{display:grid;gap:13px;margin-bottom:22px}
.cbx{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:13.5px;color:#93A49C;line-height:1.45}
.cbx input{
  appearance:none;flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;
  border:1.5px solid rgba(255,255,255,.22);border-radius:5px;background:transparent;
  cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.cbx input:checked{
  background:var(--acid);border-color:var(--acid);
  box-shadow:0 0 12px 1px rgba(59,255,158,.55)
}
.cbx input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.cbx a{color:#C6D4CD;text-decoration:underline;text-underline-offset:2px}
.cbx a:hover{color:var(--acid)}
.pay{
  width:100%;padding:17px 22px;border:0;border-radius:12px;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:16px;color:#04060A;
  background:var(--acid);box-shadow:0 0 34px -8px rgba(59,255,158,.8);
  transition:transform .15s ease,box-shadow .25s ease,opacity .25s ease
}
.pay:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 46px -6px rgba(59,255,158,.95)}
.pay:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.pay:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.paynote{
  margin:12px 0 0;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--mute);
}

/* ---------- футер ---------- */
.foot{border-top:1px solid var(--line);padding:44px 0 56px;font-size:13px;color:var(--mute)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:26px}
.foot a{color:#93A49C;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.foot a:hover{color:var(--acid);border-color:var(--acid-line)}
.foot a:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.foot .req{font-family:var(--mono);font-size:11.5px;line-height:1.9;letter-spacing:.02em}

@media(max-width:640px){
  .sec{padding:76px 0}
  .prog{padding-left:34px}
  .prog::before,.charge{left:9px}
  .mod::before{left:-31px}
  .mod{padding:13px 15px;gap:13px}
  .mod .t{font-size:15px}
  .access{padding:26px}
  .price .new{font-size:36px}
  .price .old{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}