:root{
  --bg:#0b0b10; --panel:#14141b; --edge:rgba(255,255,255,.08);
  --text:#e6e8f1; --muted:#a7afc6; --accent:#6a48ff; --accent2:#b084ff;
  --btn:#2a1929; --btnb:#5b2a5b; --ok:#79e6a1; --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background: radial-gradient(120% 80% at 80% -10%, rgba(106,72,255,.18), transparent 60%), var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
}
a{color:inherit}
.wrapper{max-width:1100px;margin:0 auto;padding:0 20px}
header.site{
  border-bottom:1px solid var(--edge);
  padding:14px 20px;
  display:flex;align-items:center;gap:14px;justify-content:space-between
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:40px; width:auto}
.brand span{font-weight:900; letter-spacing:.6px}
nav a{margin:0 8px; text-decoration:none; opacity:.9; border-bottom:1px dashed transparent}
nav a:hover{border-bottom-color: rgba(255,255,255,.15)}
.hero{position:relative; padding:56px 20px 40px; text-align:center; border-bottom:1px solid var(--edge);}
.hero .logo{height:84px; object-fit:contain; margin:0 auto 14px; display:block;}
.present{color:var(--muted); font-size:14px; letter-spacing:.4px; margin:6px 0 8px}
h1{font-size:clamp(28px,4.5vw,48px); margin:6px 0 6px; letter-spacing:.6px}
.tag{color:#c7cce0; margin:0 0 18px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--edge); text-decoration:none}
.btn.primary{background:linear-gradient(180deg, var(--btn), #1b111b); border-color: var(--btnb)}
.btn.ghost{background:transparent}
.btn.accent{background:linear-gradient(180deg,#1a1632,#131026); border-color:#3c338a}
.btn.danger{background:linear-gradient(180deg,#2d1313,#1a0c0c); border-color:#5c2a2a}
.btn:hover{filter:brightness(1.06)}
section{padding:42px 0; border-bottom:1px solid var(--edge)}
section h2{font-size:24px;margin:0 0 14px}
section p.lead{color:#c7cce0; margin:-6px 0 24px}
.video-frame{position:relative; width:100%; max-width:800px; margin:10px auto 0;
  padding-top:125%; overflow:hidden; background:#000; border-radius:14px; border:1px solid var(--edge)}
.video-frame video{position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; display:block; border:0}
.caption{color:var(--muted); font-size:13px; text-align:center; margin-top:8px}
.grid{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--edge); border-radius:14px; padding:16px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:#b9c0d3;font-size:14px;line-height:1.35}
.classes{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:840px){.classes{grid-template-columns:1fr}}
.class{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--edge); border-radius:14px; padding:14px; background:rgba(255,255,255,.02)}
.class .icon{width:56px;height:56px;border-radius:10px;background:#121219;border:1px solid var(--edge)}
.steps{display:grid; gap:12px}
.step{border:1px solid var(--edge); border-radius:12px; padding:14px; background:rgba(255,255,255,.02)}
.step strong{color:var(--ok)}
.links{display:flex; gap:12px; flex-wrap:wrap}
footer.site{padding:20px;border-top:1px solid var(--edge); color:#b9bfd3}
.foot{max-width:980px;margin:0 auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot a{opacity:.9; text-decoration:none; border-bottom:1px dashed transparent}
.foot a:hover{border-bottom-color: rgba(255,255,255,.15)}
.small{font-size:13px;color:#9aa0b3}
.icon-ig{vertical-align:middle;height:18px;margin-right:6px}
/* Auth pages */
.form{max-width:520px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--edge);border-radius:14px;padding:18px}
label{display:block;margin:10px 0 6px;color:#cbd2e6;font-size:14px}
input{width:100%;padding:12px 10px;border-radius:10px;border:1px solid var(--edge);background:#0f0f16;color:#e6e8f1}
.helper{font-size:12px;color:#9aa0b3;margin-top:6px}
.notice{font-size:14px;color:#b9c0d3;margin:10px 0}
.success{color:#79e6a1}
.error{color:#ff9a9a}