/* ==========================================================================
   NEX — Design System
   --------------------------------------------------------------------------
   A single source of truth for the storefront: tokens, primitives, then
   components. Colours are derived from the SellAuth theme settings
   (accent / background / card / text) so the merchant keeps full control from
   the theme builder while every surface stays coherent.

   Sections
     01  Tokens
     02  Base & reset
     03  Layout primitives
     04  Typography
     05  Buttons
     06  Cards, badges, chips, inputs
     07  Motion utilities (reveal, marquee, counters)
     08  Ambience (backdrop, grain, rules)
   ========================================================================== */

/* ==========================================================================
   01 — Tokens
   ========================================================================== */

:root {
  /* --- surfaces ---------------------------------------------------------- */
  --nex-bg: rgb(var(--cl-background, 7, 7, 11));
  --nex-bg-deep: color-mix(in srgb, var(--nex-bg) 82%, #000000);
  --nex-card: rgb(var(--cl-card, 14, 14, 22));

  --nex-s1: color-mix(in srgb, var(--nex-card) 72%, transparent);
  --nex-s2: color-mix(in srgb, var(--nex-card) 92%, #ffffff 3%);
  --nex-s3: color-mix(in srgb, var(--nex-card) 88%, #ffffff 6%);

  /* --- liquid glass ------------------------------------------------------
     One recipe used everywhere: a translucent tinted pane, a blur that
     samples the animated background behind it, a bright top edge that reads
     as a lit bevel, and a soft drop shadow that lifts it off the page. */
  --glass-tint: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.028) 38%,
    rgba(255, 255, 255, 0.012) 100%
  );
  --glass-tint-strong: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.045) 40%,
    rgba(255, 255, 255, 0.02) 100%
  );
  --glass-blur: blur(22px) saturate(165%);
  --glass-blur-sm: blur(12px) saturate(150%);
  --glass-edge: 1px solid rgba(255, 255, 255, 0.11);
  --glass-edge-hi: 1px solid rgba(255, 255, 255, 0.2);
  --glass-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05);
  --glass-drop: 0 24px 70px -32px rgba(0, 0, 0, 0.95), 0 4px 18px -10px rgba(0, 0, 0, 0.6);
  --glass-glow: 0 0 0 1px color-mix(in srgb, var(--nex-accent) 18%, transparent),
    0 30px 90px -40px color-mix(in srgb, var(--nex-accent) 55%, transparent);

  /* --- lines ------------------------------------------------------------- */
  --nex-line: rgba(255, 255, 255, 0.07);
  --nex-line-2: rgba(255, 255, 255, 0.12);
  --nex-line-3: rgba(255, 255, 255, 0.2);

  /* --- text -------------------------------------------------------------- */
  --nex-text: rgb(var(--cl-t-primary, 255, 255, 255));
  --nex-text-2: color-mix(in srgb, var(--nex-text) 74%, transparent);
  --nex-text-3: color-mix(in srgb, var(--nex-text) 54%, transparent);
  --nex-text-4: color-mix(in srgb, var(--nex-text) 36%, transparent);

  /* --- accent ------------------------------------------------------------ */
  --nex-accent: rgb(var(--cl-accent, 102, 92, 255));
  --nex-accent-hi: color-mix(in srgb, var(--nex-accent) 68%, #ffffff);
  --nex-accent-lo: color-mix(in srgb, var(--nex-accent) 74%, #000000);
  --nex-accent-08: color-mix(in srgb, var(--nex-accent) 8%, transparent);
  --nex-accent-14: color-mix(in srgb, var(--nex-accent) 14%, transparent);
  --nex-accent-24: color-mix(in srgb, var(--nex-accent) 24%, transparent);
  --nex-accent-40: color-mix(in srgb, var(--nex-accent) 40%, transparent);

  /* The brand gradient. Used sparingly: logo, one headline accent, primary
     button sheen. Never as a section background. */
  --nex-brand-grad: linear-gradient(
    135deg,
    color-mix(in srgb, var(--nex-accent) 78%, #2b6bff) 0%,
    var(--nex-accent) 46%,
    color-mix(in srgb, var(--nex-accent) 62%, #c471ff) 100%
  );

  /* --- signal colours ---------------------------------------------------- */
  --nex-ok: #34d399;
  --nex-warn: #fbbf24;
  --nex-down: #f87171;
  --nex-maint: #60a5fa;
  --nex-info: #a5b4fc;

  /* --- radii ------------------------------------------------------------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* --- elevation --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --sh-3: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-accent: 0 14px 44px -18px color-mix(in srgb, var(--nex-accent) 70%, transparent);

  /* --- type -------------------------------------------------------------- */
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 5.6vw, 4.15rem);
  --fs-h1: clamp(2rem, 4.2vw, 3rem);
  --fs-h2: clamp(1.65rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.1rem, 1.7vw, 1.35rem);
  --fs-lead: clamp(1rem, 1.15vw, 1.125rem);
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;

  /* --- space ------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 104px;
  --sp-section: clamp(52px, 5.6vw, 88px);

  /* --- layout ------------------------------------------------------------ */
  --nex-w: 1240px;
  --nex-w-tight: 940px;
  --nex-gutter: clamp(18px, 4vw, 40px);
  --nex-nav-h: 64px;

  /* --- motion ------------------------------------------------------------ */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-1: 140ms;
  --d-2: 260ms;
  --d-3: 480ms;
  --d-4: 900ms;
}

/* ==========================================================================
   02 — Base
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

/* The hidden attribute must beat any display rule that follows it. */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--nex-bg);
  color: var(--nex-text);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Scroll offset so anchor targets never hide behind the sticky nav. */
[id] {
  scroll-margin-top: calc(var(--nex-nav-h) + 28px);
}

::selection {
  background: var(--nex-accent-40);
  color: #fff;
}

:where(a, button, [role='button'], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--nex-accent-hi);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.nex-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users land on it first. */
.nex-skip {
  position: fixed;
  top: 10px;
  left: 50%;
  translate: -50% -160%;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-1);
  background: var(--nex-accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: translate var(--d-2) var(--e-out);
}

.nex-skip:focus {
  translate: -50% 0;
}

/* Custom scrollbar — desktop only, subtle. */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--nex-bg-deep);
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid var(--nex-bg-deep);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--nex-accent-40);
  }
}

/* ==========================================================================
   Liquid glass primitive
   --------------------------------------------------------------------------
   .nex-glass is the base pane. .nex-glass--lit adds a specular highlight that
   follows the pointer (--mx/--my set by nex.js). Everything degrades to a
   plain translucent panel when backdrop-filter is unavailable.
   ========================================================================== */

.nex-glass {
  position: relative;
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 55%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-edge);
  border-radius: var(--r-3);
  box-shadow: var(--glass-bevel), var(--glass-drop);
  isolation: isolate;
}

/* Curved light along the top edge — the thing that sells "glass". */
.nex-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.06) 26%,
    transparent 55%,
    rgba(255, 255, 255, 0.05) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Pointer-tracked specular sheen. */
.nex-glass--lit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--nex-accent) 22%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  pointer-events: none;
  z-index: 1;
}

.nex-glass--lit:hover::after {
  opacity: 1;
}

.nex-glass--soft {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--glass-bevel), 0 12px 40px -24px rgba(0, 0, 0, 0.9);
}

.nex-glass--flush {
  border-radius: 0;
}

/* Interactive lift. */
.nex-glass--hover {
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out), background-color var(--d-3) var(--e-out);
}

.nex-glass--hover:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

@supports not (backdrop-filter: blur(1px)) {
  .nex-glass {
    background: color-mix(in srgb, var(--nex-card) 94%, transparent);
  }
}

/* Responsive display helpers.
   custom.css loads after the Tailwind bundle, so a component rule such as
   `.nex-icon-btn { display: grid }` would beat Tailwind's `.hidden`. These
   helpers keep responsive visibility inside the design system. */
.nex-u-hide {
  display: none !important;
}

@media (min-width: 640px) {
  .nex-u-sm-grid { display: grid !important; }
  .nex-u-sm-flex { display: inline-flex !important; }
}

@media (min-width: 1024px) {
  .nex-u-lg-flex { display: inline-flex !important; }
  .nex-u-lg-hide { display: none !important; }
}

@media (min-width: 1280px) {
  .nex-u-xl-block { display: block !important; }
  .nex-u-xl-inline { display: inline !important; }
  .nex-u-xl-flex { display: inline-flex !important; }
}

/* ==========================================================================
   03 — Layout primitives
   ========================================================================== */

.nex-shell {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

/* Standard SellAuth templates (cart, dashboard…) keep a constrained shell. */
.nex-shell--boxed > div:first-child,
.nex-shell--boxed > footer {
  width: 100%;
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: var(--nex-gutter);
}

.nex-container {
  width: 100%;
  max-width: var(--nex-w);
  margin-inline: auto;
  padding-inline: var(--nex-gutter);
}

.nex-container--tight {
  max-width: var(--nex-w-tight);
}

.nex-section {
  position: relative;
  padding-block: var(--sp-section);
}

.nex-section--flush-top {
  padding-top: 0;
}

.nex-section--tight {
  padding-block: clamp(48px, 5vw, 80px);
}

/* Alternating tint band — the rhythm device between sections. */
.nex-section--tint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--nex-card) 46%, transparent) 12%,
    color-mix(in srgb, var(--nex-card) 46%, transparent) 88%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
}

.nex-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: clamp(32px, 4vw, 56px);
  max-width: 62ch;
}

.nex-section__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.nex-section__head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
}

@media (max-width: 800px) {
  .nex-section__head--split {
    flex-direction: column;
    align-items: flex-start;
  }
}

.nex-grid {
  display: grid;
  gap: var(--sp-5);
}

/* ==========================================================================
   04 — Typography
   ========================================================================== */

.nex-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}

.nex-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}

.nex-h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}

.nex-h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  margin: 0;
}

.nex-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--nex-text-2);
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

.nex-body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--nex-text-2);
  margin: 0;
}

.nex-small {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
  margin: 0;
}

/* Mono eyebrow — the signature label of the system. */
.nex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nex-text-3);
}

.nex-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--nex-accent);
}

.nex-eyebrow--dot::before {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--nex-accent);
  box-shadow: 0 0 0 3px var(--nex-accent-14);
}

.nex-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.nex-grad-text {
  background: var(--nex-brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keeps descenders from clipping in Safari. */
  padding-bottom: 0.06em;
}

.nex-text-accent {
  color: var(--nex-accent-hi);
}

/* ==========================================================================
   05 — Buttons
   ========================================================================== */

.nex-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--d-1) var(--e-out), background-color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}

.nex-btn:active {
  transform: translateY(1px) scale(0.995);
}

.nex-btn i {
  font-size: 0.9em;
  transition: transform var(--d-2) var(--e-out);
}

.nex-btn:hover i.nex-btn__arrow {
  transform: translateX(3px);
}

/* Primary — the single strongest action on any view. */
.nex-btn--primary {
  background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--nex-accent) 82%, #ffffff) 0%,
      var(--nex-accent) 45%,
      color-mix(in srgb, var(--nex-accent) 88%, #000000) 100%
    );
  border-color: color-mix(in srgb, var(--nex-accent) 60%, #ffffff 20%);
  color: #fff;
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Moving sheen, revealed on hover only. */
.nex-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--d-4) var(--e-out);
}

.nex-btn--primary:hover {
  background: color-mix(in srgb, var(--nex-accent) 88%, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--nex-accent) 85%, transparent), var(--sh-inset);
}

.nex-btn--primary:hover::after {
  transform: translateX(120%);
}

/* Secondary — equal weight action, quieter glass surface. */
.nex-btn--ghost {
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 40%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: rgba(255, 255, 255, 0.13);
  color: var(--nex-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.nex-btn--ghost:hover {
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 52%, transparent);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 34px -20px rgba(0, 0, 0, 0.9);
}

/* Tertiary — inline, navigational. */
.nex-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--nex-text-3);
  padding-inline: var(--sp-3);
}

.nex-btn--quiet:hover {
  color: var(--nex-text);
  background: rgba(255, 255, 255, 0.06);
}

.nex-btn--discord {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.35);
  color: #c7cdff;
}

.nex-btn--discord:hover {
  background: rgba(88, 101, 242, 0.22);
  color: #fff;
  transform: translateY(-1px);
}

.nex-btn--lg {
  min-height: 52px;
  padding-inline: var(--sp-7);
  font-size: var(--fs-body);
}

.nex-btn--sm {
  min-height: 36px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-xs);
}

.nex-btn--full {
  width: 100%;
}

.nex-btn[disabled],
.nex-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
}

.nex-btn.is-busy {
  pointer-events: none;
  color: transparent !important;
}

.nex-btn.is-busy::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: nex-spin 0.7s linear infinite;
}

@keyframes nex-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Text link with an animated underline. */
.nex-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nex-accent-hi);
}

.nex-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--d-2) var(--e-out);
}

.nex-link:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ==========================================================================
   06 — Cards, badges, chips, inputs
   ========================================================================== */

.nex-card {
  position: relative;
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 52%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: var(--glass-edge);
  border-radius: var(--r-3);
  box-shadow: var(--glass-bevel), 0 16px 44px -28px rgba(0, 0, 0, 0.9);
}

.nex-card--pad {
  padding: clamp(20px, 2.4vw, 28px);
}

.nex-card--hover {
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

.nex-card--hover:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

/* Corner ticks — a quiet technical signature on feature surfaces. */
.nex-card--ticked::before,
.nex-card--ticked::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--nex-line-3);
  border-style: solid;
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out);
}

.nex-card--ticked::before {
  top: 8px;
  left: 8px;
  border-width: 1px 0 0 1px;
}

.nex-card--ticked::after {
  bottom: 8px;
  right: 8px;
  border-width: 0 1px 1px 0;
}

.nex-card--ticked:hover::before,
.nex-card--ticked:hover::after {
  opacity: 1;
}

.nex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 42%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--nex-text-2);
  white-space: nowrap;
}

.nex-badge--accent {
  border-color: var(--nex-accent-24);
  background: var(--nex-accent-08);
  color: var(--nex-accent-hi);
}

.nex-badge--ok {
  border-color: color-mix(in srgb, var(--nex-ok) 30%, transparent);
  background: color-mix(in srgb, var(--nex-ok) 10%, transparent);
  color: var(--nex-ok);
}

.nex-badge--warn {
  border-color: color-mix(in srgb, var(--nex-warn) 30%, transparent);
  background: color-mix(in srgb, var(--nex-warn) 10%, transparent);
  color: var(--nex-warn);
}

.nex-badge--down {
  border-color: color-mix(in srgb, var(--nex-down) 30%, transparent);
  background: color-mix(in srgb, var(--nex-down) 10%, transparent);
  color: var(--nex-down);
}

.nex-badge--maint {
  border-color: color-mix(in srgb, var(--nex-maint) 30%, transparent);
  background: color-mix(in srgb, var(--nex-maint) 10%, transparent);
  color: var(--nex-maint);
}

/* Live dot with a breathing halo. */
.nex-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nex-ok);
  flex: none;
}

.nex-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: inherit;
  background: transparent;
  animation: nex-ping 2.4s var(--e-out) infinite;
}

.nex-dot--ok {
  background: var(--nex-ok);
  color: var(--nex-ok);
}
.nex-dot--warn {
  background: var(--nex-warn);
  color: var(--nex-warn);
}
.nex-dot--down {
  background: var(--nex-down);
  color: var(--nex-down);
}
.nex-dot--maint {
  background: var(--nex-maint);
  color: var(--nex-maint);
}
.nex-dot--accent {
  background: var(--nex-accent);
  color: var(--nex-accent);
}

@keyframes nex-ping {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.nex-kbd {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--nex-line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--nex-s2);
  color: var(--nex-text-2);
}

.nex-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 45%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-1);
  color: var(--nex-text);
  font-size: var(--fs-sm);
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}

.nex-input::placeholder {
  color: var(--nex-text-4);
}

.nex-input:focus {
  outline: none;
  border-color: var(--nex-accent-40);
  background: var(--nex-s3);
  box-shadow: 0 0 0 3px var(--nex-accent-08);
}

.nex-field {
  position: relative;
  display: flex;
  align-items: center;
}

.nex-field i {
  position: absolute;
  left: 14px;
  font-size: 13px;
  color: var(--nex-text-4);
  pointer-events: none;
}

.nex-field .nex-input {
  padding-left: 38px;
}

/* Segmented filter control. */
.nex-segment {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 45%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: var(--glass-edge);
  border-radius: var(--r-pill);
  box-shadow: var(--glass-bevel);
  flex-wrap: wrap;
}

.nex-segment button {
  border-radius: var(--r-pill) !important;
}

.nex-segment button {
  min-height: 34px;
  padding: 0 var(--sp-4);
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--nex-text-3);
  transition: background-color var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}

.nex-segment button:hover {
  color: var(--nex-text);
}

.nex-segment button.is-active {
  background: var(--nex-accent-14);
  color: var(--nex-accent-hi);
  box-shadow: inset 0 0 0 1px var(--nex-accent-24);
}

/* Empty / error states, shared by every dynamic surface. */
.nex-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: clamp(36px, 6vw, 64px) var(--sp-6);
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--r-3);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 40%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.nex-state__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  background: var(--nex-s3);
  color: var(--nex-text-3);
  font-size: 17px;
}

.nex-state h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.nex-state p {
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
  max-width: 46ch;
}

/* Skeleton loaders. */
.nex-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--nex-s2);
  border-radius: var(--r-1);
}

.nex-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-100%);
  animation: nex-shimmer 1.4s infinite;
}

@keyframes nex-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ==========================================================================
   07 — Motion utilities
   ========================================================================== */

/* Scroll reveal. Defaults to visible: if JS never runs, content still shows. */
.nex-reveal {
  opacity: 1;
}

/* No `will-change` here on purpose. There are sixty-odd revealing elements on
   the homepage and promoting every one of them to its own compositor layer for
   the whole life of the page costs far more than the transition it was meant
   to smooth. Opacity and transform are composited anyway. */
.js .nex-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}

.js .nex-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Set by nex.js on anything revealed after the reader has already flown past
   it. Playing a half-second entrance for content that is now behind them is
   what reads as the whole page appearing at once. */
.js .nex-reveal.is-instant,
.js [data-stagger].is-instant > *,
.js .nex-split.is-instant .nex-split__word > span {
  transition: none !important;
  transition-delay: 0ms !important;
}

.js .nex-reveal--fade {
  transform: none;
}

.js .nex-reveal--left {
  transform: translateX(-24px);
}

.js .nex-reveal--right {
  transform: translateX(24px);
}

.js .nex-reveal--scale {
  transform: scale(0.97);
}

/* Staggered children. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--d-3) var(--e-out), transform var(--d-3) var(--e-out);
}

.js [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 45ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 90ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 130ms; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 165ms; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 195ms; }
.js [data-stagger].is-in > *:nth-child(7) { transition-delay: 220ms; }
.js [data-stagger].is-in > *:nth-child(8) { transition-delay: 240ms; }

/* Word-by-word headline reveal. */
.nex-split__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.nex-split__word > span {
  display: inline-block;
}

.js .nex-split .nex-split__word > span {
  transform: translateY(105%);
  transition: transform 700ms var(--e-out);
}

.js .nex-split.is-in .nex-split__word > span {
  transform: none;
}

/* Marquee track. Duplicated content lives inside; JS only clones. */
.nex-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nex-marquee__track {
  display: flex;
  gap: var(--sp-4);
  padding-inline: calc(var(--sp-4) / 2);
  flex: none;
  min-width: 100%;
  animation: nex-scroll var(--marquee-dur, 60s) linear infinite;
  animation-direction: var(--marquee-dir, normal);
  will-change: transform;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .nex-marquee:hover .nex-marquee__track {
    animation-play-state: paused;
  }
}

@keyframes nex-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .nex-reveal,
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .js .nex-split .nex-split__word > span {
    transform: none !important;
  }

  .nex-marquee {
    overflow-x: auto;
  }

  .nex-marquee__track {
    animation: none !important;
  }
}

/* ==========================================================================
   08 — Ambience
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animated backdrop — the surface the glass refracts.
   Four slow-morphing blobs, an aurora sweep, a fading grid and film grain.
   All GPU transforms/filters, fixed position, pointer-events none.
   -------------------------------------------------------------------------- */

.nex-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(140% 90% at 50% -20%, color-mix(in srgb, var(--nex-accent) 11%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--nex-accent) 4%, transparent), transparent 40%);
}

.nex-backdrop__halo {
  position: absolute;
  filter: blur(90px);
  will-change: transform;
  mix-blend-mode: screen;
}

.nex-backdrop__halo--a {
  top: -16vh;
  left: -8vw;
  width: 46vw;
  height: 46vw;
  min-width: 380px;
  min-height: 380px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--nex-accent) 62%, transparent), transparent 68%);
  opacity: 0.55;
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
  animation: nex-morph-a 28s var(--e-inout) infinite alternate, nex-drift-a 44s linear infinite alternate;
}

.nex-backdrop__halo--b {
  bottom: -22vh;
  right: -12vw;
  width: 42vw;
  height: 42vw;
  min-width: 340px;
  min-height: 340px;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--nex-accent) 40%, #2b6bff 40%), transparent 70%);
  opacity: 0.4;
  border-radius: 44% 56% 62% 38% / 52% 44% 56% 48%;
  animation: nex-morph-b 34s var(--e-inout) infinite alternate, nex-drift-b 52s linear infinite alternate;
}

.nex-backdrop__halo--c {
  top: 38%;
  left: 46%;
  width: 34vw;
  height: 34vw;
  min-width: 280px;
  min-height: 280px;
  translate: -50% -50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--nex-accent) 34%, #c471ff 40%), transparent 72%);
  opacity: 0.26;
  border-radius: 52% 48% 38% 62% / 58% 42% 58% 42%;
  animation: nex-morph-a 40s var(--e-inout) 2s infinite alternate, nex-drift-c 60s linear infinite alternate;
}

/* A slow sweep of light across the whole page. */
.nex-backdrop__aurora {
  position: absolute;
  inset: -30% -10%;
  background: conic-gradient(
    from 200deg at 50% 50%,
    transparent 0deg,
    color-mix(in srgb, var(--nex-accent) 16%, transparent) 60deg,
    transparent 140deg,
    color-mix(in srgb, var(--nex-accent) 10%, #2b6bff 20%) 250deg,
    transparent 330deg
  );
  filter: blur(70px);
  opacity: 0.5;
  animation: nex-aurora 60s linear infinite;
  will-change: transform;
}

.nex-backdrop__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(110% 70% at 50% 0%, #000 0%, transparent 78%);
  animation: nex-grid-pan 90s linear infinite;
}

.nex-backdrop__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: nex-grain 5s steps(4) infinite;
}

@keyframes nex-morph-a {
  50% {
    border-radius: 42% 58% 60% 40% / 58% 40% 60% 42%;
  }
  100% {
    border-radius: 62% 38% 40% 60% / 40% 62% 38% 60%;
  }
}

@keyframes nex-morph-b {
  50% {
    border-radius: 60% 40% 36% 64% / 42% 60% 40% 58%;
  }
  100% {
    border-radius: 38% 62% 58% 42% / 62% 38% 62% 38%;
  }
}

@keyframes nex-drift-a {
  to {
    transform: translate3d(7vw, 5vh, 0) scale(1.15) rotate(18deg);
  }
}

@keyframes nex-drift-b {
  to {
    transform: translate3d(-6vw, -6vh, 0) scale(1.12) rotate(-14deg);
  }
}

@keyframes nex-drift-c {
  to {
    transform: translate3d(-8vw, 6vh, 0) scale(1.2);
  }
}

@keyframes nex-aurora {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nex-grid-pan {
  to {
    background-position: 72px 72px;
  }
}

@keyframes nex-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nex-backdrop__halo,
  .nex-backdrop__aurora,
  .nex-backdrop__grid,
  .nex-backdrop__grain,
  .nex-backdrop__mark--motion-drift img {
    animation: none !important;
    will-change: auto;
  }
}

/* Hairline separator with a centred accent node. */
.nex-rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nex-line-2), transparent);
}

.nex-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--nex-accent);
  box-shadow: 0 0 12px var(--nex-accent);
}

/* Hairline separator with a centred accent node. */
.nex-rule {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nex-line-2), transparent);
}

.nex-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--nex-accent);
  box-shadow: 0 0 12px var(--nex-accent);
}
/* ==========================================================================
   NEX — Chrome: loader, announcement, navbar, footer, promo popup
   ========================================================================== */

/* --------------------------------------------------------------------------
   Boot loader — first visit only, dismissed as soon as the page is ready.
   Never blocks: a hard 2.2s ceiling removes it whatever happens.
   -------------------------------------------------------------------------- */

.nex-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--nex-bg);
  transition: opacity 520ms var(--e-out), visibility 520ms;
}

.nex-boot[hidden] {
  display: none;
}

.nex-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nex-boot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

.nex-boot__mark {
  width: 62px;
  height: 62px;
  filter: drop-shadow(0 8px 30px var(--nex-accent-40));
}

/* The mark rises into place and settles, with the glow blooming behind it. */
.nex-boot__mark {
  animation: nex-boot-mark 1100ms var(--e-spring) forwards;
}

@keyframes nex-boot-mark {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.82);
    filter: drop-shadow(0 0 0 transparent);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 10px 34px var(--nex-accent-40));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nex-boot__mark {
    animation: none;
  }
}

.nex-boot__word {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--nex-text-3);
  text-transform: uppercase;
}

.nex-boot__bar {
  position: relative;
  width: 148px;
  height: 2px;
  background: var(--nex-line-2);
  overflow: hidden;
  border-radius: var(--r-pill);
}

.nex-boot__bar span {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--boot-progress, 0));
  background: var(--nex-brand-grad);
  transition: transform 260ms var(--e-out);
}

/* --------------------------------------------------------------------------
   Announcement rail
   -------------------------------------------------------------------------- */

.nex-announce {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--nex-accent) 10%, transparent),
      transparent
    ),
    color-mix(in srgb, var(--nex-card) 55%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.nex-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 38px;
  padding: 6px var(--nex-gutter);
  font-size: var(--fs-xs);
  color: var(--nex-text-2);
  text-align: center;
}

.nex-announce__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.nex-announce a {
  color: var(--nex-accent-hi);
  font-weight: 600;
}

.nex-announce a:hover {
  text-decoration: underline;
}

.nex-announce__close {
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-1);
  color: var(--nex-text-4);
  font-size: 11px;
  transition: color var(--d-1), background-color var(--d-1);
}

.nex-announce__close:hover {
  color: var(--nex-text);
  background: var(--nex-s3);
}

/* --------------------------------------------------------------------------
   Navbar — a floating glass pill.
   The active/hovered link is tracked by a single "glider" element that
   animates between targets, so the header always feels alive.
   -------------------------------------------------------------------------- */

.nex-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px var(--nex-gutter) 0;
  transition: padding var(--d-3) var(--e-out);
}

.nex-nav.is-stuck {
  padding-top: 8px;
}

.nex-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 60px;
  max-width: var(--nex-w);
  margin-inline: auto;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 44%, transparent);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: var(--glass-edge);
  box-shadow: var(--glass-bevel), 0 10px 40px -26px rgba(0, 0, 0, 0.9);
  transition: height var(--d-3) var(--e-out), background-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out);
}

/* Light that sweeps along the rim when the bar is hovered. */
.nex-nav__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--nex-accent) 70%, #ffffff) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

.nex-nav__inner:hover::after {
  animation: nex-nav-sweep 1.5s var(--e-out);
}

@keyframes nex-nav-sweep {
  0% { opacity: 0; background-position: 120% 0; }
  25% { opacity: 0.9; }
  100% { opacity: 0; background-position: -60% 0; }
}

.nex-nav.is-stuck .nex-nav__inner {
  height: 54px;
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 62%, transparent);
  box-shadow: var(--glass-bevel), 0 18px 50px -28px rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Reading-progress hairline hugging the pill. */
.nex-nav__progress {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--nex-accent), color-mix(in srgb, var(--nex-accent) 60%, #c471ff));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  pointer-events: none;
}

.nex-nav.is-stuck .nex-nav__progress {
  opacity: 0.85;
}

.nex-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: none;
  padding-inline: 6px;
  min-height: 40px;
}

.nex-nav__brand .nex-mark,
.nex-nav__brand .nex-nav__logo {
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--nex-accent) 55%, transparent));
  transition: transform var(--d-3) var(--e-spring), filter var(--d-3) var(--e-out);
}

.nex-nav__brand:hover .nex-mark,
.nex-nav__brand:hover .nex-nav__logo {
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--nex-accent) 85%, transparent));
}

.nex-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.nex-mark--lg {
  width: 40px;
  height: 40px;
}

.nex-nav__logo {
  max-height: 28px;
  width: auto;
  flex: none;
}

.nex-nav__name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nex-nav__links {
  position: relative;
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}

/* The glider: one pill that slides under whichever link is hovered/active. */
.nex-nav__glider {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  width: 0;
  translate: 0 -50%;
  border-radius: var(--r-pill);
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-accent) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 18px -10px color-mix(in srgb, var(--nex-accent) 80%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms var(--e-out), width 420ms var(--e-out), opacity 220ms var(--e-out);
  z-index: 0;
}

.nex-nav__glider.is-on {
  opacity: 1;
}

.nex-nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nex-text-3);
  transition: color var(--d-2) var(--e-out);
}

.nex-nav__link i {
  font-size: 11px;
  opacity: 0.75;
  transition: transform var(--d-2) var(--e-spring), color var(--d-2);
}

.nex-nav__link:hover {
  color: var(--nex-text);
}

.nex-nav__link:hover i {
  transform: translateY(-1px) scale(1.1);
  color: var(--nex-accent-hi);
}

.nex-nav__link.is-active {
  color: var(--nex-text);
}

.nex-nav__link.is-active i {
  color: var(--nex-accent-hi);
}

.nex-nav__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.nex-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 35%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--nex-text-2);
  font-size: 13px;
  transition: color var(--d-2), border-color var(--d-2), background-color var(--d-2),
    transform var(--d-2) var(--e-spring), box-shadow var(--d-2);
}

.nex-icon-btn:hover {
  color: var(--nex-text);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 10px 24px -14px color-mix(in srgb, var(--nex-accent) 80%, transparent);
}

.nex-icon-btn__count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--nex-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nex-bg) 80%, transparent);
}

.nex-nav__burger {
  display: grid;
}

@media (min-width: 1024px) {
  .nex-nav__links {
    display: flex;
  }
  .nex-nav__burger {
    display: none;
  }
}

/* Mobile drawer */
.nex-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--nex-bg) 78%, transparent);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  animation: nex-drawer-in 320ms var(--e-out);
}

@keyframes nex-drawer-in {
  from { opacity: 0; }
}

.nex-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nex-nav-h);
  padding-inline: var(--nex-gutter);
  border-bottom: 1px solid var(--nex-line);
}

.nex-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6) var(--nex-gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.nex-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: 0 var(--sp-4);
  border: var(--glass-edge);
  border-radius: var(--r-3);
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 42%, transparent);
  box-shadow: var(--glass-bevel);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nex-text);
  opacity: 0;
  transform: translateY(14px);
  animation: nex-drawer-item 460ms var(--e-out) forwards;
}

.nex-drawer__link:nth-child(1) { animation-delay: 40ms; }
.nex-drawer__link:nth-child(2) { animation-delay: 80ms; }
.nex-drawer__link:nth-child(3) { animation-delay: 120ms; }
.nex-drawer__link:nth-child(4) { animation-delay: 160ms; }
.nex-drawer__link:nth-child(5) { animation-delay: 200ms; }
.nex-drawer__link:nth-child(6) { animation-delay: 240ms; }
.nex-drawer__link:nth-child(7) { animation-delay: 280ms; }

@keyframes nex-drawer-item {
  to { opacity: 1; transform: none; }
}

.nex-drawer__link i:first-child {
  width: 20px;
  color: var(--nex-accent-hi);
  font-size: 14px;
}

.nex-drawer__link i:last-child {
  margin-left: auto;
  font-size: 12px;
  color: var(--nex-text-4);
}

.nex-drawer__link.is-active {
  border-color: var(--nex-accent-24);
  background: var(--nex-accent-08);
}

.nex-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--nex-gutter) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--nex-line);
}

.nex-drawer__utils {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* The hidden attribute must win over the flex display above. */
.nex-drawer[hidden],
.nex-drawer[x-cloak] {
  display: none;
}

@media (min-width: 1024px) {
  .nex-drawer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.nex-footer {
  position: relative;
  margin-top: var(--sp-section);
  border-top: 1px solid var(--nex-line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nex-card) 60%, transparent));
}

.nex-footer__glow {
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(680px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nex-accent), transparent);
  opacity: 0.6;
}

.nex-footer__grid {
  display: grid;
  gap: var(--sp-8);
  padding-block: clamp(40px, 5vw, 68px);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .nex-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nex-footer__brand {
    grid-column: span 3;
  }
}

@media (min-width: 1000px) {
  .nex-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
  .nex-footer__brand {
    grid-column: span 1;
  }
}

.nex-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 34ch;
}

.nex-footer__brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nex-footer__brand-name {
  font-size: 1.05rem;
  font-weight: 800;
}

.nex-footer__col h4 {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nex-text-4);
  margin-bottom: var(--sp-4);
}

.nex-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nex-footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
  transition: color var(--d-1) var(--e-out), transform var(--d-1) var(--e-out);
}

.nex-footer__col a:hover {
  color: var(--nex-text);
  transform: translateX(2px);
}

.nex-footer__socials {
  display: flex;
  gap: var(--sp-2);
}

.nex-footer__social {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-1);
  background: var(--nex-s2);
  color: var(--nex-text-3);
  transition: color var(--d-2), border-color var(--d-2), transform var(--d-2), background-color var(--d-2);
}

.nex-footer__social:hover {
  color: var(--nex-text);
  border-color: var(--nex-line-2);
  background: var(--nex-s3);
  transform: translateY(-2px);
}

.nex-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-1);
  background: var(--nex-s2);
  font-size: var(--fs-xs);
  color: var(--nex-text-2);
  width: fit-content;
}

.nex-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--nex-line);
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-footer__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.nex-footer__bar a:hover {
  color: var(--nex-text-2);
}

/* --------------------------------------------------------------------------
   Promo popup
   -------------------------------------------------------------------------- */

.nex-promo {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(3, 3, 6, 0.72);
  backdrop-filter: blur(6px);
}

.nex-promo[x-cloak] {
  display: none;
}

.nex-promo__panel {
  position: relative;
  width: min(430px, 100%);
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nex-card) 96%, #ffffff 4%), var(--nex-card));
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.nex-promo__panel::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 120%;
  background: radial-gradient(closest-side, var(--nex-accent-24), transparent);
  pointer-events: none;
}

.nex-promo__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-1);
  color: var(--nex-text-3);
  transition: color var(--d-1), background-color var(--d-1);
  z-index: 1;
}

.nex-promo__close:hover {
  color: var(--nex-text);
  background: var(--nex-s3);
}

.nex-promo__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.nex-promo__title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.nex-promo__code {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 12px 12px 16px;
  border: 1px dashed var(--nex-accent-40);
  border-radius: var(--r-2);
  background: var(--nex-accent-08);
}

.nex-promo__code code {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--nex-text);
}

.nex-promo__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nex-promo__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--nex-text-2);
}

.nex-promo__list i {
  color: var(--nex-ok);
  font-size: 12px;
  margin-top: 3px;
}

.nex-promo__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Copy feedback pill, shared by every copy button. */
.nex-copied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nex-ok);
}

/* Toast host */
.nex-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  translate: -50% 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.nex-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--nex-card) 94%, #ffffff 6%);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nex-text);
  animation: nex-toast-in 320ms var(--e-spring);
}

.nex-toast i {
  color: var(--nex-ok);
}

.nex-toast.is-out {
  animation: nex-toast-out 260ms var(--e-out) forwards;
}

@keyframes nex-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

@keyframes nex-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* Comfortable tap targets on touch devices. */
.nex-nav__brand {
  min-height: 40px;
}

@media (max-width: 640px) {
  .nex-hero__status {
    min-height: 38px;
  }

  .nex-hero__actions .nex-btn {
    flex: 1 1 100%;
  }
}

/* Touch devices: give inline links a comfortable hit area (WCAG 2.5.8). */
@media (pointer: coarse) {
  .nex-footer__col a,
  .nex-footer__bar a,
  .nex-footer__brand-row,
  .nex-page__crumbs a,
  .nex-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .nex-footer__col ul {
    gap: 2px;
  }
}
/* ==========================================================================
   NEX — Hero + product console
   --------------------------------------------------------------------------
   The console is a live HTML/CSS replica of the NEX loader window rather than
   a screenshot in a card: it stays sharp at any resolution, weighs nothing,
   and can react to the pointer.
   ========================================================================== */

.nex-hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(56px, 8vw, 104px);
  overflow: clip;
}

.nex-hero__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1080px) {
  .nex-hero__grid {
    grid-template-columns: minmax(0, 5.2fr) minmax(0, 6fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

.nex-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  position: relative;
  z-index: 2;
}

/* Live status chip — reads the real product status. */
.nex-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-pill);
  background: var(--nex-s2);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--nex-text-2);
  transition: border-color var(--d-2), transform var(--d-2) var(--e-out);
}

.nex-hero__status:hover {
  border-color: var(--nex-line-3);
  transform: translateY(-1px);
}

.nex-hero__status b {
  color: var(--nex-text);
  font-weight: 700;
}

.nex-hero__status span.sep {
  width: 1px;
  height: 12px;
  background: var(--nex-line-2);
}

.nex-hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.042em;
  margin: 0;
  text-wrap: balance;
}

.nex-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--nex-text-2);
  max-width: 46ch;
  margin: 0;
}

.nex-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  width: 100%;
}

.nex-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding-top: var(--sp-2);
}

.nex-hero__proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--nex-text-3);
}

.nex-hero__proof-item strong {
  color: var(--nex-text);
  font-weight: 700;
}

.nex-hero__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--nex-accent-hi);
  font-size: 11px;
}

.nex-hero__avatars {
  display: inline-flex;
}

.nex-hero__avatars span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--nex-bg);
  background: var(--nex-s3);
  font-size: 10px;
  font-weight: 800;
  color: var(--nex-text-2);
}

/* --------------------------------------------------------------------------
   Console
   -------------------------------------------------------------------------- */

.nex-hero__stage {
  position: relative;
  perspective: 1400px;
  z-index: 1;
  /* Breathing room so the floating cards sit beside the window instead of
     covering its interface. */
  padding-inline: clamp(0px, 3.5%, 40px);
}

.nex-hero__stage::before {
  content: '';
  position: absolute;
  inset: -12% -8% -18%;
  background: radial-gradient(closest-side, var(--nex-accent-24), transparent 72%);
  filter: blur(10px);
  opacity: 0.8;
  pointer-events: none;
}

.nex-console {
  position: relative;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(168deg, #14102b 0%, #0d0a1c 46%, #0a0816 100%);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 40px 120px -50px color-mix(in srgb, var(--nex-accent) 60%, transparent);
  overflow: hidden;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms var(--e-out);
}

/* Window bar */
.nex-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding-inline: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 5, 14, 0.75);
}

.nex-console__bar .nex-mark {
  width: 18px;
  height: 18px;
}

.nex-console__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--nex-text-2);
}

.nex-console__winbtns {
  margin-left: auto;
  display: inline-flex;
  gap: 14px;
  color: var(--nex-text-4);
  font-size: 10px;
}

/* App layout: icon rail + panel */
.nex-console__body {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 348px;
}

.nex-console__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(6, 5, 14, 0.5);
}

.nex-console__rail i {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 12px;
  transition: color var(--d-2), background-color var(--d-2);
}

.nex-console__rail i.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--nex-accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--nex-accent-40);
}

.nex-console__rail i:last-child {
  margin-top: auto;
}

.nex-console__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, rgba(74, 58, 168, 0.34) 0%, rgba(30, 22, 74, 0.18) 44%, transparent 78%);
}

.nex-console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nex-console__head h3 {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.nex-console__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

.nex-console__chip--time {
  margin-left: auto;
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}

.nex-console__chip--state[data-state='idle'] {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.nex-console__chip--state[data-state='live'] {
  border-color: color-mix(in srgb, var(--nex-ok) 34%, transparent);
  background: color-mix(in srgb, var(--nex-ok) 12%, transparent);
  color: var(--nex-ok);
}

/* Mode cards */
.nex-console__content {
  position: relative;
  flex: 1;
  padding: 18px 16px;
}

.nex-console__lede {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.nex-console__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.nex-console__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.nex-console__mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
  transition: border-color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}

.nex-console__mode:hover,
.nex-console__mode.is-active {
  border-color: var(--nex-accent-40);
  background: color-mix(in srgb, var(--nex-accent) 12%, transparent);
  transform: translateY(-2px);
}

.nex-console__mode-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--nex-brand-grad);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 6px 18px -8px var(--nex-accent);
}

.nex-console__mode strong {
  font-size: 12px;
  color: #fff;
}

.nex-console__mode span {
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.58);
}

.nex-console__mode em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

/* Terminal */
.nex-console__term {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(2, 2, 8, 0.55);
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.75;
  min-height: 86px;
}

.nex-console__term p {
  display: flex;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 240ms var(--e-out), transform 240ms var(--e-out);
}

.nex-console__term p.is-in {
  opacity: 1;
  transform: none;
}

.nex-console__term time {
  color: rgba(255, 255, 255, 0.26);
  flex: none;
}

.nex-console__term .ok {
  color: var(--nex-ok);
}

.nex-console__caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: var(--nex-accent-hi);
  vertical-align: -1px;
  animation: nex-caret 1s steps(2) infinite;
}

@keyframes nex-caret {
  50% {
    opacity: 0;
  }
}

/* Progress + success overlay */
.nex-console__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.nex-console__progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  background: var(--nex-brand-grad);
  transition: transform 600ms var(--e-out);
}

.nex-console__success {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 18, 0.42);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--e-out), visibility 420ms;
}

.nex-console.is-complete .nex-console__success {
  opacity: 1;
  visibility: visible;
}

.nex-console__success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(20, 17, 42, 0.92);
  box-shadow: var(--sh-2);
  text-align: center;
  transform: scale(0.94);
  transition: transform 420ms var(--e-spring);
}

.nex-console.is-complete .nex-console__success-card {
  transform: scale(1);
}

.nex-console__success-ring {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--nex-ok) 60%, transparent);
  background: color-mix(in srgb, var(--nex-ok) 14%, transparent);
  color: var(--nex-ok);
  font-size: 17px;
}

.nex-console__success-card strong {
  font-size: 14px;
  color: #fff;
}

.nex-console__success-card span {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}

/* Floating cards around the console */
.nex-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-card) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-2);
  white-space: nowrap;
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0);
  transition: transform 700ms var(--e-out);
}

.nex-float i {
  color: var(--nex-accent-hi);
  font-size: 13px;
}

.nex-float strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.2;
}

.nex-float span {
  display: block;
  font-size: 10px;
  color: var(--nex-text-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nex-float--a {
  top: -20px;
  left: 14%;
  animation: nex-bob 7s var(--e-inout) infinite alternate;
}

.nex-float--b {
  bottom: -20px;
  right: 5%;
  animation: nex-bob 8.5s var(--e-inout) 0.6s infinite alternate;
}

@keyframes nex-bob {
  to {
    translate: 0 -10px;
  }
}

@media (max-width: 1080px) {
  .nex-float--a {
    left: 12%;
  }
  .nex-float--b {
    right: 8%;
  }
}

@media (max-width: 560px) {
  .nex-console__body {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 0;
  }
  .nex-console__modes {
    grid-template-columns: 1fr;
  }
  .nex-console__term {
    min-height: 64px;
  }
  .nex-float {
    padding: 8px 11px;
    scale: 0.92;
  }
  .nex-float--a {
    top: -16px;
    left: 8%;
  }
  .nex-float--b {
    bottom: -16px;
    right: 4%;
  }
}

/* Scroll cue */
.nex-hero__cue {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-8);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

@media (min-width: 1080px) {
  .nex-hero__cue {
    display: flex;
  }
}

.nex-hero__cue-line {
  position: relative;
  width: 46px;
  height: 1px;
  background: var(--nex-line-2);
  overflow: hidden;
}

.nex-hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nex-accent);
  transform-origin: left;
  animation: nex-cue 2.6s var(--e-inout) infinite;
}

@keyframes nex-cue {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  55% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Optional merchant artwork, shown under the console when provided. */
.nex-hero__art {
  margin-top: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--sh-2);
}

.nex-hero__art img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==========================================================================
   NEX — Homepage sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.nex-trust {
  position: relative;
  border-block: 1px solid var(--nex-line);
  background: color-mix(in srgb, var(--nex-card) 45%, transparent);
}

.nex-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--nex-line);
}

@media (min-width: 760px) {
  .nex-trust__list {
    grid-template-columns: repeat(var(--trust-cols, 4), minmax(0, 1fr));
  }
}

.nex-trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 14px;
  background: var(--nex-bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nex-text-2);
  text-align: center;
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}

.nex-trust__item:hover {
  background: color-mix(in srgb, var(--nex-card) 70%, transparent);
  color: var(--nex-text);
}

.nex-trust__item i {
  color: var(--nex-accent-hi);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Reviews — marquee + cards
   -------------------------------------------------------------------------- */

.nex-reviews {
  position: relative;
  overflow: hidden;
}

.nex-reviews__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Background variant: the marquee sits behind the section content. */
.nex-reviews--ambient .nex-reviews__rows {
  position: absolute;
  inset: 0;
  justify-content: center;
  opacity: 0.28;
  filter: saturate(0.5);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 70% at 50% 50%, transparent 32%, #000 78%);
  mask-image: radial-gradient(120% 70% at 50% 50%, transparent 32%, #000 78%);
}

.nex-reviews--ambient .nex-container {
  position: relative;
  z-index: 1;
}

.nex-review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: clamp(240px, 62vw, 340px);
  flex: none;
  padding: 16px;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-card) 55%, transparent);
  backdrop-filter: blur(4px);
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

.nex-marquee .nex-review:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--nex-line-3);
  background: color-mix(in srgb, var(--nex-card) 96%, transparent);
  box-shadow: var(--sh-2);
  z-index: 2;
}

.nex-review__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nex-review__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--nex-brand-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px -6px var(--nex-accent);
}

.nex-review__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nex-review__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--nex-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nex-review__meta {
  font-size: 10.5px;
  color: var(--nex-text-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nex-review__stars {
  margin-left: auto;
  display: inline-flex;
  gap: 1px;
  color: var(--nex-accent-hi);
  font-size: 10px;
  flex: none;
}

.nex-review__stars .is-empty {
  color: var(--nex-text-4);
}

.nex-review__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--nex-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nex-review__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--nex-line);
  font-size: 10.5px;
  color: var(--nex-text-4);
}

.nex-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--nex-ok);
  font-weight: 700;
}

.nex-review__reply {
  padding: 10px 12px;
  border-left: 2px solid var(--nex-accent-40);
  background: var(--nex-s2);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--fs-xs);
  color: var(--nex-text-3);
  line-height: 1.5;
}

/* Ratings summary */
.nex-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
}

.nex-rating__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.nex-rating__score b {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.nex-rating__score span {
  font-size: var(--fs-sm);
  color: var(--nex-text-4);
}

.nex-rating__bars {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nex-rating__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--nex-text-4);
}

.nex-rating__bar i {
  color: var(--nex-accent-hi);
  font-size: 9px;
}

.nex-rating__track {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--nex-s3);
  overflow: hidden;
}

.nex-rating__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nex-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 900ms var(--e-out);
}

.is-in .nex-rating__fill {
  transform: scaleX(var(--fill, 0));
}

.nex-reviews__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.nex-reviews__grid .nex-review {
  width: auto;
}

/* --------------------------------------------------------------------------
   License / product
   -------------------------------------------------------------------------- */

.nex-offer {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .nex-offer {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: clamp(32px, 4vw, 56px);
  }
}

.nex-offer__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.nex-offer__included {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  align-content: start;
}

/* A real review, quoted at the moment of decision. */
.nex-offer__quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-left: 2px solid var(--nex-accent);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: linear-gradient(100deg, var(--nex-accent-08), transparent 60%);
}

.nex-offer__quote blockquote {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--nex-text);
}

.nex-offer__quote figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-offer__quote figcaption i {
  color: var(--nex-ok);
}

.nex-offer__media {
  overflow: hidden;
  border-radius: var(--r-2);
}

.nex-offer__media .nex-media {
  border-radius: inherit;
}

.nex-media--licence .nex-media__el {
  object-fit: cover;
}

.nex-offer__item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  transition: border-color var(--d-2), background-color var(--d-2), transform var(--d-2);
}

.nex-offer__item:hover {
  border-color: var(--nex-line-2);
  background: var(--nex-s2);
  transform: translateY(-2px);
}

.nex-offer__item i {
  color: var(--nex-accent-hi);
  font-size: 14px;
  margin-top: 2px;
}

.nex-offer__item strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 2px;
}

.nex-offer__item span {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--nex-text-3);
}

/* Pricing card */
.nex-price__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nex-price {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-4);
}

.nex-price__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
}

.nex-price__label {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nex-text-4);
  margin-bottom: 6px;
}

.nex-price__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nex-price__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 var(--sp-6) var(--sp-5);
}

.nex-price__amount b {
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nex-price__amount small {
  font-size: var(--fs-sm);
  color: var(--nex-text-4);
  text-decoration: line-through;
}

.nex-price__amount span.from {
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-price__durations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--sp-6) var(--sp-5);
}

.nex-price__duration {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-1);
  background: var(--nex-s2);
  font-size: var(--fs-xs);
  color: var(--nex-text-2);
  transition: border-color var(--d-2), background-color var(--d-2), transform var(--d-2);
}

.nex-price__duration:hover {
  border-color: var(--nex-accent-24);
  background: var(--nex-accent-08);
  transform: translateY(-1px);
}

.nex-price__duration b {
  font-weight: 700;
  color: var(--nex-text);
}

.nex-price__duration.is-out {
  opacity: 0.4;
  text-decoration: line-through;
}

.nex-price__checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--nex-line);
  background: rgba(0, 0, 0, 0.14);
}

.nex-price__checks li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--nex-text-2);
}

.nex-price__checks i {
  color: var(--nex-ok);
  font-size: 11px;
  margin-top: 4px;
}

.nex-price__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--nex-line);
}

.nex-price__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-price__stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.nex-price__stock.is-ok {
  color: var(--nex-ok);
}

.nex-price__stock.is-out {
  color: var(--nex-down);
}

.nex-price__ribbon {
  position: absolute;
  top: 14px;
  right: -34px;
  rotate: 38deg;
  padding: 5px 42px;
  background: var(--nex-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--sh-2);
}

/* --------------------------------------------------------------------------
   Feature grid
   -------------------------------------------------------------------------- */

.nex-features {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

@media (min-width: 1024px) {
  .nex-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nex-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  overflow: hidden;
  transition: border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

/* Pointer-tracked light — set by JS, degrades to nothing without it. */
.nex-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), var(--nex-accent-14), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  pointer-events: none;
}

.nex-feature:hover {
  border-color: var(--nex-line-2);
  background: var(--nex-s2);
  transform: translateY(-3px);
}

.nex-feature:hover::before {
  opacity: 1;
}

.nex-feature__index {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--nex-text-4);
}

.nex-feature__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-2);
  border: 1px solid var(--nex-line-2);
  background: var(--nex-s3);
  color: var(--nex-accent-hi);
  font-size: 15px;
  transition: transform var(--d-2) var(--e-spring), color var(--d-2), border-color var(--d-2);
}

.nex-feature:hover .nex-feature__icon {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--nex-accent-24);
}

.nex-feature h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nex-feature p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

/* --------------------------------------------------------------------------
   Visual showcase (real product screenshots)
   -------------------------------------------------------------------------- */

.nex-shots {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .nex-shots {
    grid-template-columns: 1fr 1fr;
  }
}

.nex-shot {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-3);
  background: var(--nex-s1);
  overflow: hidden;
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.nex-shot:hover {
  transform: translateY(-4px);
  border-color: var(--nex-line-2);
  box-shadow: var(--sh-3);
}

.nex-shot__frame {
  position: relative;
  overflow: hidden;
  background: #0a0816;
}

.nex-shot__frame picture { display: block; }

.nex-shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 900ms var(--e-out);
}

.nex-shot:hover .nex-shot__frame picture { display: block; }

.nex-shot__frame img {
  transform: scale(1.03);
}

.nex-shot__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--nex-card) 90%, transparent));
  pointer-events: none;
}

.nex-shot__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-5);
}

.nex-shot__caption strong {
  font-size: var(--fs-body);
  font-weight: 700;
}

.nex-shot__caption span {
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.nex-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--nex-line);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  overflow: hidden;
}

@media (min-width: 860px) {
  .nex-stats {
    grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  }
}

.nex-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(20px, 3vw, 30px);
  background: var(--nex-bg);
  transition: background-color var(--d-2) var(--e-out);
}

.nex-stat:hover {
  background: color-mix(in srgb, var(--nex-card) 70%, transparent);
}

.nex-stat__value {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nex-stat__value small {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--nex-accent-hi);
  margin-left: 2px;
}

.nex-stat__label {
  font-size: var(--fs-xs);
  color: var(--nex-text-3);
}

.nex-stat__note {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.nex-steps {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.nex-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--nex-line-2);
}

.nex-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 1px;
  background: var(--nex-accent);
  box-shadow: 0 0 10px var(--nex-accent);
}

.nex-step__num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--nex-accent-hi);
}

.nex-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nex-step p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.nex-faq {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .nex-faq {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  }
}

.nex-faq__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  position: sticky;
  top: calc(var(--nex-nav-h) + 24px);
}

.nex-faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--nex-line);
}

.nex-faq__item {
  border-bottom: 1px solid var(--nex-line);
}

.nex-faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--nex-text-2);
  transition: color var(--d-2) var(--e-out);
}

.nex-faq__q:hover,
.nex-faq__item.is-open .nex-faq__q {
  color: var(--nex-text);
}

.nex-faq__q i {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-1);
  font-size: 10px;
  color: var(--nex-text-3);
  transition: transform var(--d-2) var(--e-out), background-color var(--d-2), color var(--d-2);
}

.nex-faq__item.is-open .nex-faq__q i {
  transform: rotate(180deg);
  background: var(--nex-accent-14);
  color: var(--nex-accent-hi);
  border-color: var(--nex-accent-24);
}

.nex-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-3) var(--e-out);
}

.nex-faq__item.is-open .nex-faq__a {
  grid-template-rows: 1fr;
}

.nex-faq__a > div {
  overflow: hidden;
}

.nex-faq__a p {
  padding-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--nex-text-3);
  max-width: 68ch;
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.nex-cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(120deg, color-mix(in srgb, var(--nex-card) 96%, transparent), var(--nex-card));
  overflow: hidden;
}

.nex-cta::before {
  content: '';
  position: absolute;
  top: -80%;
  left: -10%;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, var(--nex-accent-24), transparent);
  pointer-events: none;
}

.nex-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--nex-line) 1px, transparent 1px);
  background-size: 40px 100%;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
  mask-image: linear-gradient(90deg, transparent 40%, #000);
  pointer-events: none;
}

.nex-cta > * {
  position: relative;
}

.nex-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 52ch;
}

.nex-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Resellers teaser
   -------------------------------------------------------------------------- */

.nex-where {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .nex-where {
    grid-template-columns: 1fr 1fr;
  }
}

.nex-where__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-3);
  background: var(--nex-s1);
  transition: border-color var(--d-2), transform var(--d-2), background-color var(--d-2);
}

.nex-where__card:hover {
  border-color: var(--nex-line-2);
  background: var(--nex-s2);
  transform: translateY(-3px);
}

.nex-where__card--primary {
  border-color: var(--nex-accent-24);
  background: linear-gradient(160deg, var(--nex-accent-08), transparent 60%), var(--nex-s1);
}

.nex-where__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

.nex-where__card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nex-where__card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
  flex: 1;
}

.nex-where__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Before / after comparison
   -------------------------------------------------------------------------- */

.nex-compare {
  --compare: 50%;
  /* Capped so the captures render close to their native size instead of
     being upscaled across the full container width. */
  max-width: 940px;
  margin-inline: auto;
  padding: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
}

.nex-compare__frame {
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background: #0a0816;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  aspect-ratio: 755 / 562;
}

.nex-compare__layer {
  position: absolute;
  inset: 0;
}

.nex-compare__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* The "before" layer is clipped to the handle position. */
.nex-compare__layer--before {
  clip-path: inset(0 calc(100% - var(--compare)) 0 0);
}

.nex-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare);
  width: 2px;
  translate: -1px 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.9) 12%,
    rgba(255, 255, 255, 0.9) 88%,
    transparent
  );
  box-shadow: 0 0 22px color-mix(in srgb, var(--nex-accent) 80%, transparent);
  pointer-events: none;
}

.nex-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  place-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--glass-tint-strong), rgba(10, 8, 22, 0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 30px -12px rgba(0, 0, 0, 0.9),
    0 0 30px -6px color-mix(in srgb, var(--nex-accent) 70%, transparent);
  color: #fff;
  font-size: 10px;
  transition: transform var(--d-2) var(--e-spring), box-shadow var(--d-2);
}

.nex-compare__frame:hover .nex-compare__handle,
.nex-compare.is-dragging .nex-compare__handle {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 40px -14px rgba(0, 0, 0, 0.95),
    0 0 44px -4px color-mix(in srgb, var(--nex-accent) 90%, transparent);
}

.nex-compare.is-dragging .nex-compare__frame {
  cursor: grabbing;
}

/* Bottom control — keyboard and touch friendly. */
.nex-compare__control {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2) var(--sp-1);
}

.nex-compare__control-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nex-text-4);
  white-space: nowrap;
}

.nex-compare__range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--nex-accent) 70%, transparent) 0%,
    color-mix(in srgb, var(--nex-accent) 70%, transparent) var(--compare),
    rgba(255, 255, 255, 0.1) var(--compare),
    rgba(255, 255, 255, 0.1) 100%
  );
  outline: none;
  cursor: ew-resize;
}

.nex-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--glass-tint-strong), var(--nex-accent);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--nex-accent) 90%, transparent);
  cursor: ew-resize;
}

.nex-compare__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nex-accent);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: ew-resize;
}

@media (max-width: 600px) {
  .nex-compare__control-label {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   How it works — lit rail with glass stops
   -------------------------------------------------------------------------- */

.nex-flow__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-3);
  text-align: right;
  flex: none;
}

.nex-flow__meta-value {
  font-family: var(--f-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nex-text);
}

.nex-flow__meta-label {
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-flow__rail {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 900px) {
  .nex-flow__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    padding-top: 58px;
  }

  /* The rail itself: a hairline that lights up from the left as it enters. */
  .nex-flow__rail::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--nex-accent) 55%, transparent) 12%,
      color-mix(in srgb, var(--nex-accent) 55%, transparent) 88%,
      transparent
    );
  }

  .nex-flow__rail::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 16.6%;
    width: 66.8%;
    height: 3px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--nex-accent), color-mix(in srgb, var(--nex-accent) 55%, #c471ff));
    filter: blur(2px);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1400ms var(--e-out) 200ms;
  }

  .nex-flow__rail.is-in::after {
    transform: scaleX(1);
  }
}

.nex-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .nex-flow__step {
    align-items: center;
    text-align: center;
  }
}

.nex-flow__node {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 62%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 34px -18px color-mix(in srgb, var(--nex-accent) 85%, transparent);
  color: var(--nex-accent-hi);
  font-size: 16px;
  transition: transform var(--d-3) var(--e-spring), box-shadow var(--d-3) var(--e-out);
}

@media (min-width: 900px) {
  .nex-flow__node {
    position: absolute;
    top: -58px;
    left: 50%;
    translate: -50% 0;
  }
}

.nex-flow__step:hover .nex-flow__node {
  transform: translateY(-3px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 18px 44px -16px color-mix(in srgb, var(--nex-accent) 95%, transparent);
}

/* Slow halo pulse so the rail feels alive without moving anything. */
.nex-flow__node-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--nex-accent) 45%, transparent);
  opacity: 0;
  animation: nex-flow-ring 3.6s var(--e-out) infinite;
}

.nex-flow__step:nth-child(2) .nex-flow__node-ring {
  animation-delay: 1.2s;
}

.nex-flow__step:nth-child(3) .nex-flow__node-ring {
  animation-delay: 2.4s;
}

@keyframes nex-flow-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  60%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.nex-flow__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  align-items: flex-start;
}

@media (min-width: 900px) {
  .nex-flow__card {
    align-items: center;
    padding-top: 34px;
  }
}

.nex-flow__index {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nex-accent-hi);
}

.nex-flow__card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nex-flow__card p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--nex-text-3);
  max-width: 34ch;
}

.nex-flow__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nex-text-3);
}

/* --------------------------------------------------------------------------
   Licence card visual
   -------------------------------------------------------------------------- */

.nex-price__visual {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--nex-accent) 30%, transparent), transparent 60%),
    linear-gradient(160deg, #16123a 0%, #0c0a1e 60%, #08060f 100%);
}

.nex-price__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nex-price__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: var(--sp-5);
}

.nex-price__plate .nex-mark {
  filter: drop-shadow(0 8px 26px color-mix(in srgb, var(--nex-accent) 80%, transparent));
  animation: nex-plate-float 6s var(--e-inout) infinite alternate;
}

@keyframes nex-plate-float {
  to {
    transform: translateY(-6px) rotate(-4deg);
  }
}

.nex-price__plate-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

/* Three "key" strips, like a licence card. */
.nex-price__plate-strip {
  display: flex;
  gap: 6px;
}

.nex-price__plate-strip span {
  width: 26px;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  position: relative;
}

.nex-price__plate-strip span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nex-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: nex-plate-fill 3.4s var(--e-out) infinite;
}

.nex-price__plate-strip span:nth-child(2)::after { animation-delay: 0.35s; }
.nex-price__plate-strip span:nth-child(3)::after { animation-delay: 0.7s; }

@keyframes nex-plate-fill {
  0%, 10% { transform: scaleX(0); }
  40%, 70% { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Wide sweep of light across the plate. */
.nex-price__plate-glow {
  position: absolute;
  inset: -40%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.09) 50%, transparent 60%);
  animation: nex-plate-sweep 6s linear infinite;
  pointer-events: none;
}

@keyframes nex-plate-sweep {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

@media (prefers-reduced-motion: reduce) {
  .nex-price__plate .nex-mark,
  .nex-price__plate-strip span::after,
  .nex-price__plate-glow {
    animation: none !important;
  }
}

/* Compact proof pill used when the marquee would repeat itself. */
.nex-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-pill);
  color: var(--nex-text-2);
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

.nex-proof:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

.nex-proof__score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nex-text);
}

.nex-proof__score small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nex-text-4);
}

.nex-proof__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--nex-accent-hi);
  font-size: 12px;
}

.nex-proof__meta {
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
}

.nex-proof i.nex-btn__arrow {
  font-size: 11px;
  color: var(--nex-accent-hi);
  transition: transform var(--d-2) var(--e-out);
}

.nex-proof:hover i.nex-btn__arrow {
  transform: translateX(3px);
}

/* Featured quote cards sit slightly apart from verified reviews. */
.nex-review--quote {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(150deg, var(--nex-accent-08), transparent 60%),
    color-mix(in srgb, var(--nex-card) 55%, transparent);
}

.nex-review__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* ==========================================================================
   NEX — Inner pages: header, download, resellers, status, reviews
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared page header
   -------------------------------------------------------------------------- */

.nex-page {
  position: relative;
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(28px, 3vw, 40px);
}

.nex-page__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  margin-bottom: var(--sp-5);
}

.nex-page__crumbs a:hover {
  color: var(--nex-text-2);
}

.nex-page__crumbs i {
  font-size: 8px;
  opacity: 0.6;
}

.nex-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 66ch;
}

.nex-page__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.nex-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Download
   -------------------------------------------------------------------------- */

.nex-dl {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .nex-dl {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
    gap: clamp(24px, 3vw, 40px);
  }
}

.nex-dl__main {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nex-card) 96%, #ffffff 4%), var(--nex-card));
  box-shadow: var(--sh-2);
}

.nex-dl__main::before {
  content: '';
  position: absolute;
  inset: -70% -20% auto;
  height: 220px;
  background: radial-gradient(closest-side, var(--nex-accent-24), transparent);
  pointer-events: none;
}

.nex-dl__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--nex-line);
}

.nex-dl__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-2);
  background: var(--nex-brand-grad);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 12px 30px -14px var(--nex-accent);
}

.nex-dl__titles {
  min-width: 0;
  flex: 1;
}

.nex-dl__titles h2 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nex-dl__titles p {
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
  margin-top: 2px;
}

.nex-dl__version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-pill);
  background: var(--nex-s2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--nex-text-2);
}

.nex-dl__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(22px, 3vw, 30px);
}

.nex-dl__btn {
  min-height: 58px;
  font-size: 1rem;
}

.nex-dl__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  text-align: center;
}

/* Live download state feedback */
.nex-dl__state {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-2);
  background: var(--nex-s2);
  font-size: var(--fs-sm);
  color: var(--nex-text-2);
}

.nex-dl__state.is-shown {
  display: flex;
  animation: nex-toast-in 320ms var(--e-spring);
}

.nex-dl__state i {
  color: var(--nex-accent-hi);
}

.nex-dl__state.is-done i {
  color: var(--nex-ok);
}

.nex-dl__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--nex-line-3);
  border-top-color: var(--nex-accent-hi);
  animation: nex-spin 0.7s linear infinite;
  flex: none;
}

/* Unavailable notice — honest state when no build is published. */
.nex-dl__unavailable {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed var(--nex-line-3);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-warn) 6%, transparent);
}

.nex-dl__unavailable i {
  color: var(--nex-warn);
  font-size: 15px;
  margin-top: 2px;
}

.nex-dl__unavailable strong {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 3px;
}

.nex-dl__unavailable p {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--nex-text-3);
}

/* Spec table */
.nex-dl__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--nex-line);
  border-top: 1px solid var(--nex-line);
}

.nex-dl__spec {
  padding: var(--sp-4) clamp(18px, 2.4vw, 24px);
  background: var(--nex-card);
}

.nex-dl__spec dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nex-text-4);
  margin-bottom: 5px;
}

.nex-dl__spec dd {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--nex-text);
  word-break: break-word;
}

/* Update banner */
.nex-dl__update {
  display: none;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--nex-ok) 34%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-ok) 8%, transparent);
}

.nex-dl__update.is-shown {
  display: flex;
}

.nex-dl__update i {
  color: var(--nex-ok);
  margin-top: 2px;
}

.nex-dl__update strong {
  display: block;
  font-size: var(--fs-sm);
}

.nex-dl__update p {
  font-size: var(--fs-xs);
  color: var(--nex-text-3);
  margin-top: 2px;
}

/* Side column */
.nex-dl__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.nex-dl__panel {
  padding: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
}

.nex-dl__panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-4);
}

.nex-dl__panel h3 i {
  color: var(--nex-accent-hi);
  font-size: 12px;
}

.nex-dl__reqs {
  display: flex;
  flex-direction: column;
}

.nex-dl__req {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 0;
  border-bottom: 1px solid var(--nex-line);
  font-size: var(--fs-sm);
}

.nex-dl__req:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.nex-dl__req dt {
  color: var(--nex-text-3);
}

.nex-dl__req dd {
  font-weight: 600;
  text-align: right;
}

/* Platform list */
.nex-dl__platforms {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.nex-dl__platform {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-1);
  background: var(--nex-s2);
  font-size: var(--fs-sm);
}

.nex-dl__platform i:first-child {
  width: 18px;
  text-align: center;
  color: var(--nex-text-2);
}

.nex-dl__platform b {
  font-weight: 700;
}

.nex-dl__platform span {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

.nex-dl__platform.is-supported span {
  color: var(--nex-ok);
}

/* Changelog */
.nex-changelog {
  display: flex;
  flex-direction: column;
}

.nex-changelog__entry {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
  border-left: 1px solid var(--nex-line-2);
}

.nex-changelog__entry:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.nex-changelog__entry::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 5px;
  width: 8px;
  height: 8px;
  rotate: 45deg;
  background: var(--nex-bg);
  border: 1px solid var(--nex-line-3);
}

.nex-changelog__entry:first-child::before {
  background: var(--nex-accent);
  border-color: var(--nex-accent);
  box-shadow: 0 0 12px var(--nex-accent);
}

.nex-changelog__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.nex-changelog__version {
  font-family: var(--f-mono);
  font-size: var(--fs-body);
  font-weight: 700;
}

.nex-changelog__date {
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-changelog__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nex-changelog__list li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--nex-text-2);
}

.nex-changelog__list i {
  font-size: 9px;
  margin-top: 6px;
  color: var(--nex-text-4);
  flex: none;
}

/* Install steps */
.nex-install {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  counter-reset: step;
}

.nex-install__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  transition: border-color var(--d-2), background-color var(--d-2), transform var(--d-2);
}

.nex-install__step:hover {
  border-color: var(--nex-line-2);
  background: var(--nex-s2);
  transform: translateY(-2px);
}

.nex-install__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  border: 1px solid var(--nex-accent-24);
  background: var(--nex-accent-08);
  color: var(--nex-accent-hi);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
}

.nex-install__step h3 {
  font-size: var(--fs-body);
  font-weight: 700;
}

.nex-install__step p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

.nex-install__tip {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-1);
  background: var(--nex-s3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--nex-text-3);
}

.nex-install__tip i {
  color: var(--nex-warn);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Resellers
   -------------------------------------------------------------------------- */

.nex-rs__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.nex-rs__search {
  flex: 1;
  min-width: 220px;
  max-width: 340px;
}

.nex-rs__count {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  margin-left: auto;
}

.nex-rs__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.nex-rs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  transition: border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}

.nex-rs__card:hover {
  border-color: var(--nex-line-2);
  background: var(--nex-s2);
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}

.nex-rs__card--official {
  border-color: var(--nex-accent-24);
  background: linear-gradient(165deg, var(--nex-accent-08), transparent 55%), var(--nex-s1);
}

.nex-rs__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nex-rs__avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-2);
  background: var(--nex-brand-grad);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 8px 22px -12px var(--nex-accent);
}

.nex-rs__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nex-rs__ident {
  min-width: 0;
  flex: 1;
}

.nex-rs__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: -0.015em;
}

.nex-rs__name i {
  color: var(--nex-accent-hi);
  font-size: 12px;
}

.nex-rs__region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  margin-top: 2px;
}

.nex-rs__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

.nex-rs__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--nex-line);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-1);
  overflow: hidden;
}

.nex-rs__stat {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--nex-card) 80%, transparent);
}

.nex-rs__stat b {
  display: block;
  font-size: var(--fs-body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.nex-rs__stat span {
  display: block;
  font-size: 9.5px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

.nex-rs__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nex-rs__tag {
  padding: 3px 9px;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-pill);
  background: var(--nex-s2);
  font-size: 10.5px;
  color: var(--nex-text-3);
}

.nex-rs__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
}

.nex-rs__status {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
}

/* Verify tips */
.nex-verify {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.nex-verify__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
}

.nex-verify__card span.num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--nex-accent-hi);
}

.nex-verify__card strong {
  font-size: var(--fs-body);
  font-weight: 700;
}

.nex-verify__card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

/* Scam warning */
.nex-warning {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--nex-warn) 30%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-warn) 7%, transparent);
  margin-bottom: var(--sp-7);
}

.nex-warning i {
  color: var(--nex-warn);
  font-size: 16px;
  margin-top: 2px;
}

.nex-warning strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  margin-bottom: 4px;
}

.nex-warning p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */

.nex-status__hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nex-card) 96%, #ffffff 3%), var(--nex-card));
  overflow: hidden;
}

.nex-status__hero::before {
  content: '';
  position: absolute;
  inset: -80% -20% auto;
  height: 240px;
  background: radial-gradient(closest-side, var(--state-glow, var(--nex-accent-24)), transparent);
  pointer-events: none;
}

.nex-status__hero[data-state='operational'] {
  --state-glow: color-mix(in srgb, var(--nex-ok) 22%, transparent);
}
.nex-status__hero[data-state='degraded'] {
  --state-glow: color-mix(in srgb, var(--nex-warn) 22%, transparent);
}
.nex-status__hero[data-state='outage'] {
  --state-glow: color-mix(in srgb, var(--nex-down) 22%, transparent);
}
.nex-status__hero[data-state='maintenance'] {
  --state-glow: color-mix(in srgb, var(--nex-maint) 22%, transparent);
}

.nex-status__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--state-color, var(--nex-ok));
  color: var(--state-color, var(--nex-ok));
  font-size: 22px;
  background: color-mix(in srgb, var(--state-color, var(--nex-ok)) 12%, transparent);
}

.nex-status__ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.35;
  animation: nex-ping 3s var(--e-out) infinite;
}

.nex-status__hero[data-state='operational'] .nex-status__ring {
  --state-color: var(--nex-ok);
}
.nex-status__hero[data-state='degraded'] .nex-status__ring {
  --state-color: var(--nex-warn);
}
.nex-status__hero[data-state='outage'] .nex-status__ring {
  --state-color: var(--nex-down);
}
.nex-status__hero[data-state='maintenance'] .nex-status__ring {
  --state-color: var(--nex-maint);
}

.nex-status__headline {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.nex-status__headline h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.nex-status__headline p {
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
  margin-top: 6px;
}

.nex-status__refresh {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nex-status__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block: var(--sp-6) var(--sp-4);
}

.nex-status__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-services {
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--nex-s1);
}

.nex-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--nex-line);
  transition: background-color var(--d-2) var(--e-out);
}

.nex-service:last-child {
  border-bottom: 0;
}

.nex-service:hover {
  background: var(--nex-s2);
}

.nex-service__name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 700;
  min-width: 180px;
  flex: 1;
}

.nex-service__group {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--nex-line);
  background: var(--nex-s2);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

/* 90-day bar built only from published incidents. */
.nex-service__history {
  display: flex;
  gap: 2px;
  flex: none;
  height: 22px;
  align-items: flex-end;
}

.nex-service__day {
  width: 4px;
  height: 100%;
  border-radius: 1px;
  /* Neutral by default: a plain bar means "nothing was reported that day",
     not "verified uptime". Only published incidents add colour. */
  background: var(--nex-line-2);
  transition: transform var(--d-1) var(--e-out), background-color var(--d-1);
}

.nex-service__day:hover {
  transform: scaleY(1.15);
}

.nex-service__day[data-day='degraded'] {
  background: var(--nex-warn);
}
.nex-service__day[data-day='outage'] {
  background: var(--nex-down);
}
.nex-service__day[data-day='maintenance'] {
  background: var(--nex-maint);
}
.nex-service__day[data-day='resolved'] {
  background: color-mix(in srgb, var(--nex-ok) 70%, transparent);
}

@media (max-width: 720px) {
  .nex-service__history {
    order: 3;
    width: 100%;
  }
  .nex-service__day {
    flex: 1;
    width: auto;
  }
}

.nex-service__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* Incidents */
.nex-incidents {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.nex-incident {
  border: 1px solid var(--nex-line);
  border-left-width: 3px;
  border-radius: var(--r-2);
  background: var(--nex-s1);
  overflow: hidden;
}

.nex-incident[data-impact='degraded'] {
  border-left-color: var(--nex-warn);
}
.nex-incident[data-impact='outage'] {
  border-left-color: var(--nex-down);
}
.nex-incident[data-impact='maintenance'] {
  border-left-color: var(--nex-maint);
}
.nex-incident[data-impact='resolved'] {
  border-left-color: var(--nex-ok);
}

.nex-incident__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

.nex-incident__head h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  flex: 1;
  min-width: 200px;
}

.nex-incident__date {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

.nex-incident__body {
  padding: 0 var(--sp-5) var(--sp-5);
}

.nex-incident__body p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--nex-text-3);
  white-space: pre-line;
}

.nex-incident__updates {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--nex-line-2);
}

.nex-incident__update {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--nex-text-2);
}

.nex-incident__update time {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  flex: none;
  min-width: 92px;
}

/* Uptime summary */
.nex-status__summary {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--nex-line);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  overflow: hidden;
}

.nex-status__summary > div {
  padding: var(--sp-5);
  background: var(--nex-bg);
}

.nex-status__summary b {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.nex-status__summary span {
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
}

/* --------------------------------------------------------------------------
   Reviews page
   -------------------------------------------------------------------------- */

.nex-feedback__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.nex-feedback__toolbar .choices {
  min-width: 220px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Product page refinements (native SellAuth form kept intact)
   -------------------------------------------------------------------------- */

.nex-pdp {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .nex-pdp {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
  }
}

.nex-pdp__media {
  border: 1px solid var(--nex-line);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--nex-s1);
}

.nex-pdp__buybox {
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nex-card) 96%, #ffffff 3%), var(--nex-card));
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.nex-pdp__buybox form > div {
  background: transparent !important;
  border: 0 !important;
}

.nex-pdp__title {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1;
}

.nex-pdp__desc {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--nex-text-2);
}

.nex-pdp__desc h1,
.nex-pdp__desc h2,
.nex-pdp__desc h3 {
  color: var(--nex-text);
  font-weight: 700;
  margin: 1.2em 0 0.4em;
}

.nex-pdp__desc ul,
.nex-pdp__desc ol {
  padding-left: 1.2em;
  list-style: disc;
  margin: 0.6em 0;
}

.nex-pdp__desc a {
  color: var(--nex-accent-hi);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Catalogue tiles (products page, search, upsells)
   -------------------------------------------------------------------------- */

.nex-tiles {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.nex-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  overflow: hidden;
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out);
}

.nex-tile:hover {
  transform: translateY(-3px);
  border-color: var(--nex-line-2);
  box-shadow: var(--sh-2);
}

.nex-tile__media {
  position: relative;
  display: block;
  aspect-ratio: var(--product-card-image-aspect-ratio, 16 / 9);
  background: var(--nex-s3);
  overflow: hidden;
}

.nex-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: var(--product-image-fit, cover);
  transition: transform var(--d-4) var(--e-out);
}

.nex-tile:hover .nex-tile__media img {
  transform: scale(1.04);
}

.nex-tile__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 100% at 50% 0%, var(--nex-accent-14), transparent 70%);
}

.nex-tile__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nex-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  flex: 1;
}

.nex-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.nex-tile__head h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.nex-tile__head a:hover {
  color: var(--nex-accent-hi);
}

.nex-tile__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.nex-tile__price small {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--nex-text-4);
}

.nex-tile__price s {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--nex-text-4);
}

.nex-tile__meta {
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  margin-top: -4px;
}

.nex-tile .nex-btn {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Product page extras
   -------------------------------------------------------------------------- */

.nex-pdp__left,
.nex-pdp__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

.nex-pdp__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.nex-pdp__pricerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

.nex-pdp__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.nex-pdp__price s {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--nex-text-4);
}

.nex-pdp__buybox form > div {
  padding: clamp(18px, 2.4vw, 24px) !important;
}

.nex-pdp__buybox input,
.nex-pdp__buybox select,
.nex-pdp__buybox textarea,
.nex-pdp__buybox button {
  border-radius: var(--r-1) !important;
}

.nex-pdp__assurances {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
}

.nex-pdp__assurances li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--nex-text-2);
}

.nex-pdp__assurances i {
  width: 16px;
  color: var(--nex-accent-hi);
  font-size: 12px;
}

.nex-pdp__live {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nex-pdp__live p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
}

.nex-pdp__live i {
  color: var(--nex-accent-hi);
}

.nex-pdp__live b {
  color: var(--nex-text);
}

/* Live sales toast */
.nex-sales-toast {
  position: fixed;
  left: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  right: var(--sp-4);
  z-index: 90;
}

@media (min-width: 640px) {
  .nex-sales-toast {
    right: auto;
    max-width: 340px;
  }
}

.nex-sales-toast__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px;
  border: 1px solid var(--nex-line-2);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--nex-card) 96%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-2);
}

.nex-sales-toast__inner img {
  width: 54px;
  height: 54px;
  border-radius: var(--r-1);
  object-fit: cover;
  flex: none;
}

/* --------------------------------------------------------------------------
   Policy / legal pages
   -------------------------------------------------------------------------- */

.nex-legal {
  max-width: 78ch;
}

.nex-legal__body {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--nex-line);
  border-radius: var(--r-2);
  background: var(--nex-s1);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--nex-text-2);
}

.nex-legal__body h1,
.nex-legal__body h2,
.nex-legal__body h3 {
  color: var(--nex-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.6em 0 0.5em;
}

.nex-legal__body h1:first-child,
.nex-legal__body h2:first-child {
  margin-top: 0;
}

.nex-legal__body p {
  margin-bottom: 1em;
}

.nex-legal__body ul,
.nex-legal__body ol {
  margin: 0 0 1em 1.2em;
  list-style: disc;
}

.nex-legal__body a {
  color: var(--nex-accent-hi);
  text-decoration: underline;
}

.nex-legal__empty {
  color: var(--nex-text-4);
}

/* Native SellAuth buy box: keep its buttons inside our card at any width. */
.nex-pdp__buybox .flex-1 {
  min-width: 0;
}

.nex-pdp__buybox button {
  white-space: normal;
}

.nex-pdp__reviews {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* ==========================================================================
   Liquid-glass pass
   --------------------------------------------------------------------------
   Promotes the remaining flat surfaces (features, where-to-buy, FAQ, CTA,
   trust bar, footer, and the download / resellers / status page panels) to
   the same glass material as .nex-glass, without touching their layout.

   Loaded last so it wins ties against the section stylesheets. Every rule
   here is cosmetic: remove this file and the site still works.
   ========================================================================== */

/* Shared material ---------------------------------------------------------- */

.nex-feature,
.nex-where__card,
.nex-faq__list,
.nex-cta,
.nex-dl__panel,
.nex-rs__card,
.nex-status__hero,
.nex-services,
.nex-incident,
.nex-tile {
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 48%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: var(--glass-edge);
  box-shadow: var(--glass-bevel), 0 18px 52px -32px rgba(0, 0, 0, 0.92);
}

/* Feature cards ------------------------------------------------------------ */

.nex-feature {
  border-radius: var(--r-3);
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.nex-feature:hover {
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 54%, transparent);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

.nex-feature__icon {
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 40%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Where to buy ------------------------------------------------------------- */

.nex-where__card {
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.nex-where__card:hover {
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 54%, transparent);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

.nex-where__card--primary {
  border-color: color-mix(in srgb, var(--nex-accent) 30%, transparent);
  background: linear-gradient(160deg, var(--nex-accent-14), transparent 58%), var(--glass-tint),
    color-mix(in srgb, var(--nex-card) 50%, transparent);
}

/* FAQ ---------------------------------------------------------------------- */

.nex-faq__list {
  border-radius: var(--r-3);
  border-top: var(--glass-edge);
  padding: 0 clamp(18px, 2.4vw, 28px);
  overflow: hidden;
}

.nex-faq__item:last-child {
  border-bottom: 0;
}

.nex-faq__item {
  transition: background-color var(--d-2) var(--e-out);
}

.nex-faq__item.is-open {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 70%);
}

.nex-faq__q i {
  background: color-mix(in srgb, var(--nex-card) 45%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

/* CTA band ----------------------------------------------------------------- */

.nex-cta {
  border: var(--glass-edge-hi);
  background: var(--glass-tint-strong), color-mix(in srgb, var(--nex-card) 46%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-bevel), var(--glass-drop);
}

/* Footer ------------------------------------------------------------------- */

.nex-footer {
  position: relative;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nex-card) 42%, transparent) 45%);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-top: var(--glass-edge);
}

.nex-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22) 22%,
    color-mix(in srgb, var(--nex-accent) 45%, transparent) 50%,
    rgba(255, 255, 255, 0.22) 78%,
    transparent
  );
  pointer-events: none;
}

/* Inner-page panels -------------------------------------------------------- */

.nex-dl__panel,
.nex-rs__card,
.nex-status__hero,
.nex-services,
.nex-incident,
.nex-tile {
  border-radius: var(--r-3);
}

/* Rows inside the glass service list stay flat; only the pane is glass. */
.nex-service {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.nex-service:last-child {
  border-bottom: 0;
}

/* Full-bleed trust band: horizontal edges only. */
.nex-trust {
  background: var(--glass-tint), color-mix(in srgb, var(--nex-card) 40%, transparent);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-block: var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nex-rs__card,
.nex-tile {
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.nex-rs__card:hover,
.nex-tile:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  box-shadow: var(--glass-bevel), var(--glass-drop), var(--glass-glow);
}

/* Graceful degradation ----------------------------------------------------- */

@supports not (backdrop-filter: blur(1px)) {
  .nex-feature,
  .nex-where__card,
  .nex-faq__list,
  .nex-cta,
  .nex-trust,
  .nex-dl__panel,
  .nex-rs__card,
  .nex-status__hero,
  .nex-services,
  .nex-incident,
  .nex-tile,
  .nex-footer {
    background: color-mix(in srgb, var(--nex-card) 94%, transparent);
  }
}


/* ==========================================================================
   Social-proof band
   --------------------------------------------------------------------------
   The rows used to sit behind the heading at 28% opacity, which read as a
   rendering glitch rather than as design. They are now a real foreground
   marquee under the heading: full contrast, edge fades, alternating
   directions, and a slow-down on hover.
   ========================================================================== */

.nex-reviews__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: clamp(28px, 4vw, 48px);
}

.nex-reviews .nex-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
}

.nex-reviews .nex-marquee .nex-review {
  /* A row can contain many cloned cards. Keep those surfaces opaque instead
     of repeatedly blurring everything behind them while the track moves. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--nex-card) 92%, transparent);
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out);
}

.nex-reviews .nex-marquee .nex-review:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .nex-reviews .nex-marquee .nex-review {
    transition: none;
  }
}

/* Three rows is a wall on a phone — keep two. */
@media (max-width: 640px) {
  .nex-reviews__rows .nex-marquee:nth-child(n + 3) {
    display: none;
  }
}

/* The highlighted hero line always sits on its own row. */
.nex-hero__title .nex-grad-text {
  display: block;
}

/* ==========================================================================
   Brand mark
   --------------------------------------------------------------------------
   The mark is now the real logo file rather than a hand-drawn vector, so it
   needs image sizing rules wherever the old <svg> used to sit.
   ========================================================================== */

.nex-logo-img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   Buttons — glass build
   --------------------------------------------------------------------------
   The old buttons were 6px-radius rectangles that sat outside the glass
   language. They are now pills made of the same material: a bevelled rim, a
   specular top edge, a soft drop, and a real pressed state.
   ========================================================================== */

.nex-btn {
  border-radius: var(--r-pill);
  padding-inline: var(--sp-6);
  transition: transform var(--d-2) var(--e-spring), background-color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

/* Curved rim light — same trick as .nex-glass, drawn above the fill. */
.nex-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.08) 34%,
    transparent 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.9;
  pointer-events: none;
  z-index: 2;
}

.nex-btn:active {
  transform: translateY(1px) scale(0.985);
}

/* Primary ------------------------------------------------------------------ */

.nex-btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 12px 30px -14px color-mix(in srgb, var(--nex-accent) 80%, transparent),
    0 2px 8px -4px rgba(0, 0, 0, 0.7);
}

.nex-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 6px rgba(0, 0, 0, 0.24),
    0 20px 46px -16px color-mix(in srgb, var(--nex-accent) 92%, transparent),
    0 3px 10px -5px rgba(0, 0, 0, 0.7);
}

.nex-btn--primary:active {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 16px -10px color-mix(in srgb, var(--nex-accent) 70%, transparent);
}

/* Ghost -------------------------------------------------------------------- */

.nex-btn--ghost {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 10px 26px -18px rgba(0, 0, 0, 0.9);
}

.nex-btn--ghost:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 16px 38px -18px rgba(0, 0, 0, 0.95),
    0 0 0 1px color-mix(in srgb, var(--nex-accent) 16%, transparent);
}

.nex-btn--ghost:active {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Quiet buttons stay flat — a rim there would read as a third button rank. */
.nex-btn--quiet::before {
  display: none;
}

.nex-btn--quiet:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Discord ------------------------------------------------------------------ */

.nex-btn--discord {
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -18px rgba(0, 0, 0, 0.9);
}

/* Disabled buttons must not look pressable. */
.nex-btn[disabled]::before,
.nex-btn[aria-disabled='true']::before {
  opacity: 0.3;
}

/* Icon-only round buttons keep the same material. */
.nex-icon-btn,
.nex-nav__icon {
  border-radius: var(--r-pill);
}

@supports not (backdrop-filter: blur(1px)) {
  .nex-btn--ghost,
  .nex-btn--discord {
    background: color-mix(in srgb, var(--nex-card) 92%, transparent);
  }
}

/* Placeholder notice under the comparison, shown until real captures are set. */
.nex-compare__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 2px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  text-align: center;
}

/* ==========================================================================
   Scroll-driven motion
   --------------------------------------------------------------------------
   Where the browser supports scroll-driven animations, a few surfaces drift
   with the scroll instead of being animated by JS. It runs off the main
   thread, so it costs nothing on the frames that matter. Everywhere else the
   page simply doesn't drift — nothing depends on it.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .nex-compare,
    .nex-price {
      animation: nex-drift-in linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 46%;
    }

    @keyframes nex-drift-in {
      from {
        transform: translateY(28px) scale(0.985);
      }
      to {
        transform: none;
      }
    }

    /* The section eyebrow slides its rule out as the section arrives. */
    .nex-eyebrow--dot::before {
      animation: nex-dot-pop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    @keyframes nex-dot-pop {
      from {
        transform: scale(0.2);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
}

/* Magnetic buttons need their own transform origin — nex.js writes transform
   inline, so the hover lift is expressed as a shadow change instead. */
@media (hover: hover) and (pointer: fine) {
  .nex-btn--primary,
  .nex-btn--lg {
    transition: box-shadow var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
      border-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
      transform var(--d-3) var(--e-spring);
  }
}

/* The brand mark is now an <img>, so container rules written for photos
   (width:100%; object-fit:cover) would stretch it. Keep it at its own size. */
.nex-tile__media .nex-logo-img,
.nex-price__visual .nex-logo-img,
.nex-tile__fallback .nex-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
/* ==========================================================================
   What's included / second catalogue
   ========================================================================== */

.nex-bundle__count,
.nex-catalog__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-3);
  flex: none;
}

.nex-bundle__count-value,
.nex-catalog__meta-value {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--nex-accent-hi);
}

.nex-bundle__count-label,
.nex-catalog__meta-label {
  font-size: var(--fs-xs);
  color: var(--nex-text-3);
  white-space: nowrap;
}

/* Grid ---------------------------------------------------------------------- */

.nex-bundle__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(24px, 3vw, 40px);
  list-style: none;
  padding: 0;
}

.nex-bundle__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-3);
}

.nex-bundle__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: color-mix(in srgb, var(--nex-card) 45%, transparent);
  color: var(--nex-accent-hi);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--d-2) var(--e-spring), border-color var(--d-2) var(--e-out);
}

.nex-bundle__item:hover .nex-bundle__icon {
  transform: translateY(-2px) scale(1.06);
  border-color: var(--nex-accent-24);
}

.nex-bundle__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.nex-bundle__body h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nex-bundle__body p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

/* The one or two unexpected inclusions get a warmer edge. */
.nex-bundle__item.is-highlight {
  border-color: var(--nex-accent-24);
  background: linear-gradient(160deg, var(--nex-accent-08), transparent 55%), var(--glass-tint),
    color-mix(in srgb, var(--nex-card) 50%, transparent);
}

.nex-bundle__item.is-highlight .nex-bundle__icon {
  border-color: var(--nex-accent-24);
  background: var(--nex-accent-14);
}

.nex-bundle__flag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nex-accent-24);
  background: var(--nex-accent-14);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nex-accent-hi);
}

.nex-bundle__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--nex-text-4);
}

/* Second catalogue ---------------------------------------------------------- */

.nex-catalog__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(24px, 3vw, 40px);
}

.nex-catalog__notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-3);
  border: 1px solid rgba(240, 180, 60, 0.28);
  background: rgba(240, 180, 60, 0.08);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 226, 170, 0.92);
}

.nex-catalog__notice i {
  margin-top: 2px;
  color: rgb(240, 190, 90);
}

.nex-catalog__more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

@media (max-width: 640px) {
  .nex-bundle__item {
    padding: var(--sp-4);
  }

  .nex-bundle__flag {
    position: static;
    align-self: flex-start;
  }
}
/* ==========================================================================
   Stock proof, product specs, FAQ page, community wall
   ========================================================================== */

/* --------------------------------------------------------------------------
   Live stock indicator
   -------------------------------------------------------------------------- */

.nex-stock {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nex-line-2);
  background: color-mix(in srgb, var(--nex-card) 55%, transparent);
  font-size: var(--fs-xs);
  line-height: 1;
  white-space: nowrap;
}

.nex-stock--sm {
  padding: 4px 9px;
  font-size: 11px;
}

.nex-stock__dot {
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: currentColor;
}

.nex-stock__count {
  font-weight: 800;
  font-size: 1.06em;
}

.nex-stock__text {
  color: var(--nex-text-3);
}

.nex-stock.is-ok {
  color: var(--nex-ok, #22c55e);
  border-color: color-mix(in srgb, var(--nex-ok, #22c55e) 30%, transparent);
}

/* Low stock is emphasised, never fabricated: the number is the real one. */
.nex-stock.is-low {
  color: rgb(245, 180, 70);
  border-color: rgba(245, 180, 70, 0.34);
  background: rgba(245, 180, 70, 0.08);
}

.nex-stock.is-low .nex-stock__dot {
  animation: nex-stock-pulse 2.4s var(--e-inout) infinite;
}

.nex-stock.is-low .nex-stock__text {
  color: rgba(255, 224, 168, 0.86);
}

.nex-stock.is-out {
  color: var(--nex-down, #ef4444);
  border-color: color-mix(in srgb, var(--nex-down, #ef4444) 30%, transparent);
}

@keyframes nex-stock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 180, 70, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(245, 180, 70, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nex-stock.is-low .nex-stock__dot { animation: none; }
}

/* --------------------------------------------------------------------------
   Product page — specification rows
   -------------------------------------------------------------------------- */

.nex-specs {
  display: grid;
  gap: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

.nex-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nex-specs__row:last-child {
  border-bottom: 0;
}

.nex-specs dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--nex-text-3);
}

.nex-specs dt i {
  width: 16px;
  text-align: center;
  color: var(--nex-accent-hi);
  font-size: 12px;
}

.nex-specs dd {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--nex-text);
  text-align: right;
}

.nex-pdp__stock {
  display: flex;
  margin-bottom: var(--sp-4);
}

.nex-pdp__notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-2);
  border: 1px solid rgba(240, 180, 60, 0.28);
  background: rgba(240, 180, 60, 0.08);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 226, 170, 0.92);
}

.nex-pdp__notice i {
  margin-top: 2px;
  color: rgb(240, 190, 90);
}

@media (max-width: 520px) {
  .nex-specs__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .nex-specs dd {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */

.nex-faqpage__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.nex-faqpage__filters {
  flex-wrap: wrap;
}

.nex-faqpage__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  white-space: nowrap;
}

.nex-faq__qtext {
  flex: 1;
  min-width: 0;
}

.nex-faq__tag {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nex-line-2);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nex-text-4);
}

.nex-faqpage__list {
  margin-bottom: var(--sp-6);
}

.nex-faqpage__empty {
  margin-bottom: var(--sp-6);
}

.nex-faqpage__cta {
  margin-top: var(--sp-7);
}

@media (max-width: 640px) {
  .nex-faqpage__count {
    margin-left: 0;
  }

  .nex-faq__tag {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Community wall (manually added reviews)
   -------------------------------------------------------------------------- */

.nex-community {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--nex-line);
}

.nex-review--quote .nex-review__badge--community {
  color: var(--nex-text-4);
  border-color: var(--nex-line-2);
  background: transparent;
}

.nex-review--linked {
  text-decoration: none;
  transition: transform var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.nex-review--linked:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
}

.nex-review__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--nex-accent-hi);
}

.nex-review__link i {
  font-size: 9px;
}

.nex-faqpage__search {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 340px;
}

/* On one column the buy box has to come first: a phone visitor should see the
   product name, the price and the stock before six rows of specification. */
@media (max-width: 1023px) {
  .nex-pdp {
    display: flex;
    flex-direction: column;
  }

  .nex-pdp__right {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Empty-state diagnostic (licence section)

   When the section renders nothing, this line says what the theme actually
   received from the catalogue — so the cause is readable from the page
   instead of being guessed at in the builder.
   -------------------------------------------------------------------------- */

.nex-state__diag {
  margin-top: -4px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--nex-line-2);
  font-size: 11px;
  color: var(--nex-text-4);
}
/* ==========================================================================
   Video everywhere — hero footage, reseller banner, presentation grid,
   lightbox, and the pointer treatments that go with them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Media block (snippets/nex-media.njk)
   -------------------------------------------------------------------------- */

.nex-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--media-ratio, 16 / 9);
  overflow: hidden;
  border-radius: inherit;
  background: color-mix(in srgb, var(--nex-card) 80%, #000);
}

.nex-media__el,
.nex-media__poster img,
.nex-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* A poster is a button: it has to look like nothing until it is hovered. */
.nex-media__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nex-media__poster img {
  transition: transform var(--d-3) var(--e-out), filter var(--d-3) var(--e-out);
}

.nex-media__poster:hover img,
.nex-media__poster:focus-visible img {
  transform: scale(1.03);
  filter: brightness(1.06);
}

.nex-media__blank {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--nex-accent-14), transparent 70%),
    color-mix(in srgb, var(--nex-card) 90%, #000);
}

.nex-media__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  padding-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: color-mix(in srgb, var(--nex-accent) 72%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--glow-accent);
  transition: transform var(--d-2) var(--e-spring), background-color var(--d-2) var(--e-out);
}

.nex-media__poster:hover .nex-media__play,
.nex-media__poster:focus-visible .nex-media__play {
  transform: scale(1.09);
  background: var(--nex-accent);
}

/* Fills its container instead of imposing a ratio — used by the banner. */
.nex-media--cover,
.nex-media--cover .nex-media__el {
  height: 100%;
  aspect-ratio: auto;
}

/* --------------------------------------------------------------------------
   Hero — real footage in place of the animated mockup
   -------------------------------------------------------------------------- */

.nex-hero__video {
  position: relative;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--nex-line-2);
  box-shadow: var(--sh-3), var(--sh-inset);
}

.nex-hero__video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.34));
}

/* --------------------------------------------------------------------------
   Banner (resellers page, reusable)
   -------------------------------------------------------------------------- */

.nex-banner {
  position: relative;
  margin-bottom: var(--sp-8);
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--nex-line-2);
  box-shadow: var(--sh-2);
  min-height: clamp(200px, 26vw, 320px);
  isolation: isolate;
}

.nex-banner--short { min-height: clamp(140px, 18vw, 220px); }
.nex-banner--tall  { min-height: clamp(280px, 38vw, 460px); }

.nex-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.nex-banner__media img,
.nex-banner__media .nex-media,
.nex-banner__media .nex-media__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

/* The scrim exists so the copy stays readable over footage we cannot see. */
.nex-banner__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  max-width: 62ch;
  padding: clamp(24px, 4vw, 44px);
  min-height: inherit;
  justify-content: center;
  background: linear-gradient(
    100deg,
    rgba(6, 6, 12, 0.9) 0%,
    rgba(6, 6, 12, 0.72) 45%,
    rgba(6, 6, 12, 0) 100%
  );
}

.nex-banner__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.nex-banner__text {
  font-size: var(--fs-lead);
  color: var(--nex-text-2);
  margin: 0;
}

@media (max-width: 640px) {
  .nex-banner__copy {
    background: linear-gradient(180deg, rgba(6, 6, 12, 0.5) 0%, rgba(6, 6, 12, 0.92) 55%);
  }
}

/* --------------------------------------------------------------------------
   Presentation videos
   -------------------------------------------------------------------------- */

.nex-videos__grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(var(--videos-cols, 3), minmax(0, 1fr));
}

.nex-videos__grid--1 { --videos-cols: 1; }
.nex-videos__grid--2 { --videos-cols: 2; }
.nex-videos__grid--3 { --videos-cols: 3; }
.nex-videos__grid--4 { --videos-cols: 4; }

@media (max-width: 1023px) {
  .nex-videos__grid { --videos-cols: 2; }
}

@media (max-width: 640px) {
  .nex-videos__grid { --videos-cols: 1; }
}

.nex-video {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--nex-line);
  transition: transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.nex-video:hover {
  border-color: var(--nex-line-3);
  box-shadow: var(--sh-2);
}

.nex-video__frame {
  position: relative;
  overflow: hidden;
}

.nex-video__expand {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 18, 0.66);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

.nex-video:hover .nex-video__expand,
.nex-video__expand:focus-visible {
  opacity: 1;
  transform: none;
}

.nex-video__expand:hover {
  background: color-mix(in srgb, var(--nex-accent) 78%, transparent);
}

/* Touch has no hover, so the affordance has to be permanent there. */
@media (hover: none) {
  .nex-video__expand {
    opacity: 1;
    transform: none;
  }
}

.nex-video__time {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(10, 10, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  color: var(--nex-text-2);
}

.nex-video__caption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--sp-5);
}

.nex-video__tag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nex-accent-24);
  background: var(--nex-accent-08);
  color: var(--nex-accent-hi);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nex-video__caption strong {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nex-video__caption span:not(.nex-video__tag) {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--nex-text-3);
}

.nex-videos__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--nex-text-4);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.nex-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 4, 9, 0.86);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out);
}

.nex-lightbox[hidden] {
  display: none;
}

.nex-lightbox.is-open {
  opacity: 1;
}

.nex-lightbox__stage {
  width: min(1100px, 100%);
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--nex-line-2);
  box-shadow: var(--sh-3);
  transform: scale(0.97);
  transition: transform var(--d-3) var(--e-spring);
}

.nex-lightbox.is-open .nex-lightbox__stage {
  transform: none;
}

.nex-lightbox__stage video {
  display: block;
  width: 100%;
  max-height: 78vh;
  background: #000;
}

.nex-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--nex-line-2);
  background: rgba(18, 18, 28, 0.8);
  color: var(--nex-text);
  font-size: 17px;
  cursor: pointer;
  transition: transform var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out);
}

.nex-lightbox__close:hover {
  transform: rotate(90deg);
  background: var(--nex-accent);
}

/* --------------------------------------------------------------------------
   Custom cursor — desktop only, and only when motion is welcome
   -------------------------------------------------------------------------- */

.nex-cursor,
.nex-cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--d-2) var(--e-out);
}

.nex-cursor {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--nex-accent-hi);
  box-shadow: 0 0 14px color-mix(in srgb, var(--nex-accent) 80%, transparent);
}

.nex-cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid color-mix(in srgb, var(--nex-accent) 55%, transparent);
  transition: opacity var(--d-2) var(--e-out), width var(--d-2) var(--e-out),
    height var(--d-2) var(--e-out), margin var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}

.nex-cursor-on .nex-cursor,
.nex-cursor-on .nex-cursor__ring {
  opacity: 1;
}

/* Over anything clickable the ring opens up and fills faintly. */
.nex-cursor-hot .nex-cursor__ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: color-mix(in srgb, var(--nex-accent) 85%, transparent);
  background: var(--nex-accent-08);
}

.nex-cursor-down .nex-cursor__ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

/* Hiding the native cursor is only safe once ours is proven to be drawing. */
.nex-cursor-on,
.nex-cursor-on a,
.nex-cursor-on button,
.nex-cursor-on [role='button'] {
  cursor: none;
}

/* Text entry keeps the real caret — a dot is useless for typing. */
.nex-cursor-on input,
.nex-cursor-on textarea,
.nex-cursor-on select {
  cursor: auto;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .nex-cursor,
  .nex-cursor__ring {
    display: none;
  }

  .nex-cursor-on,
  .nex-cursor-on a,
  .nex-cursor-on button {
    cursor: auto;
  }
}

/* --------------------------------------------------------------------------
   Pointer tilt — glass cards lean towards the cursor
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  [data-tilt] {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tilt] {
    transform: none !important;
  }
}

/* Phones never tilt and never blur video: both cost frames for nothing. */
@media (max-width: 767px) {
  .nex-media__play {
    backdrop-filter: none;
    background: var(--nex-accent);
  }

  .nex-video__expand {
    backdrop-filter: none;
    background: rgba(10, 10, 18, 0.88);
  }
}
/* ==========================================================================
   Reseller stat glyphs + liquid-glass motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reseller figures — one glyph per number
   -------------------------------------------------------------------------- */

/* Stacked and centred rather than icon-left: three cells side by side with a
   left-hung glyph read as three misaligned corners, because the labels wrap to
   different line counts. Centred, the column reads as one row of three. */
.nex-rs__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 8px;
  text-align: center;
}

/* The glyph alone, no plate behind it: three boxed icons in a row read as
   three buttons, which is not what a figure is. */
.nex-rs__stat-icon {
  display: grid;
  place-items: center;
  height: 18px;
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: var(--nex-text-3);
  transition: transform var(--d-2) var(--e-spring), color var(--d-2) var(--e-out);
}

.nex-rs__stat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Colour carries meaning: keys are the stock signal, Discord is Discord's
   own blurple, the seniority shield is neutral on purpose. */
.nex-rs__stat-icon--keys {
  color: rgb(120, 220, 150);
}

.nex-rs__stat-icon--members {
  color: rgb(140, 152, 245);
}

.nex-rs__stat-icon--since {
  color: var(--nex-accent-hi);
}

.nex-rs__card:hover .nex-rs__stat-icon {
  transform: translateY(-1px) scale(1.06);
}

.nex-rs__tag i {
  margin-right: 5px;
  font-size: 8px;
  opacity: 0.5;
}

/* Stacked, the glyph costs height rather than width, so it survives even the
   narrowest card. */
@media (max-width: 360px) {
  .nex-rs__stat {
    padding: 11px 6px;
  }

  .nex-rs__stat-icon {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Liquid glass — a rim that lights where the pointer is

   Drawn with a masked 1px inset ring rather than a box-shadow, so the light
   follows the exact curve of the border radius. Costs one compositor layer
   and no backdrop-filter, which is why it can run on cards that already blur.
   -------------------------------------------------------------------------- */

.nex-rs__card,
.nex-video,
.nex-tile,
.nex-where__card,
.nex-dl__panel,
.nex-banner {
  position: relative;
  isolation: isolate;
}

.nex-rs__card::after,
.nex-video::after,
.nex-tile::after,
.nex-where__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-3) var(--e-out);
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.5),
    color-mix(in srgb, var(--nex-accent) 40%, transparent) 34%,
    transparent 62%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.nex-rs__card:hover::after,
.nex-video:hover::after,
.nex-tile:hover::after,
.nex-where__card:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Specular sweep — a single highlight crossing the glass on hover
   -------------------------------------------------------------------------- */

.nex-rs__card::before,
.nex-video::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(255, 255, 255, 0.09) 47%,
    rgba(255, 255, 255, 0.03) 52%,
    transparent 60%
  );
  transform: translateX(-130%);
  opacity: 0;
}

.nex-rs__card:hover::before,
.nex-video:hover::before {
  opacity: 1;
  transform: translateX(130%);
  transition: transform 900ms var(--e-out), opacity 200ms linear;
}

/* Everything above the sweep has to stay above it.

   z-index only — NOT `position: relative`. Both cards are flex containers, so
   their children are flex items and z-index already applies to them without a
   position. Setting `position: relative` here would silently override
   `.nex-rs__status { position: absolute }` and drop the stock badge out of the
   card corner into a full-width bar. */
.nex-rs__card > *,
.nex-video > * {
  z-index: 3;
}

/* --------------------------------------------------------------------------
   Glass buttons — the highlight follows the pointer instead of sitting still
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .nex-btn--primary {
    background-image: radial-gradient(
      120px circle at var(--bx, 50%) var(--by, 50%),
      rgba(255, 255, 255, 0.22),
      transparent 60%
    );
    background-repeat: no-repeat;
  }
}

/* --------------------------------------------------------------------------
   Avatar plate — a faint refraction ring, the one place a real lens shows
   -------------------------------------------------------------------------- */

.nex-rs__avatar {
  position: relative;
  overflow: hidden;
}

.nex-rs__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 46%);
}

/* --------------------------------------------------------------------------
   Cost control

   Phones drop the pointer-driven effects entirely: they need a pointer to
   mean anything, and the sweep repaints a full card rect per frame.
   -------------------------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
  .nex-rs__card::before,
  .nex-rs__card::after,
  .nex-video::before,
  .nex-video::after,
  .nex-tile::after,
  .nex-where__card::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nex-rs__card::before,
  .nex-video::before {
    display: none;
  }

  .nex-rs__stat-icon {
    transition: none;
  }
}



/* --------------------------------------------------------------------------
   Per-reseller banner

   Full-bleed cover strip at the top of the card. The negative margins are the
   card's own padding, pulled back so the image touches all three edges; the
   radius has to be restated because `inherit` would round all four corners.
   -------------------------------------------------------------------------- */

.nex-rs__banner {
  position: relative;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-3) var(--r-3) 0 0;
  background: linear-gradient(120deg, var(--nex-accent-14), transparent 70%),
    color-mix(in srgb, var(--nex-card) 88%, #000);
}

/* No `overflow: hidden` on the strip itself — it would cut off the logo that
   straddles its lower edge. The image and the scrim carry the radius instead. */
.nex-rs__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Darkens the lower edge so the logo and the card border below it keep a
   defined line whatever the artwork is. */
.nex-rs__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 6, 12, 0.55));
}

.nex-rs__avatar--over {
  position: absolute;
  left: var(--sp-5);
  bottom: -20px;
  z-index: 3;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 2px solid var(--nex-card);
  box-shadow: var(--sh-2);
}

.nex-rs__avatar--over img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The name goes *under* the logo, flush with the card's left padding, rather
   than beside it: indenting it would leave an empty column to its left on the
   rows where the logo does not reach that far down. */
.nex-rs__card--banner .nex-rs__head {
  margin-top: 8px;
  min-height: 30px;
}

.nex-rs__card--avatar .nex-rs__head {
  /* 20px of logo hangs below the strip, plus room to breathe. */
  margin-top: 28px;
}

/* Over artwork the status pill needs its own backing to stay readable — and a
   z-index *above* the banner, which is itself a card child at z-index 3. */
.nex-rs__card--banner .nex-rs__status {
  z-index: 4;
  background: rgba(10, 10, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* The banner is the top of the card, so the sweep and rim must not sit on it. */
.nex-rs__card--banner::before,
.nex-rs__card--banner::after {
  border-radius: var(--r-3);
}

@media (max-width: 767px) {
  .nex-rs__card--banner .nex-rs__status {
    backdrop-filter: none;
    background: rgba(10, 10, 18, 0.88);
  }
}
/* ==========================================================================
   Background brand mark
   --------------------------------------------------------------------------
   An oversized, very faint logo sitting behind the page. It lives inside
   .nex-backdrop, so it inherits that layer's `position: fixed`, its
   `z-index: -2` and its `pointer-events: none` — it can never intercept a
   click and it never moves while the page scrolls, which is what keeps it
   free: a fixed layer is composited once and not repainted per frame.
   ========================================================================== */

.nex-backdrop__mark {
  position: absolute;
  aspect-ratio: 1;
  opacity: var(--mark-opacity, 0.05);
}

.nex-backdrop__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nex-backdrop__mark--motion-drift img {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: nex-mark-drift 26s var(--e-inout) infinite alternate;
}

@keyframes nex-mark-drift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) rotate(-1.5deg) scale(0.98);
  }
  50% {
    transform: translate3d(1.2%, -2.5%, 0) rotate(1deg) scale(1.015);
  }
  100% {
    transform: translate3d(2%, 1.5%, 0) rotate(2deg) scale(1.03);
  }
}

/* --- size --------------------------------------------------------------- */
/* vmin, not vw: the mark keeps the same visual weight in portrait and in
   landscape instead of ballooning on a wide desktop. */
.nex-backdrop__mark--small { width: clamp(200px, 34vmin, 420px); }
.nex-backdrop__mark--medium { width: clamp(280px, 52vmin, 640px); }
.nex-backdrop__mark--large { width: clamp(380px, 72vmin, 900px); }
.nex-backdrop__mark--huge { width: clamp(460px, 96vmin, 1280px); }

/* --- placement ---------------------------------------------------------- */
.nex-backdrop__mark--center {
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.nex-backdrop__mark--top {
  top: -8vmin;
  left: 50%;
  translate: -50% 0;
}

.nex-backdrop__mark--right {
  top: 50%;
  right: -14vmin;
  translate: 0 -50%;
}

.nex-backdrop__mark--left {
  top: 50%;
  left: -14vmin;
  translate: 0 -50%;
}

.nex-backdrop__mark--bottom {
  bottom: -12vmin;
  left: 50%;
  translate: -50% 0;
}

/* --- cost control ------------------------------------------------------- */

/*
   On a phone the mark competes with the text for contrast on a much smaller
   canvas, so it is toned down rather than merely scaled down.
*/
@media (max-width: 767px) {
  /* The opacity set in the builder is now used as-is on every screen. It was
     being multiplied by 0.72 here, which meant the number you typed was not
     the number you got — and at the default it left the mark almost invisible
     on the device most visitors are using. */
  .nex-backdrop__mark--huge { width: clamp(320px, 92vmin, 620px); }
  .nex-backdrop__mark--large { width: clamp(300px, 84vmin, 560px); }
}


/* ==========================================================================
   Background glow control

   The coloured washes behind the page are ambience, not information, so they
   are switchable. `soft` keeps a hint of colour; `off` leaves a flat dark
   background — which also lets the brand mark read at a lower opacity,
   because nothing is competing with it.
   ========================================================================== */

[data-glow='soft'] .nex-backdrop__halo {
  opacity: 0.18;
}

[data-glow='soft'] .nex-backdrop__aurora {
  opacity: 0.12;
}

[data-glow='soft'] .nex-backdrop {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nex-accent) 3%, transparent),
    transparent 34%
  );
}

[data-glow='off'] .nex-backdrop__halo,
[data-glow='off'] .nex-backdrop__aurora {
  display: none;
}

[data-glow='off'] .nex-backdrop {
  background: none;
}
/* ==========================================================================
   Intro, page transitions, liquid header
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro

   One object, one move. The old version had a mark, a spaced-out wordmark and
   a loading bar all animating at once, which is what made it read as busy
   rather than considered: three things arriving at three different times.
   Now the mark rises through a soft focus while a single hairline draws
   underneath it, and the whole plate lifts away as one.
   -------------------------------------------------------------------------- */

.nex-boot {
  transition: opacity 620ms var(--e-out), visibility 620ms, transform 620ms var(--e-out),
    filter 620ms var(--e-out);
}

.nex-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Lifts and softens rather than simply switching off — the page underneath
     is already fading in, so the two movements read as one handover. */
  transform: scale(1.03);
  filter: blur(6px);
}

.nex-boot__inner {
  gap: var(--sp-5);
}

.nex-boot__mark {
  width: 66px;
  height: 66px;
  filter: none;
  animation: nex-boot-mark 900ms var(--e-out) both;
}

@keyframes nex-boot-mark {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    filter: blur(9px);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* A single hairline that draws outward from the centre, under the mark. */
.nex-boot__bar {
  width: 116px;
  height: 1px;
  background: color-mix(in srgb, var(--nex-text) 10%, transparent);
  overflow: visible;
  opacity: 0;
  animation: nex-boot-line 520ms var(--e-out) 260ms both;
}

.nex-boot__bar span {
  transform-origin: center;
  background: linear-gradient(
    90deg,
    transparent,
    var(--nex-accent-hi),
    transparent
  );
  transition: transform 420ms var(--e-out);
}

@keyframes nex-boot-line {
  from { opacity: 0; transform: scaleX(0.3); }
  to { opacity: 1; transform: none; }
}

/* The wordmark is a caption, so it arrives last and stays quiet. */
.nex-boot__word {
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  font-size: 10px;
  color: var(--nex-text-4);
  opacity: 0;
  animation: nex-boot-word 560ms var(--e-out) 180ms both;
}

@keyframes nex-boot-word {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 0.85; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nex-boot__mark,
  .nex-boot__bar,
  .nex-boot__word {
    animation: none;
    opacity: 1;
  }

  .nex-boot.is-done {
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   Page transitions

   Leaving fades the page out; arriving is the #app fade that already exists
   for the boot screen. Opacity only — a transform on #app would make it the
   containing block for every fixed-position modal inside it.
   -------------------------------------------------------------------------- */

/*
   `:not(.is-booting)` is not decoration — it is what makes this rule win.
   The inline theme-styles block carries `html:not(.is-booting) body > #app
   { opacity: 1 }`, which outranks a plain `html.is-leaving body > #app`, so
   without the extra class here the page would simply never fade out. It also
   says the right thing: nothing leaves while it is still arriving.
*/
html.is-leaving:not(.is-booting) body > #app {
  /* Dimmed, not faded to nothing. A transition to 0 only starts a frame or
     two after the click on a heavy page, so by the time the browser navigates
     it has barely moved and the effect is invisible — while still costing the
     delay. A short trip to a quarter opacity registers immediately, and the
     cut to the next page happens from there. */
  opacity: 0.25;
  transition: opacity 160ms linear;
}

/*
   The backdrop lives outside #app, so dimming the page alone leaves the
   background mark at full strength — it visibly surges forward for the length
   of every transition. It has to leave with the page it belongs to.
*/
html.is-leaving .nex-backdrop__mark,
html.is-booting .nex-backdrop__mark {
  opacity: 0;
  transition: opacity 160ms linear;
}

/* Hairline that runs along the very top while the next page is fetched. It
   never reaches 100%: the real completion is the new document painting. */
.nex-pageload {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9998;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  background: linear-gradient(
    90deg,
    var(--nex-accent),
    color-mix(in srgb, var(--nex-accent) 55%, #c471ff)
  );
  box-shadow: 0 0 18px -2px var(--nex-accent-40);
}

.nex-pageload.is-loading {
  opacity: 1;
  animation: nex-pageload 1400ms var(--e-out) forwards;
}

@keyframes nex-pageload {
  0% { transform: scaleX(0); }
  40% { transform: scaleX(0.55); }
  100% { transform: scaleX(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  html.is-leaving:not(.is-booting) body > #app { opacity: 1; }

  .nex-pageload.is-loading { animation: none; transform: scaleX(0.6); }
}

/* --------------------------------------------------------------------------
   Liquid header

   The bar already blurs; what was missing is that it never moved *with* the
   pointer. A highlight now tracks the cursor along the glass, and the stuck
   transition runs on a spring rather than an ease so the shrink settles
   instead of stopping dead.
   -------------------------------------------------------------------------- */

.nex-nav {
  transition: padding 560ms var(--e-spring);
}

.nex-nav__inner {
  transition: height 560ms var(--e-spring), background-color 420ms var(--e-out),
    box-shadow 420ms var(--e-out), border-color 420ms var(--e-out),
    backdrop-filter 420ms var(--e-out);
}

/* The moving highlight. A separate layer from the rim sweep so the two can
   overlap without fighting over the same pseudo-element. */
.nex-nav__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms var(--e-out);
  background: radial-gradient(
    160px circle at var(--nx, 50%) var(--ny, 50%),
    color-mix(in srgb, #ffffff 12%, transparent),
    transparent 70%
  );
}

.nex-nav__inner:hover::before {
  opacity: 1;
}

/* Everything in the bar has to sit above the highlight. */
.nex-nav__inner > * {
  position: relative;
  z-index: 1;
}

.nex-nav.is-stuck .nex-nav__inner {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Nav items pick the light up too, so the bar reads as one surface. */
.nex-nav__link,
.nex-nav__icon {
  transition: color var(--d-2) var(--e-out), background-color var(--d-2) var(--e-out),
    transform 420ms var(--e-spring);
}

.nex-nav__link:hover,
.nex-nav__icon:hover {
  transform: translateY(-1px);
}

@media (hover: none), (pointer: coarse) {
  .nex-nav__inner::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nex-nav,
  .nex-nav__inner,
  .nex-nav__link,
  .nex-nav__icon {
    transition-duration: 1ms;
  }
}
/* ==========================================================================
   Conversion surfaces — unit price, trust row, sticky buy bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Per-day price on duration options
   -------------------------------------------------------------------------- */

.nex-unit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 11px;
  line-height: 1.3;
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
  color: var(--nex-text-4);
}

/* Each part stays whole; only the gap between them breaks. A unit price split
   across two lines is unreadable at this size. */
.nex-unit__val,
.nex-unit__best {
  white-space: nowrap;
}

/* Objective, not a slogan: this is the option with the lowest price per day,
   worked out from the prices on the page. */
.nex-unit__best {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nex-accent-24);
  background: var(--nex-accent-08);
  color: var(--nex-accent-hi);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Trust row under the buy box
   -------------------------------------------------------------------------- */

.nex-pdp__trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--nex-line);
}

.nex-pdp__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nex-pdp__pay-item {
  display: grid;
  place-items: center;
  width: 40px;
  height: 27px;
  border-radius: 7px;
  border: 1px solid var(--nex-line-2);
  background: color-mix(in srgb, var(--nex-card) 70%, transparent);
  color: var(--nex-text-2);
  font-size: 15px;
}

.nex-pdp__trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.nex-pdp__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--nex-text-4);
  text-decoration: none;
  transition: color var(--d-2) var(--e-out);
}

a.nex-pdp__trust-item:hover {
  color: var(--nex-text-2);
}

.nex-pdp__trust-item i {
  font-size: 11px;
  color: var(--nex-accent-hi);
}

/* --------------------------------------------------------------------------
   Sticky buy bar

   Phones only. On a desktop the buy box stays beside the content, so a bar
   would cover the page to solve a problem that does not exist there.
   -------------------------------------------------------------------------- */

.nex-buybar {
  display: none;
}

@media (max-width: 1023px) {
  .nex-buybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px var(--nex-gutter);
    /* Clears the home indicator on a phone with no hardware button. */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--nex-line-2);
    /* Mixed with black, not with `transparent`: mixing with transparent
       produces alpha, and the footer links read straight through the bar. */
    background: color-mix(in srgb, var(--nex-card) 92%, #000);
    box-shadow: 0 -18px 44px -20px rgba(0, 0, 0, 0.95);
    transform: translateY(110%);
    transition: transform 360ms var(--e-out);
    pointer-events: none;
  }

  .nex-buybar.is-on {
    transform: none;
    pointer-events: auto;
  }

  .nex-buybar__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    max-width: var(--nex-w);
    margin-inline: auto;
  }

  .nex-buybar__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .nex-buybar__name {
    font-size: var(--fs-xs);
    color: var(--nex-text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nex-buybar__price {
    font-size: var(--fs-lead);
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .nex-buybar .nex-btn {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nex-buybar {
    transition: none;
  }
}
/* ==========================================================================
   Performance
   --------------------------------------------------------------------------
   Loaded last. The glass look is expensive on phones: every card with
   backdrop-filter forces the browser to re-blur what is behind it on every
   scrolled frame, and the animated backdrop underneath was repainting three
   90px-blurred blobs whose border-radius changed continuously.

   On a desktop GPU that is fine. On a phone it is the difference between 60fps
   and a slideshow. So below the tablet breakpoint the effects are simplified:
   the composition stays the same, the per-frame cost does not.
   ========================================================================== */

/*
   `content-visibility: auto` used to live here and has been removed.

   It skips rendering for off-screen sections, which sounds free. In practice,
   flinging down the page forces several skipped sections to lay out and paint
   inside a single frame, and `contain-intrinsic-size` guesses their height
   until they do — so the scroll position shifts under the reader as each real
   height lands. That combination is exactly the "everything appears at once,
   and it stutters" behaviour it was supposed to prevent. The savings below are
   real and cost nothing at scroll time; this one was borrowed against a frame
   that has to be paid back at the worst possible moment.
*/

/* --------------------------------------------------------------------------
   Coarse pointers / small screens
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    /* Half the blur radius is roughly a quarter of the work. */
    --glass-blur: blur(12px) saturate(150%);
    --glass-blur-sm: blur(8px) saturate(140%);
  }

  /*
     The 90px blur is dropped here — it was the single most expensive operation
     on the page — but the gradients underneath were authored *for* that blur:
     they hold a solid colour to 62% of the box and fade out over the last 6%.
     Unblurred, that reads as a disc with a visible rim rather than a glow,
     which is the "strange light at the top and bottom of the page" it caused.
     So the stops are re-authored to fall off across the whole shape instead.
  */
  .nex-backdrop__halo {
    animation: none !important;
    will-change: auto;
    filter: none;
    mix-blend-mode: normal;
    /* The blob border-radius shaped the pre-blur silhouette; with a gradient
       that fades to nothing there is no silhouette left to shape. */
    border-radius: 50%;
    opacity: 0.5;
  }

  .nex-backdrop__halo--a {
    background: radial-gradient(
      closest-side circle at 50% 50%,
      color-mix(in srgb, var(--nex-accent) 46%, transparent) 0%,
      color-mix(in srgb, var(--nex-accent) 22%, transparent) 38%,
      transparent 72%
    );
  }

  .nex-backdrop__halo--b {
    background: radial-gradient(
      closest-side circle at 50% 50%,
      color-mix(in srgb, var(--nex-accent) 34%, #2b6bff 40%) 0%,
      transparent 72%
    );
  }

  .nex-backdrop__halo--c {
    background: radial-gradient(
      closest-side circle at 50% 50%,
      color-mix(in srgb, var(--nex-accent) 28%, #c471ff 40%) 0%,
      transparent 70%
    );
  }

  .nex-backdrop__aurora {
    animation: none !important;
    will-change: auto;
    filter: none;
    /* A conic gradient has hard spokes without a blur to soften them. */
    display: none;
  }

  /* Repainting a full-screen noise texture four times a second is pure cost. */
  .nex-backdrop__grain {
    animation: none !important;
    inset: 0;
    opacity: 0.1;
  }

  .nex-backdrop__grid {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Phones — the hard budget

   Everything below is removed rather than reduced. A phone GPU has a fraction
   of the fill rate and, on iOS, a hard memory ceiling per tab: a large blurred
   or masked full-screen layer is not slow there, it is what makes the tab die.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* A conic-gradient stretched past the viewport on every side, to be seen at
     24% opacity behind three other layers. Not worth a texture. */
  .nex-backdrop__aurora {
    display: none;
  }

  /* An SVG turbulence texture is generated at device pixel ratio — three times
     the pixels on a modern phone, for a grain nobody can see at arm's length. */
  .nex-backdrop__grain {
    display: none;
  }

  /* The grid stays, its full-screen mask does not: masking a viewport-sized
     layer is one of the costlier things iOS can be asked to composite. The
     fade it provided is approximated with plain opacity. */
  .nex-backdrop__grid {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.4;
  }

  /*
     The navigation bar is sticky, so a backdrop-filter on it re-blurs whatever
     is behind it on every single scrolled frame — the one element where that
     cost is paid continuously rather than once. A solid tint is indistinguishable
     over a dark background.
  */
  .nex-nav__inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: color-mix(in srgb, var(--nex-card) 92%, transparent) !important;
  }

  .nex-drawer,
  .nex-drawer__panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Below the tablet breakpoint, card-level glass becomes a solid tint. The
   backdrop behind them is a dark gradient, so the difference is barely
   visible — but the scroll cost disappears. The navbar and the drawer keep
   their real blur: they are single elements that stay put. */
@media (max-width: 768px) {
  .nex-glass,
  .nex-card,
  .nex-feature,
  .nex-where__card,
  .nex-faq__list,
  .nex-cta,
  .nex-trust,
  .nex-review,
  .nex-quote,
  .nex-dl__panel,
  .nex-rs__card,
  .nex-status__hero,
  .nex-services,
  .nex-incident,
  .nex-tile,
  .nex-state,
  .nex-price,
  .nex-btn--ghost,
  .nex-btn--discord,
  .nex-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: color-mix(in srgb, var(--nex-card) 88%, transparent);
  }

  /* Keep the accent wash on the primary "where to buy" card. */
  .nex-where__card--primary {
    background: linear-gradient(160deg, var(--nex-accent-14), transparent 58%),
      color-mix(in srgb, var(--nex-card) 88%, transparent);
  }

  /* Pointer sheens never fire on touch — don't pay for the extra layer. */
  .nex-glass--lit::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Currency, language and reseller-region controls
   -------------------------------------------------------------------------- */

/* These stay readable as native <select>s while JavaScript loads or when the
   browser cannot enhance them. Choice labels are plain text by design. */
.currency-selector select,
.language-selector select {
  color: var(--nex-text);
  border-color: var(--nex-line) !important;
  border-radius: var(--r-1);
}

.currency-selector .choices,
.language-selector .choices {
  width: 100%;
}

.currency-selector .choices__inner,
.language-selector .choices__inner {
  min-height: 38px !important;
  padding: 7px 28px 7px 10px !important;
  border: 1px solid var(--nex-line) !important;
  border-radius: var(--r-1) !important;
  background: var(--nex-s1) !important;
  color: var(--nex-text) !important;
}

.currency-selector.xs .choices__inner,
.language-selector.xs .choices__inner {
  min-height: 40px !important;
}

.currency-selector .choices__inner .choices__item,
.language-selector .choices__inner .choices__item {
  max-width: none !important;
  overflow: visible !important;
  color: var(--nex-text) !important;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.nex-nav .currency-selector .choices__list.choices__list--dropdown,
.nex-nav .language-selector .choices__list.choices__list--dropdown {
  right: 0;
  left: auto;
  width: max-content;
  min-width: 10.5rem;
  margin-left: 0;
  border-radius: var(--r-1);
  z-index: 120;
}

.nex-drawer .currency-selector .choices__list.choices__list--dropdown,
.nex-drawer .language-selector .choices__list.choices__list--dropdown {
  right: auto;
  left: 0;
  margin-left: 0;
}

.nex-rs__toolbar .nex-segment {
  max-width: 100%;
}

@media (max-width: 640px) {
  .nex-rs__toolbar {
    align-items: stretch;
  }

  .nex-rs__search {
    min-width: 100%;
    max-width: none;
  }

  .nex-rs__toolbar .nex-segment {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .nex-rs__toolbar .nex-segment::-webkit-scrollbar {
    display: none;
  }

  .nex-rs__toolbar .nex-segment button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}