:root {
  --bg: #070b12;
  --panel: #0d1420;
  --panel-2: #111b2a;
  --text: #f4f7fb;
  --muted: #99a7ba;
  --line: rgba(255,255,255,.12);
  --accent: #37d9ff;
  --accent-2: #7b61ff;
  --success: #38e58c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 10%, rgba(55,217,255,.10), transparent 28rem),
    radial-gradient(circle at 20% 40%, rgba(123,97,255,.08), transparent 26rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(22px, 5vw, 76px);
  background: rgba(7,11,18,.84);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark {
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--accent); font-family:Orbitron; font-weight:800;
  box-shadow: inset 0 0 18px rgba(55,217,255,.14);
}
.brand strong, .brand small { display:block; line-height:1; letter-spacing:.14em; }
.brand strong { font-family:Orbitron; font-size:.95rem; }
.brand small { color:var(--muted); font-size:.67rem; margin-top:5px; }
.nav { display:flex; gap:28px; }
.nav a { color:var(--muted); font-size:.92rem; }
.nav a:hover { color:var(--text); }
.menu-toggle { display:none; background:none; color:white; border:1px solid var(--line); padding:8px 10px; }

main { position:relative; }
.hero {
  min-height: 78vh;
  display:grid; grid-template-columns: 1.25fr .75fr; align-items:center;
  gap:64px; padding: clamp(70px, 10vw, 130px) clamp(22px, 7vw, 110px);
}
.eyebrow { color:var(--accent); font-family:Orbitron; font-size:.72rem; letter-spacing:.2em; }
h1,h2,h3 { font-family:Orbitron; line-height:1.12; margin:0 0 18px; }
h1 { font-size:clamp(2.8rem,6vw,6.4rem); letter-spacing:-.04em; }
h1 span { color:transparent; -webkit-text-stroke:1px var(--accent); }
h2 { font-size:clamp(2rem,4vw,3.5rem); }
h3 { font-size:1.45rem; }
.hero-text { max-width:720px; color:var(--muted); font-size:1.08rem; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 22px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border:1px solid var(--line);
  font-family:Orbitron; font-size:.76rem; letter-spacing:.08em;
}
.btn.primary { background:var(--accent); color:#041018; border-color:var(--accent); font-weight:800; }
.btn.secondary:hover { border-color:var(--accent); }
.status-row { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:.9rem; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 16px var(--success); }

.mission-card {
  border:1px solid var(--line); padding:24px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.card-topline { display:flex; justify-content:space-between; color:var(--muted); font-family:Orbitron; font-size:.7rem; letter-spacing:.14em; }
.radar { position:relative; width:min(100%,360px); aspect-ratio:1; margin:30px auto; border:1px solid var(--line); border-radius:50%; overflow:hidden; }
.radar::before,.radar::after { content:""; position:absolute; background:var(--line); }
.radar::before { width:1px; height:100%; left:50%; }
.radar::after { height:1px; width:100%; top:50%; }
.radar-ring { position:absolute; border:1px solid var(--line); border-radius:50%; inset:15%; }
.ring-2 { inset:30%; }.ring-3 { inset:44%; }
.radar-sweep {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 320deg, rgba(55,217,255,.34) 350deg, transparent 360deg);
  animation:spin 5s linear infinite;
}
.radar-core { position:absolute; inset:0; display:grid; place-items:center; font-family:Orbitron; font-size:2.6rem; font-weight:800; }
@keyframes spin { to { transform:rotate(360deg); } }
.telemetry { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; }
.telemetry div { border-top:1px solid var(--line); padding-top:12px; }
.telemetry dt { color:var(--muted); font-size:.65rem; letter-spacing:.12em; }
.telemetry dd { margin:4px 0 0; font-family:Orbitron; font-size:.8rem; }

.section { padding:100px clamp(22px,7vw,110px); }
.section-heading { max-width:760px; margin-bottom:40px; }
.section-heading > p:last-child { color:var(--muted); }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.game-card {
  min-height:280px; padding:28px; border:1px solid var(--line);
  background:linear-gradient(145deg,var(--panel),rgba(13,20,32,.45));
  display:flex; flex-direction:column;
}
.game-card p { color:var(--muted); }
.tag { align-self:flex-start; padding:5px 8px; border:1px solid var(--accent); color:var(--accent); font-size:.62rem; letter-spacing:.14em; margin-bottom:44px; }
.card-meta { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.74rem; }

.split-section {
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  padding:100px clamp(22px,7vw,110px); border-block:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.split-section > div:first-child p:last-child { color:var(--muted); max-width:620px; }
.feature-list > div { display:grid; grid-template-columns:60px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.feature-list span { font-family:Orbitron; color:var(--accent); }
.feature-list p { margin:0; color:var(--muted); }
.feature-list strong { color:var(--text); }

.project-strip { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.project-strip div { padding:24px; border-right:1px solid var(--line); }
.project-strip div:last-child { border-right:0; }
.project-strip strong,.project-strip span { display:block; }
.project-strip strong { font-family:Orbitron; margin-bottom:8px; }
.project-strip span { color:var(--muted); }

.cta { text-align:center; padding:120px 22px; }
.cta p:not(.eyebrow) { color:var(--muted); margin-bottom:28px; }
footer {
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:24px clamp(22px,5vw,76px); border-top:1px solid var(--line);
  color:var(--muted); font-size:.8rem;
}

@media (max-width: 900px) {
  .hero,.split-section { grid-template-columns:1fr; }
  .hero { gap:40px; }
  .card-grid,.project-strip { grid-template-columns:1fr; }
  .project-strip div { border-right:0; border-bottom:1px solid var(--line); }
  .project-strip div:last-child { border-bottom:0; }
}
@media (max-width: 700px) {
  .menu-toggle { display:block; }
  .nav {
    display:none; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; padding:20px; background:#080d15; border-bottom:1px solid var(--line);
  }
  .nav.open { display:flex; }
  .telemetry { grid-template-columns:1fr; }
  h1 { font-size:2.7rem; }
}