/* ============================================================
   Wixonal AI — "Latin Night: Deep Navy + Neon Green"
   Bidirectional design system (ar / RTL primary, en / LTR)
   Authored in CSS logical properties: layout flips from [dir] alone.

   Two surfaces carry the whole system:
     · the deep-navy canvas  (body, cards, splits)
     · the mint inset        (form panels, featured cards, CTA bands)
   Both hues come straight off the brand mark: the plate navy #091E2F and the
   W's neon green #04FD8F. Because that green is a LIGHT colour it is never
   used as body text on navy and never carries dark ink of its own — label
   ink on the accent is --wx-ink.
   ============================================================ */

:root {
  /* base — Latin night, straight off the brand plate: #091E2F is the
     logo's own navy, over a deeper #071523 that gives the canvas its floor. */
  --wx-bg: #071523;
  --wx-bg-2: #091e2f;
  --wx-slate-1: #0d2739;
  --wx-slate-2: #123147;
  --wx-graphite-1: #1a3d55;
  --wx-graphite-2: #265070;

  /* accent — the logo neon, sampled from the mark's opaque pixels */
  --wx-acc: #04fd8f;
  --wx-acc-hi: #6bffc0;
  --wx-acc-deep: #04663c;   /* the only neon legible as TEXT on mint */
  --wx-grad: linear-gradient(135deg, #e8fff4 0%, #04fd8f 55%, #02623a 100%);
  --wx-glow-wash: rgba(4, 253, 143, .1);
  --wx-glow-line: rgba(4, 253, 143, .3);

  /* mint — inset surfaces and the ink that sits on them */
  --wx-mint: #e8fff4;
  --wx-mint-2: #cff5e4;
  --wx-ink: #05161f;
  --wx-ink-soft: #2e5547;
  --wx-mint-line: rgba(5, 22, 31, .14);
  --wx-mint-surface: linear-gradient(var(--wx-panel-angle), #f2fff9, #d8f8e9);

  /* text on the navy canvas */
  --wx-tx: rgba(232, 255, 244, .76);
  --wx-tx-strong: #eafff5;
  --wx-muted: #9db5ac;
  /* Tertiary labels (.metric .lbl, .post-meta, .calc-form__label) sit on the
     lifted glass cards, not on --wx-bg. Measured against those surfaces the
     card ground resolves to ~#0d1c29, where #8aa79c lands at 7.2:1 —
     comfortably clear of AA even on the lightest lifted surface. */
  --wx-dim: #8aa79c;

  /* lines / glass */
  --wx-line: rgba(232, 255, 244, .1);
  --wx-line-soft: rgba(232, 255, 244, .055);
  --wx-glass: rgba(232, 255, 244, .028);
  --wx-glass-2: rgba(232, 255, 244, .05);

  /* radii — tighter than the reference's, for an editorial rather than
     rounded-app silhouette */
  --wxr-sm: 8px;
  --wxr-md: 12px;
  --wxr-lg: 18px;
  --wxr-xl: 24px;
  --wxr-pill: 9999px;

  /* shadow / glow — a close neon halo, not a wide bloom */
  --wxs-sh: 0 28px 70px -28px rgba(0, 0, 0, .86);
  --wxs-glow: 0 0 30px -10px rgba(4, 253, 143, .5);
  --wxs-mint: 0 22px 54px -24px rgba(0, 0, 0, .72);

  /* fonts */
  /* Space Grotesk ships Latin only, so Arabic glyphs in mono-styled labels
     fall through to Tajawal rather than an ugly system fallback. Per-glyph
     fallback — no :lang() selectors needed. */
  --wxf-disp: 'Tajawal', 'Segoe UI', sans-serif;
  --wxf-body: 'Tajawal', 'Segoe UI', sans-serif;
  --wxf-mono: 'Space Grotesk', 'Tajawal', sans-serif;

  --wx-mw: 1240px;
  --wx-nav-h: 76px;

  /* direction-dependent gradient geometry (flipped for RTL below) */
  --wx-bloom-x: 100%;
  --wx-panel-angle: 155deg;
  --wx-hero-angle: 150deg;
  --wx-copy-angle: 160deg;
  --wx-shaft-tilt: 4deg;
}

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

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

html { scroll-behavior: smooth; }

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

/* ---- navy night ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(4, 253, 143, .09), transparent 55%),
    radial-gradient(90% 60% at var(--wx-bloom-x) 8%, rgba(38, 80, 112, .5), transparent 62%),
    linear-gradient(180deg, #091e2f 0%, #071523 42%, #0a0b0d 100%);
}
/* mint shaft — the light source the mint insets are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  inset-inline-start: 50%;
  width: 38vw;
  height: 120%;
  transform: translateX(-50%) rotate(var(--wx-shaft-tilt));
  z-index: -2;
  background: linear-gradient(180deg, rgba(107, 255, 192, .07), rgba(232, 255, 244, .014) 32%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: .7;
}
[dir="rtl"] body::after { transform: translateX(50%) rotate(var(--wx-shaft-tilt)); }

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  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(--wx-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(--wxr-sm) var(--wxr-sm);
  background: var(--wx-acc); color: #05161f;
  font-family: var(--wxf-disp); font-weight: 700; 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%+". */
.wx-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--wxf-disp);
  color: var(--wx-tx-strong);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.display {
  font-family: var(--wxf-disp);
  font-weight: 300;
  line-height: 1.35;
  color: var(--wx-tx-strong);
}
.display b { font-weight: 700; }
/* Arabic has no true italic — synthetic obliquing breaks the script.
   Emphasis is a colour shift into the brand neon instead. */
.display .hi { font-weight: 500; color: var(--wx-acc-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(--wxf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wx-muted);
}
.eyebrow.acc { color: var(--wx-acc-hi); }

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

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wxf-disp);
  font-weight: 500;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--wxr-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(--wx-acc); color: #05161f; font-weight: 700; box-shadow: var(--wxs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px -6px rgba(4, 253, 143, .7); }
.btn-ghost {
  background: var(--wx-glass-2);
  color: var(--wx-tx-strong);
  border-color: var(--wx-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--wx-acc); background: var(--wx-glow-wash); }

/* 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(--wx-glass-2), var(--wx-glass));
  border: 1px solid var(--wx-line);
  border-radius: var(--wxr-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--wxs-sh);
}

/* The mint inset is the single featured surface, applied by .hero-right,
   .form-card.solo, .cap.feat, .gcard.mid, .cta-band and .calc-results__final.
   Dark-on-light is the restyle's whole argument: it inverts against the
   navy night rather than tinting it. */

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

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--wx-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(7, 21, 35, .72);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--wx-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--wx-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 "Wixonal AI" — no <em>,
   no two-tone span, no partial bolding, in markup or in CSS. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--wxf-mono);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--wx-tx-strong);
  letter-spacing: .04em;
}
.brand img { width: 44px; height: 28px; flex-shrink: 0; }
.brand-name { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
/* Neon underline on the active item, in place of the reference's pill. */
.menu > li > a:not(.btn) {
  position: relative;
  font-size: .88rem;
  color: var(--wx-muted);
  padding-block: 6px;
  transition: color .2s;
}
.menu > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--wx-acc);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}
.menu > li > a:hover, .menu > li > a.on { color: var(--wx-tx-strong); }
.menu > li > a.on::after, .menu > li > a:not(.btn):hover::after { transform: scaleX(1); }
.menu .btn { padding: 9px 20px; font-size: .84rem; }
.menu a.btn-primary { color: #05161f; }

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

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--wx-line-soft);
  background: rgba(232, 255, 244, .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(--wxf-mono);
  font-size: .74rem;
  color: var(--wx-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.tk b { color: var(--wx-tx-strong); font-weight: 500; }
.tk .px { color: var(--wx-tx); }
.tk .up { color: #3be59b; }
.tk .down { color: #ff7a6b; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wx-acc);
  box-shadow: 0 0 10px var(--wx-acc);
  animation: nvPulse 1.8s ease-in-out infinite;
}
@keyframes nvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   HERO — graphite | mint inset
   ============================================================ */
.hero { padding-block: 56px 60px; }
.hero-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius: var(--wxr-xl);
  overflow: hidden;
  border: 1px solid var(--wx-line);
  box-shadow: var(--wxs-sh);
  position: relative;
}
.hero-left {
  background:
    radial-gradient(120% 120% at var(--wx-bloom-x) 0%, rgba(4, 253, 143, .11), transparent 60%),
    linear-gradient(var(--wx-hero-angle), var(--wx-slate-2), var(--wx-slate-1) 68%, #091e2f);
  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(--wxf-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wx-acc-hi);
  padding: 7px 14px;
  border: 1px solid var(--wx-glow-line);
  border-radius: var(--wxr-pill);
  background: var(--wx-glow-wash);
  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(--wx-line-soft);
}
.stat-row:last-child { border-block-end: 1px solid var(--wx-line-soft); }
.stat-row .val {
  font-family: var(--wxf-mono);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--wx-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.stat-row .lbl {
  font-family: var(--wxf-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wx-dim);
  text-align: end;
}

/* hero right — the mint form inset */
.hero-right {
  background: var(--wx-mint-surface);
  color: var(--wx-ink);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(5, 22, 31, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--wx-bloom-x) 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the mint inset) ---- */
.form-card h2 { font-weight: 700; font-size: 1.28rem; color: var(--wx-ink); }
.form-card .note {
  font-family: var(--wxf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wx-acc-deep);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: #fbfffd;
  border: 1px solid rgba(5, 22, 31, .22);
  border-radius: var(--wxr-sm);
  padding: 12px 14px;
  color: var(--wx-ink);
  font-family: var(--wxf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(5, 22, 31, .48); }
.reg input:focus { border-color: var(--wx-acc-deep); box-shadow: 0 0 0 3px rgba(4, 253, 143, .34); }
.reg form > div { margin-block-end: 10px; }
/* ---- phone field (intl-tel-input v25) ----------------------------------
   The library is LTR internally by design: it stamps dir="ltr" on its own
   .iti wrapper even inside an RTL page, pins .iti__country-container to
   left:0, and writes telInput.style.paddingLeft from JS to clear it — there
   is no paddingRight branch anywhere in the source.

   Overriding the container's side while the JS keeps padding the other side
   is what put the digits underneath the dial code. So don't relocate an
   absolutely-positioned overlay: lay the widget out as a flex row where the
   selector is a real item. Nothing then depends on the JS-measured padding,
   which also defuses a race — the intl-tel-input stylesheet loads async, and
   a width measured before it applies is never recalculated.

   The field chrome moves off the input and onto .iti so the selector and the
   digits read as one control. */
.iti {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: #fbfffd;
  border: 1px solid rgba(5, 22, 31, .22);
  border-radius: var(--wxr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--wx-acc-deep); box-shadow: 0 0 0 3px rgba(4, 253, 143, .34); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(5, 22, 31, .14);
}

/* !important is load-bearing: it overrides the inline padding-left the
   library writes on init and on every country change. */
.iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.iti > input[type="tel"]:focus { box-shadow: none; }

.iti__dropdown-content { color: #111; }

/* Selector at the reading start of the form: left in English, right in
   Arabic. row-reverse rather than a direction flip, so the library's own
   dir="ltr" wrapper keeps working. */
[dir="rtl"] .iti { flex-direction: row-reverse; }
[dir="rtl"] .iti__country-container { border-inline-end: none; border-inline-start: 1px solid rgba(5, 22, 31, .14); }

/* Mirror the button's own contents too. The library lays it out as
   [flag ▾][+971], which read right-to-left puts the dial code before the flag
   it belongs to. Both the button and its primary group are separate flex
   containers, so each needs reversing, and the asymmetric paddings/margins
   the library hangs off the physical left have to move with them. */
[dir="rtl"] .iti__selected-country { flex-direction: row-reverse; }
[dir="rtl"] .iti__selected-country-primary {
  flex-direction: row-reverse;
  padding: 0 var(--iti-spacer-horizontal, 8px) 0 var(--iti-arrow-padding, 6px);
}
[dir="rtl"] .iti__arrow { margin-left: 0; margin-right: var(--iti-arrow-padding, 6px); }
[dir="rtl"] .iti .iti__selected-dial-code { margin-left: 0; margin-right: 4px; }
/* The panel is anchored to the container, which now sits at the right edge —
   pin its right edge so it opens leftward instead of overflowing the card. */
[dir="rtl"] .iti__dropdown-content { left: auto; right: 0; margin-left: 0; margin-right: -1px; }

/* Digits are LTR in every locale; the alignment follows the side the dial
   code is on, so the caret always starts beside it. */
#phone { direction: ltr; text-align: left; }
[dir="rtl"] #phone { text-align: right; }

.phone-error {
  display: none;
  margin-block-start: 6px;
  font-size: .78rem;
  line-height: 1.6;
  color: #b3261e;
}
.phone-error.on { display: block; }
/* 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;
}

/* The primary action on a mint panel is CHARCOAL, not neon.
   Neon-on-mint is only a ~1.9:1 luminance step and too small a hue shift
   — the button dissolves into the panel it sits on. Inverting to navy with
   a neon hairline gives the strongest contrast on the page (15.9:1) and keeps
   the neon reserved for accent, which is what makes it read as precious. */
#submit-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(4, 253, 143, .55);
  border-radius: var(--wxr-sm);
  background: linear-gradient(180deg, #0d2739, #05161f);
  color: var(--wx-mint);
  font-family: var(--wxf-disp);
  font-size: .98rem;
  font-weight: 700;
  margin-block-start: 4px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 10px 26px -12px rgba(5, 22, 31, .8);
}
#submit-btn:hover {
  transform: translateY(-2px);
  border-color: var(--wx-acc);
  box-shadow: 0 14px 32px -8px rgba(5, 22, 31, .55), 0 0 22px -12px rgba(4, 253, 143, .8);
}
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--wx-ink-soft);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--wx-acc-deep); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--wx-mint-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--wx-mint-line); }
.trust-item:last-child { border-block-end: none; }
.trust-ico {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(4, 102, 60, .1);
  border: 1px solid rgba(4, 102, 60, .24);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--wx-acc-deep); }
.trust-item b { display: block; font-family: var(--wxf-disp); font-weight: 700; font-size: .94rem; color: var(--wx-ink); line-height: 1.4; }
.trust-item span { font-size: .76rem; color: var(--wx-ink-soft); }

/* ============================================================
   VOICES (text testimonials)
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  border-radius: var(--wxr-lg);
  border: 1px solid var(--wx-line);
  background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--wx-glow-line); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--wx-grad);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--wx-acc); opacity: .38; 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(--wx-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(--wx-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--wxf-disp); font-weight: 700; font-size: .84rem;
  color: #05161f; background: var(--wx-grad);
}
.voice-name { font-family: var(--wxf-disp); font-weight: 700; font-size: .96rem; color: var(--wx-tx-strong); }
.voice-loc { font-family: var(--wxf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wx-acc-hi); }

.stars { display: flex; gap: 3px; }
.stars svg { width: 15px; height: 15px; color: var(--wx-acc); }
/* The bright neon reads at ~1.6:1 on mint — deep neon on the mint
   insets instead. Applies wherever .stars lands on a light surface. */
.cap.feat .stars svg,
.gcard.mid .stars svg { color: var(--wx-acc-deep); }

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--wxr-xl);
  overflow: hidden;
}
/* object-fit: cover, never `fill` — a 800x339 banner and a 800x800 square
   both have to sit in this frame without either being stretched. */
.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(--wx-copy-angle), transparent, rgba(7, 21, 35, .42));
}
.split-copy {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(var(--wx-copy-angle), var(--wx-slate-2), var(--wx-slate-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--wx-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(--wxr-lg);
  border: 1px solid var(--wx-line);
  background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--wx-glow-line); }
.cap.feat {
  background: var(--wx-mint-surface);
  border-color: rgba(232, 255, 244, .5);
  box-shadow: var(--wxs-mint);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--wx-line);
  background: var(--wx-glow-wash);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: rgba(4, 102, 60, .1); border-color: rgba(4, 102, 60, .24); }
.cap-ico svg { width: 22px; height: 22px; color: var(--wx-acc-hi); }
.cap.feat .cap-ico svg { color: var(--wx-acc-deep); }
.cap h3 { font-size: 1.1rem; font-weight: 700; margin-block-end: 10px; }
.cap p { color: var(--wx-muted); font-size: .92rem; line-height: 1.8; }
.cap.feat h3 { color: var(--wx-ink); }
.cap.feat p { color: var(--wx-ink-soft); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--wx-line);
  border-radius: var(--wxr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--wx-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--wxf-mono);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--wx-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.metric .val b { font-weight: 400; color: var(--wx-acc-hi); }
.metric .lbl { font-family: var(--wxf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-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(--wx-line); border-radius: var(--wxr-md); padding: 26px 24px; background: var(--wx-glass); }
.agg .v { font-family: var(--wxf-mono); font-weight: 400; font-size: 2.2rem; color: var(--wx-tx-strong); direction: ltr; unicode-bidi: isolate; }
.agg .v b { color: var(--wx-acc-hi); font-weight: 400; }
.agg .l { color: var(--wx-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(--wx-line);
  border-radius: var(--wxr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--wx-grad); box-shadow: var(--wxs-glow);
}
.step .num { font-family: var(--wxf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--wx-acc-hi); }
.step h3 { font-size: 1.06rem; font-weight: 700; margin-block: 8px; }
.step p { color: var(--wx-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(--wxr-lg);
  border: 1px solid var(--wx-line);
  background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--wx-mint-surface);
  border-color: rgba(232, 255, 244, .5);
  box-shadow: var(--wxs-mint);
}
.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(--wxf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wx-acc-hi);
  padding: 5px 10px;
  border-radius: var(--wxr-pill);
  border: 1px solid var(--wx-line);
  background: var(--wx-glow-wash);
}
.gcard.mid .gbadge { color: var(--wx-acc-deep); border-color: rgba(4, 102, 60, .3); background: rgba(4, 102, 60, .1); }
.gbadge svg { width: 11px; height: 11px; }
/* The tagline is mixed ("BTC/USDT · 3 أشهر"), so it must inherit the page
   direction — forcing direction:ltr here reorders the Arabic half. The Latin
   ticker symbol carries its own <bdi> in the markup instead. */
.gcard .tagline { font-family: var(--wxf-mono); font-size: .64rem; color: var(--wx-dim); }
.gcard.mid .tagline { color: var(--wx-ink-soft); }
.gsum { font-family: var(--wxf-mono); font-weight: 400; font-size: 2.5rem; color: var(--wx-tx-strong); direction: ltr; unicode-bidi: isolate; }
.gcard.mid .gsum { color: var(--wx-ink); }
.gper { font-family: var(--wxf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wx-acc-hi); margin-block-end: 14px; }
.gcard.mid .gper { color: var(--wx-acc-deep); }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--wx-acc-hi); stroke-width: 2; }
.gcard.mid .gspark .ln { stroke: var(--wx-acc-deep); }
.gqt { font-size: .92rem; color: var(--wx-muted); line-height: 1.8; margin-block-end: 18px; }
.gcard.mid .gqt { color: var(--wx-ink-soft); }
.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(--wxf-disp); font-weight: 700; font-size: .82rem;
  color: #05161f; background: var(--wx-grad);
}
.gcard.mid .gav { background: var(--wx-acc-deep); color: var(--wx-mint); }
.gnm { font-family: var(--wxf-disp); font-weight: 700; font-size: .94rem; color: var(--wx-tx-strong); }
.gcard.mid .gnm { color: var(--wx-ink); }
.gcity { font-family: var(--wxf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wx-dim); }
.gcard.mid .gcity { color: var(--wx-ink-soft); }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 20px;
  padding: 12px 20px;
  font-family: var(--wxf-disp); font-weight: 700; font-size: .9rem;
  border-radius: var(--wxr-pill);
  border: 1px solid transparent;
  background: var(--wx-acc);
  color: #05161f;
  box-shadow: var(--wxs-glow);
  transition: transform .25s, box-shadow .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover { transform: translateY(-2px); box-shadow: 0 0 40px -8px rgba(4, 253, 143, .75); }
.gcard.mid .gcta {
  background: linear-gradient(180deg, #0d2739, #05161f);
  color: var(--wx-mint);
  border-color: rgba(4, 253, 143, .55);
  box-shadow: 0 8px 24px -10px rgba(5, 22, 31, .6);
}
.gcard.mid .gcta:hover {
  border-color: var(--wx-acc);
  box-shadow: 0 14px 32px -10px rgba(5, 22, 31, .7), 0 0 24px -12px rgba(4, 253, 143, .8);
}

.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(--wx-glass-2);
  border: 1px solid var(--wx-line);
  color: var(--wx-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--wx-acc); background: var(--wx-glow-wash); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wx-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--wxr-pill); background: var(--wx-grad); }

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

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--wxr-xl);
  padding: 64px 40px;
  text-align: center;
  background: var(--wx-mint-surface);
  border: 1px solid rgba(232, 255, 244, .5);
  box-shadow: var(--wxs-mint);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(5, 22, 31, .07) 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: var(--wx-ink); margin-block-end: 14px; }
.cta-band .display .hi { color: var(--wx-acc-deep); }
.cta-band p { color: var(--wx-ink-soft); margin-inline: auto; margin-block-end: 28px; max-width: 48ch; }
/* same inversion as #submit-btn — navy is the primary on mint */
.cta-band .btn-primary {
  background: linear-gradient(180deg, #0d2739, #05161f);
  color: var(--wx-mint);
  border-color: rgba(4, 253, 143, .55);
  box-shadow: 0 12px 30px -14px rgba(5, 22, 31, .8);
}
.cta-band .btn-primary:hover {
  border-color: var(--wx-acc);
  box-shadow: 0 18px 40px -14px rgba(5, 22, 31, .8), 0 0 26px -12px rgba(4, 253, 143, .8);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-block-start: 1px solid var(--wx-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(--wx-muted); font-size: .9rem; max-width: 38ch; }
.footer-col h2 { font-family: var(--wxf-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wx-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(--wx-muted); font-size: .9rem; transition: color .2s; }
.footer-col a:hover { color: var(--wx-acc-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--wx-line-soft);
  margin-block-start: 48px; padding-block: 22px;
  font-size: .82rem; color: var(--wx-dim);
}
.footer-bar .lnk { display: flex; gap: 20px; }
.footer-bar a:hover { color: var(--wx-acc-hi); }

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

/* ============================================================
   REVEAL
   ============================================================ */
.wx-lift { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.wx-lift.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wx-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(--wx-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--wxf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wx-dim); margin-block-start: 14px; }

/* Capped at the photos' intrinsic 800px width so the image fills the frame
   exactly — a wider frame would leave a bare strip at the inline end. The
   frame is height-agnostic, which is what lets the 800x339 performance banner
   and the 800x436 team photo sit beside the 800x800 squares without any of
   them being stretched. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--wxr-xl); overflow: hidden; border: 1px solid var(--wx-line); box-shadow: var(--wxs-sh); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame.wide img { aspect-ratio: 16 / 7; height: auto; object-fit: cover; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--wx-copy-angle), transparent, rgba(7, 21, 35, .34)); pointer-events: none; }

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

.cap.team { text-align: center; }
.cap.team .role { font-family: var(--wxf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wx-acc-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(--wxf-disp); font-weight: 700; color: #05161f;
  background: var(--wx-grad); box-shadow: var(--wxs-glow);
}

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--wxr-lg); border: 1px solid var(--wx-line); background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--wx-glow-line); }
.post-tag { align-self: flex-start; font-family: var(--wxf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--wxr-pill); margin-block-end: 14px; border: 1px solid var(--wx-line); }
.post-tag.ai { color: var(--wx-mint-2); background: rgba(232, 255, 244, .08); border-color: rgba(232, 255, 244, .22); }
.post-tag.crypto { color: var(--wx-acc-hi); background: var(--wx-glow-wash); border-color: rgba(4, 253, 143, .26); }
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--wx-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(--wx-line-soft); font-family: var(--wxf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wx-dim); }

/* FAQ accordion — WAI-ARIA APG pattern: the button lives INSIDE the heading,
   so the document outline and the disclosure semantics are both correct. */
.faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--wx-line); border-radius: var(--wxr-md); background: linear-gradient(180deg, var(--wx-glass-2), var(--wx-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: var(--wx-glow-line); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.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(--wxf-disp); font-size: 1rem; font-weight: 500;
  color: var(--wx-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--wx-acc-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--wx-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: 480px; }
.faq-a p { padding: 0 24px 20px; color: var(--wx-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(--wxr-lg); overflow: hidden; border: 1px solid var(--wx-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: 10px; border: 1px solid var(--wx-line); background: var(--wx-glow-wash); }
.info-ico svg { width: 20px; height: 20px; color: var(--wx-acc-hi); }
.info-row h3 { font-size: 1rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--wx-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(--wx-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--wx-acc-hi); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden here — it would clip the country dropdown, which is
   absolutely positioned inside the form. The dot layer takes the corner
   radius itself instead, which is all the clip was ever for. */
.form-card.solo {
  background: var(--wx-mint-surface);
  border: 1px solid rgba(232, 255, 244, .5);
  border-radius: var(--wxr-lg);
  box-shadow: var(--wxs-mint);
  color: var(--wx-ink);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(5, 22, 31, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--wx-bloom-x) 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

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

/* standalone centred notice (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: 20px; background: var(--wx-glow-wash); border: 1px solid var(--wx-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--wx-acc-hi); }
.notice p { color: var(--wx-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 30px; }

/* ============================================================
   CONFIRMATION (thanks)

   The check is a status marker, not the hero. It rides at 13px
   inside .hero-chip, where it qualifies the label instead of
   announcing itself, and the headline carries the page. .notice
   stays as it is — 404 still wants a single centred icon block.
   ============================================================ */
.confirm { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 40px 8px; }
/* .hero-chip is inline-flex, so text-align centres it; its align-self
   is inert outside the hero's flex column. */
.confirm h1 { margin-block-end: 18px; }
.confirm .lede { margin-inline: auto; max-width: 52ch; }
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block-start: 34px;
}
/* Hairline + the one practical instruction, a step below .lede so the
   eye reaches the actions first. */
.confirm-note {
  max-width: 46ch;
  margin-inline: auto;
  margin-block-start: 32px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--wx-line-soft);
  color: var(--wx-dim);
  font-size: .86rem;
}

/* ============================================================
   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 h2,
[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"] .gcard .tagline,
[dir="rtl"] .brand,
[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: 700;
}

/* Latin tokens keep their tracking — that is where the mono texture lives.
   .wx-ltr wins over the neutralisation block above by source order, so an
   isolated Latin run inside a neutralised label keeps its letter-spacing. */
[dir="rtl"] .wx-ltr,
[dir="rtl"] .brand-name,
[dir="rtl"] .tk { 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.5; 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(--wx-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 { --wx-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--wx-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(7, 21, 35, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--wx-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: 62px; }
  .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(--wx-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; }
  .confirm { padding-block-start: 24px; }
  .confirm-actions { flex-direction: column; align-items: stretch; }
  .confirm-actions .btn { justify-content: center; }
}