/* ============================================================
   Nuviqs — "Graphite and Bullion"
   Bidirectional design system (ar / RTL primary, en / LTR)
   Authored in CSS logical properties: layout flips from [dir] alone.
   ============================================================ */

:root {
  /* base - graphite ramp; --nv-ink-2 is the logo artwork's own canvas colour */
  --nv-bg: #0C0E12;          --nv-bg-2: #11141A;
  --nv-ink-1: #171B23;       --nv-ink-2: #1D2331;
  --nv-panel-1: #242B3A;     --nv-panel-2: #2E3749;

  /* accent - bullion ramp, sampled from the Nuviqs logo art */
  --nv-acc: #B89038;         --nv-acc-hi: #D8B860;
  --nv-gold: #D0B058;        --nv-gold-hi: #E8CE86;
  --nv-on-gold: #1A1206;
  --nv-grad: linear-gradient(135deg, #F0DDA8 0%, #D8B860 48%, #B89038 100%);

  /* text - cool neutral, so gold is the only warm hue on the page */
  --nv-tx: rgba(236, 239, 245, .76);   --nv-tx-strong: #F2F4F8;
  --nv-muted: #A6AEBF;                 --nv-dim: #8A93A6;
  --nv-on-panel: #D2D7E2;              --nv-on-panel-warm: #E3DCC9;

  /* lines / glass */
  --nv-line: rgba(232,238,248,.11);    --nv-line-soft: rgba(232,238,248,.060);
  --nv-glass: rgba(232,238,248,.030);  --nv-glass-2: rgba(232,238,248,.052);

  /* radii */
  --nvr-sm: 10px; --nvr-md: 16px; --nvr-lg: 26px; --nvr-xl: 34px; --nvr-pill: 9999px;

  /* shadow / glow */
  --nvs-sh: 0 30px 80px -30px rgba(0,0,0,.86);
  --nvs-glow: 0 0 44px -8px rgba(184,144,56,.42);
  --nvs-glow-gold: 0 0 46px -8px rgba(216,184,96,.38);

  /* fonts */
  --nvf-disp: 'Tajawal','Segoe UI',sans-serif;
  --nvf-body: 'Tajawal','Segoe UI',sans-serif;
  --nvf-mono: 'Space Grotesk','Tajawal',monospace;

  --nv-mw: 1240px;  --nv-nav-h: 74px;

  /* direction-dependent gradient geometry */
  --nv-bloom-x: 100%; --nv-panel-angle: 155deg; --nv-hero-angle: 150deg;
  --nv-copy-angle: 160deg; --nv-shaft-tilt: 4deg;
}

[dir="rtl"] {
  --nv-bloom-x: 0%;
  --nv-panel-angle: 205deg;
  --nv-hero-angle: 210deg;
  --nv-copy-angle: 200deg;
  --nv-shaft-tilt: -4deg;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--nvf-body);
  background: var(--nv-bg);
  color: var(--nv-tx);
  line-height: 1.75;
  padding-block-start: var(--nv-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---- golden hour over emerald night ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(208,176,88,.17), transparent 55%),
    radial-gradient(90% 60% at var(--nv-bloom-x) 8%, rgba(208,176,88,.13), transparent 60%),
    linear-gradient(180deg, #11141A 0%, #0C0E12 40%, #090A0E 100%);
}
/* low sun shaft */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  inset-inline-start: 50%;
  width: 46vw;
  height: 120%;
  transform: translateX(-50%) rotate(var(--nv-shaft-tilt));
  z-index: -2;
  background: linear-gradient(180deg, rgba(216,184,96,.09), rgba(216,184,96,.02) 30%, transparent 70%);
  filter: blur(38px);
  pointer-events: none;
  opacity: .75;
}
[dir="rtl"] body::after { transform: translateX(50%) rotate(var(--nv-shaft-tilt)); }

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* the graphite base is lighter than the old emerald-black, so the same
     noise reads louder - pull it back slightly */
  opacity: .035;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--nv-mw); margin-inline: auto; padding-inline: 24px; }

/* a11y helpers */
.sr-only {
  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 {
  position: absolute; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--nvr-sm) var(--nvr-sm);
  background: var(--nv-gold-hi); color: #1A1206;
  font-family: var(--nvf-disp); font-weight: 600; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

/* Latin runs inside Arabic flow must not be reordered by the bidi algorithm.
   Without this, "+34.7%" renders as "34.7%+". */
.nv-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--nvf-disp);
  color: var(--nv-tx-strong);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.display {
  font-family: var(--nvf-disp);
  font-weight: 300;
  line-height: 1.35;
  color: var(--nv-tx-strong);
}
.display b { font-weight: 700; }
/* Arabic has no true italic — synthetic obliquing breaks the script.
   The reference's <i> emphasis becomes a golden-hour colour shift. */
.display .hi { font-weight: 400; color: var(--nv-gold-hi); }
h1.display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.eyebrow {
  font-family: var(--nvf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nv-muted);
}
.eyebrow.acc { color: var(--nv-acc-hi); }

.lede { color: var(--nv-muted); font-size: 1.02rem; max-width: 48ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nvf-disp);
  font-weight: 500;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--nvr-pill);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--nv-grad); color: #1A1206; font-weight: 600; box-shadow: var(--nvs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px -4px rgba(232,206,134,.7); }
.btn-ghost {
  background: var(--nv-glass-2);
  color: var(--nv-tx-strong);
  border-color: var(--nv-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--nv-acc); background: rgba(208,176,88,.13); }

/* Directional icons mirror under RTL; semantic icons must not. */
[dir="rtl"] .btn svg,
[dir="rtl"] .gcta svg,
[dir="rtl"] .cbtn svg { transform: scaleX(-1); }

/* ---- panel base ---- */
.panel {
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
  border: 1px solid var(--nv-line);
  border-radius: var(--nvr-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--nvs-sh);
}

/* golden hour featured surface — reused by every highlighted panel */
.nv-sun {
  background:
    radial-gradient(120% 100% at var(--nv-bloom-x) 0%, rgba(216,184,96,.30), transparent 60%),
    linear-gradient(var(--nv-panel-angle), var(--nv-panel-2), var(--nv-panel-1));
}

section { position: relative; }
.sect { padding-block: 84px; }
.sect-head { max-width: 660px; margin-inline: auto; margin-block-end: 46px; text-align: center; }
.sect-head .eyebrow { display: block; margin-block-end: 14px; }
.sect-head p { color: var(--nv-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--nv-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(12,14,18,.68);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--nv-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--nv-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand: one word, one colour, one weight. Never split "Nuviqs". */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nvf-disp);
  font-weight: 600;
  font-size: 1.24rem;
  color: var(--nv-tx-strong);
  letter-spacing: .005em;
}
/* object-fit makes the fixed w/h pair safe for any source aspect. The shipped
   logo-mark.png is square, so it never actually engages - belt and braces. */
.brand img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.brand-name { direction: ltr; unicode-bidi: isolate; }

.menu { display: flex; align-items: center; gap: 28px; list-style: none; }
.menu a { font-size: .88rem; color: var(--nv-muted); transition: color .2s; }
.menu a:hover, .menu a.on { color: var(--nv-tx-strong); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: #1A1206; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.burger span { width: 22px; height: 1.6px; background: var(--nv-tx); border-radius: 2px; transition: .3s; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block-end: 1px solid var(--nv-line-soft);
  background: rgba(232,238,248,.012);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 46px; padding-block: 11px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nvf-mono);
  font-size: .74rem;
  color: var(--nv-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.tk b { color: var(--nv-tx-strong); font-weight: 500; }
.tk .px { color: var(--nv-tx); }
.tk .up { color: #46C98A; }
.tk .down { color: #EF6E85; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nv-acc-hi);
  box-shadow: 0 0 10px var(--nv-acc);
  animation: nvGlow 1.8s ease-in-out infinite;
}
@keyframes nvGlow { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--nvr-xl);
  overflow: hidden;
  border: 1px solid var(--nv-line);
  box-shadow: var(--nvs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at var(--nv-bloom-x) 0%, rgba(208,176,88,.12), transparent 60%),
    linear-gradient(var(--nv-hero-angle), var(--nv-ink-2), var(--nv-ink-1) 70%, #13161D);
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--nvf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nv-gold-hi);
  padding: 7px 14px;
  border: 1px solid var(--nv-line);
  border-radius: var(--nvr-pill);
  background: rgba(208,176,88,.1);
  margin-block-end: 24px;
}
.hero-chip svg { width: 13px; height: 13px; }
.hero h1 { margin-block-end: 20px; }
.hero-left .lede { margin-block-end: 32px; font-size: 1.05rem; }

.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block-start: 1px solid var(--nv-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--nv-line-soft); }
.stat-row .val {
  font-family: var(--nvf-disp);
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--nv-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.stat-row .lbl {
  font-family: var(--nvf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nv-dim);
  text-align: end;
}

/* hero right — golden hour form panel */
.hero-right {
  background:
    radial-gradient(120% 100% at var(--nv-bloom-x) 0%, rgba(216,184,96,.32), transparent 55%),
    linear-gradient(var(--nv-hero-angle), var(--nv-panel-2), var(--nv-panel-1) 75%);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232,238,248,.11) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .3;
  mask-image: radial-gradient(120% 90% at var(--nv-bloom-x) 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form ---- */
.form-card h3 { font-weight: 600; font-size: 1.18rem; color: #fff; }
.form-card .note {
  font-family: var(--nvf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nv-gold-hi);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: rgba(8,10,14,.5);
  border: 1px solid rgba(232,238,248,.18);
  border-radius: var(--nvr-sm);
  padding: 12px 14px;
  color: #fff;
  font-family: var(--nvf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, background .2s;
}
.reg input::placeholder { color: rgba(232,238,248,.45); }
.reg input:focus { border-color: var(--nv-gold-hi); background: rgba(8,10,14,.72); }
.reg form > div { margin-block-end: 10px; }
.iti { width: 100%; }
.iti__dropdown-content { color: #111; }
/* ---- intl-tel-input v25: mirror the closed field for Arabic ---------------
   v25 does NOT support RTL for the closed field. On detecting an RTL ancestor
   (isRTL = telInput.closest("[dir=rtl]")) it stamps dir="ltr" on the .iti
   wrapper, pins .iti__country-container to position:absolute left:0, and
   writes an INLINE style="padding-left:<container width>px" on the input -
   recomputed again on every _setCountry, i.e. after the geo-IP lookup
   resolves. There is no padding-right code path anywhere in the library.

   Moving the container to the right without reserving space there is what put
   the digits underneath it. Laying the row out with flex makes the container a
   flow item, so the layout needs no padding maths and holds for any dial-code
   width (+1 .. +968) instead of depending on a guessed pixel value.

   Two constraints this creates: the wrapper carries dir="ltr", so logical
   properties (padding-inline-*, inset-inline-*) resolve LTR in here and every
   override below is physical on purpose; and the input padding is an inline
   style, so beating it requires !important. */
[dir="rtl"] .ph-wrap .iti {
  display: flex;
  align-items: stretch;
  direction: ltr;               /* agree with the wrapper's own dir attribute */
  flex-direction: row-reverse;  /* DOM is [country][input] -> country on right */
  background: rgba(8,10,14,.5);
  border: 1px solid rgba(232,238,248,.18);
  border-radius: var(--nvr-sm);
  transition: border-color .2s, background .2s;
}
[dir="rtl"] .ph-wrap .iti:focus-within {
  border-color: var(--nv-gold-hi);
  background: rgba(8,10,14,.72);
}
/* the field chrome now lives on the wrapper, so the input goes bare */
[dir="rtl"] .ph-wrap .iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  padding-left: 14px !important;   /* beats the library's inline padding-left */
  padding-right: 4px !important;
  direction: ltr;
  text-align: right;               /* digits sit beside the dial code */
}
[dir="rtl"] .ph-wrap .iti__country-container {
  position: relative;              /* was absolute; now a flex item */
  inset: auto;
  flex: 0 0 auto;
}
/* mirror the button internals: dial code inboard, flag at the outer edge */
[dir="rtl"] .ph-wrap .iti__selected-country { flex-direction: row-reverse; }
[dir="rtl"] .ph-wrap .iti__selected-country-primary {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding: 0 8px 0 6px;
}
[dir="rtl"] .ph-wrap .iti__arrow { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .ph-wrap .iti .iti__selected-dial-code { margin: 0 4px; direction: ltr; }
[dir="rtl"] .ph-wrap .iti__dropdown-content { margin-left: 0; margin-right: -1px; }
/* Email values are LTR ASCII: an inherited RTL direction right-aligns the
   text but makes the caret jump to the far side of the value while typing.
   LTR direction with right alignment keeps the caret on the right. */
[dir="rtl"] .reg input[type="email"] { direction: ltr; text-align: right; }
/* Name values are often typed in Latin script; the bidi algorithm renders
   such runs LTR inside the RTL field (newest char lands on the right, caret
   on the right of the run). Override to strict RTL visual order so the caret
   stays on the left and each new character appears leftmost for any script.
   Display-only: the submitted value keeps its logical order. */
[dir="rtl"] .reg input[name="first_name"],
[dir="rtl"] .reg input[name="last_name"] {
  unicode-bidi: bidi-override;
}

#submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--nvr-sm);
  background: var(--nv-gold-hi);
  color: #1A1206;
  font-family: var(--nvf-disp);
  font-size: .98rem;
  font-weight: 700;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}
#submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(216,184,96,.5); }
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: #E3DCC9;
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--nv-gold-hi); flex-shrink: 0; }

/* PDPL consent line under the lead form (index / register / contact) */
.form-consent {
  margin-block-start: 12px;
  font-size: .72rem;
  line-height: 1.65;
  color: var(--nv-dim);
}
.form-consent a { color: var(--nv-acc-hi); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--nv-gold-hi); }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid rgba(232,238,248,.15); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid rgba(232,238,248,.1); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(232,238,248,.13);
  border: 1px solid rgba(232,238,248,.17);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--nv-gold-hi); }
.trust-item b { display: block; font-family: var(--nvf-disp); font-weight: 600; font-size: .94rem; color: #fff; line-height: 1.4; }
.trust-item span { font-size: .76rem; color: #C6CCDA; }

/* ============================================================
   VOICES (text testimonials — replaces the reference's video reels)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--nvr-lg);
  border: 1px solid var(--nv-line);
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: rgba(208,176,88,.5); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--nv-grad);
  opacity: .55;
}
.voice-mark { width: 34px; height: 34px; color: var(--nv-gold); opacity: .55; margin-block-end: 14px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--nv-tx-strong);
  font-weight: 300;
  flex: 1;
  margin-block-end: 20px;
}
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--nv-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--nvf-disp); font-weight: 700; font-size: .84rem;
  color: #1A1206; background: var(--nv-grad);
}
.voice-name { font-family: var(--nvf-disp); font-weight: 600; font-size: .96rem; color: var(--nv-tx-strong); }
.voice-loc { font-family: var(--nvf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nv-acc-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--nv-gold); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--nvr-xl);
  overflow: hidden;
}
.split-media { position: relative; min-height: 380px; overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--nv-copy-angle), transparent, rgba(12,14,18,.35));
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(var(--nv-copy-angle), var(--nv-ink-2), var(--nv-ink-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--nv-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split.reverse .split-media { order: 2; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap {
  border-radius: var(--nvr-lg);
  border: 1px solid var(--nv-line);
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: rgba(208,176,88,.45); }
.cap.feat {
  background:
    radial-gradient(120% 100% at var(--nv-bloom-x) 0%, rgba(216,184,96,.30), transparent 60%),
    linear-gradient(var(--nv-panel-angle), var(--nv-panel-2), var(--nv-panel-1));
  border-color: rgba(216,184,96,.4);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid var(--nv-line);
  background: rgba(208,176,88,.13);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: rgba(232,238,248,.17); border-color: rgba(232,238,248,.26); }
.cap-ico svg { width: 22px; height: 22px; color: var(--nv-acc-hi); }
.cap.feat .cap-ico svg { color: var(--nv-gold-hi); }
.cap h3 { font-size: 1.1rem; font-weight: 600; margin-block-end: 10px; }
.cap p { color: var(--nv-muted); font-size: .92rem; line-height: 1.8; }
.cap.feat p { color: #D2D7E2; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--nv-line);
  border-radius: var(--nvr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--nv-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--nvf-disp);
  font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--nv-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.metric .val b { font-weight: 300; color: var(--nv-gold-hi); }
.metric .lbl { font-family: var(--nvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-block-end: 30px; }
.agg { border: 1px solid var(--nv-line); border-radius: var(--nvr-md); padding: 26px 24px; background: var(--nv-glass); }
.agg .v { font-family: var(--nvf-disp); font-weight: 300; font-size: 2.2rem; color: var(--nv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.agg .v b { color: var(--nv-gold-hi); font-weight: 300; }
.agg .l { color: var(--nv-muted); font-size: .88rem; margin-block-start: 6px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.step {
  border: 1px solid var(--nv-line);
  border-radius: var(--nvr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--nv-grad); box-shadow: var(--nvs-glow);
}
.step .num { font-family: var(--nvf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--nv-gold-hi); }
.step h3 { font-size: 1.06rem; font-weight: 600; margin-block: 8px; }
.step p { color: var(--nv-muted); font-size: .9rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  border-radius: var(--nvr-lg);
  border: 1px solid var(--nv-line);
  background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background:
    radial-gradient(120% 100% at var(--nv-bloom-x) 0%, rgba(216,184,96,.30), transparent 60%),
    linear-gradient(var(--nv-panel-angle), var(--nv-panel-2), var(--nv-panel-1));
  border-color: rgba(216,184,96,.45);
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nvf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nv-acc-hi);
  padding: 5px 10px;
  border-radius: var(--nvr-pill);
  border: 1px solid var(--nv-line);
  background: rgba(208,176,88,.12);
}
.gcard.mid .gbadge { color: #fff; border-color: rgba(232,238,248,.3); background: rgba(232,238,248,.15); }
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-family: var(--nvf-mono); font-size: .64rem; color: var(--nv-dim); direction: ltr; unicode-bidi: isolate; }
.gcard.mid .tagline { color: #E3DCC9; }
.gsum { font-family: var(--nvf-disp); font-weight: 300; font-size: 2.5rem; color: var(--nv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.gper { font-family: var(--nvf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); margin-block-end: 14px; }
.gcard.mid .gper { color: var(--nv-gold-hi); }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--nv-acc-hi); stroke-width: 2; }
/* near-white, not a second gold: the featured card must read as different */
.gcard.mid .gspark .ln { stroke: var(--nv-tx-strong); }
.gqt { font-size: .92rem; color: var(--nv-muted); line-height: 1.8; margin-block-end: 18px; }
.gcard.mid .gqt { color: #DFE3EC; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--nvf-disp); font-weight: 700; font-size: .82rem;
  color: #1A1206; background: var(--nv-grad);
}
.gcard.mid .gav { background: rgba(232,238,248,.22); color: #fff; }
.gnm { font-family: var(--nvf-disp); font-weight: 600; font-size: .94rem; color: var(--nv-tx-strong); }
.gcity { font-family: var(--nvf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nv-dim); }
.gcard.mid .gcity { color: #E3DCC9; }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--nvf-disp); font-weight: 600; font-size: .9rem;
  border-radius: var(--nvr-pill);
  border: 1px solid transparent;
  background: var(--nv-grad);
  color: #1A1206;
  box-shadow: var(--nvs-glow);
  transition: transform .25s, box-shadow .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); box-shadow: 0 0 50px -6px rgba(232,206,134,.75); }
.gcard.mid .gcta { background: var(--nv-gold-hi); color: #1A1206; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .45); }
.gcard.mid .gcta:hover { box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .6); }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nv-glass-2);
  border: 1px solid var(--nv-line);
  color: var(--nv-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--nv-acc); background: rgba(208,176,88,.16); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nv-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--nvr-pill); background: var(--nv-grad); }

.disclaimer { font-size: .78rem; color: var(--nv-dim); text-align: center; max-width: 760px; margin-inline: auto; margin-block-start: 30px; line-height: 1.8; }

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--nvr-xl);
  padding: 64px 40px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(216,184,96,.34), transparent 60%),
    linear-gradient(var(--nv-panel-angle), var(--nv-panel-2), var(--nv-panel-1));
  border: 1px solid rgba(216,184,96,.35);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232,238,248,.09) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-block-end: 14px; }
.cta-band p { color: #D2D7E2; margin-inline: auto; margin-block-end: 28px; max-width: 48ch; }
.cta-band .btn-primary { background: var(--nv-gold-hi); color: #1A1206; }
.cta-band .btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .6); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--nv-line-soft); padding-block-start: 68px; margin-block-start: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand .brand { margin-block-end: 16px; }
.footer-brand p { color: var(--nv-muted); font-size: .9rem; max-width: 38ch; }
.footer-col h2 { font-family: var(--nvf-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nv-dim); font-weight: 500; margin-block-end: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--nv-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--nv-acc-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--nv-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--nv-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--nv-acc-hi); }

.risk { background: rgba(232,238,248,.012); border-block-start: 1px solid var(--nv-line-soft); padding-block: 22px; }
.risk p { font-size: .76rem; color: var(--nv-dim); line-height: 1.8; max-width: var(--nv-mw); }

/* ============================================================
   REVEAL
   ============================================================ */
.nv-lift { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.nv-lift.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nv-lift { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INNER PAGE COMPONENTS
   ============================================================ */
.page-head { text-align: center; max-width: 780px; margin-inline: auto; padding-block: 20px 8px; }
.page-head .eyebrow { display: block; margin-block-end: 14px; }
.page-head p { color: var(--nv-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--nvf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-dim); margin-block-start: 14px; }

/* Capped at the photo's intrinsic 800px so the image fills the frame exactly —
   a wider frame would leave a bare strip at the inline end. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--nvr-xl); overflow: hidden; border: 1px solid var(--nv-line); box-shadow: var(--nvs-sh); position: relative; }
.media-frame img { width: 100%; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--nv-copy-angle), transparent, rgba(12,14,18,.3)); pointer-events: none; }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip { font-family: var(--nvf-mono); font-size: .74rem; letter-spacing: .06em; color: var(--nv-muted); padding: 9px 20px; border-radius: var(--nvr-pill); border: 1px solid var(--nv-line); background: var(--nv-glass); }

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--nvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nv-gold-hi); display: block; margin-block-end: 10px; }
.cap.team .av {
  width: 58px; height: 58px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-family: var(--nvf-disp); font-weight: 700; color: #1A1206;
  background: var(--nv-grad); box-shadow: var(--nvs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--nvr-lg); border: 1px solid var(--nv-line); background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: rgba(208,176,88,.45); }
.post-tag { align-self: flex-start; font-family: var(--nvf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--nvr-pill); margin-block-end: 14px; border: 1px solid var(--nv-line); }
/* The reference separated these two by HUE (gold vs emerald). With one accent
   hue the pair must separate by VALUE instead: gold vs cool neutral. */
.post-tag.ai { color: var(--nv-gold-hi); background: rgba(208,176,88,.14); border-color: rgba(208,176,88,.28); }
.post-tag.crypto { color: var(--nv-muted); background: rgba(232,238,248,.06); border-color: rgba(232,238,248,.16); }
.post h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--nv-muted); font-size: .92rem; line-height: 1.8; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--nv-line-soft); font-family: var(--nvf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--nv-dim); }

/* FAQ accordion — real buttons, keyboard accessible */
.faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--nv-line); border-radius: var(--nvr-md); background: linear-gradient(180deg, var(--nv-glass-2), var(--nv-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: rgba(208,176,88,.4); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none; border: none;
  font-family: var(--nvf-disp); font-size: 1rem; font-weight: 500;
  color: var(--nv-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--nv-acc-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--nv-acc-hi); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 420px; }
.faq-a p { padding: 0 24px 20px; color: var(--nv-muted); font-size: .94rem; line-height: 1.9; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 20px; }
.info-media { border-radius: var(--nvr-lg); overflow: hidden; border: 1px solid var(--nv-line); }
.info-row { display: flex; align-items: flex-start; gap: 14px; }
.info-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--nv-line); background: rgba(208,176,88,.12); }
.info-ico svg { width: 20px; height: 20px; color: var(--nv-acc-hi); }
.info-row h4 { font-size: 1rem; font-weight: 600; margin-block-end: 3px; }
.info-row p { color: var(--nv-muted); font-size: .9rem; }
.reg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--nv-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--nv-acc-hi); flex-shrink: 0; margin-block-start: 4px; }

.form-card.solo {
  background:
    radial-gradient(120% 100% at var(--nv-bloom-x) 0%, rgba(216,184,96,.3), transparent 55%),
    linear-gradient(var(--nv-hero-angle), var(--nv-panel-2), var(--nv-panel-1) 75%);
  border: 1px solid rgba(216,184,96,.35);
  border-radius: var(--nvr-lg);
  padding: 36px 34px;
  position: relative;
  overflow: hidden;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(232,238,248,.11) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .3;
  mask-image: radial-gradient(120% 90% at var(--nv-bloom-x) 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

.legal { max-width: 840px; margin-inline: auto; }
.legal h2 { font-family: var(--nvf-disp); font-size: 1.26rem; font-weight: 600; color: var(--nv-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--nv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--nv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 20px; }

/* standalone centred notice (thanks / 404) */
.notice { max-width: 620px; margin-inline: auto; text-align: center; padding-block: 60px; }
.notice .ico { width: 76px; height: 76px; margin-inline: auto; margin-block-end: 26px; display: grid; place-items: center; border-radius: 22px; background: rgba(208,176,88,.13); border: 1px solid var(--nv-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--nv-acc-hi); }
.notice p { color: var(--nv-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* ============================================================
   ARABIC TYPOGRAPHY (RTL only)

   letter-spacing severs Arabic cursive joins — it is the single most
   conspicuous "this was not designed for Arabic" tell. Every label class in
   this stylesheet carries .04–.18em tracking for its Latin look, so all of it
   must be neutralised under RTL. word-spacing restores the airy label texture
   without breaking the joins, and the weight step replaces the case step
   (text-transform: uppercase is a no-op on Arabic).
   ============================================================ */
[dir="rtl"] .eyebrow,
[dir="rtl"] .stat-row .lbl,
[dir="rtl"] .metric .lbl,
[dir="rtl"] .gper,
[dir="rtl"] .gcity,
[dir="rtl"] .footer-col h5,
[dir="rtl"] .city-chip,
[dir="rtl"] .post-tag,
[dir="rtl"] .post-meta,
[dir="rtl"] .cap.team .role,
[dir="rtl"] .page-head .updated,
[dir="rtl"] .form-card .note,
[dir="rtl"] .hero-chip,
[dir="rtl"] .step .num,
[dir="rtl"] .voice-loc,
[dir="rtl"] .gbadge,
[dir="rtl"] .trust-item span,
[dir="rtl"] .calc-form__label,
[dir="rtl"] .calc-results__final-label,
[dir="rtl"] .calc-results__profit-subtitle {
  letter-spacing: 0;
  word-spacing: .05em;
  font-weight: 600;
}

/* Latin tokens keep their tracking — that is where the mono texture lives. */
[dir="rtl"] .nv-ltr,
[dir="rtl"] .tk,
[dir="rtl"] .gcard .tagline { letter-spacing: .1em; word-spacing: normal; font-weight: inherit; }

/* Arabic needs more leading and never negative tracking. */
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .display { line-height: 1.45; letter-spacing: 0; }
[dir="rtl"] .brand { letter-spacing: 0; }

/* direction:ltr on a BLOCK makes text-align:start resolve to left, which would
   left-align these figures inside an RTL card. Physical `right` is correct and
   unambiguous here because the rule is already scoped to [dir="rtl"]. */
[dir="rtl"] .calc-form__value,
[dir="rtl"] .calc-results__final-amount,
[dir="rtl"] .calc-results__profit-amount,
[dir="rtl"] .stat-row .val,
[dir="rtl"] .gsum { text-align: right; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-panel { grid-template-columns: 1fr; }
  .hero-left { padding: 44px 34px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media { min-height: 260px; }
  .voices-row { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-inline-end: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-block-end: 1px solid var(--nv-line-soft); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .agg-row { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 calc((100% - 20px) / 2); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .blog-grid { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --nv-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--nv-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(12,14,18,.97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--nv-line);
  }
  .nav.open .menu a { padding-block: 10px; font-size: .96rem; }
  .nav.open .menu .btn { justify-content: center; margin-block-start: 8px; }
  .sect { padding-block: 60px; }
  .hero-left { padding: 38px 26px; }
  .hero-right { padding: 30px 26px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--nv-line-soft); }
  .metric:last-child { border-block-end: none; }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .split-copy { padding: 38px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 48px 26px; }
  .form-card.solo { padding: 30px 24px; }
}