/* First screen: arena, portal and foreground player are separate depth planes. */
.hero{padding:42px 20px 36px;isolation:isolate}
.hero-inner{align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .hero-visual{height:auto;aspect-ratio:1/1;position:relative;isolation:isolate;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;margin:0}
.hero .hero-visual::after{display:none}
.hero-visual::before{content:'';position:absolute;inset:8% -3% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(181,255,45,.17),rgba(113,69,213,.08) 48%,transparent 70%);z-index:-1}
.hero-portal{position:absolute;inset:0 1% 5%;transform:rotate(-9deg) skewY(3deg);border:2px solid rgba(181,255,45,.85);border-radius:30% 30% 12% 12%;box-shadow:0 0 25px rgba(181,255,45,.2),inset 0 0 24px rgba(181,255,45,.15);overflow:hidden;background:#111810}
.hero-portal::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,4,.08),rgba(5,7,4,.64)),url('hero-arena-v2.webp') center/cover;opacity:.85}
.hero-portal::after{content:'';position:absolute;inset:8%;border:1px solid rgba(181,255,45,.18);border-radius:inherit}
.hero .hero-player{position:absolute;inset:-5% -7% auto;width:114%;height:110%;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));mask-image:linear-gradient(#000 79%,transparent 99%)}
.hero-orbit{position:absolute;left:6%;right:0;bottom:7%;height:16%;border:1px solid rgba(181,255,45,.3);border-radius:50%;transform:rotate(-8deg);box-shadow:0 0 25px rgba(181,255,45,.06);z-index:-1}
.hero-right{min-width:0;gap:0}
.hero .hero-stats{position:relative;z-index:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:12px;padding:0;border:0;border-radius:18px;background:#111;overflow:hidden}
.hero .hero-stat{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 12px}
.hero .hero-stat+.hero-stat{border-left:1px solid rgba(255,255,255,.06)}
.hero .hero-stat-v{font-size:clamp(22px,2.4vw,32px)}
.hero .hero-stat-l{text-align:left;margin:0;font-size:9px}
@media(min-width:768px){
  .hero{padding:42px 0 38px}
  .hero-inner{grid-template-columns:1.05fr 1fr;gap:24px;align-items:center}
  .hero h1{font-size:clamp(38px,4.4vw,58px)}
  .hero-lead{max-width:440px}
  .hero-copy{padding-bottom:38px}
}
@media(min-width:1200px){.hero-inner{grid-template-columns:1.1fr 1fr;gap:34px}.hero .hero-visual{aspect-ratio:1.06}}
@media(max-width:767px){
  .hero{padding-top:28px}
  .hero .hero-right{margin-top:24px;flex-direction:column;gap:0}
  .hero .hero-visual{width:100%;max-width:480px;align-self:center;aspect-ratio:1.05}
  .hero .hero-stats{width:100%;margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .hero-stat{padding:18px 8px;gap:6px;flex-direction:column}
  .hero .hero-stat:nth-child(3){border-left:0}
  .hero .hero-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.06)}
}
/* A single restrained entrance gives the decorative scene depth without an idle loop. */
@media(prefers-reduced-motion:no-preference){
  .hero-portal{animation:hero-portal-enter 900ms cubic-bezier(.23,1,.32,1) both}
  .hero-player{animation:hero-player-enter 1000ms cubic-bezier(.23,1,.32,1) 60ms both}
}
@keyframes hero-portal-enter{from{opacity:0;transform:translateY(12px) rotate(-9deg) skewY(3deg) scale(.96)}to{opacity:1;transform:rotate(-9deg) skewY(3deg)}}
@keyframes hero-player-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}