/* ==========================================================================
   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;}
  }