/* ============================================================
   Duvnok — "Deep Emerald + Cream"
   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 emerald-black canvas  (body, cards, splits)
     · the cream inset           (form panels, featured cards, CTA bands)

   The emerald is sampled off the brand mark: the logo's pale mint face
   (#c9f8e0) at the light end, the lockup's field green at the deep end.
   Nothing else on the page is chroma.
   ============================================================ */

:root {
  /* base — emerald black. Neutral greys would fight the mark; every step
     here carries a slight green cast so the accent reads as belonging. */
  --dv-bg: #0a0f0c;
  --dv-bg-2: #0e1411;
  --dv-slate-1: #131b17;
  --dv-slate-2: #1a241f;
  --dv-graphite-1: #222e28;
  --dv-graphite-2: #2e3d35;

  /* accent — the logo emerald */
  --dv-acc: #34d399;
  --dv-acc-hi: #6ee7b7;
  --dv-acc-deep: #0a5c3c;   /* the only emerald legible as TEXT on cream */
  --dv-grad: linear-gradient(135deg, #f5efe1 0%, #34d399 55%, #065f43 100%);
  --dv-em-wash: rgba(52, 211, 153, .1);
  --dv-em-line: rgba(52, 211, 153, .3);
  /* ink for text sitting ON a full-strength emerald fill (9.6:1) */
  --dv-on-acc: #06231a;

  /* cream — inset surfaces and the ink that sits on them */
  --dv-cream: #f5efe1;
  --dv-cream-2: #e8dfcb;
  --dv-ink: #101613;
  --dv-ink-soft: #414a44;
  --dv-cream-line: rgba(16, 22, 19, .14);
  --dv-cream-surface: linear-gradient(var(--dv-panel-angle), #f8f3e8, #ebe1cd);

  /* text on the emerald-black canvas */
  --dv-tx: rgba(240, 247, 242, .76);
  --dv-tx-strong: #f2f8f4;
  --dv-muted: #a8b5ac;
  /* Tertiary labels (.metric .lbl, .post-meta, .calc-form__label) sit on the
     lifted glass cards, not on --dv-bg. Measured against that ground
     (~#181d1a) this lands at 5.87:1; anything dimmer drops under AA. */
  --dv-dim: #8d9c93;

  /* lines / glass */
  --dv-line: rgba(240, 247, 242, .1);
  --dv-line-soft: rgba(240, 247, 242, .055);
  --dv-glass: rgba(240, 247, 242, .028);
  --dv-glass-2: rgba(240, 247, 242, .05);

  /* radii — editorial rather than rounded-app */
  --dvr-sm: 8px;
  --dvr-md: 12px;
  --dvr-lg: 18px;
  --dvr-xl: 24px;
  --dvr-pill: 9999px;

  /* shadow / glow — a close cool halo, not a wide bloom */
  --dvs-sh: 0 28px 70px -28px rgba(0, 0, 0, .86);
  --dvs-glow: 0 0 30px -10px rgba(52, 211, 153, .5);
  --dvs-cream: 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.
     'Duvnok Fallback' pins the pre-swap face to a font that actually has
     Arabic coverage on each platform, so the swap is Tajawal->Tajawal-ish
     rather than default-serif->Tajawal. */
  --dvf-disp: 'Tajawal', 'Duvnok Fallback', 'Segoe UI', sans-serif;
  --dvf-body: 'Tajawal', 'Duvnok Fallback', 'Segoe UI', sans-serif;
  --dvf-mono: 'Space Grotesk', 'Tajawal', 'Duvnok Fallback', sans-serif;

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

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

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

/* Deterministic pre-swap face. Every name here has full Arabic coverage on
   its platform; without it the browser falls back to a default serif whose
   metrics are far from Tajawal's, which is what makes the swap visible. */
@font-face {
  font-family: 'Duvnok Fallback';
  src: local('Segoe UI'), local('Tahoma'), local('Geeza Pro'),
       local('Noto Sans Arabic'), local('Arial');
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

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

/* ---- emerald night ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(52, 211, 153, .09), transparent 55%),
    radial-gradient(90% 60% at var(--dv-bloom-x) 8%, rgba(46, 61, 53, .5), transparent 62%),
    linear-gradient(180deg, #0e1411 0%, #0a0f0c 42%, #070b09 100%);
}
/* cream shaft — the light source the cream insets are lit by */
body::after {
  content: "";
  position: fixed;
  top: -10%;
  inset-inline-start: 50%;
  width: 38vw;
  height: 120%;
  transform: translateX(-50%) rotate(var(--dv-shaft-tilt));
  z-index: -2;
  background: linear-gradient(180deg, rgba(110, 231, 183, .07), rgba(245, 239, 225, .014) 32%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  opacity: .7;
}
[dir="rtl"] body::after { transform: translateX(50%) rotate(var(--dv-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; }
/* Every photo is wrapped in <picture> to offer the WebP source. <picture> is
   display:inline by default, and .split-media img / .media-frame--wide img
   both use height:100% -- which would resolve against that auto-height inline
   box and collapse the image. display:contents removes the wrapper from layout
   entirely, so the <img> stays a direct child of the frame for sizing. */
picture { display: contents; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--dv-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(--dvr-sm) var(--dvr-sm);
  background: var(--dv-acc); color: var(--dv-on-acc);
  font-family: var(--dvf-disp); font-weight: 700; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

:focus-visible { outline: 2px solid var(--dv-acc-hi); outline-offset: 2px; }

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

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--dvf-disp);
  color: var(--dv-tx-strong);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.display {
  font-family: var(--dvf-disp);
  font-weight: 300;
  line-height: 1.35;
  color: var(--dv-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 emerald instead. */
.display .hi { font-weight: 500; color: var(--dv-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(--dvf-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-muted);
}
.eyebrow.acc { color: var(--dv-acc-hi); }

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

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--dvf-disp);
  font-weight: 500;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--dvr-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(--dv-acc); color: var(--dv-on-acc); font-weight: 700; box-shadow: var(--dvs-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 44px -6px rgba(52, 211, 153, .7); }
.btn-ghost {
  background: var(--dv-glass-2);
  color: var(--dv-tx-strong);
  border-color: var(--dv-line);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: var(--dv-acc); background: var(--dv-em-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(--dv-glass-2), var(--dv-glass));
  border: 1px solid var(--dv-line);
  border-radius: var(--dvr-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--dvs-sh);
}

/* The cream 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
   emerald 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(--dv-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--dv-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(10, 15, 12, .72);
  backdrop-filter: blur(18px);
  border-block-end: 1px solid var(--dv-line-soft);
}
.nav-in {
  width: 100%;
  max-width: var(--dv-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 "Duvnok" — 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(--dvf-mono);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--dv-tx-strong);
  letter-spacing: .04em;
}
.brand img { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 26px; list-style: none; }
/* Emerald underline on the active item. */
.menu > li > a:not(.btn) {
  position: relative;
  font-size: .88rem;
  color: var(--dv-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(--dv-acc);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s ease;
}
.menu > li > a:hover, .menu > li > a.on { color: var(--dv-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: var(--dv-on-acc); }

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

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.crumbs { padding-block: 18px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--dvf-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-dim); }
.crumbs a { color: var(--dv-muted); transition: color .2s; }
.crumbs a:hover { color: var(--dv-acc-hi); }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--dv-line); }
.crumbs [aria-current="page"] { color: var(--dv-tx-strong); }

/* ============================================================
   TICKER
   ============================================================ */
/* min-height is load-bearing: the track is populated from a network fetch, so
   without a reserved box the strip collapses to nothing and then expands when
   CoinGecko resolves, shifting the whole page below it. */
.ticker {
  border-block: 1px solid var(--dv-line-soft);
  background: rgba(240, 247, 242, .012);
  overflow: hidden;
  white-space: nowrap;
  min-height: 45px;
}
.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(--dvf-mono);
  font-size: .74rem;
  color: var(--dv-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.tk b { color: var(--dv-tx-strong); font-weight: 500; }
.tk .px { color: var(--dv-tx); }
.tk .up { color: #6ee7b7; }
.tk .down { color: #f4907f; }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dv-acc);
  box-shadow: 0 0 10px var(--dv-acc);
  animation: dvPulse 1.8s ease-in-out infinite;
}
@keyframes dvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

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

/* hero right — the cream form inset */
.hero-right {
  background: var(--dv-cream-surface);
  color: var(--dv-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(16, 22, 19, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--dv-bloom-x) 0%, #000, transparent 70%);
}
.hero-right > * { position: relative; }

/* ---- registration form (lives on the cream inset) ---- */
.form-card h2 { font-weight: 700; font-size: 1.28rem; color: var(--dv-ink); }
.form-card .note {
  font-family: var(--dvf-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dv-acc-deep);
  margin-block: 5px 16px;
}
.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: #fffdf8;
  border: 1px solid rgba(16, 22, 19, .22);
  border-radius: var(--dvr-sm);
  padding: 12px 14px;
  color: var(--dv-ink);
  font-family: var(--dvf-body);
  font-size: .92rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(16, 22, 19, .48); }
.reg input:focus { border-color: var(--dv-acc-deep); box-shadow: 0 0 0 3px rgba(52, 211, 153, .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: #fffdf8;
  border: 1px solid rgba(16, 22, 19, .22);
  border-radius: var(--dvr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.iti:focus-within { border-color: var(--dv-acc-deep); box-shadow: 0 0 0 3px rgba(52, 211, 153, .34); }

.iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(16, 22, 19, .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(16, 22, 19, .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: #a3241b;
}
.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 cream panel is DARK, not emerald.
   Emerald-on-cream is only a ~2:1 luminance step — the button dissolves into
   the panel it sits on. Inverting to near-black with an emerald hairline gives
   the strongest contrast on the page and keeps the emerald reserved for
   accent, which is what makes it read as deliberate. */
#submit-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(52, 211, 153, .55);
  border-radius: var(--dvr-sm);
  background: linear-gradient(180deg, #1c2620, #101613);
  color: var(--dv-cream);
  font-family: var(--dvf-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(16, 22, 19, .8);
}
#submit-btn:hover {
  transform: translateY(-2px);
  border-color: var(--dv-acc);
  box-shadow: 0 14px 32px -8px rgba(16, 22, 19, .55), 0 0 22px -12px rgba(52, 211, 153, .8);
}
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--dv-ink-soft);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--dv-acc-deep); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--dv-cream-line); }
.trust-item { display: flex; align-items: center; gap: 13px; padding-block: 14px; border-block-end: 1px solid var(--dv-cream-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(10, 92, 60, .1);
  border: 1px solid rgba(10, 92, 60, .24);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--dv-acc-deep); }
.trust-item b { display: block; font-family: var(--dvf-disp); font-weight: 700; font-size: .94rem; color: var(--dv-ink); line-height: 1.4; }
.trust-item span { font-size: .76rem; color: var(--dv-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(--dvr-lg);
  border: 1px solid var(--dv-line);
  background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.voice:hover { transform: translateY(-5px); border-color: var(--dv-em-line); }
.voice::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--dv-grad);
  opacity: .7;
}
.voice-mark { width: 34px; height: 34px; color: var(--dv-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(--dv-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(--dv-line-soft); }
.voice-av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--dvf-disp); font-weight: 700; font-size: .84rem;
  color: var(--dv-on-acc); background: var(--dv-grad);
}
.voice-name { font-family: var(--dvf-disp); font-weight: 700; font-size: .96rem; color: var(--dv-tx-strong); }
.voice-loc { font-family: var(--dvf-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-acc-hi); }

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

/* ============================================================
   SPLIT (image + copy)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--dvr-xl);
  overflow: hidden;
}
/* object-fit: cover, never `fill` — the frame's aspect is set by the layout,
   the photo's by its own pixels, and the two are not the same. cover crops;
   fill would stretch. */
.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(--dv-copy-angle), transparent, rgba(10, 15, 12, .42));
}
.split-copy {
  padding: 54px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(var(--dv-copy-angle), var(--dv-slate-2), var(--dv-slate-1));
}
.split-copy .eyebrow { margin-block-end: 14px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--dv-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(--dvr-lg);
  border: 1px solid var(--dv-line);
  background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass));
  padding: 30px 28px;
  transition: transform .3s, border-color .3s, background .3s;
  position: relative;
  overflow: hidden;
}
.cap:hover { transform: translateY(-4px); border-color: var(--dv-em-line); }
.cap.feat {
  background: var(--dv-cream-surface);
  border-color: rgba(245, 239, 225, .5);
  box-shadow: var(--dvs-cream);
}
.cap-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--dv-line);
  background: var(--dv-em-wash);
  margin-block-end: 18px;
}
.cap.feat .cap-ico { background: rgba(10, 92, 60, .1); border-color: rgba(10, 92, 60, .24); }
.cap-ico svg { width: 22px; height: 22px; color: var(--dv-acc-hi); }
.cap.feat .cap-ico svg { color: var(--dv-acc-deep); }
.cap h3 { font-size: 1.1rem; font-weight: 700; margin-block-end: 10px; }
.cap p { color: var(--dv-muted); font-size: .92rem; line-height: 1.8; }
.cap.feat h3 { color: var(--dv-ink); }
.cap.feat p { color: var(--dv-ink-soft); }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--dv-line);
  border-radius: var(--dvr-lg);
  overflow: hidden;
  background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass));
}
.metric { padding: 34px 26px; text-align: center; border-inline-end: 1px solid var(--dv-line-soft); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--dvf-mono);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: var(--dv-tx-strong);
  direction: ltr;
  unicode-bidi: isolate;
}
.metric .val b { font-weight: 400; color: var(--dv-acc-hi); }
.metric .lbl { font-family: var(--dvf-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dv-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(--dv-line); border-radius: var(--dvr-md); padding: 26px 24px; background: var(--dv-glass); }
.agg .v { font-family: var(--dvf-mono); font-weight: 400; font-size: 2.2rem; color: var(--dv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.agg .v b { color: var(--dv-acc-hi); font-weight: 400; }
.agg .l { color: var(--dv-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(--dv-line);
  border-radius: var(--dvr-lg);
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass));
  position: relative;
}
.step-dot {
  position: absolute;
  inset-block-start: 28px;
  inset-inline-end: 26px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dv-grad); box-shadow: var(--dvs-glow);
}
.step .num { font-family: var(--dvf-mono); font-size: .72rem; letter-spacing: .1em; color: var(--dv-acc-hi); }
.step h3 { font-size: 1.06rem; font-weight: 700; margin-block: 8px; }
.step p { color: var(--dv-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(--dvr-lg);
  border: 1px solid var(--dv-line);
  background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass));
  padding: 30px 28px;
  transition: border-color .3s, transform .3s;
}
.gcard.mid {
  background: var(--dv-cream-surface);
  border-color: rgba(245, 239, 225, .5);
  box-shadow: var(--dvs-cream);
}
.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(--dvf-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dv-acc-hi);
  padding: 5px 10px;
  border-radius: var(--dvr-pill);
  border: 1px solid var(--dv-line);
  background: var(--dv-em-wash);
}
.gcard.mid .gbadge { color: var(--dv-acc-deep); border-color: rgba(10, 92, 60, .3); background: rgba(10, 92, 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(--dvf-mono); font-size: .64rem; color: var(--dv-dim); }
.gcard.mid .tagline { color: var(--dv-ink-soft); }
.gsum { font-family: var(--dvf-mono); font-weight: 400; font-size: 2.5rem; color: var(--dv-tx-strong); direction: ltr; unicode-bidi: isolate; }
.gcard.mid .gsum { color: var(--dv-ink); }
.gper { font-family: var(--dvf-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dv-acc-hi); margin-block-end: 14px; }
.gcard.mid .gper { color: var(--dv-acc-deep); }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--dv-acc-hi); stroke-width: 2; }
.gcard.mid .gspark .ln { stroke: var(--dv-acc-deep); }
.gqt { font-size: .92rem; color: var(--dv-muted); line-height: 1.8; margin-block-end: 18px; }
.gcard.mid .gqt { color: var(--dv-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(--dvf-disp); font-weight: 700; font-size: .82rem;
  color: var(--dv-on-acc); background: var(--dv-grad);
}
.gcard.mid .gav { background: var(--dv-acc-deep); color: var(--dv-cream); }
.gnm { font-family: var(--dvf-disp); font-weight: 700; font-size: .94rem; color: var(--dv-tx-strong); }
.gcard.mid .gnm { color: var(--dv-ink); }
.gcity { font-family: var(--dvf-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dv-dim); }
.gcard.mid .gcity { color: var(--dv-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(--dvf-disp); font-weight: 700; font-size: .9rem;
  border-radius: var(--dvr-pill);
  border: 1px solid transparent;
  background: var(--dv-acc);
  color: var(--dv-on-acc);
  box-shadow: var(--dvs-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(52, 211, 153, .75); }
.gcard.mid .gcta {
  background: linear-gradient(180deg, #1c2620, #101613);
  color: var(--dv-cream);
  border-color: rgba(52, 211, 153, .55);
  box-shadow: 0 8px 24px -10px rgba(16, 22, 19, .6);
}
.gcard.mid .gcta:hover {
  border-color: var(--dv-acc);
  box-shadow: 0 14px 32px -10px rgba(16, 22, 19, .7), 0 0 24px -12px rgba(52, 211, 153, .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(--dv-glass-2);
  border: 1px solid var(--dv-line);
  color: var(--dv-tx-strong);
  transition: .25s;
}
.cbtn:hover { border-color: var(--dv-acc); background: var(--dv-em-wash); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dv-line); border: none; transition: .25s; padding: 0; }
.dot.on { width: 26px; border-radius: var(--dvr-pill); background: var(--dv-grad); }

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

/* ============================================================
   CTA
   ============================================================ */
.cta-band {
  border-radius: var(--dvr-xl);
  padding: 64px 40px;
  text-align: center;
  background: var(--dv-cream-surface);
  border: 1px solid rgba(245, 239, 225, .5);
  box-shadow: var(--dvs-cream);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(16, 22, 19, .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(--dv-ink); margin-block-end: 14px; }
.cta-band .display .hi { color: var(--dv-acc-deep); }
.cta-band p { color: var(--dv-ink-soft); margin-inline: auto; margin-block-end: 28px; max-width: 48ch; }
/* same inversion as #submit-btn — near-black is the primary on cream */
.cta-band .btn-primary {
  background: linear-gradient(180deg, #1c2620, #101613);
  color: var(--dv-cream);
  border-color: rgba(52, 211, 153, .55);
  box-shadow: 0 12px 30px -14px rgba(16, 22, 19, .8);
}
.cta-band .btn-primary:hover {
  border-color: var(--dv-acc);
  box-shadow: 0 18px 40px -14px rgba(16, 22, 19, .8), 0 0 26px -12px rgba(52, 211, 153, .8);
}

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

/* The risk bar is a legal disclosure on a YMYL page, not fine print to be
   hidden. It gets a visible top rule and a lifted lead sentence. */
.risk { background: rgba(240, 247, 242, .012); border-block-start: 1px solid var(--dv-em-line); padding-block: 22px; }
.risk p { font-size: .76rem; color: var(--dv-dim); line-height: 1.8; max-width: var(--dv-mw); }
.risk b { color: var(--dv-muted); font-weight: 700; }

/* ============================================================
   REVEAL

   Inverted from the usual pattern on purpose. Content is VISIBLE by default
   and the hidden-then-reveal state is opted into by an inline script that
   sets .js-on before first paint. If the JS never runs — a CDN timeout, a
   script error, or a renderer that gives up early — the page still has all
   of its text. The usual `opacity: 0` default silently hides most of the
   body from anything that does not execute JavaScript.
   ============================================================ */
.js-on .dv-rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js-on .dv-rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-on .dv-rise { 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(--dv-muted); margin-inline: auto; margin-block-start: 16px; max-width: 62ch; }
.page-head .updated { font-family: var(--dvf-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dv-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. Every
   photo on this site is 1:1, so the default frame is height-agnostic and the
   square simply renders square. */
.media-frame { max-width: 800px; margin-inline: auto; border-radius: var(--dvr-xl); overflow: hidden; border: 1px solid var(--dv-line); box-shadow: var(--dvs-sh); position: relative; }
.media-frame img { width: 100%; height: auto; }
.media-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--dv-copy-angle), transparent, rgba(10, 15, 12, .34)); pointer-events: none; }

/* Banner variant. The source photo is square but this slot wants a letterbox,
   so the FRAME carries the aspect and the image covers it. The ratio lives
   here rather than in the width/height attributes precisely so the browser
   crops instead of stretching — the attributes stay at the file's true
   800x800 and CLS is still zero because the frame reserves the box. */
.media-frame--wide { aspect-ratio: 21 / 9; }
.media-frame--wide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

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

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

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border-radius: var(--dvr-lg); border: 1px solid var(--dv-line); background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass)); padding: 28px 26px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--dv-em-line); }
.post-tag { align-self: flex-start; font-family: var(--dvf-mono); font-size: .6rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--dvr-pill); margin-block-end: 14px; border: 1px solid var(--dv-line); }
.post-tag.ai { color: var(--dv-cream-2); background: rgba(245, 239, 225, .08); border-color: rgba(245, 239, 225, .22); }
.post-tag.crypto { color: var(--dv-acc-hi); background: var(--dv-em-wash); border-color: rgba(52, 211, 153, .26); }
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.5; margin-block-end: 10px; }
.post p { color: var(--dv-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(--dv-line-soft); font-family: var(--dvf-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dv-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(--dv-line); border-radius: var(--dvr-md); background: linear-gradient(180deg, var(--dv-glass-2), var(--dv-glass)); overflow: hidden; transition: border-color .3s; }
.faq-item:hover { border-color: var(--dv-em-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(--dvf-disp); font-size: 1rem; font-weight: 500;
  color: var(--dv-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--dv-acc-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--dv-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(--dv-muted); font-size: .94rem; line-height: 1.9; }
/* Without JS there is no .open class, so the answers would be unreachable.
   Reveal them all when the reveal layer never initialises. */
html:not(.js-on) .faq-a { max-height: none; }

.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(--dvr-lg); overflow: hidden; border: 1px solid var(--dv-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(--dv-line); background: var(--dv-em-wash); }
.info-ico svg { width: 20px; height: 20px; color: var(--dv-acc-hi); }
.info-row h3 { font-size: 1rem; font-weight: 700; margin-block-end: 3px; }
.info-row p { color: var(--dv-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(--dv-muted); font-size: .95rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--dv-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(--dv-cream-surface);
  border: 1px solid rgba(245, 239, 225, .5);
  border-radius: var(--dvr-lg);
  box-shadow: var(--dvs-cream);
  color: var(--dv-ink);
  padding: 36px 34px;
  position: relative;
}
.form-card.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(16, 22, 19, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 90% at var(--dv-bloom-x) 0%, #000, transparent 70%);
}
.form-card.solo > * { position: relative; }

/* Risk note beside the form — a signup panel on a financial product has to
   carry the warning where the decision is made, not only in the footer. */
.form-risk { font-size: .72rem; line-height: 1.75; color: var(--dv-ink-soft); margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--dv-cream-line); }

.legal { max-width: 840px; margin-inline: auto; }
.legal h2 { font-family: var(--dvf-disp); font-size: 1.26rem; font-weight: 700; color: var(--dv-tx-strong); margin-block: 34px 12px; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--dv-muted); font-size: .95rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--dv-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: 20px; background: var(--dv-em-wash); border: 1px solid var(--dv-line); }
.notice .ico svg { width: 34px; height: 34px; color: var(--dv-acc-hi); }
.notice p { color: var(--dv-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 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"] .crumbs ol,
[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.
   .dv-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"] .dv-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(--dv-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-frame--wide { aspect-ratio: 16 / 9; }
}

@media (max-width: 680px) {
  :root { --dv-nav-h: 66px; }
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--dv-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 18px 24px 24px;
    background: rgba(10, 15, 12, .97);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--dv-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(--dv-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; }
  .media-frame--wide { aspect-ratio: 4 / 3; }
}