/* ============================================================
   ALERT5 — landing page styles
   Aesthetic: retro arcade / 80s neon (synthwave)
   All visuals are CSS + inline SVG. No image files required.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --bg:            #07021a;
  --bg-2:          #0d0527;
  --bg-3:          #140836;
  --panel:         rgba(22, 8, 56, 0.62);
  --panel-solid:   #160838;

  /* Neon accents */
  --magenta:       #ff2d95;
  --magenta-soft:  #ff7ac0;
  --cyan:          #00e5ff;
  --cyan-soft:     #7df3ff;
  --violet:        #8b3dff;
  --amber:         #ffb347;

  /* Text */
  --text:          #eae2ff;
  --text-dim:      #a99ed4;
  --text-faint:    #6f63a3;

  /* Lines */
  --line:          rgba(139, 61, 255, 0.35);
  --line-bright:   rgba(0, 229, 255, 0.45);

  /* Type */
  --font-display:  'Orbitron', 'Impact', sans-serif;
  --font-body:     'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Share Tech Mono', ui-monospace, 'Courier New', monospace;

  /* Layout */
  --wrap:          1140px;
  --wrap-narrow:   760px;
  --radius:        4px;
  --radius-lg:     10px;

  /* Effects */
  --glow-magenta:  0 0 18px rgba(255, 45, 149, 0.55);
  --glow-cyan:     0 0 18px rgba(0, 229, 255, 0.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
  overflow-x: hidden;
  /* Subtle vertical wash so long scrolls don't feel flat. */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 61, 255, 0.18), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
  background-attachment: fixed;
}

img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-soft); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--magenta);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--font-mono);
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* ============================================================
   CONTENT SLOTS
   Every empty content area on the page. They exist so the layout
   doesn't collapse before you have copy.

   TO REMOVE ONE: delete the <span class="slot" ...> element and
   type your text in its place.
   TO HIDE THEM ALL AT ONCE: add `.slot, .media-slot { display: none; }`
   at the bottom of this file, or delete this whole block once every
   slot is filled.
   ============================================================ */
.slot {
  display: block;
  width: 100%;
  border: 1px dashed rgba(0, 229, 255, 0.40);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 229, 255, 0.05) 0 8px,
      transparent 8px 16px
    );
  position: relative;
  color: transparent;
}
.slot::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: rgba(125, 243, 255, 0.72);
  text-transform: uppercase;
  pointer-events: none;
}
.slot-xs { min-height: 30px; }
.slot-sm { min-height: 56px; }
.slot-md { min-height: 96px; }
.slot-lg { min-height: 56px; }
.slot-xl { min-height: 90px; border-color: rgba(255, 45, 149, 0.45); }
.slot-xl::after { color: rgba(255, 122, 192, 0.8); font-size: 12px; }

.media-slot {
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(0, 229, 255, 0.35);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0, 229, 255, 0.05) 0 10px,
      transparent 10px 20px
    ),
    linear-gradient(160deg, rgba(139, 61, 255, 0.18), rgba(255, 45, 149, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.media-slot::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(125, 243, 255, 0.7);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 2, 26, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--text);
  white-space: nowrap;
}
.wordmark-alert {
  background: linear-gradient(180deg, #fff 0%, var(--magenta-soft) 55%, var(--magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 45, 149, 0.55));
}
.wordmark-five {
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}
.wordmark-sm { font-size: 1.15rem; }

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-nav a {
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav a:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
  color: var(--cyan);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.12s ease;
  white-space: nowrap;
}
.btn:hover {
  background: rgba(0, 229, 255, 0.12);
  box-shadow: var(--glow-cyan);
  color: var(--cyan-soft);
}
.btn:active { transform: translateY(1px); }

.btn-sm { padding: 9px 16px; font-size: 0.7rem; }

.btn-primary {
  border-color: transparent;
  background: linear-gradient(120deg, var(--magenta) 0%, var(--violet) 100%);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 45, 149, 0.35);
}
.btn-primary:hover {
  color: #fff;
  background: linear-gradient(120deg, #ff4ea6 0%, #9a55ff 100%);
  box-shadow: 0 0 30px rgba(255, 45, 149, 0.6);
}
.btn-primary[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 0 clamp(120px, 18vw, 220px);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* The horizon sits at the top edge of the grid floor. The sun is
   sized and placed so it rises out of exactly that line. */
.hero-bg { --horizon: 34%; }

/* Synthwave sun */
.sun {
  position: absolute;
  left: 50%;
  bottom: var(--horizon);
  width: clamp(260px, 34vw, 460px);
  aspect-ratio: 1;
  /* Sink the lower quarter below the horizon so it reads as rising. */
  transform: translate(-50%, 24%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe66b 0%, var(--amber) 34%, var(--magenta) 74%, #b31b7a 100%);
  opacity: 0.92;
  /* Solid across the top, then widening slits toward the bottom. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0 44%,
    rgba(0,0,0,0.85) 44% 46%, transparent 46% 50%,
    rgba(0,0,0,0.8)  50% 53%, transparent 53% 58%,
    rgba(0,0,0,0.7)  58% 62%, transparent 62% 68%,
    rgba(0,0,0,0.6)  68% 73%, transparent 73% 100%);
  mask-image: linear-gradient(180deg,
    #000 0 44%,
    rgba(0,0,0,0.85) 44% 46%, transparent 46% 50%,
    rgba(0,0,0,0.8)  50% 53%, transparent 53% 58%,
    rgba(0,0,0,0.7)  58% 62%, transparent 62% 68%,
    rgba(0,0,0,0.6)  68% 73%, transparent 73% 100%);
  box-shadow: 0 0 140px 50px rgba(255, 45, 149, 0.28);
}

/* Perspective grid floor.
   The perspective is applied on the transformed element itself rather
   than on an ancestor — nesting the two collapses the plane in some
   engines and the grid disappears entirely. */
.grid-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: var(--horizon);
  overflow: hidden;
}
.grid-floor-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 320%;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: 50% 0%;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 229, 255, 0.55) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(180deg,
      rgba(255, 45, 149, 0.55) 0 2px, transparent 2px 70px);
  /* Fade the far distance into the horizon instead of a hard edge. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
  animation: grid-scroll 2.6s linear infinite;
}
@keyframes grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 70px; }
}

/* Horizon glow line */
.grid-floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan) 20%, #fff 50%, var(--magenta) 80%, transparent);
  box-shadow: 0 0 24px 4px rgba(0, 229, 255, 0.5);
  opacity: 0.9;
}

/* Readability scrim: keeps the hero copy legible over the sun no
   matter how bright the artwork behind it gets. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Sized to sit behind the copy block only, so it protects the text
     without flattening the sun below it. */
  background:
    radial-gradient(ellipse 46% 26% at 50% 33%, rgba(7, 2, 26, 0.82), transparent 70%),
    linear-gradient(180deg, rgba(7, 2, 26, 0.5) 0%, transparent 26%);
  z-index: 1;
}

/* Starfield: three layered radial dots, no assets. */
.stars {
  position: absolute;
  inset: 0 0 var(--horizon) 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 28% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.6px 1.6px at 44% 34%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.2px 1.2px at 63% 16%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 88% 9%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.3px 1.3px at 6% 44%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 54% 6%, rgba(255,255,255,0.7), transparent);
  opacity: 0.7;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: 0.45; }
  to   { opacity: 0.85; }
}

/* CRT scanlines */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 2;
}

.hero-inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 6px 18px;
  background: rgba(0, 229, 255, 0.07);
  text-shadow: var(--glow-cyan);
}

.hero-title {
  width: 100%;
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* When you replace the slot with real text, this gives it the chrome+neon look. */
.hero-title:not(:has(.slot)) {
  background: linear-gradient(180deg, #ffffff 0%, #d6c7ff 40%, var(--magenta) 78%, #9e1566 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 45, 149, 0.5));
}

/* The sun sits directly behind this copy once the slots are filled,
   so give the text its own contrast rather than dimming the artwork. */
.hero-tagline {
  width: 100%;
  max-width: 620px;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--cyan-soft);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(7, 2, 26, 0.95), 0 0 30px rgba(7, 2, 26, 0.8);
}

.hero-pitch {
  width: 100%;
  max-width: 620px;
  color: var(--text-dim);
  text-shadow: 0 2px 14px rgba(7, 2, 26, 0.95), 0 0 30px rgba(7, 2, 26, 0.8);
}

/* Decorative jet */
.hero-jet {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 16vw, 200px);
  opacity: 0.9;
  z-index: -1;
  animation: jet-hover 6s ease-in-out infinite;
}
@keyframes jet-hover {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -14px); }
}
.jet-body   { fill: #1a0a3d; stroke: var(--cyan);    stroke-width: 2; }
.jet-wing   { fill: #14082f; stroke: var(--magenta); stroke-width: 2; }
.jet-tail   { fill: #14082f; stroke: var(--magenta); stroke-width: 2; }
.jet-canopy { fill: rgba(0, 229, 255, 0.35); stroke: var(--cyan-soft); stroke-width: 1.5; }
.jet-burn   { fill: var(--amber); }
.jet-art    { filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.55)); }

/* ============================================================
   EMAIL SIGNUP
   ============================================================ */
.signup-card {
  width: 100%;
  max-width: 560px;
  margin-top: 14px;
  padding: 28px 26px 22px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(255, 45, 149, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.signup-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.signup-sub {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.signup-form {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.signup-form .field { flex: 1 1 220px; }
.signup-form-wide { max-width: 520px; margin-inline: auto; }

.input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(7, 2, 26, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}
.input[aria-invalid="true"] {
  border-color: #ff5c7a;
  box-shadow: 0 0 0 3px rgba(255, 92, 122, 0.18);
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: 12px;
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.form-status[data-state="error"]   { color: #ff8fa3; }
.form-status[data-state="success"] { color: var(--cyan); text-shadow: var(--glow-cyan); }
.form-status[data-state="pending"] { color: var(--text-dim); }
.form-status[data-state="config"]  { color: var(--amber); }

.fineprint {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding: clamp(64px, 10vw, 110px) 0;
  position: relative;
}
.section-alt {
  background: linear-gradient(180deg, rgba(139, 61, 255, 0.07), rgba(255, 45, 149, 0.04));
  border-block: 1px solid var(--line);
}

.section-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--magenta-soft);
}

.section-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 26px rgba(139, 61, 255, 0.5);
}
.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  box-shadow: var(--glow-magenta);
}

.section-lede {
  margin-top: 22px;
  max-width: 640px;
  color: var(--text-dim);
}

/* ---------- Feature grid ---------- */
.feature-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.feature-card {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan));
  opacity: 0.8;
}
.feature-card:hover {
  border-color: var(--line-bright);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.12);
}
.feature-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
}
.feature-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feature-body { margin-top: 12px; color: var(--text-dim); font-size: 0.95rem; }

/* ---------- Spec strip ---------- */
.spec-strip {
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spec {
  background: var(--bg-3);
  padding: 20px 18px;
  text-align: center;
}
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.spec dd {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--cyan);
}

/* ---------- Gallery ---------- */
.gallery-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.tile {
  margin: 0;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover {
  border-color: var(--line-bright);
  box-shadow: 0 0 26px rgba(0, 229, 255, 0.14);
}
.tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.tile figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.tile-wide { grid-column: span 2; }
.tile-wide .media-slot { aspect-ratio: 16 / 9; }

/* ---------- Timeline ---------- */
.timeline {
  margin-top: 48px;
  position: relative;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet), var(--magenta));
  opacity: 0.55;
}
.milestone {
  position: relative;
  padding-bottom: 34px;
}
.milestone:last-child { padding-bottom: 0; }
.milestone-dot {
  position: absolute;
  left: -34px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-faint);
  background: var(--bg);
}
.milestone.is-done .milestone-dot {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.milestone.is-current .milestone-dot {
  border-color: var(--magenta);
  background: var(--magenta);
  box-shadow: var(--glow-magenta);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 149, 0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 45, 149, 0); }
}
.milestone-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  max-width: 220px;
}
.milestone-title {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 420px;
}
.milestone-body { margin-top: 8px; color: var(--text-dim); max-width: 560px; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 40px; display: grid; gap: 12px; }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--line-bright); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cyan);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 22px 20px; color: var(--text-dim); }

/* ---------- Closing CTA ---------- */
.cta-section {
  text-align: center;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 45, 149, 0.16), transparent 70%);
}
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-title::after { margin-inline: auto; }
/* width:100% is load-bearing — as a flex child this collapses to the
   width of its content, which is nothing while the slot is empty. */
.cta-sub {
  margin-top: 20px;
  width: 100%;
  max-width: 520px;
  color: var(--text-dim);
}
.cta-section .signup-form { margin-top: 26px; width: 100%; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(7, 2, 26, 0.9);
  padding: 44px 0 28px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand { flex: 1 1 260px; }
.footer-note { margin-top: 8px; width: 100%; max-width: 260px; }

.social { display: flex; gap: 14px; }
.social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.social a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.social svg { width: 20px; height: 20px; fill: currentColor; }

.footer-legal {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
.footer-legal .slot { display: inline-block; width: 160px; vertical-align: middle; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  /* Nav wraps to its own row and scrolls sideways rather than
     disappearing — no hamburger menu needed for four links. */
  .header-inner {
    flex-wrap: wrap;
    padding-block: 12px;
    gap: 12px 16px;
  }
  .wordmark { margin-right: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .tile-wide { grid-column: span 1; }
  .tile-wide .media-slot { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { padding-inline: 16px; }
  .signup-card { padding: 22px 18px 18px; }
  .signup-form { flex-direction: column; }
  .signup-form .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-legal { flex-direction: column; }
}

/* ============================================================
   SCROLL REVEAL
   The .reveal class is added by main.js only when the visitor has
   not asked for reduced motion, so nothing here can hide content
   from someone whose JavaScript failed to run.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .hero-bg, .hero-jet, .scanlines, .site-header { display: none; }
  body { background: #fff; color: #000; }
}