/* ============================================================
   Wuzmiq — "Obsidian & Gilt"
   Corporate dark system, Arabic / RTL first, English / LTR mirror.
   Layout is written in logical properties, so [dir] alone flips it.

   One canvas (layered charcoal), one metal (the logo's gold ramp),
   hairlines instead of panels. Gold is sampled from the Wuzmiq mark:
   deep #B79845 bottom-left -> #D0B05B -> light #E2C069 top-right.
   ============================================================ */

:root {
  /* charcoal layers */
  --wq-bg: #0f1012;
  --wq-bg-2: #141518;
  --wq-surface: #1a1b1f;
  --wq-surface-2: #212328;
  --wq-raise: #2a2c32;
  --wq-field: #111215;

  /* gold */
  --wq-gold: #c9a45c;
  --wq-gold-hi: #e7cb86;
  --wq-gold-deep: #8e6b2a;
  --wq-metal: linear-gradient(115deg, #8e6b2a 0%, #c9a45c 38%, #f0d897 62%, #c9a45c 100%);
  --wq-gold-wash: rgba(201, 164, 92, .08);
  --wq-gold-line: rgba(201, 164, 92, .28);
  --wq-on-gold: #16140f;

  /* text */
  --wq-tx: #d9d6cf;
  --wq-tx-strong: #f4f1ea;
  --wq-muted: #a19d94;
  --wq-dim: #8c887f;
  --wq-up: #4cc38a;
  --wq-down: #e5675a;
  --wq-error: #f08a7e;

  /* lines */
  --wq-line: rgba(255, 255, 255, .08);
  --wq-line-soft: rgba(255, 255, 255, .05);

  /* radii — tight, corporate */
  --wqr-xs: 2px;
  --wqr-sm: 4px;
  --wqr-md: 8px;
  --wqr-lg: 12px;
  --wqr-pill: 9999px;

  /* shadows */
  --wqs-card: 0 24px 60px -30px rgba(0, 0, 0, .85);
  --wqs-lift: 0 30px 70px -28px rgba(0, 0, 0, .9);
  --wqs-gold: 0 12px 34px -14px rgba(201, 164, 92, .55);

  /* fonts — Arabic pages; English overrides below */
  --wqf-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --wqf-disp: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --wqf-num: 'Montserrat', 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;

  --wq-mw: 1220px;
  --wq-nav-h: 74px;

  /* direction-dependent geometry (flipped under RTL) */
  --wq-motif-angle: 60deg;
  --wq-glow-x: 85%;
}

[dir="rtl"] {
  --wq-motif-angle: 120deg;
  --wq-glow-x: 15%;
}

html[lang="en"] {
  --wqf-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --wqf-disp: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --wqf-num: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

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

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

body {
  font-family: var(--wqf-body);
  font-size: 1rem;
  background: var(--wq-bg);
  color: var(--wq-tx);
  line-height: 1.75;
  padding-block-start: var(--wq-nav-h);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* charcoal depth: a warm top light and a cool floor */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at var(--wq-glow-x) -5%, rgba(201, 164, 92, .08), transparent 60%),
    linear-gradient(180deg, #141518 0%, #0f1012 38%, #0b0c0e 100%);
}

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: rgba(201, 164, 92, .35); color: var(--wq-tx-strong); }

:focus-visible { outline: 2px solid var(--wq-gold-hi); outline-offset: 3px; border-radius: var(--wqr-xs); }

.wrap { max-width: var(--wq-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: -64px; inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 0 0 var(--wqr-sm) var(--wqr-sm);
  background: var(--wq-gold); color: var(--wq-on-gold);
  font-weight: 600; font-size: .9rem;
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 0; }

/* Latin / numeric runs inside Arabic flow keep their own order ("+18.4%"). */
.wq-ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- signature motif: the mark's parallel bands as hairlines ---- */
.motif { position: relative; isolation: isolate; }
.motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(var(--wq-motif-angle), rgba(201, 164, 92, .07) 0 1px, transparent 1px 26px);
  -webkit-mask-image: radial-gradient(60% 80% at var(--wq-glow-x) 20%, #000, transparent 75%);
  mask-image: radial-gradient(60% 80% at var(--wq-glow-x) 20%, #000, transparent 75%);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--wqf-disp);
  color: var(--wq-tx-strong);
  font-weight: 600;
  line-height: 1.3;
}
.display {
  font-family: var(--wqf-disp);
  font-weight: 400;
  line-height: 1.3;
  color: var(--wq-tx-strong);
  letter-spacing: -.01em;
}
.display b { font-weight: 700; }
/* Metallic emphasis: the logo's gold ramp clipped to the glyphs. */
.display .hi {
  font-weight: 700;
  background: var(--wq-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1.display { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h2.display { font-size: clamp(1.65rem, 3.1vw, 2.45rem); }
h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.display, .sect-head p, .page-head p { text-wrap: balance; }
/* Montserrat sets much wider than Plex Arabic — step the Latin display sizes down */
html[lang="en"] .display { letter-spacing: -.02em; }
html[lang="en"] h1.display { font-size: clamp(1.95rem, 3.7vw, 2.85rem); }
html[lang="en"] h2.display { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
html[lang="en"] h3.display { font-size: clamp(1.3rem, 2vw, 1.65rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wqf-num);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wq-muted);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wq-metal);
  flex-shrink: 0;
}
.eyebrow.acc { color: var(--wq-gold-hi); }

.lede { color: var(--wq-muted); font-size: 1.06rem; max-width: 52ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--wqf-disp);
  font-weight: 600;
  font-size: .92rem;
  padding: 13px 26px;
  border-radius: var(--wqr-sm);
  border: 1px solid transparent;
  transition: transform .25s, box-shadow .25s, background-position .5s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-primary {
  background: var(--wq-metal);
  background-size: 180% 100%;
  background-position: 0% 0;
  color: var(--wq-on-gold);
  box-shadow: var(--wqs-gold);
}
.btn-primary:hover { background-position: 100% 0; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--wq-tx-strong);
  border-color: var(--wq-gold-line);
}
.btn-ghost:hover { border-color: var(--wq-gold); color: var(--wq-gold-hi); background: var(--wq-gold-wash); }

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

/* ============================================================
   SECTIONS
   ============================================================ */
section { position: relative; }
.sect { padding-block: 92px; }
.sect.tight { padding-block-start: 0; }
.sect-head { max-width: 680px; margin-inline: auto; margin-block-end: 52px; text-align: center; }
.sect-head .eyebrow { margin-block-end: 16px; }
.sect-head p { color: var(--wq-muted); margin-block-start: 14px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--wq-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(15, 16, 18, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-block-end: 1px solid var(--wq-line-soft);
  transition: background .3s, border-color .3s;
}
.nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .45), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.nav.scrolled { background: rgba(12, 13, 15, .94); }
.nav.scrolled::after { opacity: 1; }
.nav-in {
  width: 100%;
  max-width: var(--wq-mw);
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* The brand is one word in one colour — never split "Wuzmiq". */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wqf-num);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wq-tx-strong);
}
.brand img { width: auto; height: 32px; flex-shrink: 0; }
.brand-name { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 24px; }
.menu > li > a:not(.btn) {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  color: var(--wq-muted);
  padding-block: 8px;
  transition: color .2s;
}
.menu > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--wq-metal);
  transform: scaleX(0);
  transition: transform .28s ease;
}
.menu > li > a:not(.btn):hover, .menu > li > a.on { color: var(--wq-tx-strong); }
.menu > li > a.on::after, .menu > li > a:not(.btn):hover::after { transform: scaleX(1); }
.menu .btn { padding: 10px 20px; font-size: .86rem; }
.lang-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 34px;
  padding-inline: 10px;
  border: 1px solid var(--wq-line);
  border-radius: var(--wqr-sm);
  font-family: var(--wqf-num);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--wq-tx);
  transition: border-color .2s, color .2s;
}
.lang-toggle:hover { border-color: var(--wq-gold); color: var(--wq-gold-hi); }
.menu > li > a.lang-toggle::after { display: none; }
[lang="ar"].lang-toggle, .lang-toggle[lang="ar"] { font-family: var(--wqf-body); letter-spacing: 0; font-size: .86rem; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.burger span { width: 22px; height: 1.5px; background: var(--wq-tx-strong); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav.open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--wq-line-soft);
  background: rgba(20, 21, 24, .7);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track { display: inline-flex; gap: 48px; padding-block: 12px; will-change: transform; }
.tk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wqf-num);
  font-size: .76rem;
  color: var(--wq-muted);
  direction: ltr;
  unicode-bidi: isolate;
}
.tk b { color: var(--wq-tx-strong); font-weight: 600; letter-spacing: .06em; }
.tk .px { color: var(--wq-tx); font-variant-numeric: tabular-nums; }
.tk .up { color: var(--wq-up); }
.tk .down { color: var(--wq-down); }
.dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wq-gold);
  box-shadow: 0 0 8px var(--wq-gold);
  animation: wqPulse 1.8s ease-in-out infinite;
}
@keyframes wqPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: 64px 72px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--wq-gold-hi);
  padding: 7px 14px;
  border: 1px solid var(--wq-gold-line);
  border-radius: var(--wqr-sm);
  background: var(--wq-gold-wash);
  margin-block-end: 26px;
}
.hero-chip svg { width: 14px; height: 14px; }
.hero h1 { margin-block-end: 22px; }
.hero .lede { margin-block-end: 36px; }

.stat-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--wq-line);
}
.stat-row { padding: 20px 18px; border-inline-start: 1px solid var(--wq-line); }
.stat-row:first-child { border-inline-start: none; padding-inline-start: 0; }
.stat-row .val {
  display: block;
  font-family: var(--wqf-num);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.2;
  color: var(--wq-tx-strong);
  font-variant-numeric: tabular-nums;
}
.stat-row .lbl { display: block; margin-block-start: 6px; font-size: .8rem; color: var(--wq-dim); }

/* ============================================================
   FORM CARD
   ============================================================ */
.form-card {
  position: relative;
  background: linear-gradient(180deg, #1d1e22, #16171a);
  border: 1px solid var(--wq-gold-line);
  border-radius: var(--wqr-lg);
  padding: 36px 32px 30px;
  box-shadow: var(--wqs-lift);
}
.form-card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 24px;
  height: 2px;
  background: var(--wq-metal);
  border-radius: 0 0 2px 2px;
}
.form-card h2 { font-size: 1.35rem; font-weight: 700; color: var(--wq-tx-strong); }
.form-card .note { font-size: .84rem; color: var(--wq-gold-hi); margin-block: 6px 20px; }

.reg input[type="text"],
.reg input[type="email"],
.reg input[type="tel"] {
  width: 100%;
  background: var(--wq-field);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--wqr-sm);
  padding: 13px 14px;
  color: var(--wq-tx-strong);
  font-family: var(--wqf-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.reg input::placeholder { color: rgba(217, 214, 207, .5); }
.reg input:focus { border-color: var(--wq-gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .18); }
.reg form > div { margin-block-end: 12px; }

/* ---- phone field (intl-tel-input v25) ----
   The widget is LTR internally and pads the input from JS. Laying it out as a
   flex row makes the country selector a real item, so nothing depends on the
   JS-measured padding (which is measured before the async CSS lands). */
.reg .iti {
  --iti-border-color: rgba(255, 255, 255, .12);
  --iti-dialcode-color: var(--wq-muted);
  --iti-dropdown-bg: var(--wq-surface);
  --iti-hover-color: rgba(201, 164, 92, .1);
  --iti-arrow-color: var(--wq-muted);
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--wq-field);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--wqr-sm);
  transition: border-color .2s, box-shadow .2s;
}
.reg .iti:focus-within { border-color: var(--wq-gold); box-shadow: 0 0 0 3px rgba(201, 164, 92, .18); }
.reg .iti__country-container {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  border-inline-end: 1px solid rgba(255, 255, 255, .1);
}
.reg .iti__selected-dial-code { color: var(--wq-tx); }
/* !important overrides the inline padding-left the library writes */
.reg .iti > input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  padding-inline: 14px !important;
}
.reg .iti > input[type="tel"]:focus { box-shadow: none; }

/* dropdown — inline or appended to <body> on small screens */
html .iti__dropdown-content {
  background: var(--wq-surface);
  color: var(--wq-tx);
  border: 1px solid var(--wq-gold-line);
  border-radius: var(--wqr-sm);
  box-shadow: var(--wqs-lift);
}
html .iti__search-input {
  background: var(--wq-field);
  color: var(--wq-tx-strong);
  border: none;
  border-block-end: 1px solid var(--wq-line);
  padding: 10px 12px;
}
html .iti__country.iti__highlight { background: rgba(201, 164, 92, .12); }
html .iti__dial-code { color: var(--wq-dim); }
html .iti--fullscreen-popup.iti--container { background: rgba(0, 0, 0, .6); }

[dir="rtl"] .reg .iti { flex-direction: row-reverse; }
[dir="rtl"] .reg .iti__country-container { border-inline-end: none; border-inline-start: 1px solid rgba(255, 255, 255, .1); }
[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; }
[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; }
/* 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;
}

.phone-error {
  display: none;
  margin-block: -4px 10px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--wq-error);
}
.phone-error.on { display: block; }

#submit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--wqr-sm);
  background: var(--wq-metal);
  background-size: 180% 100%;
  color: var(--wq-on-gold);
  font-family: var(--wqf-disp);
  font-size: 1rem;
  font-weight: 700;
  margin-block-start: 6px;
  box-shadow: var(--wqs-gold);
  transition: transform .2s, background-position .5s;
}
#submit-btn:hover { transform: translateY(-2px); background-position: 100% 0; }

.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--wq-muted);
  margin-block-start: 14px;
}
.form-tip svg { width: 16px; height: 16px; color: var(--wq-gold); flex-shrink: 0; }

.form-card .trust { margin-block-start: 22px; border-block-start: 1px solid var(--wq-line); }
.trust-item { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-block-end: 1px solid var(--wq-line-soft); }
.trust-item:last-child { border-block-end: none; padding-block-end: 0; }
.trust-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--wqr-sm);
  background: var(--wq-gold-wash);
  border: 1px solid var(--wq-gold-line);
}
.trust-ico svg { width: 18px; height: 18px; color: var(--wq-gold-hi); }
.trust-item b { display: block; font-weight: 600; font-size: .94rem; color: var(--wq-tx-strong); line-height: 1.45; }
.trust-item span { font-size: .8rem; color: var(--wq-muted); }

/* ============================================================
   CARDS — shared surface
   ============================================================ */
.voice, .cap, .step, .gcard, .post, .faq-item, .agg, .calc-form, .calc-results__profit {
  background: linear-gradient(180deg, var(--wq-surface), #17181b);
  border: 1px solid var(--wq-line);
  border-radius: var(--wqr-md);
}

/* ============================================================
   VOICES
   ============================================================ */
.voices-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  position: relative;
  transition: transform .3s, border-color .3s;
}
.voice:hover { transform: translateY(-4px); border-color: var(--wq-gold-line); }
.voice-mark { width: 30px; height: 30px; color: var(--wq-gold); opacity: .55; margin-block-end: 16px; }
.voice-mark svg { width: 100%; height: 100%; }
.voice .stars { margin-block-end: 14px; }
.voice-qt { font-size: 1rem; line-height: 1.9; color: var(--wq-tx); flex: 1; margin-block-end: 22px; }
.voice-who { display: flex; align-items: center; gap: 13px; padding-block-start: 18px; border-block-start: 1px solid var(--wq-line-soft); }
.voice-av, .gav {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: .84rem;
  color: var(--wq-gold-hi);
  background: var(--wq-bg-2);
  border: 1px solid var(--wq-gold-line);
}
.voice-name, .gnm { font-weight: 600; font-size: .96rem; color: var(--wq-tx-strong); }
.voice-loc, .gcity { font-size: .78rem; color: var(--wq-dim); }

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

/* ============================================================
   SPLIT (square image + copy, never cropped)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split-media { position: relative; }
.split-media img {
  width: 100%;
  height: auto;
  border-radius: var(--wqr-md);
  border: 1px solid var(--wq-line);
  box-shadow: var(--wqs-card);
}
/* gilt corner bracket */
.split-media::before {
  content: "";
  position: absolute;
  inset-block-start: -14px;
  inset-inline-end: -14px;
  width: 96px;
  height: 96px;
  border-block-start: 1px solid var(--wq-gold);
  border-inline-end: 1px solid var(--wq-gold);
  pointer-events: none;
}
.split-media::after {
  content: "";
  position: absolute;
  inset-block-end: -14px;
  inset-inline-start: -14px;
  width: 56px;
  height: 56px;
  border-block-end: 1px solid var(--wq-gold-line);
  border-inline-start: 1px solid var(--wq-gold-line);
  pointer-events: none;
}
.split-copy .eyebrow { margin-block-end: 16px; }
.split-copy h2 { margin-block-end: 18px; }
.split-copy p { color: var(--wq-muted); margin-block-end: 14px; }
.split-copy p:last-child { margin-block-end: 0; }
.split-copy .btn { margin-block-start: 14px; }
.split.reverse .split-media { order: 2; }

.bullet-list { display: flex; flex-direction: column; gap: 12px; margin-block: 18px; }
.bullet-list li { position: relative; padding-inline-start: 24px; color: var(--wq-tx); font-size: .95rem; }
.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .72em;
  width: 7px;
  height: 7px;
  background: var(--wq-gold);
  transform: rotate(45deg);
}
.bullet-list li b { color: var(--wq-tx-strong); font-weight: 600; }
.bullet-group + .bullet-group { margin-block-start: 8px; }
.bullet-group h3 { font-size: .8rem; font-weight: 600; color: var(--wq-gold-hi); margin-block-start: 18px; }

/* ============================================================
   CAPABILITY CARDS
   ============================================================ */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap {
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.cap::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--wq-metal);
  opacity: 0;
  transition: opacity .3s;
}
.cap:hover { transform: translateY(-4px); border-color: var(--wq-gold-line); }
.cap:hover::before, .cap.feat::before { opacity: 1; }
.cap.feat {
  border-color: var(--wq-gold-line);
  background:
    radial-gradient(90% 70% at var(--wq-glow-x) 0%, rgba(201, 164, 92, .12), transparent 70%),
    linear-gradient(180deg, var(--wq-surface-2), var(--wq-surface));
}
.cap-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--wqr-sm);
  border: 1px solid var(--wq-gold-line);
  background: var(--wq-gold-wash);
  margin-block-end: 20px;
}
.cap-ico svg { width: 22px; height: 22px; color: var(--wq-gold-hi); }
.cap h3 { font-size: 1.1rem; margin-block-end: 10px; }
.cap p { color: var(--wq-muted); font-size: .93rem; line-height: 1.85; }

.cap.team { text-align: center; }
/* four leadership cards: one even row instead of 3 + an orphan */
.caps-grid:has(> .cap.team) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .caps-grid:has(> .cap.team) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .caps-grid:has(> .cap.team) { grid-template-columns: 1fr; } }
.cap.team .av {
  width: 64px; height: 64px; border-radius: 50%;
  margin-inline: auto; margin-block-end: 16px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1rem;
  color: var(--wq-gold-hi);
  background: var(--wq-bg-2);
  border: 1px solid var(--wq-gold);
  box-shadow: 0 0 0 5px var(--wq-gold-wash);
}
.cap.team .role { display: block; font-size: .8rem; font-weight: 600; color: var(--wq-gold-hi); margin-block-end: 10px; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--wq-gold-line);
  background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .05), transparent);
}
.metric { padding: 38px 24px; text-align: center; border-inline-end: 1px solid var(--wq-line); }
.metric:last-child { border-inline-end: none; }
.metric .val {
  font-family: var(--wqf-num);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.2;
  color: var(--wq-tx-strong);
  font-variant-numeric: tabular-nums;
}
.metric .val b { font-weight: 600; color: var(--wq-gold); }
.metric .lbl { font-size: .84rem; color: var(--wq-dim); margin-block-start: 8px; }

.agg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.agg-stack { display: flex; flex-direction: column; gap: 14px; margin-block-start: 24px; }
.agg { padding: 22px 24px; border-inline-start: 2px solid var(--wq-gold); border-start-start-radius: 0; border-end-start-radius: 0; }
.agg .v {
  font-family: var(--wqf-num);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--wq-tx-strong);
  font-variant-numeric: tabular-nums;
}
.agg .v b { color: var(--wq-gold); font-weight: 600; }
.agg .l { color: var(--wq-muted); font-size: .9rem; margin-block-start: 4px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { padding: 30px 26px; position: relative; }
.step-dot {
  position: absolute;
  inset-block-start: 34px;
  inset-inline-end: 26px;
  width: 9px; height: 9px;
  background: var(--wq-gold);
  transform: rotate(45deg);
}
.step .num {
  font-family: var(--wqf-num);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  background: var(--wq-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { font-size: 1.06rem; margin-block: 16px 8px; }
.step p { color: var(--wq-muted); font-size: .92rem; }

/* ============================================================
   RESULTS CAROUSEL
   ============================================================ */
.carousel { position: relative; margin-block-start: 44px; }
.carousel-viewport { overflow: hidden; padding-block: 6px; }
.carousel-track { display: flex; gap: 20px; transition: transform .55s cubic-bezier(.6, .05, .1, 1); }
.gcard {
  flex: 0 0 calc((100% - 40px) / 3);
  padding: 30px 28px;
  transition: border-color .3s;
}
.gcard.mid {
  border-color: var(--wq-gold-line);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 164, 92, .12), transparent 70%),
    linear-gradient(180deg, var(--wq-surface-2), var(--wq-surface));
}
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 18px; }
.gbadge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600;
  color: var(--wq-gold-hi);
  padding: 4px 10px;
  border-radius: var(--wqr-xs);
  border: 1px solid var(--wq-gold-line);
  background: var(--wq-gold-wash);
}
.gbadge svg { width: 11px; height: 11px; }
.gcard .tagline { font-size: .78rem; color: var(--wq-dim); }
.gcard .stars { margin-block-end: 10px; }
/* signed figures ("+24.8%") must not be reordered by the RTL bidi pass */
.gsum {
  font-family: var(--wqf-num);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.2;
  color: var(--wq-tx-strong);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.gper { font-size: .86rem; font-weight: 600; color: var(--wq-gold-hi); margin-block: 4px 14px; }
.gspark { width: 100%; height: 40px; display: block; margin-block-end: 16px; }
.gspark .ln { fill: none; stroke: var(--wq-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gqt { font-size: .93rem; color: var(--wq-muted); line-height: 1.85; margin-block-end: 18px; }
.gwho { display: flex; align-items: center; gap: 12px; }
.gav { width: 42px; height: 42px; font-size: .8rem; }

.gcta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-block-start: 22px;
  padding: 12px 20px;
  font-weight: 600; font-size: .9rem;
  border-radius: var(--wqr-sm);
  border: 1px solid var(--wq-gold-line);
  color: var(--wq-gold-hi);
  background: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.gcta svg { width: 15px; height: 15px; }
.gcta:hover, .gcard.mid .gcta { background: var(--wq-metal); color: var(--wq-on-gold); border-color: transparent; }

.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-block-start: 32px; }
.cbtn {
  width: 46px; height: 46px; border-radius: var(--wqr-sm);
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--wq-line);
  color: var(--wq-tx-strong);
  transition: border-color .25s, color .25s;
}
.cbtn:hover { border-color: var(--wq-gold); color: var(--wq-gold-hi); }
.cbtn svg { width: 18px; height: 18px; }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); background: var(--wq-raise); border: none; padding: 0; transition: background .25s; }
.dot.on { background: var(--wq-gold); }

.disclaimer { font-size: .8rem; color: var(--wq-dim); text-align: center; max-width: 780px; margin-inline: auto; margin-block-start: 32px; line-height: 1.85; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--wqr-lg);
  padding: 72px 40px;
  text-align: center;
  border: 1px solid var(--wq-gold-line);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(201, 164, 92, .16), transparent 70%),
    linear-gradient(180deg, var(--wq-surface-2), var(--wq-bg-2));
  box-shadow: var(--wqs-lift);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(var(--wq-motif-angle), rgba(201, 164, 92, .08) 0 1px, transparent 1px 24px);
  -webkit-mask-image: radial-gradient(70% 100% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(70% 100% at 50% 0%, #000, transparent 72%);
}
.cta-band h2 { margin-block-end: 14px; }
.cta-band p { color: var(--wq-muted); margin-inline: auto; margin-block-end: 30px; max-width: 52ch; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; padding-block-start: 72px; margin-block-start: 48px; background: #0b0c0e; }
.footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wq-gold-line) 20%, var(--wq-gold) 50%, var(--wq-gold-line) 80%, transparent);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand .brand { margin-block-end: 18px; }
.footer-brand p { color: var(--wq-muted); font-size: .92rem; max-width: 40ch; }
.footer-col h2 { font-size: .8rem; font-weight: 600; color: var(--wq-gold-hi); margin-block-end: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--wq-muted); font-size: .92rem; transition: color .2s; }
.footer-col a:hover { color: var(--wq-gold-hi); }
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-block-start: 1px solid var(--wq-line-soft);
  margin-block-start: 52px; padding-block: 22px;
  font-size: .84rem; color: var(--wq-dim);
}
.footer-bar .lnk { display: flex; gap: 22px; }
.footer-bar a:hover { color: var(--wq-gold-hi); }

.risk { background: #0b0c0e; border-block-start: 1px solid var(--wq-line-soft); padding-block: 22px 28px; }
.risk p { font-size: .78rem; color: var(--wq-dim); line-height: 1.85; }
.risk b { color: var(--wq-muted); font-weight: 600; }

/* ============================================================
   REVEAL
   ============================================================ */
.wq-rise { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.wq-rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wq-rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .dot-live { animation: none; }
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-head { text-align: center; max-width: 800px; margin-inline: auto; padding-block: 12px 4px; }
.page-head .eyebrow { margin-block-end: 16px; }
.page-head p { color: var(--wq-muted); margin-inline: auto; margin-block-start: 16px; max-width: 64ch; }
.page-head .updated { font-size: .8rem; color: var(--wq-dim); margin-block-start: 14px; }

/* visible breadcrumb trail (mirrors the BreadcrumbList JSON-LD) */
.crumbs { margin-block-end: 26px; }
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: .8rem; color: var(--wq-dim); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; background: var(--wq-gold-line); transform: rotate(45deg); }
.crumbs a { color: var(--wq-muted); transition: color .2s; }
.crumbs a:hover { color: var(--wq-gold-hi); }
.crumbs [aria-current] { color: var(--wq-gold-hi); }

.media-frame { max-width: 640px; margin-inline: auto; position: relative; }
.media-frame img { width: 100%; height: auto; border-radius: var(--wqr-md); border: 1px solid var(--wq-line); box-shadow: var(--wqs-card); }

.city-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.city-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; color: var(--wq-tx);
  padding: 10px 20px;
  border-radius: var(--wqr-sm);
  border: 1px solid var(--wq-line);
  background: var(--wq-surface);
}
.city-chip::before { content: ""; width: 6px; height: 6px; background: var(--wq-gold); transform: rotate(45deg); }

/* insights */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.post { display: flex; flex-direction: column; padding: 30px 28px; transition: transform .3s, border-color .3s; }
.post:hover { transform: translateY(-4px); border-color: var(--wq-gold-line); }
.post-tag {
  align-self: flex-start;
  font-size: .74rem; font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--wqr-xs);
  margin-block-end: 16px;
  border: 1px solid var(--wq-line);
}
.post-tag.ai { color: var(--wq-tx); background: rgba(255, 255, 255, .04); }
.post-tag.crypto { color: var(--wq-gold-hi); background: var(--wq-gold-wash); border-color: var(--wq-gold-line); }
.post h2, .post h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.55; margin-block-end: 10px; }
.post p { color: var(--wq-muted); font-size: .93rem; line-height: 1.85; flex: 1; }
.post-meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-block-start: 18px; padding-block-start: 14px;
  border-block-start: 1px solid var(--wq-line-soft);
  font-size: .78rem; color: var(--wq-dim);
}
.post.feat {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 36px;
  align-items: center;
  border-color: var(--wq-gold-line);
}
/* an odd card left alone on the last row takes the full width */
.blog-grid > .post:not(.feat):last-child:nth-child(even) { grid-column: 1 / -1; }
.post.feat .post-media img { width: 100%; height: auto; border-radius: var(--wqr-sm); border: 1px solid var(--wq-line); }
.post.feat .post-body { display: flex; flex-direction: column; }
.post.feat h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* FAQ accordion — button inside the heading (WAI-ARIA APG) */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { overflow: hidden; transition: border-color .3s; }
.faq-item:hover, .faq-item.open { border-color: var(--wq-gold-line); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: 21px 24px;
  background: none; border: none;
  font-family: var(--wqf-disp); font-size: 1.02rem; font-weight: 600;
  color: var(--wq-tx-strong);
  text-align: start;
  line-height: 1.6;
}
.faq-q:focus-visible { outline: 2px solid var(--wq-gold-hi); outline-offset: -3px; }
.faq-q svg { width: 18px; height: 18px; color: var(--wq-gold); flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-item.open .faq-a { max-height: 560px; }
.faq-a p { padding: 0 24px 22px; color: var(--wq-muted); font-size: .95rem; line-height: 1.95; }

/* support / signup */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.info-col { display: flex; flex-direction: column; gap: 22px; }
.info-media img { width: 100%; height: auto; border-radius: var(--wqr-md); border: 1px solid var(--wq-line); box-shadow: var(--wqs-card); }
.info-row { display: flex; align-items: flex-start; gap: 16px; padding-block: 16px; border-block-end: 1px solid var(--wq-line-soft); }
.info-row:last-child { border-block-end: none; }
.info-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--wqr-sm); border: 1px solid var(--wq-gold-line); background: var(--wq-gold-wash); }
.info-ico svg { width: 20px; height: 20px; color: var(--wq-gold-hi); }
.info-row h3 { font-size: 1rem; margin-block-end: 3px; }
.info-row p { color: var(--wq-muted); font-size: .92rem; }
.reg-list { display: flex; flex-direction: column; gap: 14px; }
.reg-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--wq-tx); font-size: .96rem; }
.reg-list svg { width: 20px; height: 20px; color: var(--wq-gold); flex-shrink: 0; margin-block-start: 4px; }

/* No overflow:hidden — it would clip the phone country dropdown. */
.form-card.solo { position: sticky; inset-block-start: calc(var(--wq-nav-h) + 24px); }

/* legal */
.legal { max-width: 860px; margin-inline: auto; }
.legal h2 { font-size: 1.25rem; font-weight: 600; margin-block: 38px 12px; padding-inline-start: 16px; border-inline-start: 2px solid var(--wq-gold); line-height: 1.5; }
.legal h2:first-child { margin-block-start: 0; }
.legal p { color: var(--wq-muted); font-size: .96rem; line-height: 1.95; margin-block-end: 12px; }
.legal ul { color: var(--wq-muted); font-size: .96rem; line-height: 1.95; margin-block-end: 12px; margin-inline-start: 4px; display: flex; flex-direction: column; gap: 6px; }
.legal ul li { position: relative; padding-inline-start: 20px; }
.legal ul li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .8em; width: 6px; height: 6px; background: var(--wq-gold); transform: rotate(45deg); }
.legal a { color: var(--wq-gold-hi); border-block-end: 1px solid var(--wq-gold-line); }

/* standalone notice (thanks / 404) */
.notice { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 72px; }
.notice .ico { width: 80px; height: 80px; margin-inline: auto; margin-block-end: 28px; display: grid; place-items: center; border-radius: var(--wqr-md); background: var(--wq-gold-wash); border: 1px solid var(--wq-gold-line); transform: rotate(45deg); }
.notice .ico svg { width: 34px; height: 34px; color: var(--wq-gold-hi); transform: rotate(-45deg); }
.notice p { color: var(--wq-muted); margin-block-start: 16px; }
.notice .btn { margin-block-start: 32px; }

/* ============================================================
   ARABIC TYPOGRAPHY (RTL)
   Letter-spacing breaks cursive joins and uppercase is a no-op in Arabic,
   so every tracked label is neutralised here; weight carries the emphasis.
   ============================================================ */
[dir="rtl"] .eyebrow,
[dir="rtl"] .display,
[dir="rtl"] .hero-chip,
[dir="rtl"] .gbadge,
[dir="rtl"] .post-tag,
[dir="rtl"] .footer-col h2 {
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .eyebrow { font-family: var(--wqf-body); font-size: .86rem; font-weight: 600; }
[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; }
/* Latin tokens keep their tracking */
[dir="rtl"] .brand, [dir="rtl"] .brand-name { letter-spacing: .16em; }

/* direction:ltr on a block resolves text-align:start to left; the figures in
   RTL cards belong on the right. */
[dir="rtl"] .gsum,
[dir="rtl"] .agg .v,
[dir="rtl"] .calc-form__value,
[dir="rtl"] .calc-results__final-amount,
[dir="rtl"] .calc-results__profit-amount { text-align: right; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .menu { gap: 18px; }
  .menu > li > a:not(.btn) { font-size: .84rem; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split.reverse .split-media { order: 0; }
  .split-media { max-width: 560px; margin-inline: auto; width: calc(100% - 28px); }
  .voices-row { grid-template-columns: 1fr; max-width: 560px; 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(--wq-line); }
  .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; }
  .post.feat { grid-template-columns: 1fr; }
  .post.feat .post-media { max-width: 420px; }
  .duo { grid-template-columns: 1fr; }
  .form-card.solo { position: relative; inset-block-start: auto; }
  .info-media { max-width: 560px; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .burger { display: flex; }
  .nav.open .menu {
    display: flex;
    position: absolute;
    inset-block-start: var(--wq-nav-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 24px 24px;
    background: rgba(12, 13, 15, .98);
    border-block-end: 1px solid var(--wq-gold-line);
    max-height: calc(100vh - var(--wq-nav-h));
    overflow-y: auto;
  }
  .nav.open .menu > li > a:not(.btn) { display: block; padding-block: 12px; font-size: 1rem; border-block-end: 1px solid var(--wq-line-soft); }
  .nav.open .menu > li > a:not(.btn)::after { display: none; }
  .nav.open .menu .lang-toggle { display: inline-grid; margin-block-start: 12px; }
  .nav.open .menu .btn { width: 100%; margin-block-start: 12px; padding-block: 13px; }
}

@media (max-width: 680px) {
  :root { --wq-nav-h: 64px; }
  .sect { padding-block: 64px; }
  .hero { padding-block: 40px 56px; }
  .stat-rows { grid-template-columns: 1fr; }
  .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-inline-start: none; border-block-start: 1px solid var(--wq-line); }
  .stat-row:first-child { border-block-start: none; }
  .stat-row .lbl { margin: 0; }
  .form-card { padding: 30px 22px 26px; }
  .caps-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: none; border-block-end: 1px solid var(--wq-line); }
  .metric:last-child { border-block-end: none; }
  .steps { grid-template-columns: 1fr; }
  .gcard { flex: 0 0 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bar { flex-direction: column; gap: 12px; text-align: center; }
  .cta-band { padding: 52px 22px; }
  .post, .cap, .voice { padding: 26px 22px; }
  .notice { padding-block: 48px; }
}

@media (max-width: 380px) {
  .brand { font-size: 1rem; gap: 9px; }
  .footer-grid { grid-template-columns: 1fr; }
}