@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg:#02080F; --bg-deep:#01050B; --panel:rgba(10,28,50,.65); --panel-solid:#071525;
  --panel-hi:#0A2238; --line:rgba(34,211,238,.15); --line-strong:rgba(34,211,238,.35);
  --cyan:#22D3EE; --cyan-dim:#0891B2; --cyan-glow:rgba(34,211,238,.5);
  --blue:#3B82F6; --orange:#FF7A1A; --orange-glow:rgba(255,122,26,.5); --red:#EF4444;
  --fg:#E0F2FE; --fg-dim:rgba(224,242,254,.55); --water:#041A2E;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ---------- reset & base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }
h1,h2,h3 { font-family:var(--font-display); line-height:1.1; letter-spacing:-0.01em; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}

.container { max-width:1100px; margin:0 auto; padding:0 20px; }

/* ---------- HUD primitives ---------- */
.hud-label {
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan-dim);
}
.pill {
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:.55em 1.1em; background:var(--panel);
}
.pill::before {
  content:""; width:.5em; height:.5em; border-radius:50%;
  background:var(--orange); box-shadow:0 0 8px var(--orange-glow);
}
.btn {
  display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:.95rem; letter-spacing:.02em; color:var(--bg-deep);
  background:var(--cyan); border:1px solid var(--cyan); border-radius:10px;
  padding:.7em 1.6em; transition:box-shadow .2s ease, transform .2s ease;
}
.btn:hover { text-decoration:none; box-shadow:0 0 24px var(--cyan-glow); transform:translateY(-1px); }
.panel {
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.6rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.section-title { font-size:clamp(1.6rem,3.5vw,2.3rem); font-weight:700; margin:.35em 0 .9em; }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:10;
  background:rgba(2,8,15,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand { display:flex; align-items:center; gap:.65rem; color:var(--fg); }
.brand:hover { text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:7px; }
.brand span { font-family:var(--font-display); font-weight:700; letter-spacing:.06em; font-size:1.02rem; }
.site-nav { display:flex; gap:1.4rem; }
@media (max-width:559px) {
  .brand span { display:none; }
  .site-nav { gap:1rem; }
}
.site-nav a { font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.site-nav a:hover { color:var(--cyan); text-decoration:none; }

/* ---------- hero: sonar board (signature) ---------- */
.grid-bg { position:relative; isolation:isolate; overflow:hidden; }
.grid-bg::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse 120% 90% at 50% 0%, var(--water) 0%, var(--bg) 55%, var(--bg-deep) 100%);
}
.grid-bg::after { /* vignette so grid fades at edges */
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, var(--bg-deep) 100%);
}
.hero { padding:5.5rem 0 4rem; text-align:center; }
.hero .hud-label { display:block; margin-bottom:1.1rem; }
.hero h1 {
  font-size:clamp(2.6rem,7vw,4.6rem); font-weight:700; letter-spacing:.04em;
  text-shadow:0 0 40px var(--cyan-glow);
}
.hero .tagline { max-width:34rem; margin:1.2rem auto 1.6rem; color:var(--fg-dim); font-size:1.08rem; }
.hero .pill { margin-bottom:2.6rem; }
.hero-art { position:relative; max-width:820px; margin:0 auto; }
.hero-art img { filter:drop-shadow(0 18px 48px rgba(34,211,238,.22)); }
.radar { /* slow sonar sweep behind the ship */
  position:absolute; inset:-12% -6%; z-index:-1; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(34,211,238,.10) 24deg, transparent 60deg);
  animation:sweep 14s linear infinite; pointer-events:none;
}
@keyframes sweep { to { transform:rotate(360deg); } }
.coord-rail {
  position:absolute; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.5em;
  color:var(--fg-dim); opacity:.55; user-select:none; pointer-events:none;
}
.coord-rail.top { top:.6rem; left:50%; transform:translateX(-50%); }
.coord-rail.side { left:.6rem; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; }
@media (max-width:719px) { .coord-rail { display:none; } }

/* ---------- sections ---------- */
.section { padding:4.5rem 0; }
.section-head { text-align:center; }
.feature-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem; }
@media (min-width:720px) { .feature-grid { grid-template-columns:1fr 1fr; gap:1.3rem; } }
.feature-grid .panel h3 { font-size:1.15rem; margin:.7rem 0 .4rem; }
.feature-grid .panel p { color:var(--fg-dim); font-size:.95rem; }
.feature-grid .panel:hover { border-color:var(--line-strong); }

.shots-carousel { position:relative; }
.shots-carousel::before, .shots-carousel::after {
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;
}
.shots-carousel::before { left:0; background:linear-gradient(to right, var(--bg), transparent); }
.shots-carousel::after { right:0; background:linear-gradient(to left, var(--bg), transparent); }
.shots-strip {
  display:flex; gap:1rem; overflow-x:auto; padding:1.2rem 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.shots-strip::-webkit-scrollbar { display:none; }
.shots-strip img {
  flex:0 0 auto; width:min(78vw,560px); scroll-snap-align:center;
  border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 10px 40px rgba(1,5,11,.8);
}
.car-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-strong); background:rgba(2,8,15,.72); color:var(--cyan);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.car-btn:hover:not(:disabled) { box-shadow:0 0 22px var(--cyan-glow); border-color:var(--cyan); }
.car-btn:disabled { opacity:.3; cursor:default; }
.car-btn svg { display:block; filter:drop-shadow(0 0 6px var(--cyan-glow)); }
.car-btn.prev { left:10px; }
.car-btn.next { right:10px; }
@media (max-width:719px) { .car-btn { display:none; } }
.car-dots { display:flex; gap:.7rem; justify-content:center; margin-top:1.1rem; }
.car-dot {
  width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid var(--line-strong); background:transparent;
  transition:background .2s ease, box-shadow .2s ease;
}
.car-dot.active { background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 10px var(--cyan-glow); }

.cta { text-align:center; }
.cta .panel { padding:3rem 1.6rem; }
.cta img { max-width:420px; margin:0 auto 1.4rem; }
.cta h2 { font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:.5em; }
.cta p { color:var(--fg-dim); max-width:32rem; margin:0 auto 1.6rem; }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--line); padding:2.2rem 0 2.8rem; margin-top:3rem; }
.site-footer .container { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.footer-links { display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-links a { font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.footer-links a:hover { color:var(--cyan); text-decoration:none; }
.site-footer .legal-line { color:var(--fg-dim); font-size:.8rem; }

/* ---------- legal / text pages ---------- */
.legal { max-width:70ch; margin:0 auto; padding:3.5rem 20px 4.5rem; }
.legal h1 { font-size:clamp(1.9rem,4.5vw,2.6rem); margin-bottom:.3em; }
.legal .updated { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:2.2rem; }
.legal h2 { font-size:1.25rem; margin:2.2em 0 .6em; color:var(--fg); }
.legal h3 { font-size:1.02rem; margin:1.4em 0 .4em; }
.legal p, .legal li { color:var(--fg-dim); font-size:.97rem; }
.legal ul { padding-left:1.2rem; margin:.5em 0 1em; }
.legal li { margin:.35em 0; }
.legal strong { color:var(--fg); font-weight:600; }
.legal a { overflow-wrap:anywhere; }

/* ---------- support FAQ ---------- */
.faq-list { display:grid; gap:1rem; margin-top:2rem; }
.faq-list .panel h3 { font-size:1.05rem; margin:.6rem 0 .4rem; }
.faq-list .panel p { color:var(--fg-dim); font-size:.95rem; }

/* ---------- 404 ---------- */
.notfound { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 20px; }
.notfound h1 { font-size:clamp(2.2rem,6vw,3.4rem); margin:.4em 0; }
.notfound p { color:var(--fg-dim); margin-bottom:2rem; }