:root {
    --bg: #090c11;
    --panel: #11161d;
    --panel-2: #151b23;
    --text: #f2f5f7;
    --muted: #919aa5;
    --red: #ff3d2e;
    --red-dark: #bd1f1a;
    --cyan: #18c7e8;
    --line: rgba(255, 255, 255, .1);
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--body); }
a { color: inherit; text-decoration: none; }

.site-header {
    position: absolute; inset: 0 0 auto; z-index: 10; height: 82px; padding: 0 clamp(22px, 5vw, 78px);
    display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; font: 800 20px/1 var(--body); letter-spacing: -.05em; }
.brand > span:last-child > span { color: var(--red); }
.brand-mark { width: 28px; height: 28px; display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); gap: 2px; transform: rotate(45deg); }
.brand-mark i { display: block; background: var(--red); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { opacity: .55; }
nav { display: flex; gap: clamp(18px, 3vw, 48px); color: #c4cbd2; font-size: 13px; font-weight: 650; }
nav a:hover { color: #fff; }
.header-cta { padding: 11px 24px; border: 1px solid rgba(255,255,255,.55); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

.hero { min-height: 760px; height: 100vh; max-height: 980px; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(440px, .94fr); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 480px; height: 480px; left: -280px; top: 140px; background: var(--red); filter: blur(180px); opacity: .13; }
.hero-grid { position: absolute; inset: 0 50% 0 0; opacity: .13; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent); }
.hero-copy { z-index: 2; align-self: center; padding: 110px clamp(30px, 7vw, 112px) 40px; }
.eyebrow, .section-number { color: #b4bcc4; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 26px; height: 3px; background: var(--red); }
h1 { max-width: 750px; margin: 22px 0 24px; font: 400 clamp(70px, 8vw, 132px)/.82 var(--display); letter-spacing: -.045em; transform: scaleX(.86); transform-origin: left; }
h1 em { color: var(--red); font-style: normal; }
.lead { max-width: 620px; color: #aeb6be; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.75; }
.hero-actions { display: flex; gap: 14px; margin-top: 38px; }
.button { min-height: 54px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 40px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 850; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--red); box-shadow: 6px 6px 0 var(--red-dark); }
.button-primary b { font-size: 19px; }
.button-ghost { border: 1px solid var(--line); }
.button-ghost:hover { background: rgba(255,255,255,.05); }
.hero-stats { display: flex; gap: 0; margin-top: 72px; }
.hero-stats div { min-width: 155px; display: flex; gap: 12px; align-items: center; padding-right: 25px; margin-right: 25px; border-right: 1px solid var(--line); }
.hero-stats div:last-child { border: 0; }
.hero-stats strong { font: 400 35px/1 var(--display); color: #fff; }
.hero-stats span { color: #707a84; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }

.hero-art { position: relative; overflow: hidden; background: linear-gradient(145deg, #2a2023 0%, #401d20 42%, #8c2b24 100%); clip-path: polygon(10% 0,100% 0,100% 100%,0 100%); }
.hero-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,10,.65), transparent 30%), repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.018) 6px); }
.sun { position: absolute; width: 430px; height: 430px; border-radius: 50%; right: -60px; top: 13%; background: #ff6a3f; filter: blur(1px); opacity: .37; box-shadow: 0 0 110px #ff3d2e; }
.voxel { position: absolute; width: 130px; height: 130px; transform: rotate(30deg) skew(-12deg); background: #7c2c24; border: 2px solid rgba(255,130,90,.2); box-shadow: inset -28px -28px 0 rgba(0,0,0,.22), 25px 35px 70px rgba(0,0,0,.25); }
.voxel-a { right: 7%; bottom: 8%; }.voxel-b { left: 8%; top: 25%; width: 90px; height: 90px; opacity: .5; }.voxel-c { right: 20%; top: 6%; width: 70px; height: 70px; opacity: .38; }
.fighter { position: absolute; width: 280px; height: 500px; left: 43%; top: 48%; transform: translate(-50%,-42%) rotate(-4deg); filter: drop-shadow(25px 30px 25px rgba(0,0,0,.4)); }
.fighter > div { position: absolute; background: #1c2329; box-shadow: inset -14px -10px 0 #11161a, inset 5px 4px 0 #4b555b; }
.fighter-head { width: 106px; height: 100px; left: 72px; top: 8px; border-radius: 5px; }
.fighter-head::before { content: ""; position: absolute; width: 80px; height: 24px; left: 13px; top: 43px; background: #111; box-shadow: inset 0 0 15px #ef382c; }
.fighter-head i { position: absolute; width: 24px; height: 6px; left: 29px; top: 52px; background: #ff4938; box-shadow: 0 0 12px #ff3d2e; z-index: 2; }
.fighter-body { width: 142px; height: 180px; left: 54px; top: 102px; clip-path: polygon(12% 0,88% 0,100% 82%,78% 100%,22% 100%,0 82%); }
.fighter-arm { width: 68px; height: 155px; left: 15px; top: 132px; transform: rotate(23deg); }
.fighter-gun { width: 230px; height: 49px; left: 2px; top: 202px; transform: rotate(-8deg); background: #12171b !important; clip-path: polygon(0 18%,65% 18%,69% 0,100% 15%,94% 55%,67% 55%,59% 100%,40% 100%,37% 58%,0 58%); }
.fighter-leg { width: 59px; height: 205px; top: 271px; }.fighter-leg-a { left: 62px; transform: rotate(3deg); }.fighter-leg-b { left: 137px; transform: rotate(-5deg); }
.crosshair { position: absolute; width: 150px; height: 150px; right: 12%; top: 23%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.crosshair::before,.crosshair::after { content:""; position:absolute; background:rgba(255,255,255,.45); }.crosshair::before{width:190px;height:1px;left:-20px;top:74px}.crosshair::after{height:190px;width:1px;top:-20px;left:74px}.crosshair span{position:absolute;width:8px;height:8px;background:var(--red);left:70px;top:70px}
.arena-label { position: absolute; right: 7%; bottom: 6%; color: rgba(255,255,255,.6); font: 800 10px/1 var(--body); letter-spacing: .2em; }

.intro, .modes, .features { padding: clamp(90px, 11vw, 160px) clamp(24px, 8vw, 130px); }
.intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: end; border-top: 1px solid var(--line); }
.intro h2, .section-heading h2, .final-cta h2 { margin: 18px 0 0; font: 400 clamp(45px, 5vw, 76px)/.98 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.intro h2 span { color: var(--red); }
.intro > p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0; }
.modes { background: #0d1117; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; }
.section-heading h2 { font-size: clamp(44px, 5vw, 68px); }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mode-card { position: relative; min-height: 420px; overflow: hidden; padding: 42px; display: flex; flex-direction: column; justify-content: end; border: 1px solid var(--line); background: var(--panel); }
.mode-card::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-80px; top:-70px; filter:blur(90px); opacity:.18; }
.mode-red::before { background:var(--red); }.mode-blue::before{background:var(--cyan)}
.mode-index { position:absolute; right:28px; top:18px; color:rgba(255,255,255,.04); font:400 130px/1 var(--display); }
.mode-icon { position:absolute; left:42px; top:58px; width:120px; height:100px; display:flex; align-items:end; gap:8px; }
.mode-icon i { display:block; width:34px; height:80px; background:#303943; clip-path:polygon(20% 0,80% 0,100% 20%,100% 100%,0 100%,0 20%); }
.mode-icon i:nth-child(2){height:105px;background:var(--red)}.mode-icon.teams i{width:25px;height:70px}.mode-icon.teams i:nth-child(2),.mode-icon.teams i:nth-child(3){height:100px;background:var(--cyan)}
.mode-code { margin:0 0 13px; font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--red); }.mode-blue .mode-code{color:var(--cyan)}
.mode-card h3 { margin:0; font:400 40px/1 var(--display); text-transform:uppercase; }.mode-card > p:last-child{max-width:510px;color:var(--muted);line-height:1.65;margin-bottom:0}
.features { display:grid; grid-template-columns:.65fr 1.35fr; gap:8vw; }.features .section-heading{display:block}.feature-list{border-top:1px solid var(--line)}
.feature-list article { display:grid; grid-template-columns:50px 1fr 30px; gap:24px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line); }
.feature-list b{color:var(--red);font-size:11px}.feature-list h3{margin:0 0 6px;font:400 30px/1 var(--display);text-transform:uppercase}.feature-list p{margin:0;color:var(--muted);font-size:14px}.feature-list article>span{font-size:24px;color:#56616b}
.final-cta { min-height:500px; padding:90px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; background:linear-gradient(135deg,#251215,#571c1a); }
.final-cta::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(30deg, transparent 48%, #fff 49%, #fff 50%, transparent 51%); background-size:45px 45px; }.final-cta>*{position:relative}.final-cta h2{font-size:clamp(70px,10vw,140px);line-height:.8}.final-cta>p:not(.eyebrow){color:#c6aaa8;margin:25px 0 32px}.final-cta .eyebrow span{background:#fff}
footer { min-height:120px; padding:30px clamp(24px,7vw,110px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#666f78; font-size:11px; border-top:1px solid var(--line); } footer .brand{color:#fff;font-size:17px}

@media (max-width: 980px) {
    .hero { height:auto; max-height:none; grid-template-columns:1fr; }.hero-art{min-height:600px;clip-path:none}.hero-copy{padding-top:150px}.hero-grid{inset:0}.intro,.features{grid-template-columns:1fr;gap:50px}.fighter{left:50%}.hero-stats{margin-top:50px}
}
@media (max-width: 680px) {
    .site-header{height:70px;padding:0 18px}nav{display:none}.header-cta{padding:9px 15px}.brand{font-size:17px}.brand-mark{width:23px;height:23px}
    .hero-copy{padding:120px 22px 70px}.hero-art{min-height:490px}.hero-actions{flex-direction:column;align-items:stretch}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-stats div{min-width:0;display:block;margin:0;padding:0 8px;text-align:center}.hero-stats span{display:block;margin-top:6px}.fighter{transform:translate(-50%,-50%) scale(.8)}.crosshair{right:6%}
    .intro,.modes,.features{padding:78px 22px}.intro{gap:40px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:390px;padding:30px}.mode-icon{left:30px}.section-heading{display:block}.section-heading h2{margin-top:18px}.feature-list article{grid-template-columns:35px 1fr 20px;gap:12px}.feature-list p{line-height:1.55}footer{flex-direction:column;text-align:center;padding:45px 20px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.button{transition:none} }