/* ─── AI GUY ON THE FLY — "SPACE" THEME ───────────────────────────────────
   Shared design system ported from nevermissleadsnow.com/lp: near-black
   backdrop, single cyan/teal accent, Barlow Condensed + Inter, animated
   starfield. Included on every marketing page so they read as one product
   family instead of each page having its own one-off palette. */

:root {
  --accent:      #2DD4CE;
  --accent-dark: #1FA89C;
  --accent-bg:   rgba(45,212,206,0.14);
  --accent-glow: rgba(45,212,206,0.30);
  --bg:          #060911;
  --bg-section:  #0A0F1A;
  --bg-card:     #0D1420;
  --border:      rgba(255,255,255,0.08);
  --border-hot:  rgba(45,212,206,0.40);
  --text:        #F1F5F9;
  --text-mid:    #C7D2DE;
  --text-muted:  #7C8AA0;
  --green:       #4ADE80;
  --green-bg:    rgba(74,222,128,0.14);
  --green-bdr:   rgba(74,222,128,0.35);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.20);
}

/* ─── STARFIELD ─── page-wide, fixed to the viewport so it reads behind
   every section. Any element meant to sit above it (nav, cards, content
   wrappers) needs position:relative + z-index:1 or higher. */
#space-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.star-layer { position: absolute; inset: -10% -10%; background-repeat: repeat; pointer-events: none; }
.star-layer.l1 {
  background-image: radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,0.9), transparent),
                     radial-gradient(1.2px 1.2px at 65% 12%, rgba(255,255,255,0.7), transparent),
                     radial-gradient(1.6px 1.6px at 85% 55%, rgba(255,255,255,0.85), transparent),
                     radial-gradient(1.1px 1.1px at 42% 78%, rgba(255,255,255,0.6), transparent),
                     radial-gradient(1.3px 1.3px at 12% 62%, rgba(255,255,255,0.75), transparent);
  background-size: 340px 340px; animation: star-drift 90s linear infinite;
}
.star-layer.l2 {
  background-image: radial-gradient(1px 1px at 30% 20%, rgba(45,212,206,0.55), transparent),
                     radial-gradient(1.3px 1.3px at 75% 40%, rgba(183,148,246,0.5), transparent),
                     radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.5), transparent),
                     radial-gradient(1.4px 1.4px at 8% 92%, rgba(255,255,255,0.55), transparent);
  background-size: 260px 260px; animation: star-drift 60s linear infinite reverse;
}
.star-layer.l3 {
  background-image: radial-gradient(0.9px 0.9px at 15% 45%, rgba(255,255,255,0.9), transparent),
                     radial-gradient(0.9px 0.9px at 60% 65%, rgba(255,255,255,0.8), transparent),
                     radial-gradient(0.9px 0.9px at 90% 20%, rgba(255,255,255,0.85), transparent),
                     radial-gradient(0.9px 0.9px at 38% 10%, rgba(255,255,255,0.7), transparent);
  background-size: 180px 180px; animation: star-twinkle 4s ease-in-out infinite, star-drift 40s linear infinite;
}
@keyframes star-drift { from { transform: translate(0,0); } to { transform: translate(-160px,-160px); } }
@keyframes star-twinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .star-layer { animation: none; } }