:root{--bg:#020208;--fg:#eef1ff;--muted:#9aa4c7;--card:rgba(14,18,40,.62);--line:rgba(160,180,255,.22);--accent:#7aa2ff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.body-lock{overflow:hidden}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:pan-y;cursor:grab}
#bg.grabbing{cursor:grabbing}
section{position:relative;z-index:1;height:100vh;display:flex;align-items:center;padding:0 7vw;pointer-events:none}
section.hero{flex-direction:column;justify-content:flex-start;padding-top:9vh;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:#d5ddff}.eyebrow i{width:6px;height:6px;border-radius:50%;background:#ffb84a;box-shadow:0 0 10px 2px rgba(255,184,74,.8)}h1{font-size:clamp(2.4rem,7.4vw,5.6rem);margin:.45em 0 0;font-weight:200;line-height:1.02;letter-spacing:.07em;text-transform:uppercase;filter:drop-shadow(0 4px 22px rgba(0,0,0,.9))}h1 .g{background:linear-gradient(95deg,#8fb3ff,#fff 50%,#ffc46b);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300}.rule{width:72px;height:2px;margin:1.3em auto 1.1em;border-radius:2px;background:linear-gradient(90deg,transparent,#ffb84a,transparent)}
.hero p{max-width:34em;margin:0;color:#c9d1f0;font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1.65;text-shadow:0 2px 14px #000,0 0 6px #000}
.card{pointer-events:auto;--c:#7aa2ff;position:relative;overflow:hidden;width:min(400px,100%);padding:28px 28px 24px;border-radius:26px;cursor:pointer;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 45%),rgba(9,12,30,.82);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);opacity:0;transform:translateY(50px) scale(.97);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}.card::before{content:"";position:absolute;top:-45%;left:-35%;width:90%;height:90%;background:radial-gradient(circle,var(--c),transparent 65%);opacity:.26;pointer-events:none;transition:opacity .4s}.card>*{position:relative}
.card.in{opacity:1;transform:none}
.card.in:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 30px 70px -22px rgba(0,0,0,.95),0 0 44px -12px var(--c),inset 0 1px 0 rgba(255,255,255,.16)}.card:hover::before{opacity:.45}
.card .num{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.32em;color:var(--c);text-transform:uppercase}.card .num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.55}
.card h2{margin:.35em 0 .05em;font-size:2.5rem;font-weight:200;letter-spacing:.01em;line-height:1.1}
.card .sub{color:var(--muted);margin:0 0 1.3em;font-size:1rem}.card .st{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.3em}.card .st div{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.card .st b{display:block;font-weight:500;font-size:1rem}.card .st i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.card .more{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--c);transition:gap .3s}.card:hover .more{gap:14px}
section.l{justify-content:flex-start}section.r{justify-content:flex-end}
#modal{position:fixed;inset:0;z-index:10;background:rgba(2,2,8,.88);display:none;align-items:center;justify-content:center;padding:20px}
#modal.open{display:flex}
.box{--c:#7aa2ff;position:relative;width:min(640px,100%);max-height:90vh;overflow:auto;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 30%),#0a0e24;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px -30px #000,0 0 80px -34px var(--c);animation:pop .45s cubic-bezier(.2,.8,.2,1)}@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}}.box::before{content:"";position:absolute;inset:0 0 auto 0;height:300px;background:radial-gradient(120% 100% at 15% 0,var(--c),transparent 65%);opacity:.3;pointer-events:none}.hd,.bd,.nav{position:relative}.hd{padding:34px 34px 8px}.bd{padding:10px 34px 8px}.box .num{display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.32em;color:var(--c);text-transform:uppercase;padding-right:50px}.box .num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c),transparent);opacity:.55}.box .sub{color:var(--muted)}.box .st{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 20px}.box .st div{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}.box .st b{display:block;font-weight:500;font-size:1.05rem}.box .st i{display:block;font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.box h3{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--c);margin:0 0 12px;font-weight:500}.nav{display:flex;justify-content:space-between;gap:10px;padding:18px 34px 28px}.nav button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--fg);padding:10px 16px;border-radius:999px;cursor:pointer;font:inherit;font-size:.88rem;transition:.25s}.nav button:hover{border-color:var(--c);background:rgba(255,255,255,.1)}.nav button:empty{visibility:hidden}
.box h2{margin:.3em 0 .1em;font-weight:200;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1.05}
.box p{color:#c9d0ee;line-height:1.7;font-size:1.02rem;margin:0 0 1.5em}
.box ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:f}.box li{counter-increment:f;position:relative;padding:14px 14px 14px 52px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);line-height:1.45;font-size:.93rem}.box li::before{content:counter(f);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:600;color:#050510;background:var(--c)}
.x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--fg);font-size:1.4rem;line-height:1;cursor:pointer;transition:.25s}.x:hover{background:rgba(255,255,255,.18)}
.c0{--c:#b8b0a6}
.c1{--c:#f0c27a}
.c2{--c:#4aa3ff}
.c3{--c:#ff7b4a}
.c4{--c:#e8b98a}
.c5{--c:#ecd9a0}
.c6{--c:#7fe0e8}
.c7{--c:#6a86ff}
@media(max-width:560px){.box ul{grid-template-columns:1fr}.hd,.bd{padding-left:22px;padding-right:22px}.nav{padding:16px 22px 24px}}
@media(max-width:760px){section{align-items:flex-end;padding-bottom:8vh}section.l,section.r{justify-content:center}section.hero{align-items:center;padding-bottom:0}}