/*
  OrbiVigil — marketing "orbit" skin (home pages only; body.space).
  Owner directive 2026-08-01: award-level dark cosmos hero — overrides the
  base sheet's restraint contract FOR THE MARKETING HOME ONLY. Console and
  subpages keep the base look.

  Palette (the night side of Earth, as VIIRS sees it):
    --void   #05070d  deep space
    --haze   #0b1322  atmosphere blue
    --star   #e9eef6  starlight text
    --dim    #93a0b4  secondary text
    --signal #7fa3c9  instrument blue (orbits, beams, lines)
    --ember  #ff6b35  FIRE ONLY — every ember pixel means detection

  Rule: ember appears nowhere except where it means fire.
*/

body.space {
  --void: #05070d;
  --haze: #0b1322;
  --star: #e9eef6;
  --dim: #93a0b4;
  --signal: #7fa3c9;
  --ember: #ff6b35;

  background: var(--void);
  color: var(--star);
}

/* ---------- Header floats over space ---------- */
body.space .site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid rgba(127, 163, 201, 0.14);
}
body.space .site-header a { color: var(--star); }
body.space .site-nav a { color: var(--dim); }
body.space .site-nav a:hover { color: var(--star); }
body.space .site-nav .nav-cta {
  border: 1px solid rgba(127, 163, 201, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  color: var(--star);
  background: rgba(11, 19, 34, 0.5);
}

/* ---------- The hero: space, limb, satellite, fire ---------- */
body.space .hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(120% 90% at 70% 10%, #0a1120 0%, var(--void) 55%);
  padding: 0;
}

/* starfield: three drifting layers of tiny radial dots */
body.space .sky,
body.space .sky::before,
body.space .sky::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(233, 238, 246, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 8%, rgba(233, 238, 246, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, rgba(233, 238, 246, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, rgba(233, 238, 246, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 26%, rgba(233, 238, 246, 0.85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 44%, rgba(233, 238, 246, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 51%, rgba(233, 238, 246, 0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 43%, rgba(233, 238, 246, 0.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 81% 55%, rgba(233, 238, 246, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 60%, rgba(233, 238, 246, 0.55) 50%, transparent 51%);
  background-size: 720px 720px;
  animation: drift 240s linear infinite;
  pointer-events: none;
}
body.space .sky::before {
  background-size: 520px 520px;
  opacity: 0.6;
  animation-duration: 180s;
  animation-direction: reverse;
}
body.space .sky::after {
  background-size: 960px 960px;
  opacity: 0.4;
  animation-duration: 320s;
}
@keyframes drift {
  to { transform: translate3d(120px, 60px, 0); }
}

/* the Earth limb: a vast night-lit sphere, only its shoulder in frame */
body.space .limb {
  position: absolute;
  inset: auto 0 0 0;
  height: 46svh;
  pointer-events: none;
}
body.space .earth {
  position: absolute;
  left: 50%;
  top: 0;
  width: 165vw;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: url("/img/earth-night.jpg") no-repeat;
  filter: brightness(1.32) saturate(1.25) contrast(1.05);
  /* frame the Europe / Mediterranean lights on the visible shoulder */
  background-size: 165% auto;
  background-position: 48% 23%;
  box-shadow:
    inset 0 60px 110px rgba(5, 7, 13, 0.35),
    inset 0 -40vw 30vw rgba(0, 0, 0, 0.85),
    0 -26px 90px rgba(127, 163, 201, 0.5),
    0 -3px 22px rgba(191, 219, 254, 0.65);
}
/* atmosphere: the thin blue line every astronaut talks about */
body.space .earth::before {
  content: "";
  position: absolute;
  inset: -1.2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 97.4%, rgba(148, 197, 253, 0.5) 98.6%, rgba(127, 163, 201, 0.12) 99.4%, transparent 100%);
}
/* dawn breaking on the eastern limb */
body.space .earth::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 18% at 82% 2%, rgba(255, 190, 120, 0.35), transparent 70%),
    radial-gradient(45% 12% at 82% 1%, rgba(255, 230, 190, 0.5), transparent 65%),
    linear-gradient(105deg, transparent 55%, rgba(5, 7, 13, 0.55) 85%);
}

/* the watcher: satellite and its scan beam share one anchor */
body.space .watcher {
  position: absolute;
  top: 9svh;
  right: 9vw;
  width: 190px;
  animation: hover-sat 9s ease-in-out infinite;
  pointer-events: none;
}
body.space .sat {
  position: relative;
  width: 100%;
  height: auto;
  transform: rotate(14deg);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.7)) drop-shadow(0 -6px 22px rgba(148,197,253,0.28)) brightness(1.02);
}
@keyframes hover-sat {
  50% { transform: translateY(-9px); }
}
body.space .beam {
  position: absolute;
  top: 74%;
  left: 50%;
  width: 130px;
  height: 44svh;
  transform: translateX(-52%) rotate(9deg);
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(148, 197, 253, 0.30), rgba(127, 163, 201, 0.05) 60%, transparent);
  clip-path: polygon(42% 0, 58% 0, 88% 100%, 8% 100%);
  animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep {
  0%, 100% { opacity: 0.55; transform: translateX(-52%) rotate(9deg); }
  50% { opacity: 0.95; transform: translateX(-52%) rotate(4deg); }
}

/* detections: ember pings on the Mediterranean shoulder — REAL meaning */
body.space .ping {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember), 0 0 26px rgba(255, 107, 53, 0.6);
}
body.space .ping::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 53, 0.7);
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}
body.space .ping:nth-child(2)::after { animation-delay: 0.9s; }
body.space .ping:nth-child(3)::after { animation-delay: 1.7s; }

/* ---------- Hero copy: editorial, left-aligned ---------- */
body.space .hero-inner {
  position: relative;
  z-index: 10;
  max-width: 1120px;
  margin-inline: auto;
  padding: 14svh 24px 34svh;
  text-align: left;
}
body.space .tagline {
  color: var(--signal);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
}
body.space .hero h1 {
  margin-top: 1rem;
  max-width: 15ch;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.06;
  font-weight: 250;
  letter-spacing: 0.01em;
  color: var(--star);
}
body.space .hero h1 strong {
  font-weight: 550;
}
body.space .lede {
  margin-top: 1.4rem;
  max-width: 52ch;
  color: var(--dim);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* live line: the page proves itself */
body.space .live-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  color: var(--star);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
body.space .live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember);
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe {
  50% { opacity: 0.45; }
}
body.space .live-line strong { color: var(--ember); font-weight: 650; }

/* Per-country breakdown under the live line. Ordered by count, busiest first,
   so the sentence above never has to name one country and be wrong about it. */
body.space .live-countries {
  margin-top: 0.55rem;
  color: var(--star);
  opacity: 0.78;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
body.space .live-countries:empty { display: none; }
body.space .live-countries b { color: var(--star); opacity: 1; font-weight: 600; }

body.space .hero-actions { margin-top: 2rem; }
/* The positioning block sits exactly where the page fades into the earth
   image, so its background is unknowable: void at the top of the block, lit
   coastline at the bottom. Tinting the text cannot fix that — the block gets
   its OWN surface, a near-opaque scrim that holds whatever is behind it.
   Measured floor (text #c3cedd on the scrim over pure-white city lights, the
   worst pixel the image can present): 10.4:1. Over void: 12.4:1. The heading
   on --star: 14.3:1 worst case. WCAG AA body text needs 4.5:1. */
body.space .hero-positioning {
  --scrim: rgba(6, 10, 20, 0.92);
  --dim-strong: #c3cedd;
  margin-top: 2.4rem;
  max-width: 62ch;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid rgba(127, 163, 201, 0.28);
  border-radius: 14px;
  background: var(--scrim);
  box-shadow: 0 18px 48px rgba(2, 4, 9, 0.5);
}
@supports (backdrop-filter: blur(1px)) {
  body.space .hero-positioning { backdrop-filter: blur(14px) saturate(0.9); }
}
body.space .hero-positioning h2 {
  color: var(--star);
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
body.space .hero-positioning p {
  margin-top: 0.85rem;
  color: var(--dim-strong);
  font-size: 0.98rem;
  line-height: 1.65;
}
body.space .hero-positioning strong { color: var(--star); font-weight: 600; }
body.space .hero-positioning a {
  color: var(--star);
  text-decoration: underline;
  text-decoration-color: rgba(127, 163, 201, 0.6);
  text-underline-offset: 3px;
}
body.space .hero-positioning a:hover { text-decoration-color: var(--star); }
@media (max-width: 640px) {
  body.space .hero-positioning { padding: 1.2rem 1.1rem 1.3rem; border-radius: 12px; }
}
body.space .btn-primary {
  background: var(--ember);
  border-color: var(--ember);
  color: #140a05;
  font-weight: 650;
  box-shadow: 0 6px 30px rgba(255, 107, 53, 0.35);
}
body.space .btn-primary:hover { filter: brightness(1.07); }
body.space .btn-secondary {
  background: rgba(11, 19, 34, 0.55);
  border: 1px solid rgba(127, 163, 201, 0.4);
  color: var(--star);
}
body.space .notice {
  border-color: rgba(127, 163, 201, 0.25);
  background: rgba(11, 19, 34, 0.55);
  color: var(--dim);
}
body.space .notice-dot { background: var(--ember); }

/* ---------- The rest of the page: quiet dark discipline ---------- */
body.space .section { border-color: rgba(127, 163, 201, 0.12); }
body.space .section-head .eyebrow { color: var(--signal); letter-spacing: 0.34em; }
body.space .section-head h2 { color: var(--star); font-weight: 350; }
body.space .section-head p { color: var(--dim); }
body.space .product-card,
body.space .callout,
body.space .insight-grid > *,
body.space .source-grid > *,
body.space .platform-grid > * {
  background: rgba(11, 19, 34, 0.55);
  border: 1px solid rgba(127, 163, 201, 0.16);
  color: var(--star);
}
body.space .product-card p,
body.space .prose,
body.space .step-list p { color: var(--dim); }
body.space .step-list h3, body.space .product-card h3 { color: var(--star); }
body.space .step-index {
  background: rgba(127, 163, 201, 0.14);
  color: var(--signal);
}
body.space .badge {
  border-color: rgba(127, 163, 201, 0.35);
  background: transparent;
  color: var(--dim);
}
body.space .badge-active {
  border-color: rgba(255, 107, 53, 0.5);
  color: var(--ember);
  background: rgba(255, 107, 53, 0.08);
}
body.space input,
body.space select,
body.space textarea {
  background: rgba(5, 7, 13, 0.7);
  border: 1px solid rgba(127, 163, 201, 0.3);
  color: var(--star);
}
body.space input::placeholder, body.space textarea::placeholder { color: var(--dim); }
body.space .site-footer {
  border-top: 1px solid rgba(127, 163, 201, 0.14);
  background: transparent;
  color: var(--dim);
}
body.space .site-footer a:hover { color: var(--star); }

/* ---------- Floors ---------- */
body.space :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body.space .sky, body.space .sky::before, body.space .sky::after,
  body.space .sat, body.space .beam, body.space .ping::after,
  body.space .live-dot { animation: none; }
}
@media (max-width: 720px) {
  body.space .limb { height: 38svh; }
  body.space .earth { width: 340vw; }
  body.space .sat { right: 6vw; width: 56px; top: 12svh; }
  body.space .beam { display: none; }
  body.space .hero-inner { padding: 16svh 20px 20svh; }
}

/* ---------- Critique pass 2: the stragglers ---------- */
body.space .cta {
  background: rgba(11, 19, 34, 0.55);
  border: 1px solid rgba(127, 163, 201, 0.16);
  color: var(--star);
  border-radius: 12px;
}
body.space .cta h2 { color: var(--star); }
body.space .cta p { color: var(--dim); }
/* card titles were base-ink on dark — unreadable */
body.space .insight-grid h3,
body.space .source-grid h3,
body.space .platform-grid h3,
body.space .callout h3 { color: var(--star); }
body.space .insight-grid p,
body.space .source-grid p,
body.space .platform-grid p { color: var(--dim); }
body.space .read-more { color: var(--signal); }
/* base sheet outguns the skin on form fields — win explicitly */
body.space input,
body.space select,
body.space textarea {
  background: rgba(5, 7, 13, 0.75) !important;
  border: 1px solid rgba(127, 163, 201, 0.3) !important;
  color: var(--star) !important;
}
body.space select option { background: #0b1322; color: var(--star); }

/* the four-step cards were still daylight */
body.space .step-list li {
  background: rgba(11, 19, 34, 0.55);
  border: 1px solid rgba(127, 163, 201, 0.16);
  color: var(--star);
  border-radius: 12px;
}
body.space .step-list li p { color: var(--dim); }
@media (max-width: 720px) {
  body.space .watcher { right: 4vw; width: 120px; top: 9svh; }
  body.space .watcher .beam { display: none; }
}

/* ---------- Fixed auth CTA on the dark skin ---------- */
body.space .auth-corner .btn-secondary {
  background: rgba(11, 19, 34, 0.85);
  border: 1px solid rgba(127, 163, 201, 0.45);
  color: var(--star);
  backdrop-filter: blur(6px);
}
body.space .auth-corner .btn-secondary:hover { border-color: var(--signal); }
/* The sign-up button is the loudest non-fire element on the page — starlight,
   not ember. Ember means detection and nothing else (see header). Applies
   everywhere .auth-signup is used: corner CTA, tier CTAs, form submits. */
body.space .auth-signup {
  background: var(--star);
  border: 1px solid var(--star);
  color: #05070d;
  font-weight: 650;
  box-shadow: 0 4px 18px rgba(233, 238, 246, 0.18);
}
body.space .auth-signup:hover,
body.space .auth-signup:focus-visible {
  background: var(--star);
  border-color: var(--star);
  color: #05070d;
  filter: brightness(1.08);
}

/* ---------- Pricing tiers on the dark skin ---------- */
body.space .tier {
  background: rgba(11, 19, 34, 0.55);
  border: 1px solid rgba(127, 163, 201, 0.16);
  color: var(--star);
}
body.space .tier h3 { color: var(--star); font-weight: 400; }
body.space .tier p,
body.space .tier-features,
body.space .tier-audience,
body.space .tier-note,
body.space .form-status { color: var(--dim); }
body.space .tier-price { color: var(--star); }
body.space .tier-price .tier-period { color: var(--dim); }
body.space .tier-quote { color: var(--star); }
body.space .tier-features li::before { color: var(--signal); }

/* The recommended tier: a quiet instrument-blue lift, never a shout. */
body.space .tier-featured {
  border-color: rgba(127, 163, 201, 0.45);
  background: rgba(15, 26, 46, 0.72);
  box-shadow: 0 0 0 1px rgba(127, 163, 201, 0.12), 0 18px 44px rgba(5, 7, 13, 0.55);
}
body.space .tier-flag {
  align-self: flex-start;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* "Early access" / "in development" — the honesty badge. Never ember: it is
   not a detection, and it must not read as something that already works. */
body.space .badge-early {
  border-color: rgba(127, 163, 201, 0.45);
  background: rgba(127, 163, 201, 0.1);
  color: var(--signal);
}

/* "Live" — only for a feature verified working end-to-end in production.
   Distinct from badge-early so the two can never be confused at a glance. */
body.space .badge-live {
  border-color: rgba(126, 200, 160, 0.5);
  background: rgba(126, 200, 160, 0.12);
  color: #8fd6b0;
}

body.space .section-divider {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(127, 163, 201, 0.14);
}

body.space .contact-form label { color: var(--star); }

/* ---------- Sub-page header + footer were base-ink on the dark skin ---------- */
/* The pricing/article header inherits the base sheet's dark-on-light colours;
   on the space skin that renders near-invisible. */
body.space .article-header h1,
body.space .article-header .breadcrumb a { color: var(--star); }
body.space .article-header .dek,
body.space .article-header .breadcrumb { color: var(--dim); }
body.space .site-footer p,
body.space .footer-meta p { color: var(--dim); }
body.space .footer-nav a { color: var(--star); }

/* ---------- Mobile top bar on the dark skin ----------
   body.space pins the header ABSOLUTE over the hero (see §Header above), which
   out-specifies the base sheet's mobile rule — so the fixed bar has to be
   restated here. Solid void background: the bar now owns that strip, and the
   hero starts below it. */
@media (max-width: 900px) {
  body.space .site-header {
    position: fixed;
    background: rgba(5, 7, 13, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(127, 163, 201, 0.16);
  }

  /* The hero measured 100svh from y=0; with the bar reserved above it that
     overflowed by exactly the bar's height. */
  body.space .hero {
    min-height: calc(100svh - var(--ov-topbar-h) - env(safe-area-inset-top));
  }
}

@media (max-width: 720px) {
  /* Top padding no longer has to clear a header drawn on top of the copy. */
  body.space .hero-inner { padding: 7svh 20px 18svh; }
  /* The satellite hung at 9svh — under the bar once the bar became opaque. */
  body.space .watcher { top: 4svh; right: 4vw; width: 104px; }
}

@media (max-width: 560px) {
  /* Below this the headline uses the full width and the satellite was landing
     on top of "watching over". It is decorative — hide it rather than let it
     sit on the copy; the starfield and Earth limb still carry the hero. */
  body.space .watcher { display: none; }
}

@media (max-width: 400px) {
  body.space .hero-inner { padding: 6svh 18px 16svh; }
  /* Two full-width CTAs read better than two cramped ones side by side. */
  body.space .hero-actions { gap: 0.7rem; }
  body.space .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- Language switcher on the dark skin ---------- */
body.space .lang-switch > summary {
  border-color: rgba(127, 163, 201, 0.35);
  background: rgba(11, 19, 34, 0.5);
  color: var(--dim);
}
body.space .lang-switch > summary:hover,
body.space .lang-switch[open] > summary { color: var(--star); border-color: var(--signal); }
body.space .lang-menu {
  background: rgba(5, 7, 13, 0.96);
  border-color: rgba(127, 163, 201, 0.28);
  backdrop-filter: blur(10px);
}
body.space .lang-menu a { color: var(--dim); }
body.space .lang-menu a:hover,
body.space .lang-menu a:focus-visible { background: rgba(127, 163, 201, 0.16); color: var(--star); }
body.space .lang-menu a[aria-current] { color: var(--star); }