/* ==========================================================================
   nx-system.css — Nexavorix shared design system
   Loaded AFTER styles.css on every public commercial page.

   WHY THIS FILE EXISTS
   The site carries ~520KB of per-page inline <style> against a 68KB shared
   stylesheet, so there was no real shared system — which is why the pages read
   as a template despite being individually decent. This layer establishes one
   set of tokens, one type scale, one shape language and one motion contract on
   top of what already exists, without unpicking the inline CSS.

   Art direction: distance, orbit, controlled light, engineered systems.
   Deep near-black (never pure #000), one spectral accent family, fine rules
   instead of universal glow, and a single warm ivory reserved for the moments
   where Nicolas speaks personally.

   RULES FOR EDITING
   - Add tokens here, never new page-level overrides.
   - The warm accent (--nx-warm) is for personal/authorship moments ONLY. It is
     not a second brand colour and must never compete with the accent family.
   - Every motion rule must survive prefers-reduced-motion (see the block at the
     foot of this file, which is the single source of truth for that).
   ========================================================================== */

:root {
  /* --- surface: near-black charcoal + midnight blue, never pure black ---- */
  --nx-bg-0:        #04070B;   /* deepest — page base, hero voids            */
  --nx-bg-1:        #070B12;   /* default section                            */
  --nx-bg-2:        #0B111B;   /* raised section / alternating band          */
  --nx-surface:     #0D131E;   /* cards, panels                              */
  --nx-surface-hi:  #111926;   /* hover / active surface                     */

  /* --- type ------------------------------------------------------------- */
  --nx-text:        #F3F6F8;
  --nx-text-2:      #9CA8B8;
  --nx-text-3:      #6E7C8D;   /* metadata, indices — still AA on --nx-bg-1  */

  /* --- one accent family. No blue-on-blue gradient walls. ---------------- */
  --nx-accent:      #78C8FF;
  --nx-accent-hi:   #8ED8FF;
  --nx-accent-dim:  rgba(120, 200, 255, 0.14);
  --nx-accent-line: rgba(120, 200, 255, 0.30);

  /* --- warm human accent: Nicolas moments only --------------------------- */
  --nx-warm:        #E8DCC8;
  --nx-warm-dim:    rgba(232, 220, 200, 0.12);

  /* --- fine borders: white at 8–14% -------------------------------------- */
  --nx-line:        rgba(255,255,255,0.09);
  --nx-line-hi:     rgba(255,255,255,0.14);

  /* --- shape: precision instrument, not SaaS bubble ---------------------- */
  --nx-r:           4px;
  --nx-r-lg:        8px;
  --nx-r-pill:      999px;     /* status chips + filters ONLY               */

  /* --- spacing rhythm ---------------------------------------------------- */
  --nx-s1: 8px;  --nx-s2: 16px; --nx-s3: 24px; --nx-s4: 40px;
  --nx-s5: 64px; --nx-s6: 96px; --nx-s7: 140px;

  /* --- motion contract --------------------------------------------------- */
  --nx-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --nx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --nx-dur:         .55s;
  --nx-dur-fast:    .22s;

  --nx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   1. TYPOGRAPHY — editorial, tighter display tracking, disciplined measure
   ========================================================================== */

.nx h1, .nx h2, .nx h3,
.nx-h1, .nx-h2, .nx-h3 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  color: var(--nx-text);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.nx-h1 { font-size: clamp(2.6rem, 6.2vw, 5rem);  line-height: 1.02; font-weight: 600; }
.nx-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem);  line-height: 1.10; font-weight: 600; }
.nx-h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; font-weight: 600;
         letter-spacing: -0.012em; }

.nx-lede {
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  color: var(--nx-text-2);
  max-width: 34em;              /* disciplined measure, not full-bleed prose */
}
.nx-body { font-size: 1rem; line-height: 1.72; color: var(--nx-text-2); max-width: 38em; }

/* Small technical marks: indices, coordinates, build labels. Never body copy. */
.nx-meta {
  font-family: var(--nx-mono);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nx-text-3);
}
.nx-index { font-family: var(--nx-mono); font-size: 0.84rem; color: var(--nx-accent);
            letter-spacing: 0.1em; }

/* One emphasised phrase per viewport — not gradient text everywhere. */
.nx-em { color: var(--nx-accent-hi); }

/* ==========================================================================
   2. LAYOUT — editorial composition, asymmetry, generous negative space
   ========================================================================== */

.nx-section     { padding: var(--nx-s7) 0; position: relative; }
.nx-section--tight { padding: var(--nx-s6) 0; }
.nx-bg-0 { background: var(--nx-bg-0); }
.nx-bg-1 { background: var(--nx-bg-1); }
.nx-bg-2 { background: var(--nx-bg-2); }

.nx-wrap  { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.nx-narrow{ width: min(760px,  calc(100% - 48px)); margin-inline: auto; }

/* Section heads are left-aligned by default. Centred headings on every band is
   a large part of what made the site feel like a template. */
.nx-head { margin-bottom: var(--nx-s5); max-width: 46em; }
.nx-head .nx-meta { display: block; margin-bottom: var(--nx-s2); }

/* Asymmetric editorial split: content column + evidence column. */
.nx-split {
  display: grid; gap: var(--nx-s5);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.nx-split--reverse > :first-child { order: 2; }

/* A hairline that reads as an engineered registration mark, not decoration. */
.nx-rule { height: 1px; background: var(--nx-line); border: 0; margin: var(--nx-s4) 0; }
.nx-rule--accent {
  background: linear-gradient(90deg, var(--nx-accent-line), transparent 62%);
}

/* ==========================================================================
   3. SURFACES — flat depth and fine rules instead of universal glass + glow
   ========================================================================== */

.nx-panel {
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-lg);
  padding: var(--nx-s3);
  transition: border-color var(--nx-dur-fast) var(--nx-ease),
              background var(--nx-dur-fast) var(--nx-ease);
}
.nx-panel:hover { border-color: var(--nx-line-hi); background: var(--nx-surface-hi); }

/* Exactly ONE element per view may carry bloom. Used sparingly, by intent. */
.nx-bloom { position: relative; }
.nx-bloom::before {
  content: ""; position: absolute; inset: -28% -12% auto 50%;
  translate: -50% 0; width: 60%; aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center, rgba(120,200,255,0.16), transparent 68%);
  filter: blur(28px); pointer-events: none; z-index: 0;
}
.nx-bloom > * { position: relative; z-index: 1; }

/* Corner registration marks — engineered, quiet, decorative only. */
.nx-reg { position: relative; }
.nx-reg::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px;
  border-top: 1px solid var(--nx-accent-line);
  border-right: 1px solid var(--nx-accent-line);
  opacity: .6; pointer-events: none;
}

/* ==========================================================================
   4. CONTROLS — precision instrument. Pills reserved for status/filters.
   ========================================================================== */

.nx-btn {
  --_bg: var(--nx-accent);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: var(--nx-r);
  border: 1px solid transparent;
  background: var(--_bg);
  color: #04070B;
  font-weight: 650; font-size: 0.98rem; letter-spacing: -0.006em;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--nx-dur-fast) var(--nx-ease),
              transform var(--nx-dur-fast) var(--nx-ease);
}
.nx-btn:hover { --_bg: var(--nx-accent-hi); }
.nx-btn:active { transform: translateY(1px); }
.nx-btn .nx-arrow { transition: transform var(--nx-dur-fast) var(--nx-ease-out); }
.nx-btn:hover .nx-arrow { transform: translateX(4px); }

/* Specular sweep — a few pixels of controlled light, not a glow. */
.nx-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.34) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s var(--nx-ease-out);
}
.nx-btn:hover::after { transform: translateX(120%); }

.nx-btn--ghost {
  background: transparent; color: var(--nx-text);
  border-color: var(--nx-line-hi);
}
.nx-btn--ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--nx-accent-line); }
.nx-btn--ghost::after { display: none; }

/* Text link with a travelling underline — used for secondary actions. */
.nx-link {
  color: var(--nx-accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--nx-accent-line); padding-bottom: 2px;
  transition: border-color var(--nx-dur-fast) var(--nx-ease), color var(--nx-dur-fast);
}
.nx-link:hover { color: var(--nx-accent-hi); border-color: var(--nx-accent-hi); }

/* Genuine status chip — this is what pills are still for. */
.nx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--nx-r-pill);
  border: 1px solid var(--nx-line-hi); background: rgba(255,255,255,0.03);
  font-family: var(--nx-mono); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nx-text-2);
}
.nx-chip--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--nx-accent); box-shadow: 0 0 8px var(--nx-accent);
}

/* ==========================================================================
   5. PERSONAL VOICE — the one place warmth is allowed
   ========================================================================== */

.nx-personal {
  border-left: 2px solid var(--nx-warm);
  background: linear-gradient(90deg, var(--nx-warm-dim), transparent 46%);
  padding: var(--nx-s3) var(--nx-s4);
  border-radius: 0 var(--nx-r-lg) var(--nx-r-lg) 0;
}
.nx-personal .nx-meta { color: var(--nx-warm); }
.nx-signature {
  font-family: var(--nx-mono); font-size: 0.85rem; color: var(--nx-text-3);
  letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 8px;
}
.nx-signature::before {
  content: ""; width: 18px; height: 1px; background: var(--nx-warm); opacity: .8;
}

/* ==========================================================================
   6. ATMOSPHERE — horizon + starfield as CSS, no stock space imagery
   ========================================================================== */

.nx-horizon { position: relative; overflow: hidden; isolation: isolate; }
.nx-horizon::before {          /* gravitational arc / planetary limb        */
  content: ""; position: absolute; left: 50%; bottom: -68vw;
  width: 128vw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(120,200,255,0.10), transparent 46%);
  border-top: 1px solid rgba(120,200,255,0.22);
  pointer-events: none; z-index: -1;
}
.nx-horizon::after {           /* distant flare along the limb              */
  content: ""; position: absolute; left: 50%; bottom: -2vw; translate: -50% 0;
  width: 62vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160,220,255,0.5), transparent);
  filter: blur(1px); pointer-events: none; z-index: -1;
}

/* Star field: two static layers, no canvas, no JS, no per-frame cost. */
.nx-stars { position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background-repeat: repeat; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.40), transparent),
    radial-gradient(1px 1px at 42% 68%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 88% 54%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 12% 82%, rgba(255,255,255,.28), transparent);
  background-size: 460px 460px;
}

/* ==========================================================================
   7. ENTRANCE — one language: blur-to-focus with a small rise. Not 6 directions.
   ========================================================================== */

.nx-in {
  opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity var(--nx-dur) var(--nx-ease-out),
              transform var(--nx-dur) var(--nx-ease-out),
              filter var(--nx-dur) var(--nx-ease-out);
  will-change: opacity, transform;
}
.nx-in.is-in { opacity: 1; transform: none; filter: none; }
.nx-in--d1 { transition-delay: .07s; }
.nx-in--d2 { transition-delay: .14s; }
.nx-in--d3 { transition-delay: .21s; }

/* ==========================================================================
   8. NAVIGATION — quiet translucent command bar
   ========================================================================== */

.nx-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: rgba(4, 7, 11, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--nx-dur-fast) var(--nx-ease),
              border-color var(--nx-dur-fast) var(--nx-ease);
}
.nx-nav.is-scrolled { background: rgba(4, 7, 11, 0.92); border-bottom-color: var(--nx-line); }
.nx-nav__inner {
  width: min(1180px, calc(100% - 48px)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--nx-s3); height: 66px;
}
.nx-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
                 margin-right: auto; color: var(--nx-text); font-weight: 700;
                 font-family: var(--font-display, 'Space Grotesk', sans-serif);
                 letter-spacing: -0.02em; font-size: 1.06rem; }
.nx-nav__links { display: flex; align-items: center; gap: 4px; }
.nx-nav__link {
  color: var(--nx-text-2); text-decoration: none; font-size: 0.94rem; font-weight: 500;
  padding: 9px 13px; border-radius: var(--nx-r); position: relative;
  transition: color var(--nx-dur-fast) var(--nx-ease);
}
.nx-nav__link:hover { color: var(--nx-text); }
.nx-nav__link[aria-current="page"] { color: var(--nx-text); }
.nx-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1px;
  background: var(--nx-accent);
}
.nx-nav__cta { margin-left: var(--nx-s1); padding: 10px 18px; font-size: 0.92rem; }
.nx-nav__toggle { display: none; background: none; border: 1px solid var(--nx-line-hi);
  border-radius: var(--nx-r); color: var(--nx-text); padding: 9px 12px; cursor: pointer; }

@media (max-width: 980px) {
  .nx-nav__toggle { display: inline-flex; }
  .nx-nav__links {
    position: fixed; inset: 66px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: rgba(4,7,11,0.98); border-bottom: 1px solid var(--nx-line);
    padding: var(--nx-s2); display: none;
  }
  .nx-nav__links.is-open { display: flex; }
  .nx-nav__link { padding: 14px 12px; font-size: 1rem; border-bottom: 1px solid var(--nx-line); }
  .nx-nav__cta { margin: var(--nx-s2) 0 0; justify-content: center; }
}

/* ==========================================================================
   9. ACCESSIBILITY — focus, skip link, contrast
   ========================================================================== */

.nx-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--nx-accent); color: #04070B; padding: 12px 18px;
  border-radius: 0 0 var(--nx-r) 0; font-weight: 700;
}
.nx-skip:focus { left: 0; }

:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--nx-accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   10. REDUCED MOTION — single source of truth. The site had NO support at all.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Content must never depend on an animation having run. */
  .nx-in, .reveal-up { opacity: 1 !important; transform: none !important; filter: none !important; }
  .nx-btn::after { display: none; }
  .nx-stars, .nx-horizon::before, .nx-horizon::after { display: none; }
}

/* Coarse pointers: drop hover-dependent flourishes rather than half-apply them. */
@media (hover: none), (pointer: coarse) {
  .nx-btn::after { display: none; }
  .nx-panel:hover { background: var(--nx-surface); }
}

  .nx-foot-link{color:var(--nx-text-2);text-decoration:none;font-size:0.95rem;
    transition:color var(--nx-dur-fast) var(--nx-ease);}
  .nx-foot-link:hover{color:var(--nx-accent-hi);}
  @media (max-width:860px){
    #footer .nx-wrap > div:first-child{grid-template-columns:1fr!important;}
  }

  /* Showcase previews: real screenshots framed as engineered objects. */
  .nx-frame{border:1px solid var(--nx-line);border-radius:var(--nx-r-lg);overflow:hidden;
    background:var(--nx-bg-2);box-shadow:0 22px 60px rgba(0,0,0,0.42);}
        .nx-frame img{display:block;width:100%;height:auto;}

  /* ---- Shared page hero -------------------------------------------------
     14 commercial pages use .page-hero. Giving it the system's display scale
     and measure here is what makes them read as one site, rather than
     restyling each page's own inline CSS. */
  .page-hero h1{
    font-family:var(--font-display,'Space Grotesk',sans-serif);
    font-size:clamp(2.4rem,5.4vw,4.1rem);
    line-height:1.04;letter-spacing:-0.022em;font-weight:600;
    text-wrap:balance;max-width:19ch;
  }
  .page-hero .lede,.page-hero-content > p{
    font-size:clamp(1.02rem,1.3vw,1.18rem);
    line-height:1.68;color:var(--nx-text-2);max-width:36em;margin-top:20px;
  }
  .page-hero .section-tag{margin-bottom:14px;}
  .page-breadcrumb{margin-bottom:18px;}
  /* One emphasised phrase per hero — the gradient span already does that job,
     so keep it, but stop it competing with body copy. */
  .page-hero h1 .gradient-text{font-weight:600;}
  @media (max-width:640px){ .page-hero h1{max-width:none;} }

/* ==========================================================================
   MISSION-CONTROL LAYER
   Ported from nexavorix.cloud's landing treatment. The palette already matched;
   what carries the feeling is weight, tracking and stillness — not colour.
   ========================================================================== */

/* 1. Wordmark — ultra-light and widely tracked. This single treatment is the
      most recognisable thing about the cloud page. */
.nx h1.nx-wordmark,
.nx-wordmark {
  font-weight: 200;
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  letter-spacing: clamp(.14em, 2.2vw, .46em);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--nx-text);
  margin: 0;
  /* tracking adds a trailing gap on the last glyph; pull it back so the
     block still reads as optically centred */
  padding-left: clamp(.14em, 2.2vw, .46em);
}
.nx-wordmark-sub {
  font-family: var(--nx-mono);
  font-size: .8rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--nx-accent);
  margin: 10px 0 0;
}

/* 2. Eyebrow — the flanking hairlines are what make it read as an instrument
      label rather than a heading. They fade AWAY from the text on both sides. */
.nx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nx-mono);
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  margin: 0 0 18px;
}
.nx-eyebrow::before,
.nx-eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nx-accent-line));
}
.nx-eyebrow::after { background: linear-gradient(90deg, var(--nx-accent-line), transparent); }

/* 3. Telemetry — real counts only. Reads as an instrument readout. */
.nx-telemetry {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin-top: 30px;
  font-family: var(--nx-mono);
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--nx-text-3);
}
.nx-telemetry span { display: inline-flex; align-items: center; gap: 8px; }
.nx-telemetry span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nx-accent); box-shadow: 0 0 7px var(--nx-accent); opacity: .85;
}

/* 4. Per-item accent. Each showcase panel gets its own hue, exactly as each
      cloud node does — a spectrum used in small doses, never as fills. */
.nx-split { --ac: var(--nx-accent); }
.nx-split[data-ac="mint"]   { --ac: #7de0c6; }
.nx-split[data-ac="blue"]   { --ac: #7cc4ff; }
.nx-split[data-ac="violet"] { --ac: #9d8cff; }
.nx-split .nx-index { color: var(--ac); }
.nx-split .nx-frame { border-color: color-mix(in srgb, var(--ac) 26%, transparent); }
.nx-split .nx-frame::after {
  border-top-color: var(--ac); border-right-color: var(--ac); opacity: .55;
}
.nx-split .nx-link { color: var(--ac); border-bottom-color: color-mix(in srgb, var(--ac) 45%, transparent); }
.nx-split .nx-link:hover { border-bottom-color: var(--ac); }

/* 5. Ceremony — the hero is centred and given room, the way the cloud page is. */
.nx-hero-center { text-align: center; }
.nx-hero-center .nx-lede { margin-inline: auto; }
.nx-hero-center .nx-eyebrow { justify-content: center; }
.nx-hero-center .nx-actions { justify-content: center; }

/* The wordmark is the widest element on the page; below 560px the tracking has
   to come down or it forces horizontal scroll on a phone. */
@media (max-width: 560px) {
  .nx h1.nx-wordmark, .nx-wordmark {
    font-size: clamp(1.6rem, 8.4vw, 2.2rem);
    letter-spacing: .18em;
    padding-left: .18em;
    word-break: keep-all;
  }
  .nx-telemetry { gap: 8px 16px; font-size: .62rem; letter-spacing: .18em; }
  .nx-eyebrow { letter-spacing: .3em; font-size: .66rem; }
  .nx-eyebrow::before, .nx-eyebrow::after { width: 18px; }
}

/* ==========================================================================
   MISSION-CONTROL — full port (nexavorix.cloud parity)
   ========================================================================== */

/* Corner reticles. Cloud frames its stage with four marks; they read as an
   instrument viewport rather than decoration. */
.nx-reticle { position: relative; }
.nx-reticle > .r { position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--nx-accent-line); opacity: .8; }
.nx-reticle > .r.tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.nx-reticle > .r.tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.nx-reticle > .r.bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.nx-reticle > .r.br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

/* Soft overhead glow — cloud's .aurora. One per view, never stacked. */
.nx-aurora { position: relative; isolation: isolate; }
.nx-aurora::before {
  content: ""; position: absolute; left: 50%; top: -10%; translate: -50% 0;
  width: min(900px, 92%); aspect-ratio: 2/1; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(120,200,255,.13), transparent 66%);
  filter: blur(36px);
}

/* Node cards. The accent hairline across the top edge and the lift-into-accent
   on hover are the two moves that make cloud's grid feel like live equipment. */
.nx-node {
  --ac: var(--nx-accent);
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 24px 22px 18px; min-height: 210px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--nx-surface);
  border: 1px solid var(--nx-line); border-radius: 3px;
  text-decoration: none;
  transition: transform .3s var(--nx-ease), border-color .3s var(--nx-ease), box-shadow .3s var(--nx-ease);
}
.nx-node::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
  opacity: .45; transition: opacity .3s var(--nx-ease);
}
.nx-node:hover {
  transform: translateY(-4px); border-color: var(--ac);
  box-shadow: 0 14px 40px -18px var(--ac), 0 0 0 1px rgba(120,200,255,.05);
}
.nx-node:hover::before { opacity: 1; }
.nx-node__code { font-family: var(--nx-mono); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ac); }
.nx-node__name { font-size: 1.12rem; font-weight: 500; color: var(--nx-text); margin: 0; }
.nx-node__host { font-family: var(--nx-mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--nx-text-3); word-break: break-all; }
.nx-node__desc { font-size: .9rem; line-height: 1.6; color: var(--nx-text-2); margin: 2px 0 0; flex: 1; }
.nx-node__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.nx-node .nx-arrow { color: var(--ac); }

/* Accent spectrum, used in small doses only — never as fills. */
.nx-ac-mint   { --ac: #7de0c6; }
.nx-ac-amber  { --ac: #ffb173; }
.nx-ac-blue   { --ac: #7cc4ff; }
.nx-ac-violet { --ac: #9d8cff; }
.nx-ac-rose   { --ac: #ff9aa9; }

/* Cloud sets every small string in monospace. Matching that is most of the
   difference between "dark site" and "instrument". */
.nx-mono, .nx-chip, .nx-node__code, .nx-node__host,
.nx-telemetry, .nx-eyebrow, .nx-meta, .nx-index,
#footer .nx-meta, #footer .nx-foot-link {
  font-family: var(--nx-mono);
}
#footer .nx-foot-link { font-size: .84rem; letter-spacing: .04em; }

/* Every page hero gets the ceremony, not only the homepage. */
.page-hero .nx-eyebrow { justify-content: center; }
.page-hero-content { text-align: center; margin-inline: auto; }
.page-hero-content h1 { margin-inline: auto; }
.page-hero-content p { margin-inline: auto; }
.page-hero .page-breadcrumb { justify-content: center; display: flex; gap: 8px;
  font-family: var(--nx-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.page-hero .section-tag {
  font-family: var(--nx-mono); letter-spacing: .34em; text-transform: uppercase;
  font-size: .7rem; color: var(--nx-text-3);
  display: inline-flex; align-items: center; gap: 12px;
}
.page-hero .section-tag::before, .page-hero .section-tag::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--nx-accent-line));
}
.page-hero .section-tag::after { background: linear-gradient(90deg, var(--nx-accent-line), transparent); }

/* Section heads centre-align to match cloud's stillness. */
.nx-head { text-align: center; margin-inline: auto; }
.nx-head .nx-eyebrow { justify-content: center; }
.nx-head .nx-body, .nx-head .nx-lede { margin-inline: auto; }

/* Footer takes the mono treatment and a roman-numeral year, as cloud does. */
#footer { letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   Orbiting star. Rides the gravitational arc drawn by .nx-horizon::before.
   Geometry is derived from that rule and must move with it:
       arc circle  128vw wide  -> radius 64vw
       bottom:-68vw            -> centre sits 4vw BELOW the section's bottom
   So the pivot is bottom:-4vw and the star is pushed out to top:-64vw. Change
   the arc and these two numbers have to change with it or the star leaves the line.
   -------------------------------------------------------------------------- */
.nx-orbit {
  position: absolute; left: 50%; bottom: -4vw;
  width: 0; height: 0; z-index: -1; pointer-events: none;
  animation: nx-orbit-sweep 8s cubic-bezier(.45,0,.55,1) infinite;
}
.nx-orbit__star {
  position: absolute; top: -64vw; left: -3.5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 6px 2px #ffffff,
    0 0 16px 5px rgba(214,240,255,.95),
    0 0 38px 12px rgba(140,210,255,.7),
    0 0 80px 26px rgba(120,200,255,.35);
  animation: nx-orbit-fade 8s ease-in-out infinite;
}
/* A short trail behind the star, tangent to the arc. */
.nx-orbit__star::after {
  content: ""; position: absolute; top: 50%; right: 6px; translate: 0 -50%;
  width: 140px; height: 1.5px; transform-origin: right center;
  background: linear-gradient(270deg, rgba(214,240,255,.85), rgba(120,200,255,.25) 45%, transparent);
  filter: blur(.4px);
}
@keyframes nx-orbit-sweep {
  0%   { transform: rotate(-46deg); }
  100% { transform: rotate(46deg); }
}
/* Fade in as it rises over the limb and out again — a pass, not a loop. */
@keyframes nx-orbit-fade {
  0%, 2%    { opacity: 0; }
  9%, 91%   { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nx-orbit { display: none; } }

/* The custom cursor sits at 0,0 until the first mousemove, which shows a stray
   ring in the top-left corner on load. Revealed only once its position is real. */
.cursor-dot, .cursor-ring { opacity: 0; }
body.nx-pointer-live .cursor-dot,
body.nx-pointer-live .cursor-ring { opacity: 1; }