@font-face{font-family:"Chakra Petch";src:url(/fonts/chakra-petch-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(/fonts/chakra-petch-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#070b14;--bg2:#0c1220;--panel:#111a2b;--line:#1e2a40;--text:#e9edf4;--soft:#c3cad6;--mute:#8592a8;--red:#e3262d;--red2:#ff4a3d;--blue:#2b8cff;--tf:#ff7a1a;--vs:#22c8d8;--display:"Chakra Petch",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:8px 24px;background:rgba(7,11,20,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand img{height:48px;width:auto}
.nav nav{display:flex;gap:24px}
.nav nav a{text-decoration:none;color:var(--mute);font:600 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.nav nav a:hover{color:var(--text)}

.hero{position:relative;background:#000}
.hero-img{width:100%;height:auto;max-height:78vh;object-fit:cover;object-position:center 40%}
.hero-bar{background:linear-gradient(90deg,rgba(227,38,45,.16),transparent 40%,transparent 60%,rgba(43,140,255,.16)),var(--bg2);border-top:2px solid var(--red);border-bottom:1px solid var(--line)}
.hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px;flex-wrap:wrap}
.kicker{color:var(--blue);font:700 12px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px}
h1{font:700 clamp(30px,4.6vw,52px)/1.02 var(--display);text-transform:uppercase;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--red2)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 24px;font:700 14px/1 var(--display);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.btn:hover{filter:brightness(1.15)}

.section{padding:88px 0;border-bottom:1px solid var(--line)}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.num{font:700 15px/1 var(--display);color:var(--red2)}
h2{font:700 clamp(28px,4vw,42px)/1.1 var(--display);text-transform:uppercase}
h3{font-family:var(--display);font-weight:700}
.intro{color:var(--soft);max-width:640px;margin:-8px 0 28px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:36px;color:var(--soft)}
.lead{color:var(--text);font-size:18px}

.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000}
.video-poster img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .2s}
.video-poster:hover img{opacity:.7}
.play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--red);box-shadow:0 0 0 8px rgba(227,38,45,.25),0 10px 40px rgba(0,0,0,.6)}
.play::after{content:"";position:absolute;left:36px;top:28px;border-style:solid;border-width:18px 0 18px 28px;border-color:transparent transparent transparent #fff}
.video-note{position:absolute;right:14px;bottom:12px;font:600 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.caption{color:var(--mute);font-size:14px;margin-top:12px}

.modes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.modes li{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);padding:18px}
.modes b{display:block;font:700 18px/1.2 var(--display);text-transform:uppercase;margin-bottom:4px}
.modes span{color:var(--mute);font-size:14px}

.chassis{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.frame{display:grid;grid-template-columns:5fr 6fr;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--tf)}
.frame.vs{border-top-color:var(--vs)}
.render{width:100%;height:100%;object-fit:cover;background:#2c2e31}
.frame-body{padding:24px}
.maker{height:64px;width:auto;margin-bottom:14px}
.tag{font:700 11px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.frame h3{font-size:24px;margin:6px 0 10px;color:var(--tf)}
.frame.vs h3{color:var(--vs)}
.frame-body>p:not(.tag){color:var(--soft);font-size:15px}
.stats{list-style:none;margin-top:18px;display:grid;gap:9px;font:600 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.stats li{position:relative;padding-top:10px}
.stats li::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--line)}
.stats i{position:absolute;top:0;left:0;height:5px;width:var(--v);background:var(--tf);z-index:1}
.frame.vs .stats i{background:var(--vs)}

.arenas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.arenas figure{position:relative;overflow:hidden;border:1px solid var(--line);background:#000}
.arenas img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.arenas figure:hover img{transform:scale(1.04)}
.arenas figcaption{position:absolute;left:0;bottom:0;padding:8px 14px;background:linear-gradient(90deg,rgba(7,11,20,.92),rgba(7,11,20,0));font:700 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;width:100%}

.logos{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:40px 0}
.logos li{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:16px;background:radial-gradient(circle at 50% 40%,#1a2438,#0d1424);border:1px solid var(--line)}
.logos img{max-height:100%;width:auto;object-fit:contain}
.armor{border:1px solid var(--line);background:#2c2e31;max-width:920px;margin:0 auto}
.armor img{width:100%;height:auto}
.armor figcaption{background:var(--panel);padding:10px 16px;color:var(--mute);font-size:14px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.features div{padding:4px 20px;border-left:2px solid var(--red)}
.features h3{font-size:18px;text-transform:uppercase;margin-bottom:6px}
.features p{color:var(--mute);font-size:14px}

.foot{padding:36px 0}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute);font-size:14px}
.foot-row img{height:40px;width:auto}

.legal{max-width:780px;margin:0 auto;padding:64px 24px}
.legal h1{font-size:clamp(32px,6vw,52px);margin-bottom:8px}
.legal h2{font-size:20px;margin:36px 0 10px}
.legal p,.legal li{color:var(--soft);margin-bottom:10px}
.legal ul{padding-left:22px}
.legal .muted{color:var(--mute)}
.legal a{color:var(--blue)}

@media (max-width:980px){.modes{grid-template-columns:1fr 1fr}.chassis{grid-template-columns:1fr}.logos{grid-template-columns:repeat(3,1fr)}.features{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:640px){
  .nav{padding:6px 16px}.brand img{height:38px}.nav nav{gap:14px}.nav nav a{font-size:12px}.nav nav a:nth-child(2),.nav nav a:nth-child(4){display:none}
  .wrap{padding:0 16px}.section{padding:60px 0}.hero-row{padding-top:22px;padding-bottom:24px}
  .two,.arenas,.modes,.features{grid-template-columns:1fr}
  .frame{grid-template-columns:1fr}.render{aspect-ratio:4/3;object-position:center 12%}
  .logos{grid-template-columns:1fr 1fr}
  .play{width:72px;height:72px;margin:-36px 0 0 -36px}.play::after{left:28px;top:22px;border-width:14px 0 14px 22px}
}