/* ============================================================================
   nox-experience.css  —  The Mercury-Grade Experience Layer
   ----------------------------------------------------------------------------
   PURPOSE
     The premium "take prospects into what we build" layer for the NOX
     marketing site. Atmosphere, realistic device/browser frames, depth
     compositions, oversized confident stats, and conversion polish — modeled
     on Mercury's restraint: one accent voltage, calm slow motion, generous
     space, product shown in context.

   LOAD ORDER (later wins)
     nox-tokens → nox-dashboard → nox-website → nox-premium → nox-icons
       → nox-motion → nox-experience  ◀ THIS FILE LOADS LAST

   CONTRACT
     Implements the ATMOSPHERE, DEVICE/BROWSER FRAMES, DEPTH, STATS, and POLISH
     groups of the shared class contract. Scroll-reveal / parallax keyframe
     classes (.nox-reveal*, .nox-parallax) live in nox-motion.css, NOT here.

   CONVENTIONS
     • All color/spacing pulls from var(--nox-*) tokens so every component works
       across all 7 themes. Translucency for atmosphere is the only place we
       compose rgba() literals (tinted from the accent/decorative hues).
     • Single accent CTA per band (Mercury discipline). Decorative blue/violet
       tints are atmosphere only, never actions.
     • Everything animated is disabled under prefers-reduced-motion (see the
       guarded block at the bottom of this file).
     • Data-URIs use %23 for '#' (utf8 SVG escaping).
   ========================================================================== */


/* ============================================================================
   0 · LOCAL TUNING TOKENS
   Scoped knobs so the whole layer can be re-tuned from one place. These read
   from the theme tokens and never override them globally.
   ========================================================================== */
:root {
  /* Decorative atmosphere tints (derived from theme decorative hues). */
  --nox-x-aurora-1: var(--nox-accent-g, rgba(192,192,192,0.15));
  --nox-x-aurora-2: var(--nox-blue-s,   rgba(59,130,166,0.12));
  --nox-x-aurora-3: var(--nox-purple-s, rgba(124,90,173,0.12));

  /* Soft layered shadow used by frames / float cards. */
  --nox-x-shadow-soft:
    0 1px 1px rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.18),
    0 40px 80px -24px rgba(0,0,0,0.45);
  --nox-x-shadow-lift:
    0 2px 4px rgba(0,0,0,0.08),
    0 18px 40px -8px rgba(0,0,0,0.30),
    0 60px 120px -32px rgba(0,0,0,0.55);

  /* Hairline border tuned for translucent frame chrome. */
  --nox-x-hairline: 1px solid var(--nox-line, rgba(255,255,255,0.07));

  /* Cursor-follow spotlight default origin (overridden by JS). */
  --nox-x: 50%;
  --nox-y: 50%;

  /* Motion timing (slow / cinematic per Mercury). */
  --nox-x-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================================
   1 · ATMOSPHERE
   ========================================================================== */

/* --- .nox-aurora : drifting accent-tinted radial blobs over dark canvas ----
   Place as an absolutely/fixed-positioned layer behind hero content. The
   container clips its blobs; blobs drift slowly via keyframes. Give the parent
   position:relative and let real content sit at a higher z-index. */
.nox-aurora,
.nox-aurora-soft {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--nox-bg-0, #070808);
}

.nox-aurora::before,
.nox-aurora::after,
.nox-aurora-soft::before,
.nox-aurora-soft::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

/* Primary accent + blue blob, top-left, large. */
.nox-aurora::before {
  top: -22%;
  left: -12%;
  width: 62%;
  height: 78%;
  background:
    radial-gradient(closest-side,
      var(--nox-x-aurora-1) 0%,
      transparent 70%),
    radial-gradient(closest-side,
      var(--nox-x-aurora-2) 0%,
      transparent 72%);
  background-position: 30% 30%, 70% 60%;
  background-repeat: no-repeat;
  opacity: 0.9;
  animation: nox-aurora-drift-a 26s ease-in-out infinite alternate;
}

/* Violet/decorative blob, bottom-right, offset rhythm. */
.nox-aurora::after {
  bottom: -28%;
  right: -16%;
  width: 66%;
  height: 82%;
  background:
    radial-gradient(closest-side,
      var(--nox-x-aurora-3) 0%,
      transparent 70%),
    radial-gradient(closest-side,
      var(--nox-x-aurora-1) 0%,
      transparent 74%);
  background-position: 70% 70%, 30% 40%;
  background-repeat: no-repeat;
  opacity: 0.85;
  animation: nox-aurora-drift-b 30s ease-in-out infinite alternate;
}

/* Soft variant: lower intensity, blends quietly behind text. */
.nox-aurora-soft::before {
  top: -18%;
  left: -10%;
  width: 56%;
  height: 70%;
  background: radial-gradient(closest-side,
      var(--nox-x-aurora-1) 0%, transparent 72%);
  background-repeat: no-repeat;
  filter: blur(80px);
  opacity: 0.5;
  animation: nox-aurora-drift-a 28s ease-in-out infinite alternate;
}
.nox-aurora-soft::after {
  bottom: -22%;
  right: -12%;
  width: 58%;
  height: 72%;
  background: radial-gradient(closest-side,
      var(--nox-x-aurora-2) 0%, transparent 74%);
  background-repeat: no-repeat;
  filter: blur(80px);
  opacity: 0.45;
  animation: nox-aurora-drift-b 34s ease-in-out infinite alternate;
}

@keyframes nox-aurora-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(-4%, 8%, 0) scale(1.04); }
}
@keyframes nox-aurora-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  50%  { transform: translate3d(-6%, -5%, 0) scale(1.1); }
  100% { transform: translate3d(5%, -3%, 0) scale(1); }
}


/* --- .nox-mesh-bg : rich multi-radial mesh gradient surface ----------------- */
.nox-mesh-bg {
  position: relative;
  background-color: var(--nox-bg-0, #070808);
  background-image:
    radial-gradient(42% 56% at 12% 8%,  var(--nox-x-aurora-1) 0%, transparent 60%),
    radial-gradient(38% 50% at 88% 14%, var(--nox-x-aurora-2) 0%, transparent 58%),
    radial-gradient(50% 60% at 78% 92%, var(--nox-x-aurora-3) 0%, transparent 62%),
    radial-gradient(44% 54% at 22% 88%, var(--nox-x-aurora-2) 0%, transparent 60%),
    radial-gradient(60% 70% at 50% 50%, var(--nox-accent-s, rgba(192,192,192,0.05)) 0%, transparent 70%);
  background-repeat: no-repeat;
}


/* --- .nox-grain : SVG fractalNoise texture overlay -------------------------- */
.nox-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  /* fractalNoise data-URI — '#' escaped as %23 for utf8. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}


/* --- .nox-glow / .nox-glow-accent : soft radial glow behind a focal element -
   Apply to an absolutely-positioned element (or pseudo) sitting just behind a
   frame/card. .nox-glow uses decorative blue; .nox-glow-accent uses the brand
   voltage for the hero centerpiece. */
.nox-glow,
.nox-glow-accent {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  filter: blur(48px);
}
.nox-glow {
  background: radial-gradient(closest-side,
    var(--nox-x-aurora-2) 0%,
    transparent 78%);
  transform: scale(1.08);
  opacity: 0.8;
}
.nox-glow-accent {
  background: radial-gradient(closest-side,
    var(--nox-accent-g, rgba(192,192,192,0.15)) 0%,
    transparent 76%);
  transform: scale(1.14);
  opacity: 0.9;
}


/* --- Section fade edges : cinematic transitions between sections ------------ */
.nox-section-fade-top,
.nox-section-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}
.nox-section-fade-top {
  top: 0;
  background: linear-gradient(to bottom,
    var(--nox-bg-0, #070808) 0%,
    transparent 100%);
}
.nox-section-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top,
    var(--nox-bg-0, #070808) 0%,
    transparent 100%);
}


/* ============================================================================
   2 · DEVICE / BROWSER FRAMES  (the centerpiece — product in context)
   ========================================================================== */

/* --- .nox-browser : realistic browser chrome ------------------------------- */
.nox-browser {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--nox-r-xl, 14px);
  overflow: hidden;
  background: var(--nox-bg-1, #0d0e0e);
  border: var(--nox-x-hairline);
  box-shadow: var(--nox-x-shadow-soft);
  isolation: isolate;
}

.nox-browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  background:
    linear-gradient(to bottom,
      var(--nox-bg-2, rgba(255,255,255,0.04)),
      var(--nox-bg-1, #0d0e0e));
  border-bottom: var(--nox-x-hairline);
}

.nox-browser-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.nox-browser-dots > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--nox-line-2, rgba(255,255,255,0.12));
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25);
}
/* macOS-style traffic lights (semantic but muted to suit dark themes). */
.nox-browser-dots > span:nth-child(1) { background: #ff5f57; }
.nox-browser-dots > span:nth-child(2) { background: #febc2e; }
.nox-browser-dots > span:nth-child(3) { background: #28c840; }

.nox-browser-url {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--nox-bg-0, #070808);
  border: var(--nox-x-hairline);
  color: var(--nox-ink-2, #999);
  font-family: var(--nox-font-mono, monospace);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* tiny lock glyph before the URL text */
.nox-browser-url::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px 2px 1px 1px;
  border: 1.5px solid currentColor;
  border-bottom-width: 5px;
  opacity: 0.6;
}

.nox-browser-body {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--nox-bg-0, #070808);
}
.nox-browser-body > img,
.nox-browser-body > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Live iframes render at desktop width then scale down, so the embedded page
   shows its real desktop layout (not a cramped tablet layout) inside the frame.
   250% x scale(0.4) = 100% fill, width-independent. */
.nox-browser-body > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 250%;
  transform: scale(0.4);
  transform-origin: top left;
  border: 0;
  display: block;
}


/* --- .nox-device-laptop : clean laptop bezel ------------------------------- */
.nox-device-laptop {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}
.nox-device-laptop-screen {
  position: relative;
  border-radius: 16px 16px 4px 4px;
  padding: 12px 12px 14px;
  background:
    linear-gradient(to bottom,
      var(--nox-bg-3, rgba(255,255,255,0.06)),
      var(--nox-bg-1, #0d0e0e));
  border: var(--nox-x-hairline);
  box-shadow: var(--nox-x-shadow-soft);
}
.nox-device-laptop-screen > iframe,
.nox-device-laptop-screen > img,
.nox-device-laptop-screen > video,
.nox-device-laptop-screen > .nox-browser {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--nox-bg-0, #070808);
  object-fit: cover;
  object-position: top center;
}
/* notch / camera dot at top of bezel */
.nox-device-laptop-screen::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nox-line-2, rgba(255,255,255,0.18));
}
/* base/hinge of the laptop */
.nox-device-laptop::after {
  content: "";
  display: block;
  width: 116%;
  height: 14px;
  margin: -2px auto 0;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(to bottom,
      var(--nox-bg-2, rgba(255,255,255,0.05)),
      var(--nox-bg-0, #070808));
  border: var(--nox-x-hairline);
  border-top: none;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.5);
}
/* hinge notch */
.nox-device-laptop::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--nox-bg-0, #070808);
  z-index: 1;
}


/* --- .nox-device-phone : clean phone bezel --------------------------------- */
.nox-device-phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border-radius: 44px;
  background:
    linear-gradient(150deg,
      var(--nox-bg-3, rgba(255,255,255,0.07)),
      var(--nox-bg-1, #0d0e0e));
  border: var(--nox-x-hairline);
  box-shadow:
    var(--nox-x-shadow-soft),
    inset 0 0 0 1px rgba(0,0,0,0.4);
}
.nox-device-phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 22px;
  border-radius: 999px;
  background: var(--nox-bg-0, #070808);
  z-index: 2;
}
/* speaker slit inside the notch/island */
.nox-device-phone-notch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  height: 4px;
  border-radius: 999px;
  background: var(--nox-line-2, rgba(255,255,255,0.16));
}
.nox-device-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--nox-bg-0, #070808);
  border: 1px solid rgba(0,0,0,0.5);
}
.nox-device-phone-screen > iframe,
.nox-device-phone-screen > img,
.nox-device-phone-screen > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: top center;
  display: block;
}


/* ============================================================================
   3 · DEPTH  (overlapping float cards + hero showcase composition)
   ========================================================================== */

/* --- .nox-float-stack / .nox-float-card ------------------------------------ */
.nox-float-stack {
  position: relative;
  width: 100%;
  isolation: isolate;
}
.nox-float-card {
  position: relative;
  border-radius: var(--nox-r-xl, 14px);
  overflow: hidden;
  background: var(--nox-bg-1, #0d0e0e);
  border: var(--nox-x-hairline);
  box-shadow: var(--nox-x-shadow-soft);
  transition:
    transform 0.5s var(--nox-x-ease),
    box-shadow 0.5s var(--nox-x-ease);
  will-change: transform;
}
/* Front card: lifted, larger, leans slightly right. */
.nox-float-card.is-front {
  z-index: 3;
  transform: translate(0, 0) rotate(0.6deg);
  box-shadow: var(--nox-x-shadow-lift);
}
/* Back card: recessed, offset up-left, dimmed and tilted away. */
.nox-float-card.is-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate(-7%, -9%) scale(0.93) rotate(-2.4deg);
  opacity: 0.78;
  filter: saturate(0.9) brightness(0.92);
}
/* A second back card sits even further (use .is-back twice in markup order). */
.nox-float-card.is-back ~ .nox-float-card.is-back {
  transform: translate(7%, -14%) scale(0.86) rotate(2.8deg);
  opacity: 0.6;
  z-index: 0;
}
.nox-float-stack:hover .nox-float-card.is-front {
  transform: translateY(-6px) rotate(0.3deg);
}


/* --- .nox-showcase : hero composition (frame floating over glow + aurora) --- */
.nox-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  padding: clamp(24px, 5vw, 72px);
  border-radius: var(--nox-r-xl, 14px);
}
/* aurora wash baked into the showcase backdrop */
.nox-showcase::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 30% 25%, var(--nox-x-aurora-1) 0%, transparent 65%),
    radial-gradient(45% 55% at 75% 75%, var(--nox-x-aurora-2) 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.9;
}
/* focal glow directly behind the frame */
.nox-showcase::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--nox-accent-g, rgba(192,192,192,0.15)) 0%, transparent 75%);
  filter: blur(56px);
}
.nox-showcase > .nox-browser,
.nox-showcase > .nox-device-laptop,
.nox-showcase > .nox-device-phone,
.nox-showcase > .nox-float-stack {
  position: relative;
  z-index: 1;
}


/* ============================================================================
   4 · STATS  (oversized confident display numbers)
   ========================================================================== */
.nox-stat-band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 6vw, 80px);
  width: 100%;
}
.nox-stat-xl {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
}
.nox-stat-xl-value {
  font-family: var(--nox-font-display, sans-serif);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--nox-ink, #d4d4d4);
  font-variant-numeric: tabular-nums;
  /* subtle accent->light wash on the figure itself */
  background: linear-gradient(160deg,
    var(--nox-ink, #d4d4d4) 0%,
    var(--nox-accent, #c0c0c0) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nox-stat-xl-label {
  font-family: var(--nox-font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nox-ink-2, #999);
}


/* ============================================================================
   5 · POLISH
   ========================================================================== */

/* --- .nox-text-gradient : accent->light gradient clipped to text ----------- */
.nox-text-gradient {
  background: linear-gradient(100deg,
    var(--nox-ink, #d4d4d4) 0%,
    var(--nox-accent, #c0c0c0) 55%,
    var(--nox-ink, #d4d4d4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* --- .nox-eyebrow : mono kicker with a short leading rule ------------------- */
.nox-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nox-font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nox-ink-2, #999);
}
.nox-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--nox-accent, #c0c0c0);
  opacity: 0.8;
}


/* --- .nox-spotlight-card : cursor-follow radial highlight ------------------- */
.nox-spotlight-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--nox-r-lg, 10px);
  background: var(--nox-bg-1, #0d0e0e);
  border: var(--nox-x-hairline);
  transition: border-color 0.3s var(--nox-x-ease);
}
.nox-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--nox-x-ease);
  background: radial-gradient(
    260px circle at var(--nox-x, 50%) var(--nox-y, 50%),
    var(--nox-accent-g, rgba(192,192,192,0.15)) 0%,
    transparent 70%);
}
.nox-spotlight-card:hover {
  border-color: var(--nox-accent-2, #a0a0a0);
}
.nox-spotlight-card:hover::before {
  opacity: 1;
}
/* keep authored content above the highlight */
.nox-spotlight-card > * {
  position: relative;
  z-index: 1;
}


/* --- .nox-shine : sweeping light reflection on hover ----------------------- */
.nox-shine {
  position: relative;
  overflow: hidden;
}
.nox-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%);
}
.nox-shine:hover::after {
  animation: nox-shine-sweep 0.85s var(--nox-x-ease);
}
@keyframes nox-shine-sweep {
  from { left: -120%; }
  to   { left: 140%; }
}


/* --- .nox-pill / .nox-pill-lg : refined single-accent pill CTA -------------- */
.nox-pill,
.nox-pill-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--nox-font-body, inherit);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nox-bg-0, #070808);
  background: var(--nox-accent, #c0c0c0);
  border-radius: var(--nox-r-sm, 4px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition:
    transform 0.2s var(--nox-x-ease),
    box-shadow 0.2s var(--nox-x-ease),
    background-color 0.2s var(--nox-x-ease);
}
.nox-pill {
  height: 36px;
  padding: 0 18px;
  font-size: 0.875rem;
}
.nox-pill-lg {
  height: 48px;
  padding: 0 28px;
  font-size: 1rem;
}
.nox-pill:hover,
.nox-pill-lg:hover {
  background: var(--nox-accent-2, #a0a0a0);
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px var(--nox-accent-g, rgba(192,192,192,0.15)),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.nox-pill:active,
.nox-pill-lg:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.nox-pill:focus-visible,
.nox-pill-lg:focus-visible {
  outline: 2px solid var(--nox-accent, #c0c0c0);
  outline-offset: 3px;
}


/* --- .nox-cta-band : full-width single-CTA conversion band w/ aurora -------- */
.nox-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: clamp(56px, 9vw, 112px) clamp(24px, 6vw, 80px);
  border-radius: var(--nox-r-xl, 14px);
  background: var(--nox-bg-1, #0d0e0e);
  border: var(--nox-x-hairline);
}
.nox-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 20% 0%,  var(--nox-x-aurora-1) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 100%, var(--nox-x-aurora-2) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.85;
  animation: nox-aurora-drift-a 30s ease-in-out infinite alternate;
}
.nox-cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}


/* ============================================================================
   6 · RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .nox-stat-band {
    gap: clamp(24px, 8vw, 40px);
  }
  /* On small screens, un-stack float cards so nothing clips off-canvas. */
  .nox-float-card.is-back,
  .nox-float-card.is-back ~ .nox-float-card.is-back {
    display: none;
  }
  .nox-float-card.is-front {
    transform: none;
  }
  .nox-section-fade-top,
  .nox-section-fade-bottom {
    height: 72px;
  }
}


/* ============================================================================
   7 · REDUCED MOTION  (disable all drift / sweep / transitions)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nox-aurora::before,
  .nox-aurora::after,
  .nox-aurora-soft::before,
  .nox-aurora-soft::after,
  .nox-cta-band::before {
    animation: none !important;
  }
  .nox-shine:hover::after {
    animation: none !important;
  }
  .nox-float-card,
  .nox-spotlight-card,
  .nox-spotlight-card::before,
  .nox-pill,
  .nox-pill-lg {
    transition: none !important;
  }
  .nox-float-stack:hover .nox-float-card.is-front,
  .nox-pill:hover,
  .nox-pill-lg:hover {
    transform: none !important;
  }
}