:root{
 --bg:#0f1420;--bg2:#0b0f18;--panel:#161d2e;--panel2:#1b2436;--line:#26324a;
 --text:#e6ebf5;--muted:#9fb0cc;--dim:#6f7f9e;--blue:#3987e5;--green:#199e70;--danger:#ff6b6b;
 --nav:rgba(15,20,32,.82);--shadow:0 24px 60px rgba(0,0,0,.45);--code:#0b0f18;--codetext:#cfe1ff;
 --glow1:rgba(57,135,229,.20);--glow2:rgba(25,158,112,.16);--onbrand:#fff;--r:16px}
:root[data-theme="light"]{
 --bg:#f4f7fc;--bg2:#eaf0f8;--panel:#ffffff;--panel2:#f1f5fb;--line:#dbe3ef;
 --text:#132038;--muted:#4a5b78;--dim:#7688a4;--blue:#1f6fd6;--green:#12855f;--danger:#d64545;
 --nav:rgba(244,247,252,.82);--shadow:0 20px 50px rgba(40,70,120,.14);--code:#0e1626;--codetext:#dbe8ff;
 --glow1:rgba(57,135,229,.16);--glow2:rgba(25,158,112,.14);--onbrand:#fff}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
 line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .35s ease,color .25s ease}
a{color:inherit;text-decoration:none}
img{max-width:100%}
code,kbd,.mono{font-family:'Cascadia Code',Consolas,monospace;font-variant-ligatures:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* nav */
header.top{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);transition:background-color .35s,border-color .35s}
.nav{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.brand .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--blue),var(--green));
 display:grid;place-items:center;font-size:17px;color:#fff;box-shadow:0 6px 18px var(--glow1);
 transition:transform .3s}
.brand:hover .logo{transform:rotate(-8deg) scale(1.06)}
.nav .sp{flex:1}
.nav a.link{color:var(--muted);font-size:16px;position:relative;padding:6px 2px}
.nav a.link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
 background:linear-gradient(90deg,var(--blue),var(--green));transition:right .25s}
.nav a.link:hover{color:var(--text)}.nav a.link:hover::after{right:0}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue),var(--green));
 color:var(--onbrand);font-weight:700;padding:11px 20px;border-radius:12px;font-size:15px;border:0;cursor:pointer;
 position:relative;overflow:hidden;transition:transform .14s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow1)}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg)}
.btn:hover::before{animation:shine .8s ease}
@keyframes shine{to{left:130%}}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--blue);box-shadow:none}
.theme-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--panel);
 color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,transform .2s}
.theme-btn:hover{border-color:var(--blue);transform:rotate(12deg)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}.theme-btn .sun{display:block}
:root[data-theme="light"] .theme-btn .sun{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
/* hero */
.hero{padding:100px 0 74px;position:relative;overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;z-index:0}
.hero .b1{width:520px;height:520px;top:-160px;left:-80px;background:radial-gradient(closest-side,var(--glow1),transparent);
 animation:float1 14s ease-in-out infinite}
.hero .b2{width:460px;height:460px;top:-40px;right:-120px;background:radial-gradient(closest-side,var(--glow2),transparent);
 animation:float2 17s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,26px)}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:60px;line-height:1.05;font-weight:800;letter-spacing:-1.5px;max-width:15ch}
.hero h1 .grad{background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;
 background-clip:text;color:transparent;background-size:200% auto;animation:hue 6s ease infinite}
@keyframes hue{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.hero p.lead{font-size:22px;color:var(--muted);margin:22px 0 34px;max-width:56ch}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--green);
 background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
 padding:6px 12px;border-radius:999px;font-weight:600}
.badge .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}.dim{color:var(--dim)}
section{padding:56px 0}
h2.sec{font-size:34px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.sec-sub{color:var(--muted);font-size:18px;margin-bottom:34px}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;
 transition:border-color .18s,transform .18s,box-shadow .18s,background-color .35s;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
 background:linear-gradient(130deg,var(--blue),var(--green));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s;pointer-events:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::after{opacity:.9}
.card .ico{font-size:30px;margin-bottom:14px;display:inline-block;transition:transform .25s}
.card:hover .ico{transform:scale(1.12) rotate(-6deg)}
.card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.3px}
.pill.open{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.pill.soon{color:#d9a441;background:rgba(217,164,65,.14)}
.pill.free{color:var(--blue);background:color-mix(in srgb,var(--blue) 16%,transparent)}
.course-card{display:flex;flex-direction:column;gap:14px}
.course-card .top{display:flex;justify-content:space-between;align-items:flex-start}
.course-card .meta{display:flex;gap:14px;color:var(--dim);font-size:14px;margin-top:auto;padding-top:8px}
/* player */
.player{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.playlist{display:flex;flex-direction:column;gap:8px}
.lesson{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);
 border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.lesson:hover{border-color:#5a7bb0;transform:translateX(3px)}
.lesson.active{border-color:var(--blue);background:var(--panel2)}
.lesson.locked{cursor:default;opacity:.72}.lesson.locked:hover{transform:none}
.lesson .n{width:34px;height:34px;flex:none;border-radius:9px;background:var(--panel2);display:grid;place-items:center;
 font-weight:700;font-size:15px;color:var(--muted)}
.lesson.active .n{background:linear-gradient(135deg,var(--blue),var(--green));color:#fff}
.lesson .t{flex:1;min-width:0}
.lesson .t b{font-weight:600;font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson .t span{color:var(--dim);font-size:13px}
.lesson .dur{color:var(--dim);font-size:13px;flex:none}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start}
.syllabus-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
/* misc */
.list{display:flex;flex-direction:column;gap:14px}
.li{display:flex;gap:14px}.li .k{color:var(--green);font-weight:800;flex:none}
.prose{max-width:760px}
.prose h2{font-size:28px;margin:36px 0 12px;font-weight:800}
.prose h3{font-size:20px;margin:26px 0 8px}
.prose p,.prose li{color:var(--muted);margin-bottom:12px}.prose ul{padding-left:22px}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--blue);
 border-radius:12px;padding:16px 20px;color:var(--muted);font-size:15px;transition:background-color .35s}
table.tw{width:100%;border-collapse:collapse;font-size:15px}
table.tw th,table.tw td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
table.tw th{color:var(--dim);font-weight:600}
pre.code{background:var(--code);border:1px solid var(--line);border-radius:12px;padding:18px 20px;overflow-x:auto;
 font-size:14px;color:var(--codetext);line-height:1.55}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .18s,box-shadow .18s,background-color .35s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.hi{border-color:var(--blue);box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 30%,transparent)}
.plan .price{font-size:40px;font-weight:800;margin:8px 0}
.plan ul{list-style:none;margin:18px 0}.plan li{padding:7px 0;color:var(--muted);font-size:15px}
.plan li::before{content:"✓";color:var(--green);font-weight:800;margin-right:10px}
.emailbox{display:inline-flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);
 border-radius:12px;padding:10px 16px;font-family:'Cascadia Code',monospace;font-size:15px;color:var(--text)}
footer.bot{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:40px;color:var(--muted);transition:border-color .35s}
.fgrid{display:flex;flex-wrap:wrap;gap:14px 28px;margin:20px 0}
.fgrid a{color:var(--muted);font-size:15px;transition:color .15s}.fgrid a:hover{color:var(--text)}
.stat-ok{color:var(--green)}
/* reveal-анимации (класс вешает JS, поэтому без JS всё видно) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:900px){
 .g3,.g4{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.plans{grid-template-columns:1fr}
 .hero h1{font-size:44px}.nav a.link{display:none}}
@media(max-width:620px){.g3,.g4,.g2{grid-template-columns:1fr}.hero h1{font-size:36px}.hero p.lead{font-size:19px}}