:root{
  --bg: #0A0D0B;
  --panel: #0f1311;
  --text: #E8F3F0;
  --muted: #B8C9C4;
  --cyan: #00FFF0;
  --cyan-soft: rgba(0,255,240,0.15);
  --line: #1a201e;
  --ring: #1ce9d9;
  --focus: 0 0 0 3px rgba(0,255,240,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,255,240,0.07), transparent),
              linear-gradient(#090c0a, #080a09 30%, #070909);
}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.4rem }

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem, 5vw, 2rem); position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(7,9,9,0.8), rgba(7,9,9,0.3) 60%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--text)}
.logo{width:32px; height:32px}
.logo .ring{fill:none; stroke:var(--ring); stroke-width:1.2; opacity:.7}
.logo .core{fill:#00FFF0}
.wordmark{font-family: Orbitron, Inter, sans-serif; letter-spacing:.02em; font-weight:700}
.ticker{opacity:.6; border:1px solid var(--line); padding:.15rem .4rem; border-radius:.35rem; margin-left:.25rem}

.nav{display:flex; gap:1rem}
.nav a{color:var(--muted); text-decoration:none; padding:.35rem .6rem; border-radius:.4rem}
.nav a:hover,.nav a:focus{color:var(--text); background:var(--cyan-soft); outline:none}
.nav .cta{color:#001412; background:var(--cyan); font-weight:700}
.nav .cta:hover{filter:brightness(1.05)}

.nav-toggle{display:none}

.hero{
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 2rem) 3rem;
  text-align:center; position:relative; overflow:hidden;
}
.hero__glow{
  position:absolute; inset:-30% -10% auto -10%;
  height:50vh;
  background: radial-gradient(45% 70% at 50% 0%, rgba(0,255,240,.25), rgba(0,255,240,0) 70%);
  filter: blur(30px);
  pointer-events:none;
}
.hero h1{
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(2rem, 6vw, 3.25rem);
  letter-spacing:.01em;
}
.hero__subtitle{color:var(--muted); max-width:820px; margin:.75rem auto 1.5rem}
.hero__actions{display:flex; gap:.75rem; justify-content:center; margin-bottom:1rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1rem; border-radius:.6rem; text-decoration:none; border:1px solid var(--line);
}
.btn--primary{background:var(--cyan); color:#001412; font-weight:700}
.btn--ghost{background:transparent; color:var(--text)}
.btn--ghost:hover{background:var(--cyan-soft)}
.btn:focus{outline: none; box-shadow: var(--focus)}

.metrics{
  list-style:none; display:flex; gap:1.25rem; justify-content:center; padding:0; margin:1rem 0 0;
}
.metrics li{display:flex; flex-direction:column; align-items:center; border:1px solid var(--line); padding:.75rem 1rem; border-radius:.75rem; background:rgba(255,255,255,0.01)}
.metrics strong{font-size:1.25rem}
.metrics span{color:var(--muted); font-size:.85rem}
.disclaimer{opacity:.55; font-size:.8rem; margin-top:.6rem}

.section{
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 5vw, 2rem);
  border-top:1px solid var(--line);
}
.section h2{
  font-family: Orbitron, Inter, sans-serif; font-weight:800; letter-spacing:.02em;
}

.section--grid{
  display:grid; gap:1.25rem; grid-template-columns: 1.5fr 1fr; align-items:start;
}
@media (max-width: 900px){
  .section--grid{grid-template-columns: 1fr}
}

.cards{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1000px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 650px){ .cards{grid-template-columns: 1fr} }

.card{
  background: linear-gradient(180deg, var(--panel), transparent);
  border:1px solid var(--line);
  border-radius:.9rem; padding:1rem;
  box-shadow: 0 0 0 1px rgba(0,255,240,0.05), 0 10px 30px rgba(0,0,0,0.3);
}
.card h3{margin-top:0}
.bullets, .checklist {padding-left:1.1rem}
.checklist li::marker{color:var(--ring)}
.bullets li{margin:.3rem 0}

.roadmap{
  display:grid; gap:.75rem; list-style:none; padding:0; margin:1rem 0 0;
}
.roadmap li{
  border-left:2px solid var(--ring); padding-left:.75rem;
}

.form{
  display:grid; gap:.75rem; max-width:720px; margin:1rem auto 0;
}
.field{display:grid; gap:.35rem}
.field span{color:var(--muted); font-size:.95rem}
input, textarea{
  background:#0c100e; color:var(--text); border:1px solid var(--line); border-radius:.6rem;
  padding:.8rem .9rem; font:inherit;
}
input::placeholder, textarea::placeholder{color:#6e7a76}
.hidden{display:none}
.form-note{opacity:.65; font-size:.85rem}

.site-footer{
  border-top:1px solid var(--line);
  padding:1.25rem clamp(1rem, 5vw, 2rem);
  display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap;
  color:var(--muted);
}
.site-footer nav a{color:var(--muted); margin-left:.6rem; text-decoration:none}
.site-footer nav a:hover{color:var(--text)}

@media (max-width: 860px){
  .nav-toggle{display:inline-flex; background:transparent; border:1px solid var(--line); color:var(--text); padding:.5rem .7rem; border-radius:.5rem}
  .nav{position:absolute; top:64px; right:1rem; background:#0b0f0d; border:1px solid var(--line); border-radius:.6rem; padding:.5rem; display:none; flex-direction:column; width:min(260px, calc(100vw - 2rem))}
  .nav.open{display:flex}
}

@font-face{
  font-family: "Orbitron";
  src: local("Orbitron");
  font-display: swap;
}