:root{
  --bg:#06060e;
  --bg-2:#0c0c1a;
  --panel:#12121f;
  --ink:#e7e9f5;
  --ink-dim:#9aa0bd;
  --cyan:#5bd6ff;
  --magenta:#ff5bb0;
  --orange:#ff9d3d;
  --purple:#9d7bff;
  --green:#5bffa8;
  --line:rgba(120,140,220,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Rajdhani',system-ui,sans-serif;
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand{font-family:'Orbitron',sans-serif;letter-spacing:.04em}
a{color:inherit;text-decoration:none}
b,strong{color:#fff;font-weight:700}

/* scanline overlay */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.10) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;opacity:.6;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  background-size:cover;
  background-position:center;
  display:flex;flex-direction:column;
}
.nav{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
}
.brand{font-weight:900;font-size:1.35rem;color:#fff;text-shadow:0 0 18px rgba(91,214,255,.5)}
.brand-accent{color:var(--cyan)}
.nav-links{display:flex;gap:26px;font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.12em}
.nav-links a{color:var(--ink-dim);transition:color .2s,text-shadow .2s}
.nav-links a:hover{color:var(--cyan);text-shadow:0 0 12px rgba(91,214,255,.6)}

.hero-inner{
  position:relative;z-index:3;
  margin:auto;text-align:center;
  padding:0 20px 40px;max-width:900px;
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.34em;font-size:.8rem;font-weight:600;
  color:var(--cyan);margin-bottom:18px;
}
.title{
  font-weight:900;line-height:.92;
  font-size:clamp(3.4rem,12vw,8.5rem);
  color:#fff;
  text-shadow:0 0 40px rgba(91,214,255,.35),0 0 4px rgba(255,255,255,.4);
}
.title-fps{display:block;color:var(--cyan);text-shadow:0 0 44px rgba(91,214,255,.8)}
.tagline{
  margin:26px auto 0;max-width:640px;font-size:1.24rem;color:var(--ink);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.cta-row{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 30px;border-radius:2px;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.14em;
  transition:transform .15s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:#04121a;box-shadow:0 0 26px rgba(91,214,255,.55)}
.btn-primary:hover{box-shadow:0 0 40px rgba(91,214,255,.85)}
.btn-ghost{border:1px solid rgba(120,140,220,.5);color:#fff}
.btn-ghost:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(91,214,255,.3)}

.hero-stats{
  list-style:none;display:flex;gap:clamp(20px,5vw,60px);justify-content:center;
  margin-top:52px;flex-wrap:wrap;
}
.hero-stats li{display:flex;flex-direction:column;align-items:center}
.stat-num{font-family:'Orbitron',sans-serif;font-weight:900;font-size:2.3rem;color:#fff;line-height:1}
.stat-lbl{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--ink-dim);margin-top:6px}

.scroll-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:var(--cyan);font-size:1.1rem;z-index:3;animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* ---------- SECTIONS ---------- */
.section{
  max-width:1200px;margin:0 auto;
  padding:clamp(64px,10vw,120px) clamp(20px,5vw,48px);
}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head h2,.split-text h2{
  font-size:clamp(1.9rem,4.5vw,3rem);color:#fff;
  text-shadow:0 0 30px rgba(91,214,255,.2);
}
.section-head p{color:var(--ink-dim);font-size:1.14rem;margin-top:16px}

/* feature grid */
.feature-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:6px;
  padding:30px 26px;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(91,214,255,.4);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.card-icon{
  width:52px;height:52px;border-radius:8px;display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:18px;
  color:var(--glow);border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);
  background:color-mix(in srgb,var(--glow) 12%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--glow) 30%,transparent);
}
.card h3{font-size:1.16rem;color:#fff;margin-bottom:10px}
.card p{color:var(--ink-dim);font-size:1.02rem}

/* split section */
.section-split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center;
}
.split-text p{color:var(--ink-dim);margin-top:18px}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{
  font-size:.8rem;font-weight:600;letter-spacing:.04em;
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--cyan);
  background:rgba(91,214,255,.06);
}
.split-media img{width:100%;border-radius:8px;border:1px solid var(--line);display:block;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.split-media figcaption{margin-top:12px;font-size:.9rem;color:var(--ink-dim);text-align:center}

/* arsenal */
.arsenal-grid{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.weapon{
  position:relative;padding:26px 24px;border-radius:6px;
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--cyan);
}
.weapon:nth-child(2){border-left-color:var(--orange)}
.weapon:nth-child(3){border-left-color:var(--green)}
.weapon:nth-child(4){border-left-color:var(--purple)}
.weapon:nth-child(5){border-left-color:var(--magenta)}
.weapon:nth-child(6){border-left-color:#ff5b5b}
.w-tag{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--cyan)}
.weapon:nth-child(2) .w-tag{color:var(--orange)}
.weapon:nth-child(3) .w-tag{color:var(--green)}
.weapon:nth-child(4) .w-tag{color:var(--purple)}
.weapon:nth-child(5) .w-tag{color:var(--magenta)}
.weapon:nth-child(6) .w-tag{color:#ff5b5b}
.weapon h4{font-size:1.1rem;color:#fff;margin:8px 0 8px}
.weapon p{color:var(--ink-dim);font-size:1rem}

/* gallery */
.gallery{
  display:grid;gap:16px;grid-template-columns:repeat(2,1fr);
}
.shot{border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;position:relative}
.shot-wide{grid-column:1 / -1}
.shot img{width:100%;display:block;transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 14px;font-size:.92rem;color:#dfe3f7;
  background:linear-gradient(180deg,rgba(6,6,14,0),rgba(6,6,14,.9));
}

/* download */
.download-grid{
  display:grid;gap:22px;grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto;
}
.dl-card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:10px;padding:30px 28px;
  display:flex;flex-direction:column;gap:18px;transition:border-color .2s,box-shadow .2s;
}
.dl-card:hover{border-color:rgba(91,214,255,.35);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.dl-os{display:flex;align-items:center;gap:16px}
.dl-glyph{
  width:56px;height:56px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:1.9rem;color:var(--glow);
  border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);
  background:color-mix(in srgb,var(--glow) 12%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--glow) 28%,transparent);
}
.dl-os h3{font-size:1.35rem;color:#fff;line-height:1.1}
.dl-meta{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.dl-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;
  padding:16px 24px;font-size:.92rem;
}
.dl-size{
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;background:rgba(4,18,26,.35);color:#04121a;
}
.dl-note{font-size:.94rem;color:var(--ink-dim);margin-top:-2px}
.dl-note code{
  font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;
  padding:1px 6px;border-radius:4px;background:#0a0a14;border:1px solid var(--line);color:var(--cyan);
}
.dl-foot{text-align:center;color:var(--ink-dim);font-size:.92rem;margin-top:28px}

/* play */
.section-play{background:linear-gradient(180deg,transparent,rgba(12,12,26,.6))}
.play-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.code-block{background:#0a0a14;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.code-head{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#101020;border-bottom:1px solid var(--line)}
.dot{width:11px;height:11px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.code-title{margin-left:8px;font-size:.78rem;letter-spacing:.1em;color:var(--ink-dim);text-transform:uppercase}
.code-block pre{padding:22px;overflow-x:auto}
.code-block code{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:1rem;line-height:1.8;color:#cdd3ef}
.c-cmt{color:#5a6288}
.c-prompt{color:var(--green)}

.controls{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:24px}
.controls h3{font-size:1.1rem;color:#fff;margin-bottom:14px}
.controls table{width:100%;border-collapse:collapse}
.controls td{padding:7px 0;font-size:.98rem;color:var(--ink-dim);border-bottom:1px solid rgba(120,140,220,.08)}
.controls tr:last-child td{border-bottom:none}
.controls td:last-child{text-align:right;color:var(--ink)}
kbd{
  display:inline-block;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;
  padding:2px 8px;margin:0 2px;border-radius:4px;color:#fff;
  background:#1c1c30;border:1px solid rgba(120,140,220,.3);box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.objective{
  margin-top:30px;text-align:center;color:var(--ink-dim);max-width:820px;margin-inline:auto;
  font-size:1.06rem;
}
.key{font-weight:700}
.key-b{color:var(--cyan)}.key-y{color:#ffe14d}.key-r{color:#ff6161}

/* footer */
.footer{
  text-align:center;padding:48px 20px;border-top:1px solid var(--line);
  background:#04040a;
}
.footer .brand{display:block;margin-bottom:10px;font-size:1.2rem}
.footer p{color:var(--ink-dim);font-size:.95rem;max-width:560px;margin:0 auto}

/* responsive */
@media(max-width:820px){
  .nav-links{display:none}
  .section-split{grid-template-columns:1fr}
  .play-grid{grid-template-columns:1fr}
  .download-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .shot-wide{grid-column:auto}
}