body{margin:0;background:#18181E}
a{color:#C0ED14}a:hover{color:#D9FF4D}
.navlink{color:#D6D4E4;text-decoration:none;font-weight:500;position:relative}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:#C0ED14;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover{color:#FFFFFF}.navlink:hover::after{transform:scaleX(1)}

/* hero grid backdrop */
.grid-bg{background-image:linear-gradient(#24232D 1px,transparent 1px),linear-gradient(90deg,#24232D 1px,transparent 1px);background-size:56px 56px;animation:gridpan 18s linear infinite}
@keyframes gridpan{to{background-position:56px 56px}}

/* logo wobble */
.logo{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.logo:hover{transform:rotate(-4deg) scale(1.06)}

/* hero words drop in */
.word{display:inline-block;opacity:0;animation:drop .8s cubic-bezier(.34,1.56,.64,1) forwards}
.w1{--r:-3deg;animation-delay:.1s}.w2{--r:2deg;animation-delay:.3s}.w3{--r:-2deg;animation-delay:.5s}
@keyframes drop{0%{opacity:0;transform:translateY(-80px) rotate(12deg) scale(.8)}100%{opacity:1;transform:translateY(0) rotate(var(--r)) scale(1)}}
.word:hover{animation:wiggle .5s ease;opacity:1;transform:rotate(var(--r))}
@keyframes wiggle{0%,100%{transform:rotate(var(--r))}25%{transform:rotate(calc(var(--r) - 6deg)) scale(1.05)}75%{transform:rotate(calc(var(--r) + 6deg)) scale(1.05)}}
.fade-up{opacity:0;animation:fadeup .7s ease forwards}
.d1{animation-delay:.7s}.d2{animation-delay:.85s}.d3{animation-delay:1s}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* hero art float + orbiting tiles */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-18px)}}
.chip{position:absolute;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(0,0,0,.4);animation:bob 4s ease-in-out infinite}
.c1{top:-24px;left:-20px;background:#9A8BF4;animation-delay:-1s}
.c2{bottom:-28px;right:30px;background:#C0ED14;animation-delay:-2s;animation-duration:5s}
.c3{top:40%;right:-28px;background:#FFFFFF;animation-delay:-3s;animation-duration:4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}

/* sliced icon tiles */
.tile{aspect-ratio:1;position:relative;transition:transform .35s cubic-bezier(.34,1.56,.64,1);cursor:default}
.tile:hover{transform:scale(1.12) rotate(-5deg);z-index:2}
.tile:nth-child(even):hover{transform:scale(1.12) rotate(5deg)}
.face{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;opacity:0;animation:tilein .6s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.tile:hover .face{box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 14px 24px rgba(0,0,0,.45)}
.face img{width:60%;height:auto;display:block;animation-delay:var(--i) !important}
@keyframes tilein{0%{opacity:0;transform:scale(.2) rotate(-25deg)}100%{opacity:1;transform:none}}
.tile:hover img{animation-duration:.7s !important}
.a-trophy{animation:jump 2.4s ease-in-out infinite}
@keyframes jump{0%,55%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(-16%) scale(1.04,.96) rotate(-6deg)}38%{transform:translateY(0) scale(1.1,.9)}46%{transform:scale(.97,1.03)}}
.a-stars{animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(.92)}50%{transform:rotate(24deg) scale(1.18)}}
.a-headset{animation:groove 1.4s ease-in-out infinite}
@keyframes groove{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-6%)}}
.a-bolt{animation:zap 2.6s linear infinite}
@keyframes zap{0%,68%,100%{opacity:1;transform:none}70%{opacity:.15;transform:translate(4%,-3%) scale(1.1)}72%{opacity:1;transform:translate(-3%,2%)}74%{opacity:.25;transform:translate(3%,1%) scale(1.15)}77%{opacity:1;transform:none}}
.a-controller{animation:rumble 2.8s ease-in-out infinite}
@keyframes rumble{0%,64%,100%{transform:none}67%{transform:translateX(-5%) rotate(-6deg)}71%{transform:translateX(5%) rotate(6deg)}75%{transform:translateX(-4%) rotate(-4deg)}79%{transform:translateX(3%) rotate(3deg)}83%{transform:none}}
.a-crown{animation:crown 3.2s ease-in-out infinite}
@keyframes crown{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14%) rotate(6deg) scale(1.06)}}

/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(1px) scale(.97);box-shadow:none}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.45);transform:skewX(-20deg);transition:left .5s}
.btn:hover::before{left:130%}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,237,20,.55)}50%{box-shadow:0 0 0 12px rgba(192,237,20,0)}}

/* marquee */
.marquee{display:flex;width:max-content;animation:scroll 22s linear infinite}
.marquee.rev{animation-direction:reverse;animation-duration:28s}
@keyframes scroll{to{transform:translateX(-50%)}}

/* count-up stats */
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
.count{counter-reset:n var(--n)}
.count::after{content:counter(n)}
.n7{--n:7;animation:k7 1.4s ease-out both}.n2{--n:2;animation:k2 1s ease-out both}
.n2024{--n:2024;animation:k2024 1.6s ease-out both}.n15{--n:15;animation:k15 1.4s ease-out both}
@keyframes k7{from{--n:0}}@keyframes k2{from{--n:0}}@keyframes k2024{from{--n:1990}}@keyframes k15{from{--n:0}}
.stat{transition:transform .25s ease,border-color .25s}
.stat:hover{transform:translateY(-6px) rotate(-1deg);border-color:#C0ED14}

/* game cards */
.card{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative}
.card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 22px 0 -6px #C0ED14}
.card:nth-child(even):hover{transform:translateY(-10px) rotate(1deg);box-shadow:0 22px 0 -6px #9A8BF4}
.card .icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.card:hover .icon{transform:scale(1.18) rotate(0deg) !important}
.shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.shine::after{content:"";position:absolute;top:-20%;left:-80%;width:50%;height:140%;background:rgba(255,255,255,.35);transform:skewX(-20deg);transition:left .7s}
.card:hover .shine::after{left:150%}
.span2{grid-column:span 2}
.newtag{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{background:#FFFFFF}}

/* service cards */
.svc{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.svc:hover{transform:translateY(-8px) rotate(1deg)}
.svc:hover svg{animation:spin .6s ease}
@keyframes spin{from{transform:rotate(-20deg) scale(.8)}to{transform:none}}

/* scroll reveal */
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .count{animation-timeline:view();animation-range:entry 10% entry 60%;animation-timing-function:ease-out}
}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.96)}to{opacity:1;transform:none}}

@media (max-width: 760px){
  .hide-sm{display:none !important}
  .hero-h{font-size:84px !important}
  .sec-h{font-size:56px !important}
  .pad-sm{padding:32px 24px !important}
  .span2{grid-column:auto}
  .chip{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .word,.fade-up{opacity:1}
}