@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Archivo X";src:url(/assets/fonts/archivo-x900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"JB Mono";src:url(/assets/fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --void:#0A0A0A;--white:#fff;--fog:#E6E4F0;--lilac:#A48BDB;--violet:#8A62D2;
  --pink:#FF1070;--pink-l:#FF6FB2;--pink-d:#B80E73;--aura:#5B1FB0;--glow:#8A22C8;--deep:#1A0B33;--ash:#8E8E9A;
  --line:rgba(164,139,219,.18);--panel:#120D1C;
  --display:"Archivo X","Arial Black",sans-serif;--body:Archivo,"Segoe UI",system-ui,sans-serif;--mono:"JB Mono",ui-monospace,monospace;
  --ignite:cubic-bezier(.2,0,0,1);--slam:cubic-bezier(.3,1.6,.5,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--fog);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--pink);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--pink-l);outline-offset:3px;border-radius:4px}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);background:linear-gradient(var(--void) 30%,transparent);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 15px/1 var(--display);letter-spacing:.04em;color:#fff;transform:skewX(-10deg)}
.brand img{transform:skewX(10deg)}
.brand b{color:var(--pink);font-weight:900}
.nav nav{display:flex;align-items:center;gap:clamp(12px,3vw,28px)}
.nav nav a{text-decoration:none;font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.nav nav a:not(.btn):hover{color:var(--pink-l)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border:0;border-radius:2px;background:var(--pink);color:#fff!important;text-decoration:none;font:900 15px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transform:skewX(-10deg);transition:transform .25s var(--slam),background .2s,box-shadow .2s;box-shadow:0 0 0 rgba(255,16,112,0)}
.btn:hover{background:var(--pink-l);transform:skewX(-10deg) translateY(-2px);box-shadow:0 10px 40px -8px rgba(255,16,112,.6)}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--lilac)}
.btn-ghost:hover{background:rgba(164,139,219,.14);box-shadow:inset 0 0 0 2px var(--fog)}
.btn-sm{min-height:36px;padding:0 18px;font-size:12px!important;letter-spacing:.1em!important}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 16px 72px;isolation:isolate;overflow:hidden}
.aura{position:absolute;left:50%;top:44%;width:min(1100px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(138,34,200,.55),rgba(91,31,176,.25) 45%,transparent 72%);z-index:-1;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.8}}
.shards i{position:absolute;width:10px;height:28px;background:var(--pink);clip-path:polygon(50% 0,100% 40%,50% 100%,0 60%);opacity:.75;z-index:-1;animation:drift 9s ease-in-out infinite}
.shards i:nth-child(1){left:14%;top:30%;transform:rotate(-30deg)}
.shards i:nth-child(2){left:82%;top:24%;transform:rotate(25deg);animation-delay:-2s;width:7px;height:20px}
.shards i:nth-child(3){left:76%;top:70%;transform:rotate(60deg);animation-delay:-4s}
.shards i:nth-child(4){left:20%;top:74%;transform:rotate(-70deg);animation-delay:-6s;width:6px;height:18px;background:var(--lilac)}
.shards i:nth-child(5){left:60%;top:12%;transform:rotate(10deg);animation-delay:-3s;width:5px;height:14px;background:var(--pink-l)}
@keyframes drift{50%{translate:0 -18px;opacity:.35}}
.emblem{width:clamp(200px,34vw,380px);margin-bottom:-8px;filter:drop-shadow(0 20px 60px rgba(91,31,176,.6));animation:rise 1s var(--ignite) both,float 6s ease-in-out 1s infinite}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes float{50%{transform:translateY(-10px)}}
h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;animation:rise .9s var(--ignite) .15s both}
h1 img{width:clamp(240px,40vw,460px)}
.labs{font:500 clamp(13px,1.6vw,17px)/1 var(--mono);letter-spacing:.9em;margin-right:-.9em;color:var(--lilac)}
.tag{margin:22px 0 0;font:900 clamp(15px,2vw,19px)/1 var(--display);letter-spacing:.2em;color:#fff;transform:skewX(-10deg);animation:rise .9s var(--ignite) .3s both}
.lede{max-width:34ch;margin:16px auto 0;color:var(--fog);font-size:clamp(16px,1.9vw,19px);animation:rise .9s var(--ignite) .4s both}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px;animation:rise .9s var(--ignite) .5s both}

/* sections */
.section{max-width:1200px;margin:0 auto;padding:clamp(72px,10vw,120px) clamp(16px,4vw,48px)}
.head{display:flex;flex-direction:column;gap:6px;margin-bottom:40px}
.kicker{margin:0;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
h2{margin:0;font:900 clamp(34px,5.6vw,64px)/1 var(--display);letter-spacing:-.01em;color:#fff;text-transform:uppercase;transform:skewX(-10deg);transform-origin:left}
h3{margin:0;font:800 21px/1.2 var(--body);color:#fff}

/* game cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .3s var(--ignite),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,16,112,.5);box-shadow:0 24px 60px -24px rgba(138,34,200,.7)}
.shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ignite)}
.card:hover .shot img{transform:scale(1.05)}
.shot-lab{display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,rgba(91,31,176,.6),var(--deep) 70%)}
.shot-lab img{width:34%;height:auto;object-fit:contain;filter:grayscale(.3) brightness(.7)}
.card-lab:hover .shot img{transform:scale(1.08) rotate(-3deg)}
.pill{position:absolute;top:12px;left:12px;padding:6px 10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border-radius:2px}
.pill.live{background:var(--pink);color:#fff}
.pill.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#fff;vertical-align:1px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
.pill.lab{background:rgba(10,10,10,.75);color:var(--lilac);box-shadow:inset 0 0 0 1px var(--lilac)}
.body{display:flex;gap:16px;padding:20px 20px 0;flex:1}
.icon{width:64px;height:64px;flex:none;border-radius:12px;border:2px solid var(--line)}
.body p{margin:6px 0 0;font-size:15px;color:#C9C6D6}
.btn-play{margin:20px;align-self:flex-start}

/* pillars */
.pillars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.pillars li{background:var(--void);padding:32px 28px}
.pillars .n{display:block;margin-bottom:22px;font:900 44px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--violet);transform:skewX(-10deg);transform-origin:left}
.pillars p{margin:10px 0 0;font-size:15px;color:#C9C6D6}

/* join */
.join{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:clamp(80px,12vw,140px) 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aura-sm{top:50%;width:min(800px,140vw);animation-duration:9s}
.join h2{transform:skewX(-10deg);transform-origin:center}
.join p{max-width:40ch;margin:16px auto 30px}

.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:32px 16px;color:var(--ash);font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-align:center}
.foot p{margin:0}

@media (max-width:560px){
  .nav nav a:not(.btn){display:none}
  .body{padding:16px 16px 0}
  .btn-play{margin:16px;align-self:stretch}
  .cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}