:root{
  --bg: #070b08;
  --bg-2: #0c130d;
  --ink: #eaf3ea;
  --ink-dim: #8fa393;
  --acid: #c8ff3d;
  --acid-dim: #7fa32b;
  --amber: #ff9f2e;
  --line: rgba(200,255,61,0.14);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --display: 'Chakra Petch', var(--mono);
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{height:100%;}

body{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #10190f 0%, var(--bg) 55%), var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

/* ---------- atmosphere ---------- */

.field-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 10%, transparent 75%);
  animation: driftGrid 40s linear infinite;
}
@keyframes driftGrid{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 460px 0, 0 460px; }
}

.grain{
  position:fixed; inset:-100%; z-index:5; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,1%); }
  50%{ transform:translate(1%,-2%); } 75%{ transform:translate(-1%,-1%); } 100%{ transform:translate(0,0); }
}

.scanline{
  position:fixed; left:0; right:0; height:140px; z-index:4; pointer-events:none;
  background: linear-gradient(to bottom, transparent, rgba(200,255,61,0.05) 45%, rgba(200,255,61,0.08) 50%, rgba(200,255,61,0.05) 55%, transparent);
  animation: sweepDown 7s ease-in-out infinite;
}
@keyframes sweepDown{
  0%{ top:-140px; } 50%{ top:100%; } 50.01%{ top:-140px; } 100%{ top:-140px; }
}

/* ---------- HUD corners ---------- */

.hud-corner{
  position:fixed; z-index:6; font-size:0.7rem; letter-spacing:0.12em;
  color: var(--ink-dim); text-transform:uppercase; font-weight:500;
}
.hud-tl{ top:22px; left:26px; }
.hud-tr{ top:22px; right:26px; font-variant-numeric:tabular-nums; }
.hud-bl{ bottom:56px; left:26px; }
.hud-br{ bottom:56px; right:26px; }
.hud-br .ok{ color: var(--acid); }

@media (max-width: 640px){
  .hud-corner{ font-size:0.6rem; }
  .hud-tl{ top:16px; left:16px; }
  .hud-tr{ top:16px; right:16px; }
  .hud-bl, .hud-br{ display:none; }
}

/* ---------- radar ---------- */

.radar{
  position:absolute; top:-40px; right:-40px; width:340px; height:340px; z-index:0;
  pointer-events:none; opacity:0.5;
}
.radar-ring{
  position:absolute; inset:0; border-radius:50%; border:1px solid var(--line);
}
.radar-ring.r2{ inset:60px; }
.radar-ring.r3{ inset:120px; }
.radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, var(--acid) 0deg, transparent 60deg 360deg);
  opacity:0.18;
  animation: spin 4s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width: 900px){ .radar{ display:none; } }

/* ---------- stage ---------- */

.stage{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 120px 24px 80px;
  gap: 22px;
}

.flight-path{
  position:absolute; top:8%; left:0; right:0; height:300px; z-index:0;
  pointer-events:none;
}
.flight-path svg{ width:100%; height:100%; }
.flight-path path{
  fill:none; stroke: var(--acid-dim); stroke-width:1.5; stroke-dasharray:4 8; opacity:0.5;
}
.drone-icon{
  position:absolute; top:0; left:0; color: var(--acid);
  filter: drop-shadow(0 0 10px rgba(200,255,61,0.55));
  offset-path: path('M -50 220 C 150 40, 350 260, 550 100 S 900 40, 1050 140');
  animation: fly 14s linear infinite;
}
@keyframes fly{
  0%{ offset-distance:0%; } 100%{ offset-distance:100%; }
}
@media (max-width: 900px){ .flight-path{ display:none; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--ink-dim); font-weight:500;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background: var(--acid);
  box-shadow:0 0 12px 2px rgba(200,255,61,0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.4; transform:scale(0.7);} }

.wordmark{
  font-family: var(--display);
  font-weight:700;
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height:0.92;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.w-drone{ color: var(--ink); }
.w-go{
  color: var(--bg);
  -webkit-text-stroke: 2px var(--acid);
  text-shadow: none;
}

.tagline{
  max-width:640px; font-size:1.05rem; line-height:1.65; color: var(--ink-dim);
  font-weight:400;
}
.tagline br{ display:block; }
@media (max-width:560px){ .tagline br{ display:none; } }

.countdown-badge{
  margin-top:6px;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px; border:1px solid var(--line); border-radius:999px;
  background: rgba(200,255,61,0.04);
  font-size:0.78rem; letter-spacing:0.05em; color: var(--ink);
}
.countdown-badge strong{ color: var(--acid); }
.badge-icon{ color: var(--amber); animation: spin 3s linear infinite; display:inline-block; }

.feature-strip{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 0;
  margin-top:8px; max-width:720px;
}
.feature-strip li{
  font-size:0.78rem; color: var(--ink-dim); padding:0 18px; border-right:1px solid var(--line);
  display:flex; align-items:center; gap:8px; letter-spacing:0.02em;
}
.feature-strip li:last-child{ border-right:none; }
.f-num{ color: var(--acid-dim); font-weight:600; }
@media (max-width:640px){
  .feature-strip li{ border-right:none; padding:0 10px; }
}

.notify-form{
  margin-top:20px; display:flex; gap:10px; width:100%; max-width:440px;
}
.notify-form input{
  flex:1; min-width:0; background: rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:8px; padding:14px 16px; color: var(--ink); font-family:var(--mono);
  font-size:0.9rem; outline:none; transition: border-color 0.2s, background 0.2s;
}
.notify-form input::placeholder{ color:#4d5e50; }
.notify-form input:focus{ border-color: var(--acid-dim); background: rgba(200,255,61,0.04); }

.notify-form button{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  background: var(--acid); color: #0a1206; border:none; border-radius:8px;
  padding:14px 18px; font-family:var(--mono); font-weight:600; font-size:0.85rem;
  letter-spacing:0.01em; cursor:pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.notify-form button:hover{ transform:translateY(-2px); box-shadow:0 8px 24px -8px rgba(200,255,61,0.6); }
.notify-form button:active{ transform:translateY(0); }
.notify-form button svg{ transition: transform 0.2s; }
.notify-form button:hover svg{ transform:translateX(3px); }

@media (max-width:520px){
  .notify-form{ flex-direction:column; }
}

.notify-msg{
  min-height:1.2em; font-size:0.8rem; color: var(--acid);
  letter-spacing:0.02em;
}

.site-footer{
  position:relative; z-index:2;
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:22px 24px; font-size:0.72rem; color: var(--ink-dim);
  border-top:1px solid var(--line);
}
.footer-sep{ opacity:0.4; }
@media (max-width:520px){ .footer-sep{ display:none; } .site-footer{ flex-direction:column; gap:4px; } }