/* hero */
.hero{position:relative;background:radial-gradient(120% 90% at 85% 0%,#2B1A63 0%,var(--ink) 55%);color:#CFC9E6;overflow:hidden;padding:64px 0 56px}
.hero::before{content:"";position:absolute;width:820px;height:820px;right:-260px;top:-300px;background:radial-gradient(circle,rgba(123,85,224,.45),transparent 62%);pointer-events:none}
.hero::after{content:"";position:absolute;width:600px;height:600px;left:-240px;bottom:-320px;background:radial-gradient(circle,rgba(30,183,198,.22),transparent 65%);pointer-events:none}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 60% 40%,#000 15%,transparent 70%)}
.hero-grid{position:relative;z-index:1;display:grid;gap:56px;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:64px}}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(185,166,255,.28);color:#DCD3FF;font:600 .74rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px;max-width:100%}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(30,183,198,.2);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(30,183,198,0)}}
.hero-title{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:24px}
.hero-title span{display:block}
.hero-title .grad{background:linear-gradient(95deg,#A88BFF 0%,#7B55E0 40%,#27C3D1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.hero .lead{color:#B8B2D1;font-size:1.13rem;max-width:540px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 36px}
.btn-lg{padding:17px 30px;font-size:1rem}
.arrow::after{margin-left:8px;display:inline-block}
.hero-trust{display:flex;flex-wrap:wrap;gap:0;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;max-width:560px}
.hero-trust div{padding-right:26px;margin-right:26px;border-right:1px solid rgba(255,255,255,.1)}
.hero-trust div:last-of-type{border-right:0;margin-right:0;padding-right:0}
.hero-trust b{display:block;font:700 1.5rem/1.1 var(--display);color:#fff}
.hero-trust span{font-size:.82rem;color:#9C95BD}
.hero-trust p{flex-basis:100%;margin:16px 0 0;font-size:.86rem;color:#8E87AE}
.hero-trust p::before{content:"★★★★★";color:var(--gold);letter-spacing:2px;margin-right:10px}
@media(max-width:520px){.hero-trust div{padding-right:14px;margin-right:14px}.hero-trust b{font-size:1.25rem}}
.hero-visual{position:relative;padding:18px}
.hero-visual .ring{position:absolute;inset:0;border-radius:36px;background:linear-gradient(140deg,rgba(168,139,255,.55),rgba(39,195,209,.25) 45%,transparent 70%);opacity:.9;transform:rotate(-3deg)}
.hero-visual .frame{position:relative;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 50px 90px -30px rgba(0,0,0,.75);background:#ECE8F6;aspect-ratio:5/4}
.hero-visual .frame img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-visual .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,14,36,.35));pointer-events:none}
.chip-float{position:absolute;z-index:2;background:rgba(255,255,255,.97);color:var(--muted);border-radius:18px;padding:14px 18px;box-shadow:0 24px 50px -20px rgba(10,5,40,.55);display:flex;gap:12px;align-items:center;font-size:.8rem;line-height:1.35;animation:float 7s ease-in-out infinite;max-width:240px}
.chip-float b{display:block;font:700 1.35rem/1.1 var(--display);color:var(--ink)}
.chip-float b.sm{font-size:.95rem;margin-bottom:2px}
.chip-float .stars{color:var(--gold);font-size:.8rem;letter-spacing:1px;position:absolute;top:10px;right:14px}
.chip-float .ic{width:36px;height:36px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.chip-float.a{left:-8px;bottom:56px}
.chip-float.a b{color:var(--brand)}
.chip-float.b{right:-6px;top:40px;padding-right:22px;animation-delay:-2.3s}
.chip-float.b span:last-child{padding-top:10px}
.chip-float.c{right:24px;bottom:-14px;animation-delay:-4.6s}
@media(max-width:600px){.chip-float{padding:10px 12px;max-width:190px}.chip-float b{font-size:1.1rem}.chip-float.a{left:0;bottom:70px}.chip-float.b{right:0;top:20px}.chip-float.c{right:10px;bottom:-10px}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-courses{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:64px}
.hero-courses .hc-label{font:600 .72rem var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8E87AE;margin-right:6px}
.hero-courses a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#E6E1F8;font-size:.88rem;font-weight:500;transition:.25s}
.hero-courses a:hover{border-color:rgba(185,166,255,.6);background:rgba(123,85,224,.18)}
.hero-courses em{font-style:normal;font-size:.74rem;color:#9C95BD;padding-left:10px;border-left:1px solid rgba(255,255,255,.15)}
.hero-feats{position:relative;z-index:1;display:grid;gap:1px;margin-top:22px;grid-template-columns:1fr;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden}
@media(min-width:640px){.hero-feats{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.hero-feats{grid-template-columns:repeat(4,1fr)}}
.hero-feat{background:rgba(18,14,36,.92);padding:22px 22px 20px}
.hero-feat b{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:600;margin-bottom:6px;font-size:.98rem}
.hero-feat b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero-feat span{font-size:.86rem;color:#A9A2C7}
@media(prefers-reduced-motion:reduce){.hero-badge i{animation:none}}
.hero+.stats-band{margin-top:48px}
@media(max-width:600px){
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.hero-trust div{padding:0 10px;margin:0;border-right:1px solid rgba(255,255,255,.1)}
.hero-trust div:first-child{padding-left:0}
.hero-trust p{grid-column:1/-1}
.hero-trust span{font-size:.74rem;display:block;line-height:1.3}
.chip-float.c{display:none!important}
.chip-float.a{bottom:24px}
.hero-title{font-size:2.55rem}
}
/* home course rail */
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 28px}
.rail-head .lead{margin:0;max-width:460px}
.rail-nav{display:flex;gap:10px}
.rail-btn{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--brand-line);background:#fff;color:var(--brand);font-size:1.15rem;cursor:pointer;transition:.25s;display:flex;align-items:center;justify-content:center}
.rail-btn:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.rail-btn:disabled{opacity:.35;cursor:default}
.course-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);column-gap:22px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 24px;margin:-8px -2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.course-rail::-webkit-scrollbar{display:none}
.course-rail>*{scroll-snap-align:start;min-width:0}
.course-rail .card:hover{transform:translateY(-4px)}
@media(max-width:1023px){.course-rail{grid-auto-columns:calc((100% - 22px)/2)}}
@media(max-width:699px){.course-rail{grid-auto-columns:86%}}
.rail-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.rail-dots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--brand-line);cursor:pointer;padding:0;transition:.3s}
.rail-dots button.on{width:28px;background:var(--brand)}

@media(min-width:1024px){.hero-feats{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}