/* ============================================================================
   CS/SPACE — the shared atmosphere for the pages outside the galaxy.
   ----------------------------------------------------------------------------
   The universe, the product worlds and these pages were three different dark
   themes that happened to all be dark. This file is the one palette, plus a
   starfield backdrop, so the whole site reads as one place.

   It does NOT touch layout. Each page keeps its own structure and its own
   signature interaction — a shared skin, not a shared skeleton.

   Every value below is APCA-checked against --void. The old per-page greys
   were not: FAQ ran its body copy at Lc 37.6, Services at 40.8 and the
   testimonials page at 28.2, against a 75 requirement for body text. That is
   the real reason this file exists; matching the galaxy is the bonus.
   ========================================================================= */

:root{
  --void:#03040c;          /* dominant. never pure black */
  --haze:#0B1024;          /* panels, raised surfaces */
  --ink:#EAF0FA;           /* primary text — Lc 96.6 */
  --dim:#C9D3E9;           /* secondary text — Lc 77.9 */
  --line:rgba(147,160,188,.16);
  --cyan:#6FE3FF;          /* the single action colour — Lc 78.7 */
  --amber:#FFB55E;         /* large/bold only — Lc 69, fails body */
  --amber-lit:#FFD9A0;     /* the tint for SMALL warm text — Lc 85 */
  --ion:#7CE7A6;           /* status, large/bold only */
  --disp:'Unbounded',sans-serif;
  --body:'Sora',sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* ---- the starfield ------------------------------------------------------
   Four layers of radial-gradient dots at different sizes and opacities, over
   a very slight nebula wash. No canvas, no JS, no requestAnimationFrame — it
   costs nothing and it cannot drop frames, which matters because these pages
   are read rather than flown through. */
body{background:var(--void);color:var(--ink)}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(234,240,250,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(234,240,250,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 63%, rgba(234,240,250,.50), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 74%, rgba(201,211,233,.40), transparent 60%),
    radial-gradient(1.3px 1.3px at 27% 88%, rgba(234,240,250,.38), transparent 60%),
    radial-gradient(1px 1px   at 60% 36%, rgba(201,211,233,.34), transparent 60%),
    radial-gradient(1.5px 1.5px at 5% 52%, rgba(234,240,250,.42), transparent 60%),
    radial-gradient(1px 1px   at 95% 42%, rgba(201,211,233,.30), transparent 60%);
  background-repeat:repeat;
  background-size:520px 520px, 380px 380px, 640px 640px, 300px 300px,
                  700px 700px, 440px 440px, 580px 580px, 340px 340px;
  opacity:.75;
}

/* The nebula wash. Two very soft, very dark colour fields so the black is
   never flat — the same trick the galaxy uses, at a fraction of the cost. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(58% 42% at 18% 8%,  rgba(42,74,122,.20), transparent 70%),
    radial-gradient(52% 46% at 86% 72%, rgba(90,47,82,.16),  transparent 72%),
    radial-gradient(70% 50% at 50% 110%,rgba(31,74,92,.18),  transparent 74%);
}

/* Drift, only where it is welcome. Slow enough to be subliminal — the point is
   that the page is never quite static, not that anything is moving. */
@media (prefers-reduced-motion: no-preference){
  body::before{animation:cs-drift 240s linear infinite}
}
@keyframes cs-drift{
  to{background-position:520px 520px, -380px 380px, 640px -640px, -300px 300px,
                         700px 700px, -440px -440px, 580px -580px, -340px 340px}
}

/* ---- the return link, shared ------------------------------------------- */
.cs-home{
  position:fixed; top:16px; left:16px; z-index:60;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  background:rgba(6,9,19,.82); border:1px solid rgba(111,227,255,.45); border-radius:999px;
  padding:11px 18px; min-height:44px; display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(10px); transition:.25s;
}
.cs-home:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px)}
.cs-home:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ---- shared utilities --------------------------------------------------- */
.visually-hidden:where(:not(:focus-within,:active)){
  position:absolute!important; clip-path:inset(50%)!important;
  width:1px!important; height:1px!important; overflow:hidden!important;
  white-space:nowrap!important; border:0!important; padding:0!important; margin:-1px!important;
}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}

@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}