/* ============================================================
   LEADERS OF TRADING ACADEMY — styles.css
   AUTO-GENERATED by build.js — do not edit this file directly.
   Edit files under assets/css or sections, then run `node build.js`.
   ============================================================ */

/* ============================================================
   VARIABLES — design tokens & themes
   Source of truth for color, type-family, radius, spacing and
   easing custom properties consumed by every other stylesheet.
   ============================================================ */
:root {
  /* Brand palette (fixed) */
  --gold: #F6BF3B;
  --accent: #FFD76A;
  --success: #00D26A;
  --danger: #FF4D4F;

  /* Dark theme surfaces */
  --bg: #070A10;
  --bg-deep: #03050A;
  --surface: #0D121B;
  --surface-soft: rgba(255, 255, 255, .028);
  --surface-hover: rgba(255, 255, 255, .055);
  --glass: rgba(11, 16, 24, .74);
  --scrim: rgba(3, 5, 10, .94);
  --line: rgba(255, 255, 255, .105);
  --line-strong: rgba(255, 255, 255, .20);
  --text: #FFFFFF;
  --muted: #A4AEC1;
  --grid: rgba(148, 163, 199, .09);
  --shadow-lg: 0 30px 80px -42px rgba(0, 0, 0, .95);
  --shadow-sm: 0 16px 35px -24px rgba(0, 0, 0, .88);
  --glow-gold: 0 0 0 1px rgba(246, 191, 59, .25), 0 18px 48px -24px rgba(246, 191, 59, .34);

  /* Type */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --pad-x: clamp(18px, 4vw, 52px);
  --section-y: clamp(68px, 8vw, 132px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* Arabic swaps the family only — palette and layout are shared */
html[lang="ar"] {
  --font-display: "Cairo", "Inter", system-ui, sans-serif;
  --font-body: "Cairo", "Inter", system-ui, sans-serif;
}

/* Light theme (fully wired, kept restrained) */
[data-theme="light"] {
  --bg: #F6F7FB;
  --bg-deep: #EEF1F7;
  --surface: #FFFFFF;
  --surface-soft: rgba(10, 15, 28, .028);
  --surface-hover: rgba(10, 15, 28, .05);
  --glass: rgba(255, 255, 255, .72);
  --scrim: rgba(246, 247, 251, .92);
  --line: rgba(10, 15, 28, .10);
  --line-strong: rgba(10, 15, 28, .2);
  --text: #0A0F1C;
  --muted: #5C6885;
  --grid: rgba(10, 15, 28, .06);
  --shadow-lg: 0 30px 60px -34px rgba(10, 15, 28, .35);
  --shadow-sm: 0 12px 26px -18px rgba(10, 15, 28, .35);
}

/* ============================================================
   HOMEPAGE PALETTE — "Dark Luxury Trading".
   Scoped to body.home only (src/index.template.html) so the
   auth pages (login/register/otp/…), which link this same file
   directly, keep their current colors untouched.
   ============================================================ */
body.home {
  --gold: #C9A24D;
  --accent: #E5C878;
  --bg: #050505;
  --bg-deep: #030303;
  --surface: #0B0B0B;
  --surface-soft: rgba(255, 255, 255, .028);
  --surface-hover: rgba(255, 255, 255, .055);
  --glass: rgba(11, 11, 11, .74);
  --scrim: rgba(3, 3, 3, .94);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --text: #F5F5F5;
  --muted: #8D8D8D;
  --grid: rgba(141, 141, 141, .08);
  --glow-gold: 0 0 0 1px rgba(201, 162, 77, .28), 0 18px 48px -24px rgba(201, 162, 77, .38);
}
body.home[data-theme="light"] {
  --bg: #F7F5F0;
  --bg-deep: #EFEBE1;
  --surface: #FFFFFF;
  --surface-soft: rgba(10, 10, 10, .028);
  --surface-hover: rgba(10, 10, 10, .05);
  --glass: rgba(255, 255, 255, .74);
  --scrim: rgba(247, 245, 240, .92);
  --line: rgba(10, 10, 10, .10);
  --line-strong: rgba(10, 10, 10, .2);
  --text: #0A0A0A;
  --muted: #6B6558;
  --grid: rgba(10, 10, 10, .06);
  --gold: #A67C2E;
  --accent: #C9A24D;
  --glow-gold: 0 0 0 1px rgba(166, 124, 46, .22), 0 18px 48px -24px rgba(166, 124, 46, .3);
}

/* ============================================================
   RESET — element-level normalization only.
   No component styling, no typography scale (see typography.css).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Belt-and-suspenders against horizontal scroll — this is a backstop,
   not a fix: any element that actually pushes past the viewport width
   is a real layout bug to find and fix, not something to paper over
   with overflow-x: hidden (which also swallows the scrollbar silently
   instead of surfacing the problem). clip is the honest version of
   that same backstop. */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  transition: background .4s ease, color .4s ease;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   TYPOGRAPHY — base font rules shared by every section.
   Section files only ever set size/weight overrides on top
   of this scale; the family/weight/line-height baseline lives
   here exactly once.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: clamp(15px, .4vw + 14px, 16.5px);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
}

/* ============================================================
   ANIMATIONS — every @keyframes definition in the project,
   centralized so no section ever redefines one. Sections only
   reference these by name in their own `animation:` rules.
   ============================================================ */

/* Eyebrow dot pulse — components.css (.eyebrow .dot) */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244, 196, 48, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(244, 196, 48, 0); }
}

/* Button ripple — components.css (.ripple) */
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Ambient background grid drift — app.css (.bg__grid) */
@keyframes gridDrift { to { background-position: 64px 64px, 64px 64px; } }

/* Ambient background blobs — app.css (.bg__blob) */
@keyframes float1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, 5vh, 0) scale(1.12); }
}
@keyframes float2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-5vw, -4vh, 0) scale(.92); }
}

/* Preloader mark draw-in — sections/preloader */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Mobile menu link stagger — sections/navbar */
@keyframes mIn { to { opacity: 1; transform: none; } }

/* Ticker tape scroll — sections/tape */
@keyframes tape { to { transform: translateX(-50%); } }

/* Gentle float — shared by sections/hero (.terminal, .float-card)
   and sections/enroll (.band__glow) */
@keyframes hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Terminal glass reflection sheen — sections/hero */
@keyframes sheen {
  0%, 62%, 100% { transform: translateX(-40%) rotate(14deg); opacity: 0; }
  70%           { opacity: 1; }
  92%           { transform: translateX(260%) rotate(14deg); opacity: 0; }
}

/* Live indicator blink — sections/hero, sections/hub */
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* New live-signal row fade-in — sections/hero (market-panel__list--signals) */
@keyframes mpRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Testimonials marquee scroll — sections/testimonials */
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   COMPONENTS — reusable UI shared by three or more sections:
   layout primitives, eyebrow/head header block, buttons, ripple
   and the scroll-reveal utility. Section-exclusive elements
   (e.g. the navbar's icon buttons, the carousel's round buttons)
   stay in their own section file instead of living here.
   ============================================================ */

/* ---------- Layout primitives ---------- */
/* Adds the device's safe-area inset (notch/rounded-corner/home-
   indicator exclusion zone) on top of the normal fluid gutter — a
   no-op (env() falls back to 0px) on the vast majority of devices
   that don't have one, real extra inset on the ones that do
   (landscape on a notched phone, mainly). Site-wide since every
   section shares this same container. */
.container {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding-inline: calc(var(--pad-x) + env(safe-area-inset-left, 0px)) calc(var(--pad-x) + env(safe-area-inset-right, 0px));
}

.section { padding-block: var(--section-y); position: relative; }
/* Any anchor target (not just top-level <section>s — e.g. the hero's
   orbit wrapper) needs this so a jump link doesn't tuck the target
   under the sticky navbar. */
[id] { scroll-margin-top: 96px; }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* ---------- Eyebrow + section header block ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
html[lang="ar"] .eyebrow { letter-spacing: .06em; font-family: var(--font-body); }

.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(244, 196, 48, .16);
  animation: pulse 2.6s var(--ease) infinite;
}

.head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.head--left { margin-bottom: 0; }
.head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}
.head__title {
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 700;
  text-wrap: balance;
}
.head__sub {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(15px, 1.1vw, 18px);
  max-width: 58ch;
}

@media (max-width: 900px) {
  .head--row { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ---------- Buttons ---------- */
/* Mobile-first fluid sizing: padding/font/min-height scale with
   clamp() from a phone-sized floor instead of one fixed desktop size
   with a single small-screen override. white-space is *not* nowrap —
   a long label is allowed to wrap to two lines on a narrow button
   rather than overflow or get clipped. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.5rem, 1.5vw, 0.625rem);
  padding-inline: clamp(1.1rem, 4vw, 1.5rem);
  padding-block: clamp(0.7rem, 2.6vw, 0.8125rem);
  border: 1px solid transparent;
  border-radius: clamp(0.625rem, 1.5vw, 0.75rem);
  background: var(--btn-bg);
  color: var(--btn-fg);
  min-height: clamp(2.75rem, 8vw, 2.875rem);
  font-weight: 700;
  font-size: clamp(0.875rem, 1.4vw + 0.6rem, 0.90625rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .3s ease, border-color .3s ease, color .3s ease;
}
.btn--lg {
  min-height: clamp(3rem, 9vw, 3.375rem);
  padding-inline: clamp(1.3rem, 4.5vw, 1.75rem);
  font-size: clamp(0.92rem, 1.4vw + 0.65rem, 0.97rem);
}
.btn--block { width: 100%; }

.btn--gold {
  --btn-bg: linear-gradient(135deg, var(--accent), var(--gold) 62%, #D99F19);
  --btn-fg: #05070F;
  box-shadow: var(--glow-gold);
}
.btn--gold:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 1px rgba(244, 196, 48, .4), 0 24px 60px -18px rgba(244, 196, 48, .6);
}
.btn--outline {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  backdrop-filter: blur(10px);
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(244, 196, 48, .18), 0 20px 46px -22px rgba(244, 196, 48, .3);
}
.btn--ghost { color: var(--muted); }
.btn--ghost:hover { color: var(--text); background: var(--surface-hover); }
/* .btn's own display:inline-flex otherwise beats the UA stylesheet's
   [hidden]{display:none} (author declarations always win over UA ones
   regardless of specificity) — without this, a button toggled hidden
   via JS (element.hidden = true) would stay visible. */
.btn[hidden] { display: none; }

/* Ripple (element injected by animations.js) */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
  animation: ripple .6s var(--ease) forwards;
  z-index: 0;
}
.btn--gold .ripple { background: rgba(5, 7, 15, .22); }

/* ---------- Icon button ---------- */
/* Small pill/square button for compact actions (navbar's language and
   theme toggles; the auth pages' language toggle). */
.icon-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  /* 2.75rem (44px) is a touch-target accessibility floor, not a
     viewport-driven layout size — held constant in rem (scales with
     user font-size/zoom) rather than clamp()'d down. */
  min-height: 2.75rem;
  border-radius: clamp(0.5rem, 1.2vw, 0.625rem);
  padding-inline: clamp(0.7rem, 2vw, 0.875rem);
  padding-block: clamp(0.4rem, 1.2vw, 0.5rem);
  font-size: clamp(0.75rem, 1vw, 0.78125rem);
  font-weight: 600;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.icon-btn:hover { color: var(--gold); border-color: rgba(244, 196, 48, .45); }
.icon-btn--square {
  padding: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
}
.icon-btn svg { width: clamp(1rem, 2.2vw, 1.0625rem); height: clamp(1rem, 2.2vw, 1.0625rem); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Form fields ---------- */
/* Generic labeled input, shared by any page with a form (auth pages today;
   contact/settings/admin pages later reuse the same component). */
.field { display: block; margin-bottom: 18px; text-align: start; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.field__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  transition: border-color .25s ease, background .25s ease;
}
.field__input::placeholder { color: var(--muted); }
.field__input:focus { outline: none; border-color: rgba(244, 196, 48, .5); background: var(--surface-hover); }
.field__input.is-invalid { border-color: rgba(255, 77, 79, .6); }
.field__hint { margin-top: 6px; font-size: 12px; color: var(--muted); }
.field__error { margin-top: 6px; font-size: 12px; color: var(--danger); min-height: 1.2em; }

/* Fixed-width, letter-spaced code input (OTP screens) */
.field__input--code {
  text-align: center;
  letter-spacing: .5em;
  font-family: var(--font-mono);
  font-size: 22px;
  padding-inline-start: 24px; /* balance the trailing letter-spacing gap */
}

/* ---------- Alerts ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.alert--error { border-color: rgba(255, 77, 79, .35); background: rgba(255, 77, 79, .08); color: #FF8A8C; }
.alert--success { border-color: rgba(0, 210, 106, .35); background: rgba(0, 210, 106, .08); color: var(--success); }
.alert--warning { border-color: rgba(244, 196, 48, .4); background: rgba(244, 196, 48, .08); color: var(--gold); }
[data-theme="light"] .alert--error { color: #C0272A; }
[data-theme="light"] .alert--success { color: #0A8A4B; }
[data-theme="light"] .alert--warning { color: #8A6A0A; }
/* Same [hidden]-vs-author-display fix as .btn above — matters here once
   an alert has been shown once (formHelpers.hideAlert only toggles
   `hidden`, it never clears the alert/alert--* classes it was given). */
.alert[hidden] { display: none; }

/* Two-line title+description alert body (e.g. the ADMIN APPROVAL
   WORKFLOW's "account pending review" / "account suspended" login
   alerts — assets/js/authModal.js) — wrapped in its own column
   container so it stacks under .alert's own row flex layout instead
   of sitting beside it. */
.alert__body { display: flex; flex-direction: column; gap: 4px; }
.alert__title { font-weight: 800; }
.alert__desc { margin: 0; opacity: .92; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* ---------- Offer card grid ---------- */
/* Generic icon/title/text card used by the "What we offer" ecosystem
   sections (strategies, bots, timeframes, …) — one shell, reused
   instead of a bespoke card per section. */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 22px);
}
@media (min-width: 34rem) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .offer-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68rem) { .offer-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 60%), var(--surface);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s var(--ease);
}
.offer-card::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -30%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 77, .14), transparent 70%);
  pointer-events: none;
}
.offer-card__icon {
  position: relative;
  width: clamp(40px, 4.5vw, 46px);
  height: clamp(40px, 4.5vw, 46px);
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(201, 162, 77, .18), transparent 70%);
  transition: transform .4s var(--ease), border-color .4s ease;
}
.offer-card__icon svg { width: 21px; height: 21px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.offer-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: relative; }
.offer-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid rgba(201, 162, 77, .32);
  border-radius: var(--r-pill);
  background: rgba(201, 162, 77, .08);
  white-space: nowrap;
}
.offer-card__title { font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; letter-spacing: -.01em; position: relative; }
.offer-card__text { font-size: 13.5px; color: var(--muted); line-height: 1.65; position: relative; }
.offer-card__list { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 4px; position: relative; }
.offer-card__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.offer-card__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
  .offer-card:hover { transform: translateY(-6px); border-color: rgba(201, 162, 77, .38); box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .85); }
  .offer-card:hover .offer-card__icon { transform: scale(1.08); border-color: rgba(201, 162, 77, .5); }
}

/* ---------- Workflow / step pipeline ---------- */
/* Vertical step list by default (mobile + as a narrow column on
   desktop); add .workflow--row to switch to a horizontal pipeline
   from 900px up (copy-trading, auto-execution, strategy-execution). */
.workflow { display: flex; flex-direction: column; }
.workflow__step { position: relative; display: flex; align-items: flex-start; gap: 16px; padding-block: 16px; }
.workflow__step:first-child { padding-top: 0; }
.workflow__num {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 77, .4);
  background: radial-gradient(circle at 50% 30%, rgba(201, 162, 77, .18), var(--bg-deep) 75%);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
}
.workflow__num svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workflow__connector {
  position: absolute;
  inset-inline-start: 19px;
  top: 40px;
  bottom: -16px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 162, 77, .55) 50%, transparent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1s var(--ease) .15s;
}
.reveal.is-visible .workflow__connector { transform: scaleY(1); }
.workflow__step:last-child .workflow__connector { display: none; }
.workflow__body { padding-top: 7px; }
.workflow__title { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.workflow__text { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 52ch; }

@media (min-width: 56rem) {
  .workflow--row { flex-direction: row; align-items: flex-start; gap: clamp(6px, 1.4vw, 14px); }
  .workflow--row .workflow__step { flex-direction: column; align-items: center; text-align: center; flex: 1; padding-block: 0; }
  .workflow--row .workflow__connector {
    inset-inline-start: calc(50% + 20px);
    inset-inline-end: calc(-50% + 20px);
    top: 19px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 77, .55) 50%, transparent);
    transform-origin: center;
    transform: scaleX(0);
  }
  .workflow--row.reveal.is-visible .workflow__connector,
  .reveal.is-visible .workflow--row .workflow__connector { transform: scaleX(1); }
  .workflow--row .workflow__body { padding-top: 14px; }
  .workflow--row .workflow__text { max-width: 21ch; margin-inline: auto; }
}

/* Checklist accent (strategy-execution): filled check mark instead
   of a plain step index, faint success-tinted ring. */
.workflow--check .workflow__num { border-color: rgba(0, 210, 106, .38); background: radial-gradient(circle at 50% 30%, rgba(0, 210, 106, .16), var(--bg-deep) 75%); }
.workflow--check .workflow__num svg { stroke: var(--success); }

/* ============================================================
   APP — global page-shell chrome that wraps every section
   (skip link, ambient background layers, pointer glow) plus
   the cross-cutting accessibility/print overrides. Nothing in
   here belongs to a single content section.
   ============================================================ */

.skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: -80px;
  z-index: 200;
  background: var(--gold);
  color: #05070F;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Ambient background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% -5%, rgba(246, 191, 59, .09), transparent 68%),
    var(--bg);
}
.bg__grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(105% 75% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(105% 75% at 50% 0%, #000 20%, transparent 78%);
  animation: gridDrift 40s linear infinite;
}

.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .5;
  will-change: transform;
}
.bg__blob--a { width: 46vw; height: 46vw; top: -14vw; inset-inline-start: -10vw; background: rgba(246, 191, 59, .12); animation: float1 26s ease-in-out infinite; }
.bg__blob--b { width: 40vw; height: 40vw; top: 40vh; inset-inline-end: -14vw; background: rgba(56, 106, 255, .14); animation: float2 32s ease-in-out infinite; }
.bg__blob--c { width: 34vw; height: 34vw; bottom: -12vw; inset-inline-start: 30vw; background: rgba(0, 210, 106, .08); animation: float1 38s ease-in-out infinite reverse; }
[data-theme="light"] .bg__blob { opacity: .35; }

.bg__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.bg__noise {
  position: absolute;
  inset: 0;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Pointer glow ---------- */
.pointer-glow {
  position: fixed;
  z-index: -1;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(244, 196, 48, .1), transparent 62%);
  transition: opacity .5s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .pointer-glow { opacity: 1; }
}

/* ---------- Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .marquee__track, .tape__track { animation: none; }
  .bg__particles, .pointer-glow, .hero__fx { display: none; }
}

@media print {
  .bg, .preloader, .nav, .tape, .pointer-glow { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   AUTH MODAL — premium in-page Register/Log in/Forgot-password
   flow, replacing full-page navigation from the homepage. Reuses
   the already-shared .field/.btn/.alert/.eyebrow primitives from
   components.css as-is (zero duplication); only the modal chrome
   itself (overlay/panel/steps/OTP boxes/strength meter) is new
   here. Deliberately NOT sections/hub's .modal-overlay/.modal-panel
   (used by the coaching modal) — that shared controller always
   allows backdrop-close and has no "block while a request is in
   flight" concept, both of which this flow genuinely needs, so
   reusing it would mean complicating a working, unrelated feature.
   Fast, light transitions only (opacity/transform/visibility,
   150–220ms) per the brief — no heavy backdrop effects, no JS
   animation library.
   ============================================================ */

.authm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(3, 5, 10, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.authm-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}
/* display:grid above otherwise beats the UA stylesheet's own
   [hidden]{display:none} (author rules always win over UA ones,
   regardless of selector specificity) — without this the overlay
   would render open-and-interceptive from first paint. */
.authm-overlay[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .authm-overlay, .authm-overlay.is-open { transition: none; }
}

.authm-panel {
  position: relative;
  width: min(100%, 440px);
  max-height: min(90vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg);
  border: 1px solid rgba(212, 175, 55, .3);
  background: linear-gradient(165deg, rgba(212, 175, 55, .05), transparent 55%), #080A0D;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(212, 175, 55, .06);
  padding: clamp(22px, 4vw, 30px);
  transform: translateY(10px) scale(.98);
  transition: transform .2s ease;
  /* Scroll stays fully functional (overflow-y: auto above) — only the
     visible scrollbar track/thumb is suppressed, so a tall step (e.g.
     the register form on a short viewport) never gets visually clipped
     or locked away, it's just reachable without a bar cluttering the
     premium edge-to-edge look. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.authm-panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.authm-overlay.is-open .authm-panel { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .authm-panel, .authm-overlay.is-open .authm-panel { transition: none; transform: none; }
}
@media (max-width: 30rem) {
  .authm-panel { max-height: calc(100dvh - 24px); }
}

.authm-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.authm-close:hover, .authm-close:focus-visible { color: var(--gold); border-color: rgba(212, 175, 55, .45); background: var(--surface-hover); }
.authm-close:disabled { opacity: .4; cursor: not-allowed; }

body.authm-lock { overflow: hidden; }

/* ---------- Brand wordmark ---------- */
.authm-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
.authm-brand__mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(212, 175, 55, .18), transparent 65%);
  flex-shrink: 0;
}
.authm-brand__mark svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.authm-brand__text { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; color: var(--muted); }

/* ---------- Steps ---------- */
.authm-body { text-align: center; }
.authm-step[hidden] { display: none; }
.authm-step .eyebrow { margin-bottom: 8px; }
.authm-title { font-size: clamp(19px, 2.6vw, 23px); font-weight: 800; letter-spacing: -.01em; }
.authm-sub { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.authm-step form { text-align: start; margin-top: 16px; }
.authm-step .field { margin-bottom: 13px; }
/* Slightly shorter fields than the sitewide default (components.css) —
   scoped to the modal only, so login/register/etc. standalone pages
   keep their own field sizing untouched. */
.authm-panel .field__input { padding: 11px 14px; font-size: 14px; }
.authm-panel .field__label { margin-bottom: 6px; font-size: 12.5px; }
.authm-panel .btn { min-height: 2.65rem; font-size: 13.5px; }

/* ---------- Password show/hide (mirrors pages/register/register.css,
   which isn't loaded on the homepage — kept in sync intentionally) ---------- */
.field__control { position: relative; }
.field__control .field__input { padding-inline-end: 46px; }
.field__toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}
.field__toggle:hover { color: var(--gold); background: var(--surface-hover); }
.field__toggle-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field__toggle-icon--hide { display: none; }
.field__toggle.is-visible .field__toggle-icon--show { display: none; }
.field__toggle.is-visible .field__toggle-icon--hide { display: block; }

/* ---------- Password strength meter ---------- */
.authm-strength { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.authm-strength[hidden] { display: none; }
.authm-strength__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.authm-strength__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--strength-pct, 0%);
  background: var(--strength-color, var(--danger));
  transition: width .18s ease, background .18s ease;
}
.authm-strength__label { font-size: 11px; color: var(--strength-color, var(--muted)); font-weight: 600; min-width: 4.5ch; }

/* ---------- Inline link-style buttons (switch step) ---------- */
.authm-link { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.authm-link:hover { text-decoration: underline; }
.authm-terms { margin-top: 14px; font-size: 11.5px; line-height: 1.6; color: var(--muted); text-align: center; }
.authm-foot { margin-top: 20px; text-align: center; font-size: 13.5px; color: var(--muted); }
.authm-forgot { text-align: end; margin-bottom: 16px; }
.authm-forgot .authm-link { font-size: 13px; font-weight: 500; color: var(--muted); }
.authm-forgot .authm-link:hover { color: var(--gold); }
.authm-back { margin-top: 16px; text-align: center; }

/* ---------- OTP step ---------- */
.authm-otp-email { margin-top: 4px; font-weight: 700; color: var(--text); font-size: 13.5px; word-break: break-all; }
.authm-otp-boxes { display: flex; justify-content: center; gap: 8px; margin: 20px 0 4px; direction: ltr; }
.authm-otp-box {
  width: clamp(38px, 10vw, 46px);
  height: clamp(44px, 11vw, 52px);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text);
}
.authm-otp-box:focus { outline: none; border-color: rgba(212, 175, 55, .6); background: var(--surface-hover); }
.authm-otp-box.is-error { border-color: rgba(255, 77, 79, .6); }
.authm-resend { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.authm-resend button { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.authm-resend button:disabled { color: var(--muted); cursor: not-allowed; }

/* ---------- Success step ---------- */
.authm-success-icon {
  width: 56px; height: 56px;
  margin: 4px auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 210, 106, .35);
  background: linear-gradient(150deg, rgba(0, 210, 106, .14), transparent 70%);
  color: var(--success);
}
.authm-success-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.authm-step[data-step="success"] .authm-btn, .authm-step[data-step="reset-success"] .authm-btn { margin-top: 22px; }

/* ---------- Small utility spacing ---------- */
.authm-btn { margin-top: 4px; }
.authm-step .authm-alert:not([hidden]) { margin-bottom: 16px; }

@media (max-width: 26rem) {
  .authm-otp-box { width: 13vw; height: 14vw; font-size: 18px; }
}

/* ---------- PRELOADER ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; width: min(280px, 76vw); }

.preloader__mark { width: 92px; height: 92px; margin: 0 auto 26px; overflow: visible; }
.preloader__mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pl-path {
  stroke: var(--line-strong);
  stroke-width: 3;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: draw 1.1s var(--ease) forwards;
}
.pl-spark {
  stroke: var(--gold);
  stroke-width: 3.2;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  filter: drop-shadow(0 0 8px rgba(244, 196, 48, .7));
  animation: draw 1.2s var(--ease) .35s forwards;
}
.pl-c { fill: rgba(244, 196, 48, .28); opacity: 0; animation: popIn .5s var(--ease) forwards; }
.pl-c1 { animation-delay: .8s; }
.pl-c2 { animation-delay: .95s; }
.pl-c3 { animation-delay: 1.1s; }

.preloader__word {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .42em;
  color: var(--muted);
  margin-bottom: 20px;
  padding-inline-start: .42em;
}
.preloader__bar {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  box-shadow: 0 0 14px rgba(244, 196, 48, .8);
  transition: width .25s ease;
}
.preloader__pct {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/*
 * FILE: sections/navbar/navbar.css
 * PURPOSE:
 *   Visual styling + responsive behavior for the site header: the
 *   fluid 3-zone bar, the language/account dropdown menus, and the
 *   full-screen mobile menu panel.
 * RESPONSIBILITY:
 *   Layout, spacing, color, breakpoints and open/closed *visual*
 *   states (.is-open/.is-stuck classes, [hidden]/[aria-expanded]
 *   attributes) for everything under sections/navbar/navbar.html,
 *   including the slide-in mobile menu drawer.
 *   Consumes design tokens from assets/css/variables.css — never
 *   redefines a color/radius that lives there.
 * DEPENDS ON:
 *   assets/css/variables.css (--gold/--line/--glass/etc.),
 *   assets/css/components.css (.btn/.icon-btn base rules — this file
 *   only adds navbar-scoped size/position overrides on top of those).
 * DO NOT:
 *   Touch selectors outside .nav/.mmenu/.nav__menu-*. Don't hardcode
 *   px widths/heights on layout-affecting boxes — use clamp()/%/rem/vw
 *   (absolute positioning + fixed px is fine only for decorative
 *   dropdown chrome like the small check/chevron icons).
 */

/* ---------- NAVBAR ---------- */
/* Every size on this bar (padding, gaps, logo, links, buttons, burger)
   is fluid: clamp()/%/rem/vw only, no fixed px on any layout-affecting
   dimension. One breakpoint (900px) decides full-row vs. hamburger —
   below it, tablet portrait and phones get the same compact layout so
   nothing is ever squeezed into a row too narrow for it. */
body.is-locked { overflow: hidden; }

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 120;
  /* env() falls back to 0px on devices without a notch/dynamic island,
     so this is a no-op there and only adds real inset on ones that
     have it. */
  padding-top: calc(clamp(0.65rem, 1.8vw, 1rem) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(0.65rem, 1.8vw, 1rem);
  padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px));
  /* Always-on dark gradient + a whisper-thin gold hairline at the base,
     independent of the scrolled "is-stuck" state below. */
  background: linear-gradient(180deg, rgba(5, 5, 5, .55), rgba(5, 5, 5, .12) 85%, transparent);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(201, 162, 77, .1);
  transition: padding .4s var(--ease), background .4s ease, border-color .4s ease,
              backdrop-filter .4s ease, box-shadow .4s ease;
}
.nav.is-stuck {
  padding-top: calc(clamp(0.4rem, 1vw, 0.6rem) + env(safe-area-inset-top, 0px));
  padding-bottom: clamp(0.4rem, 1vw, 0.6rem);
  background: var(--glass);
  border-bottom-color: rgba(201, 162, 77, .18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 28px -6px rgba(201, 162, 77, .16);
}
/* Mobile-first: [☰] LEADERS [تسجيل الدخول][إنشاء حساب] as a flex row —
   flex + justify-content: space-between (not grid, not fixed
   positions), each element keeping its own natural size. Grid with
   equal side tracks was tried first for a mathematically-centered
   logo, but the burger (~38px) and the login+register cluster
   (~140px+) are too asymmetric for that: forcing both sides to the
   same track width starved the heavier side below its own buttons'
   needs and pushed "إنشاء حساب" off the edge of the screen on narrow
   phones. Plain flex never forces anything wider than it needs, so it
   can't overflow that way — LEADERS lands close to centered, not
   pixel-perfect, but every element always fits. Desktop swaps in the
   full link row further down but keeps this same flex mechanism. */
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 2.5vw, 2.5rem);
}
/* Mobile/tablet reference calls for the burger physically on the LEFT
   and the language+account cluster physically on the RIGHT (Arabic/
   RTL) — the opposite of plain DOM order (burger is 1st in the
   markup, .nav__actions last), which without this would put the
   burger on the *right* in RTL. `order` only flips the *visual*
   position, not the DOM/tab order (burger → brand → language →
   account stays the logical reading/keyboard sequence) — reset back
   to the default (0, i.e. plain DOM order) at 900px+ below, since a
   leftover `order` here would also reshuffle the desktop CSS Grid's
   auto-placed columns, not just this flex row. */
.burger { order: 3; }
.brand { order: 2; }
.nav__actions { order: 1; }

/* ---------- Full-bleed bar, wide-but-bounded inner content ---------- */
/* .nav already spans the full viewport (position:fixed; inset-inline:0
   above) — the background was never the problem. The shared
   .container (assets/css/components.css) caps at the site's global
   --maxw (1360px), which is fine for reading-width body copy but on a
   1920/2560px monitor reads as the bar floating in a comparatively
   narrow, oddly-centered box with large dead gaps on both sides. This
   widens the navbar's own inner content only (measured: 280px of dead
   gap per side at 1920px, 600px per side at 2560px, before this rule)
   — every other section keeps the shared 1360px cap untouched. */
.nav .container { width: min(96%, 1760px); }

/* ---------- Brand / logo ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  min-width: 0; /* lets the long wordmark shrink/ellipsis instead of forcing overflow */
}
.brand__mark {
  flex: none;
  width: clamp(2rem, 4.5vw, 2.5rem);
  height: clamp(2rem, 4.5vw, 2.5rem);
  display: grid;
  place-items: center;
  border-radius: clamp(0.5rem, 1.2vw, 0.75rem);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(201, 162, 77, .18), transparent 65%);
  transition: transform .4s var(--ease), border-color .4s ease;
}
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.05); border-color: rgba(201, 162, 77, .5); }
.brand__mark svg { width: 58%; height: 58%; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand__mark .brand__line { stroke: var(--gold); filter: drop-shadow(0 0 5px rgba(201, 162, 77, .6)); }

.brand__text { min-width: 0; }
.brand__text strong {
  display: block;
  max-width: 46vw; /* safety net on very narrow phones: ellipsis, never overflow/wrap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* direction: ltr so, if it ever needs to ellipsize, it truncates the
     tail ("LEADERS OF TRA…") instead of the head — without this the
     Latin wordmark inherits the document's RTL direction and clips
     from the start instead ("…ADERS OF TRADING ACADEMY"). */
  direction: ltr;
  text-align: start;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  letter-spacing: clamp(0.01em, 0.4vw, 0.1em);
  font-weight: 700;
}
/* Mobile/tablet: "LEADERS" only. Desktop (900px, same breakpoint as
   the rest of this bar): full "LEADERS OF TRADING ACADEMY".
   ".brand__text strong" above (display:block) outranks a plain
   ".brand__text--full" class on specificity alone, so these repeat
   the "strong" tag to win the tie-break. */
.brand__text strong.brand__text--full { display: none; }
@media (min-width: 900px) {
  .brand__text strong.brand__text--short { display: none; }
  .brand__text strong.brand__text--full { display: block; }
}

/* ---------- Primary links (desktop / tablet-landscape only) ---------- */
.nav__links { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1rem); }
.nav__links a {
  position: relative;
  padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.5rem, 1.2vw, 0.75rem);
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  white-space: nowrap;
  color: var(--muted);
  transition: color .25s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 14%;
  bottom: 0.15em;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--to, left);
  transition: transform .35s var(--ease);
}
html[dir="rtl"] .nav__links a::after { --to: right; }
.nav__links a:hover, .nav__links a.is-current { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }

/* ---------- Actions zone: utility icons | divider | auth buttons ---------- */
/* Three sub-groups so the account buttons read as their own clearly
   separated cluster, not just loose items floating next to the icons. */
.nav__actions { display: flex; align-items: center; gap: clamp(0.85rem, 2.2vw, 1.5rem); }
.nav__utils { display: flex; align-items: center; gap: clamp(0.3rem, 0.8vw, 0.5rem); }
.nav__divider { flex: none; width: 1px; height: 1.4em; background: var(--line-strong); }
/* Breathing room between "دخول/تسجيل الدخول" and "إنشاء حساب". Tighter
   floor than before — both buttons now show together down to the
   smallest phone, not just "إنشاء حساب" alone, so there's less room
   to spare per gap. */
.nav__auth { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1rem); }

/* Fluid, navbar-scoped size override for the shared .btn component —
   keeps the same gold-gradient / outline look used site-wide, just
   sized for this bar instead of the component's own fixed defaults.
   rem+vw (not vw alone) so this actually scales across the mobile
   range instead of sitting flat at its floor until ~1200px+ — small
   and unobtrusive at 375px, back to a normal comfortable size by the
   time the row has real breathing room (~600px). */
.nav__auth .btn {
  padding-block: clamp(0.55rem, 0.3rem + 1.3vw, 0.7rem);
  padding-inline: clamp(0.85rem, 0.5rem + 1.8vw, 1.35rem);
  font-size: clamp(0.78rem, 0.65rem + 0.5vw, 0.85rem);
  /* 2.75rem/44px floor — this is the single visible auth control now
     (not one of two small buttons), and 44px is the standard minimum
     touch target; the old floor (2rem/32px) dipped below that on
     small phones. */
  min-height: clamp(2.75rem, 2.4rem + 0.8vw, 2.875rem);
  border-radius: clamp(0.5rem, 1vw, 0.75rem);
  /* .btn has overflow:hidden (for the ripple effect), which per spec
     makes a flex item's default min-width:auto resolve to 0 instead
     of its content's natural width — without flex-shrink:0 here, a
     tight .nav__auth row on the smallest phones was flex-shrinking
     these buttons *below* their own label's width, clipping the text
     internally instead of the row running out of space some other,
     safer way (e.g. the brand text's own ellipsis). */
  flex-shrink: 0;
}
/* "دخول" (short) under ~27rem/432px, "تسجيل الدخول" (full) above it —
   same idea as the brand name, one size down. Both spans always exist
   in the DOM (for the EN/AR language toggle to capture correctly);
   only one is ever visible. */
.nav__login-text--full { display: none; }
@media (min-width: 27rem) {
  .nav__login-text--short { display: none; }
  .nav__login-text--full { display: inline; }
}
/* Login = dark/transparent with a light gold border, per spec (the
   shared .btn--outline only turns gold on hover; here it's on by
   default, subtly, at all times). */
.nav__auth .btn--outline,
.mmenu__foot .btn--outline {
  border-color: rgba(201, 162, 77, .32);
}

/*
 * DESKTOP LOGIN HOVER FLIP
 * Premium hover/focus interaction for the desktop login trigger — a
 * one-shot Y-axis spin (0deg -> 360deg, always settling back exactly
 * where it started) rather than a two-sided card flip, so the label
 * is never left backwards/unreadable ("لا يبقى الزر مقلوبًا"). Only
 * the inner .nav__auth-trigger-face rotates — the outer .btn keeps
 * its normal sitewide .btn--outline:hover lift (translateY+scale,
 * components.css) completely untouched, so the two effects layer
 * without fighting over the same `transform` property.
 * Desktop only (>=1025px): on touch devices :hover has no real
 * meaning and would otherwise fire (and stick) on tap, which reads as
 * a glitch, not a flourish — matches the same 1025px line the mouse
 * parallax below uses (sections/hero/hero.js's LOTA.state.desktop).
 */
@media (min-width: 1025px) {
  /*
   * DESKTOP LOGIN PROXIMITY GLOW
   * Set by navbar.js as the mouse approaches the button — 0 at rest,
   * ramping to 1 right at the button's own edge (real :hover then
   * takes over with its own stronger, fixed glow below, since it has
   * higher CSS specificity). --login-proximity defaults to 0 here so
   * the glow is a true no-op (0-radius, 0-alpha shadow) whenever
   * navbar.js hasn't touched it — before first mousemove, or once
   * LOTA.state.desktop turns false. Kept faint on purpose ("لا Glow
   * قوي") — this is the *before-hover* hint, not the main glow. */
  .nav__auth-trigger {
    --login-proximity: 0;
    box-shadow: 0 0 calc(var(--login-proximity) * 16px) calc(var(--login-proximity) * -4px) rgba(201, 162, 77, calc(var(--login-proximity) * 0.4));
  }
  .nav__auth-trigger { perspective: 800px; }
  .nav__auth-trigger-face {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.625rem);
    backface-visibility: hidden;
  }
  /* Single place to retune the flip: duration/easing here, degrees in
     the @keyframes below. */
  .nav__auth-trigger:hover .nav__auth-trigger-face,
  .nav__auth-trigger:focus-visible .nav__auth-trigger-face {
    animation: navLoginFlip 500ms var(--ease);
  }
  @keyframes navLoginFlip {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
  }
  /* Extra gold glow layered on top of (and overriding, same
     specificity but declared later) .btn--outline:hover's own subtle
     shadow — a bit more presence for the single most important button
     in the bar. Border color already goes gold via the shared
     .btn--outline:hover rule. */
  .nav__auth-trigger:hover, .nav__auth-trigger:focus-visible {
    box-shadow: 0 0 0 1px rgba(201, 162, 77, .2), 0 0 22px -8px rgba(201, 162, 77, .5);
  }
  /* Chevron gets its own tiny independent nudge — combined explicitly
     with the dropdown-open rotation (nav__menu.is-open) below instead
     of relying on cascade override, since both would otherwise fight
     over the same `transform` property on the same element. */
  .nav__auth-trigger:hover .nav__menu-chevron,
  .nav__auth-trigger:focus-visible .nav__menu-chevron {
    transform: translateY(-2px);
  }
  .nav__menu.is-open .nav__auth-trigger:hover .nav__menu-chevron,
  .nav__menu.is-open .nav__auth-trigger:focus-visible .nav__menu-chevron {
    transform: rotate(180deg) translateY(-2px);
  }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .nav__auth-trigger:hover .nav__auth-trigger-face,
  .nav__auth-trigger:focus-visible .nav__auth-trigger-face {
    animation: none;
  }
}

/* Theme toggle sun/moon icons (navbar-exclusive — .icon-btn itself now
   lives in components.css since the auth pages use it too) */
.ico-sun { display: none; }
.ico-moon { display: block; }
[data-theme="light"] .ico-sun { display: block; }
[data-theme="light"] .ico-moon { display: none; }

/* ---------- Dropdown menus (language + account) ---------- */
/* One shared pattern for both triggers — navbar.js only ever toggles
   [hidden] + .is-open on this markup (open/close, outside click,
   Escape); the actual "what happens when an item is picked" logic
   stays with each concern (assets/js/language.js for [data-lang],
   plain <a> navigation for the account links). Panel is a *sibling*
   of the trigger button, not a child of it — .btn has overflow:hidden
   for its ripple effect, which would otherwise clip the panel. */
.nav__menu { position: relative; }
.nav__menu-trigger { position: relative; z-index: 1; }
.nav__menu-trigger[aria-expanded="true"] { color: var(--gold); border-color: rgba(201, 162, 77, .45); }

.nav__menu-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  /* Anchored to inline-*start* by default (mobile/tablet, <900px):
     below 900px .nav__actions carries `order: 1` (see the base
     .nav__row rule above) so the language+account cluster sits
     physically at the row's start edge (right in RTL, left in LTR) —
     right up against the viewport edge on phones. Anchoring the panel
     to its *start* edge and letting it grow toward inline-end keeps it
     growing back into the screen instead of off the edge; the old
     inset-inline-end:0 (still correct on desktop, restored at 900px
     below where .nav__actions moves to justify-self:end instead) grew
     the *wrong* direction here and pushed both dropdowns 20-100px past
     the right edge on phones — confirmed via measured overflow at
     360-430px widths, not a hypothetical. */
  inset-inline-start: 0;
  z-index: 5;
  min-width: 10.5rem;
  /* Second, viewport-relative backstop on top of the fixed cap: even
     anchored correctly, a 15rem-wide panel could still clip on the
     very narrowest phones once the bar's own inline padding is
     subtracted — calc(100vw - 2rem) guarantees at least 1rem of
     breathing room on each side no matter how tight the trigger sits
     to the edge. */
  max-width: min(15rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem;
  border-radius: clamp(0.65rem, 1.5vw, 0.85rem);
  border: 1px solid rgba(201, 162, 77, .22);
  background: var(--glass);
  /* Base drop shadow + a soft, subtle gold glow layered on top (per
     spec: "Subtle glow" — kept faint, this isn't meant to read as a
     bright accent, just a warm lift off the dark backdrop). */
  box-shadow: var(--shadow-lg), 0 0 26px -10px rgba(201, 162, 77, .35);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.nav__menu.is-open .nav__menu-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
/* .nav__menu-panel's own `display: flex` above is an author rule, so
   it always wins the cascade over the browser's default UA rule
   `[hidden] { display: none }` — without this override the panel
   stayed genuinely rendered (just invisible via opacity) whenever
   navbar.js set [hidden], which is wrong for assistive tech and
   confused Playwright's own visibility checks while testing this. */
.nav__menu-panel[hidden] { display: none; }

.nav__menu-item {
  /* Reset button-specific UA chrome — this class is shared by <button>
     (language options) and <a> (account links); <a> has none of this
     to begin with, so the reset is a no-op there. */
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: clamp(0.55rem, 1.6vw, 0.7rem) clamp(0.65rem, 1.8vw, 0.8rem);
  border-radius: clamp(0.4rem, 1vw, 0.55rem);
  font: inherit;
  font-size: clamp(0.82rem, 1.3vw, 0.875rem);
  font-weight: 600;
  color: var(--muted);
  text-align: start;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav__menu-item:hover, .nav__menu-item:focus-visible { color: var(--text); background: var(--surface-hover); }

/* Language items: checkmark shows only next to the active language */
.nav__menu-check { width: 0.9rem; height: 0.9rem; flex: none; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; }
.nav__menu-item[aria-checked="true"] { color: var(--text); }
.nav__menu-item[aria-checked="true"] .nav__menu-check { opacity: 1; }

/* Globe icon (language trigger) — same stroke system as the sun/moon
   icons above so every icon in the bar reads as one consistent set. */
.ico-globe { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Account-menu chevron: small affordance that the trigger opens a
   panel; hidden on the narrowest phones (see mobile-first block
   below) purely to keep the compact bar breathing at ~320px. */
.nav__menu-chevron { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav__menu.is-open .nav__menu-chevron { transform: rotate(180deg); }
.nav__menu-chevron { display: none; }
@media (min-width: 30rem) { .nav__menu-chevron { display: block; } }

/* ---------- Menu button — premium square, 3-line -> X morph ---------- */
/* A real button carrying the site's own identity (gold-bordered
   square, subtle glow) instead of a bare pair of lines. Three
   absolutely-positioned bars inside a relative box, each independently
   at top:34%/50%/66% — the open-state math is then exact (all three
   converge on the same 50% center line), unlike animating percentage
   translateY on the bars themselves, which resolves against each
   bar's own (tiny) height, not the button's. */
.burger {
  display: none;
  position: relative;
  flex: none;
  width: clamp(2.5rem, 6vw, 2.875rem);
  height: clamp(2.5rem, 6vw, 2.875rem);
  border: 1px solid rgba(201, 162, 77, .35);
  background: linear-gradient(150deg, rgba(201, 162, 77, .1), rgba(0, 0, 0, .35));
  border-radius: clamp(0.5rem, 1.2vw, 0.75rem);
  cursor: pointer;
  padding: 0;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.burger:hover, .burger:focus-visible {
  border-color: rgba(201, 162, 77, .6);
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .18), 0 0 16px -4px rgba(201, 162, 77, .55);
}
.burger[aria-expanded="true"] {
  border-color: rgba(201, 162, 77, .7);
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .22), 0 0 18px -3px rgba(201, 162, 77, .6);
}
.burger span {
  position: absolute;
  left: 50%;
  width: 44%;
  height: clamp(1.5px, 0.25vw, 2px);
  background: var(--text);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: top .3s var(--ease), transform .3s var(--ease), opacity .2s ease;
}
.burger span:nth-child(1) { top: 34%; }
.burger span:nth-child(2) { top: 50%; }
.burger span:nth-child(3) { top: 66%; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }

/* ---------- Mobile menu — slide-in drawer ---------- */
/* .mmenu is the full-viewport backdrop/scrim and the click-outside
   target; .mmenu__panel is the actual bounded-width drawer that
   slides in from the inline-start edge — right in RTL, left in LTR,
   via the --mmenu-x custom property below — so it reads as a
   "panel", not a second full-screen page. navbar.js only ever toggles
   [hidden] + .is-open on .mmenu itself; the panel's transform reacts
   to that same class. */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--scrim);
  opacity: 0;
  /* [hidden]'s UA display:none is overridden by .mmenu__panel's own
     `position: absolute` needing this to be a positioning context, so
     without pointer-events:none this full-viewport backdrop would
     silently intercept clicks on everything behind it even while
     "closed". */
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.mmenu.is-open { opacity: 1; pointer-events: auto; }

.mmenu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(85vw, 24rem);
  max-width: 100%;
  padding-top: calc(clamp(5.5rem, 14vw, 6.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(1.5rem, 4vw, 2rem) + env(safe-area-inset-bottom, 0px));
  padding-inline-start: calc(var(--pad-x) + env(safe-area-inset-left, 0px));
  padding-inline-end: var(--pad-x);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(8, 8, 8, .97), rgba(3, 3, 3, .99));
  border-inline-end: 1px solid rgba(201, 162, 77, .28);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  /* Closed: fully off-canvas toward the inline-end side (away from
     the edge it's pinned to). --mmenu-x is -100% (slide out to the
     left) by default; the RTL rule below flips the sign so it slides
     out to the right instead — same "off toward inline-end" logic,
     just resolved for the direction the panel is actually pinned to. */
  transform: translateX(var(--mmenu-x, -100%));
  transition: transform .4s var(--ease);
}
html[dir="rtl"] .mmenu__panel { --mmenu-x: 100%; }
.mmenu.is-open .mmenu__panel { --mmenu-x: 0%; }

.mmenu__links { display: flex; flex-direction: column; gap: clamp(0.15rem, 1vw, 0.35rem); flex: none; }
.mmenu__links a {
  padding-block: clamp(0.75rem, 3vw, 0.95rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(1rem);
}
.mmenu.is-open .mmenu__links a { animation: mIn .5s var(--ease) forwards; }
.mmenu.is-open .mmenu__links a:nth-child(1) { animation-delay: .06s; }
.mmenu.is-open .mmenu__links a:nth-child(2) { animation-delay: .12s; }
.mmenu.is-open .mmenu__links a:nth-child(3) { animation-delay: .18s; }
.mmenu.is-open .mmenu__links a:nth-child(4) { animation-delay: .24s; }

/* Separator between nav links and account actions, per spec. */
.mmenu__sep { flex: none; height: 1px; margin-block: clamp(1rem, 4vw, 1.5rem); background: linear-gradient(90deg, rgba(201, 162, 77, .4), transparent); }

.mmenu__foot { flex: none; display: grid; gap: clamp(0.6rem, 2vw, 0.75rem); }
.mmenu__foot .btn { min-height: clamp(2.75rem, 8vw, 3.25rem); font-size: clamp(0.9rem, 3vw, 1rem); }
.mmenu__action-icon { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Language + theme utility rows — compact, below the two primary
   account actions ("لا تجعلها مزدحمة": smaller scale than the .btn
   actions above, not another pair of full-size buttons). */
.mmenu__utils { flex: none; display: flex; flex-direction: column; gap: clamp(0.5rem, 2vw, 0.65rem); margin-top: clamp(1rem, 4vw, 1.5rem); }
.mmenu__lang, .mmenu__theme {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.7rem);
  padding: clamp(0.4rem, 1.2vw, 0.5rem);
  border: 1px solid var(--line);
  border-radius: clamp(0.6rem, 1.5vw, 0.75rem);
  background: var(--surface-soft);
}
.mmenu__lang-icon, .mmenu__theme svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mmenu__lang-opt {
  flex: 1;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding-block: clamp(0.45rem, 1.4vw, 0.55rem);
  border-radius: clamp(0.4rem, 1vw, 0.55rem);
  font: inherit;
  font-size: clamp(0.82rem, 2vw, 0.9rem);
  font-weight: 600;
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.mmenu__lang-opt[aria-checked="true"] { color: var(--bg); background: var(--gold); }
.mmenu__theme {
  width: 100%;
  appearance: none;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  font-size: clamp(0.82rem, 2vw, 0.9rem);
  font-weight: 600;
}

/* Mobile-first: base (unqualified) rules below are the phone/tablet-
   portrait layout — [☰] LEADERS [🌐][تسجيل الدخول]. Nav links live in
   the mobile menu instead of being crushed into one row; the theme
   toggle moves there too (see .mmenu__foot) so the top bar never grows
   past those 4 elements. The language menu stays in the bar itself at
   every width — the spec calls for it in the compact mobile bar too.
   The min-width query is the *only* place the full desktop row
   switches on — nothing above this assumes desktop. */
.nav__links, .nav__divider { display: none; }
.nav__theme-toggle { display: none; }
.burger { display: grid; }

/* Tablet portrait/landscape between the phone bar and the full desktop
   row (iPad mini/iPad/Air at 768–899px width) — same compact-bar
   *contents* as phone (still a hamburger for the nav links: forcing
   the full desktop row in here was tested and measured to wrap
   "تسجيل الدخول" onto two lines inside its own button and squeeze the
   wordmark down to "LEADERS OF T…" — real crowding, not just cozy),
   but richer and less sparse: theme toggle + divider join language,
   and the row itself is capped to a comfortable width and centered
   instead of stretching 3 small clusters across the full bar with
   large dead gaps between them. */
@media (min-width: 48rem) and (max-width: 899.98px) {
  .nav__theme-toggle { display: grid; }
  .nav__divider { display: block; }
  .nav__row { max-width: min(90%, 36rem); margin-inline: auto; }
}

@media (min-width: 900px) {
  /* .nav__row switches from flex to grid here (see below) — this
     tier also swaps which zones are visible (full link row + theme
     toggle + divider back in, burger out). .nav__utils itself is
     flex at every width already (see its own rule above) since the
     language menu inside it never hides. */
  .nav__links { display: flex; }
  .nav__theme-toggle { display: grid; }
  .nav__divider { display: block; }
  .burger { display: none; }

  /* True mathematical centering for the nav-links zone, independent
     of the brand/actions clusters' own (unequal) widths — flex's
     justify-content:space-between only balances the *gaps*, not the
     zone itself, so nav links drift off-center whenever the brand and
     actions clusters differ in width (they always do, in both
     directions). Grid's two equal 1fr side tracks fix that outright.
     Below 900px .nav__row stays flex (see the big comment above its
     base rule) — the burger+brand vs. auth-button asymmetry there is
     too extreme for equal grid tracks without risking overflow; that
     risk doesn't exist here since the desktop row has no burger and
     comfortably more width. */
  .nav__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  /* Reset the mobile-only `order` (base rule, above) back to plain DOM
     order — grid auto-placement respects `order` same as flex, so a
     leftover mobile value here would put .nav__actions in column 1
     and .brand in column 3 instead of the intended brand|links|actions
     left-to-right-in-DOM assignment. */
  .burger, .brand, .nav__actions { order: 0; }
  .brand { justify-self: start; }
  .nav__links { justify-self: center; }
  .nav__actions { justify-self: end; }
  /* .nav__actions moves to the grid's *end* track here (physical left
     in RTL) — restore the dropdown panels' original end-anchor so they
     keep growing back into the screen from their new position too. */
  .nav__menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
}

/*
 * FILE: sections/hero/hero.css
 * PURPOSE:
 *   Visual/responsive styling for the homepage hero: typography
 *   scale, spacing, the 15 floating candle characters' per-breakpoint
 *   orbit positions, and the ambient canvas overlay.
 * RESPONSIBILITY:
 *   Layout, spacing, color, typography and the candles' *positions*
 *   (their runtime transform/animation is sections/hero/hero.js).
 *   Consumes design tokens from assets/css/variables.css.
 * DO NOT:
 *   Give a candle a fixed px position tied to one screen size — every
 *   slot is --cx/--cy (percent of the hero box) per breakpoint tier.
 *   Don't modify selectors outside .hero/.candle*.
 */
/* ---------- HERO ---------- */
/* Mobile-first throughout this file: every unqualified rule below is
   the phone layout; min-width queries near the bottom progressively
   layer on tablet/iPad and desktop — nothing is built desktop-first
   and then patched down. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Full-screen on phones ("Hero يجب أن يملأ الشاشة") — .nav is
     position:fixed at every width (see navbar.css), so it overlays
     the top of this box rather than pushing it down; .hero__inner's
     own top padding below already clears the bar, so sizing .hero
     itself to the full viewport doesn't hide anything behind it.
     Declared three times, each line only understood by browsers new
     enough to also get it right, later ones winning the cascade where
     supported: vh (universal fallback) → svh ("small viewport height",
     Safari's address bar can't shrink this out from under the layout)
     → dvh ("dynamic viewport height", tracks the *current* toolbar
     state live so no gap opens up when the address bar hides on
     scroll). Can't combine into one clamp()/value — an unrecognized
     unit invalidates the whole declaration, not just that argument. */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
}

/* Animated backdrop (sections/hero/hero.js draws into #heroFx).
   The overlay sits above the canvas and below everything else so the
   drifting lines/dots stay legible without ever competing with text. */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__fx-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scrim);
  opacity: .62;
}

/* Soft "chart horizon" separator at the hero/next-section boundary —
   a thin gold gradient line with a faint glow, so the transition into
   the next section reads as deliberate instead of an abrupt cut. */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 77, .45) 50%, transparent);
  box-shadow: 0 0 16px 1px rgba(201, 162, 77, .22);
  pointer-events: none;
}

/* ---------- Centered single-column content ---------- */
.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  /* Trimmed from an earlier, much taller top padding that (combined
     with a tall forced .hero min-height) was reading as a big dead
     gap above/below the content on phones. Safe-area-aware: additive
     on top of the fluid value, 0 on devices without a notch. No
     padding on .hero itself — see the note on .hero__candles further
     down for why that specifically has to stay padding-free. */
  padding-top: calc(clamp(4.5rem, 15vw, 6.5rem) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(1.75rem, 5vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
}
.hero__copy {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.hero__copy .eyebrow { justify-content: center; }
.hero__title {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  /* Bigger phone floor (was 1.7rem) and steeper vw scaling (was 7vw)
     so the title reads as a strong, confident headline relative to
     the hero's own width, not undersized next to all that open space. */
  font-size: clamp(2.1rem, 9vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance; /* avoids a lone short/orphan word on its own line */
}
html[lang="ar"] .hero__title { text-transform: none; letter-spacing: 0; line-height: 1.28; }
.hero__title-line { display: block; color: var(--text); }
.hero__title-line--accent { color: var(--gold); }

.hero__sub {
  /* width:min(...) instead of a ch-based max-width — noticeably wider
     on phones (was capping out around 36ch, i.e. quite narrow) so the
     paragraph settles into ~3–4 lines instead of many narrow ones. */
  width: min(94%, 30rem);
  max-width: 100%;
  margin: 0.85rem auto 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 2.4vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero__cta {
  position: relative;
  /* fit-content so the box hugs the actual centered buttons instead of
     spanning the full .hero__copy width — a flex container is still
     block-level by default, and candles positioned near that invisible
     full-width edge would otherwise measure as "overlapping the CTA"
     despite being nowhere near the actual buttons. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  margin-top: clamp(1.1rem, 3.5vw, 1.75rem);
}
.hero__cta .btn { min-width: 0; } /* lets equal-width flex children below actually shrink evenly */

/* Small circular arrow badge inside each CTA button (reference-design
   detail). DOM order is label-then-badge; in RTL (default) that lands
   the badge at the visual *left* edge — matching the reference — and
   in LTR the same DOM order lands it at the right, so the chevron is
   mirrored via the [dir] rule below rather than swapping DOM order. */
.btn__arrow {
  display: inline-grid;
  place-items: center;
  width: clamp(1.4rem, 4vw, 1.6rem);
  height: clamp(1.4rem, 4vw, 1.6rem);
  flex: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
}
.btn--outline .btn__arrow { background: rgba(255, 255, 255, .08); }
.btn__arrow svg { width: 45%; height: 45%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .btn__arrow svg { transform: scaleX(-1); }

/* Social proof strip ("stats" in the mobile content order) — its own
   small pill instead of a divider-topped row, so it reads as a
   deliberate piece of the hero rather than a leftover debug box.
   fit-content for the same reason as .hero__title/.hero__cta above:
   a flex container is block-level by default, so without it, candles
   positioned near the invisible full-width edge would read as
   "overlapping the strip" despite being nowhere near the visible
   pill. Border/glow reuse the rgb(201,162,77) gold triplet (not
   var(--gold), a hex that can't feed an rgba() alpha) already used
   below for .hero__proof-icon, so the pill and the icon badge read as
   one consistent gold, never the theme-default candle gold. */
.hero__proof {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin-top: clamp(1.25rem, 3.5vw, 1.75rem);
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(201, 162, 77, .16);
  background: linear-gradient(180deg, rgba(201, 162, 77, .07), rgba(201, 162, 77, .015));
  box-shadow: 0 0 22px -6px rgba(201, 162, 77, .3);
}
/* Single users/students glyph standing in for the old four-initial
   avatar cluster (NF/KA/LH/OM) — those read as unlabeled noise rather
   than a trust signal, so one clear icon carries the same "people"
   meaning without needing invented names. Same gold-gradient badge
   language as the rest of the pill (kept size-matched to the old
   avatar footprint, not enlarged). Fade+scale in once .hero__proof is
   revealed (see .reveal/is-visible in assets/css/components.css);
   opacity/transform only, so this never shifts layout or affects
   scroll performance. */
.hero__proof-icon {
  width: 1.85rem; height: 1.85rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  background: linear-gradient(150deg, rgba(201, 162, 77, .55), rgba(201, 162, 77, .14));
  opacity: 0;
  transform: scale(.85);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__proof.is-visible .hero__proof-icon { opacity: 1; transform: scale(1); }
.hero__proof-icon svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: #FFE9B8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__proof-text { font-size: clamp(0.78rem, 2vw, 0.84375rem); color: var(--muted); }
.hero__proof-text strong { color: var(--text); font-weight: 700; }

/* ================================================================
   CANDLE CHARACTERS — 15 glass/metallic candlesticks with large,
   expressive eyes. position:absolute over .hero at every tier (phone
   included) — never in normal content flow, so they can never add
   extra page height or "detach" from the hero visually.

   Layout logic: each candle sits on an ellipse (an "orbit") around
   the content — see the --cx/--cy tables per breakpoint below. The
   orbit radius is chosen (and verified against the actual rendered
   title/sub/CTA/proof boxes) to stay clear of a center safe zone that
   the text occupies — that's the mechanism behind "no candle ever
   enters the text/button area", not a runtime collision check.

   hero.js owns each candle's whole `transform` at runtime (idle float
   + entrance + turning-away-from-navbar-buttons) — position/size here
   are the only CSS-driven numbers, never top/left animated directly.
   Blinking is a separate, plain CSS animation on .candle__eye, fully
   decoupled from the JS-driven body/pupil transforms (see "Blink").
   ================================================================ */
.hero__candles {
  /* inset:0 against .hero, which must stay padding-free (padding
     moved to .hero__inner instead): the containing block for an
     absolutely-positioned element is its ancestor's *padding box*
     (per spec), and hero.js's --cx/--cy math reads
     hero.getBoundingClientRect() — the full border box. If .hero
     carried padding, those two boxes would differ and every candle's
     real position would drift from its intended slot.

     --candle-scale-mult / --candle-max-opacity: the "distant
     background, not foreground characters" treatment — read once by
     hero.js (syncFromCss) and folded into its own scale/opacity math
     alongside each candle's own --scale, rather than rewriting all 45
     --scale values across 3 breakpoints (which were individually
     tuned against the actual rendered text boxes — safer to scale the
     *result* uniformly than to re-tune every number). Mobile gets a
     smaller/fainter multiplier than desktop per spec ("Desktop: بعيدة
     وخلفية. Mobile: أبعد وأكثر شفافية"). */
  --candle-scale-mult: 0.6;
  --candle-max-opacity: 0.26;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Phone reference calls for the animated #heroFx canvas (drifting
     chart lines + gold particles, right above) to carry the whole
     background on its own — "لا توجد شموع الشخصيات الكبيرة الموزعة"
     — rather than the character candles. Re-enabled at the tablet
     tier below (48rem+), where there's enough width for them to read
     as a deliberate ring around the content instead of clutter.
     hero.js's candle loop keeps running underneath regardless (same
     as at every other tier) — it fails quietly against a hidden
     container, and gating it on a media check would risk candles
     stuck at their un-animated opacity:0 base state if a phone is
     ever rotated into this width tier mid-session. */
  display: none;
}
/* Platform the desktop pyramid stands on (>=1025px, see the
   DESKTOP HERO CANDLE PYRAMID + PLATFORM block near the end of this
   file) — explicitly hidden below that, same convention as
   .candle--16..19, rather than relying on an empty static <div>
   rendering as a harmless zero-height box. */
.hero__platform { display: none; }

.candle {
  position: absolute;
  left: calc(var(--cx, 50) * 1%);
  top: calc(var(--cy, 50) * 1%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0; /* hero.js fades/scales these in on entrance, capped at --candle-max-opacity */
  /* Soft-focus depth cue — reads as "far away", not "in front of the
     text". Kept modest (not so heavy the green/red + eyes stop being
     legible as candles at all) and static (not part of any per-frame
     animation), so it costs nothing beyond the one-time rasterize. */
  filter: blur(clamp(1px, 0.2vw, 1.6px));
  will-change: transform;
}
/* Smallest phones only: trim to the 10 least-central-looking slots —
   the full 15-candle system still exists in the DOM/JS, min-width
   below brings the rest back in well before this reads as sparse.
   (11/12 sit in the tight gap just after the CTA/before the proof
   strip — safe from ~360px width up, but not on the very smallest
   phones where that gap is thinner than the proof strip is wide.) */
.candle--11, .candle--12, .candle--13, .candle--14, .candle--15 { display: none; }
/* candle--16..19 exist only for the desktop two-column tier's denser
   left cluster (>=1025px, see that block near the end of this file) —
   no mobile/tablet --cx/--cy is ever declared for them, so they stay
   hidden at every tier up to that point instead of rendering stacked
   at the CSS fallback 50%/50% center. */
.candle--16, .candle--17, .candle--18, .candle--19 { display: none; }

@media (min-width: 24rem) { /* ~384px */
  .candle--11, .candle--12 { display: flex; }
}

.candle__glow {
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-glow), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}
.candle__wick {
  width: clamp(2px, .3vw, 3px);
  height: clamp(0.4rem, 1.6vw, 1rem);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55));
  border-radius: 2px;
}
.candle__wick--bottom { background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent); }
.candle__body {
  position: relative;
  /* Raised phone floor (was 1.15rem/2.3rem) — big enough that the
     eyes stay clearly readable even at the smallest --scale. */
  width: clamp(1.4rem, 4.4vw, 2.5rem);
  height: clamp(2.75rem, 8vw, 5.25rem);
  border-radius: clamp(0.3rem, 1vw, 0.6rem);
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .4), transparent 34%),
    linear-gradient(180deg, var(--c-a), var(--c-b));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -0.5rem 0.7rem rgba(0, 0, 0, .35),
    0 0.5rem 1.6rem -0.5rem var(--c-glow);
}
.candle--up   { --c-a: #3fe08a; --c-b: #0a8a4b; --c-glow: rgba(0, 210, 106, .5); }
.candle--down { --c-a: #ff8688; --c-b: #b3282a; --c-glow: rgba(255, 77, 79, .5); }

/* ---------- Eyes — big, clear, "alive" without being cartoonish ---------- */
.candle__eyes {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14%;
}
.candle__eye {
  width: clamp(0.62rem, 2.3vw, 1.05rem);
  height: clamp(0.62rem, 2.3vw, 1.05rem);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #dbe1ef 70%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .28),
    0 0 0.35rem rgba(255, 255, 255, .3);
  position: relative;
  transform-origin: center;
  /* Independent from body/pupil JS transforms — see @keyframes blink. */
  animation: blink 5.4s ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
}
.candle__pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #513a12, #0a0a0a 78%);
  /* hero.js sets --px/--py (px offsets, clamped to the eye radius) each
     frame — a translate3d delta layered on the eye's own centering. */
  transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0);
}
/* Small fixed reflection highlight — reads as "alive glass eye"
   without any animation of its own. */
.candle__eye-shine {
  position: absolute;
  top: 20%;
  left: 24%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  filter: blur(0.2px);
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

/* ---------- Base (mobile) slots ---------- */
/* Hand-placed rows hugging the left/right margins around the stacked
   text (not an ellipse formula — mobile's tall-narrow aspect ratio
   doesn't suit one; tablet/desktop below do use an orbit formula).
   --blink-delay is set once here and carries through every tier —
   blink timing doesn't need to change with layout. */
/* Rows tuned against measured content bands (title ~29-45%, sub
   ~48-58% but nearly full-width, cta ~61-77% and narrow, proof
   ~81-88% and nearly full-width again) — edge candles are safe next
   to the narrow blocks (title/cta) but the wide ones (sub/proof) leave
   almost no side margin, so rows there are placed just *before* or
   *after* them instead of beside them. */
.candle--1  { --cx: 14; --cy: 4;  --scale: 0.62; --blink-delay: 0.37s; }
.candle--2  { --cx: 86; --cy: 4;  --scale: 0.62; --blink-delay: 0.74s; }
.candle--3  { --cx: 11; --cy: 17; --scale: 0.68; --blink-delay: 1.11s; }
.candle--4  { --cx: 89; --cy: 17; --scale: 0.68; --blink-delay: 1.48s; }
.candle--5  { --cx: 10; --cy: 33; --scale: 0.65; --blink-delay: 1.85s; }
.candle--6  { --cx: 90; --cy: 33; --scale: 0.65; --blink-delay: 2.22s; }
.candle--7  { --cx: 8;  --cy: 38; --scale: 0.62; --blink-delay: 2.59s; }
.candle--8  { --cx: 92; --cy: 38; --scale: 0.62; --blink-delay: 2.96s; }
.candle--9  { --cx: 11; --cy: 64; --scale: 0.65; --blink-delay: 3.33s; }
.candle--10 { --cx: 89; --cy: 64; --scale: 0.65; --blink-delay: 3.7s;  }
.candle--11 { --cx: 6;  --cy: 90; --scale: 0.6;  --blink-delay: 4.07s; }
.candle--12 { --cx: 94; --cy: 90; --scale: 0.6;  --blink-delay: 4.44s; }
.candle--13 { --cx: 19; --cy: 95; --scale: 0.55; --blink-delay: 4.81s; }
.candle--14 { --cx: 81; --cy: 95; --scale: 0.55; --blink-delay: 5.18s; }
.candle--15 { --cx: 50; --cy: 97; --scale: 0.5;  --blink-delay: 0.35s; }

/* ---------- Cursor trail ---------- */
/* A small, quiet point of gold light that lags gently behind the
   pointer (fine-pointer devices only) — distinct from the larger
   ambient .pointer-glow used site-wide (assets/js/animations.js),
   which stays as-is. hero.js drives its position via translate3d. */
.hero__trail {
  position: fixed;
  top: 0; left: 0;
  z-index: 5;
  width: clamp(0.5rem, 1vw, 0.75rem);
  height: clamp(0.5rem, 1vw, 0.75rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 191, 59, .9), rgba(246, 191, 59, 0) 70%);
  box-shadow: 0 0 0.9rem 0.15rem rgba(246, 191, 59, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.hero__trail.is-active { opacity: 1; }

/* ---------- Scroll indicator (mobile/tablet only) ---------- */
/* A quiet "keep going" cue at the foot of the hero — hidden on
   desktop (see the >=1025px rule further down) since the pyramid
   composition there doesn't use one. transform/opacity only, per the
   GPU-friendly-animation rule elsewhere in this file — never
   top/left. Decorative (aria-hidden, pointer-events:none, no link) —
   the reference shows a visual cue, not a functional control. */
.hero__scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(clamp(0.9rem, 3vw, 1.4rem) + env(safe-area-inset-bottom, 0px));
  width: clamp(1.6rem, 5vw, 2rem);
  height: clamp(1.6rem, 5vw, 2rem);
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: .7;
  pointer-events: none;
  animation: heroScrollBounce 2.4s var(--ease) infinite;
}
.hero__scroll svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; transform: translateX(-50%); }
  /* Skips hero.js's entrance/idle transform entirely (see the early
     LOTA.state.reduced return in the candle IIFE), so opacity/scale
     have to be set here instead of relying on the JS-driven values —
     var(--candle-max-opacity), not a flat 1, so reduced-motion visitors
     still get the "distant background" look, not full-strength candles. */
  .candle { opacity: var(--candle-max-opacity, .3) !important; transform: scale(var(--candle-scale-mult, .6)) !important; }
  .candle__eye { animation: none; }
  .hero__trail { display: none; }
  .hero__proof-icon { transition: none; opacity: 1; transform: none; }
}

/* ================================================================
   MOBILE-FIRST BREAKPOINTS — every rule above this point is the
   phone layout. Each query below only *adds* capability going up.
   ================================================================ */

@media (min-width: 26rem) { /* ~416px: bring the trimmed candles back */
  .candle--13, .candle--14, .candle--15 { display: flex; }
}

@media (min-width: 30rem) { /* ~480px: CTA row instead of stacked column */
  /* A real (not fit-content) width here + flex:1 on both buttons is
     what makes "ابدأ رحلتك" and "استكشف المنصة" the same visual size
     even though their labels are different lengths — and because the
     buttons now stretch to fill the box exactly, there's no invisible
     margin left over for a candle to falsely "overlap" either. */
  .hero__cta {
    width: min(100%, 26rem);
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero__cta .btn { flex: 1 1 0; }
}

/* Tablet / iPad portrait and up: fuller orbit, still tighter than
   desktop ("تقليل الحجم والمسافات مع الحفاظ على شكل الحلقة"). */
@media (min-width: 48rem) { /* 768px */
  .hero { min-height: clamp(38rem, 82vh, 48rem); }
  .hero { min-height: clamp(38rem, 82svh, 48rem); } /* svh progressive enhancement — see the base .hero rule's comment */
  .hero { min-height: clamp(38rem, 82dvh, 48rem); } /* dvh progressive enhancement, same reasoning */
  .hero__candles { display: block; } /* re-enable the character candles — phones hide them, see the base rule's comment */
  .hero__inner { padding-block: clamp(9rem, 14vh, 11.25rem) clamp(5rem, 8vw, 7rem); }
  .hero__title { font-size: clamp(2.75rem, 5.5vw, 4.875rem); }
  .hero__candles { --candle-scale-mult: 0.68; --candle-max-opacity: 0.34; }

  .candle--1  { --cx: 90.1; --cy: 58.1; --scale: 0.68; }
  .candle--2  { --cx: 83.2; --cy: 72.9; --scale: 0.72; }
  .candle--3  { --cx: 70.5; --cy: 80;   --scale: 0.65; }
  .candle--4  { --cx: 54.3; --cy: 86;   --scale: 0.42; }
  .candle--5  { --cx: 37.3; --cy: 88;   --scale: 0.35; }
  .candle--6  { --cx: 22.6; --cy: 79;   --scale: 0.72; }
  .candle--7  { --cx: 12.5; --cy: 65.9; --scale: 0.65; }
  .candle--8  { --cx: 9;    --cy: 50;   --scale: 0.75; }
  .candle--9  { --cx: 12.5; --cy: 34.1; --scale: 0.68; }
  .candle--10 { --cx: 22.6; --cy: 21;   --scale: 0.72; }
  .candle--11 { --cx: 37.3; --cy: 8;    --scale: 0.5;  }
  .candle--12 { --cx: 54.3; --cy: 11.2; --scale: 0.7;  }
  .candle--13 { --cx: 70.5; --cy: 16.2; --scale: 0.6;  }
  .candle--14 { --cx: 83.2; --cy: 27.1; --scale: 0.65; }
  .candle--15 { --cx: 90.1; --cy: 41.9; --scale: 0.58; }
}

/* Laptop / desktop: full orbit, wide spread, largest sizes. */
@media (min-width: 67.5rem) { /* 1080px */
  .hero { min-height: clamp(40rem, 88vh, 52rem); }
  .hero__title { font-size: clamp(3.375rem, 4.6vw, 4.75rem); }
  .hero__copy { max-width: 50rem; }
  .hero__candles { --candle-scale-mult: 0.78; --candle-max-opacity: 0.42; }

  .candle--1  { --cx: 95;   --cy: 59.1; --scale: 0.85; }
  .candle--2  { --cx: 87.2; --cy: 75.9; --scale: 0.95; }
  .candle--3  { --cx: 73;   --cy: 79;   --scale: 0.8;  }
  .candle--4  { --cx: 54.8; --cy: 87;   --scale: 0.45; }
  .candle--5  { --cx: 35.8; --cy: 81;   --scale: 0.85; }
  .candle--6  { --cx: 19.2; --cy: 82.7; --scale: 0.95; }
  .candle--7  { --cx: 8;    --cy: 67.9; --scale: 0.8;  }
  .candle--8  { --cx: 4;    --cy: 50;   --scale: 1;    }
  .candle--9  { --cx: 8;    --cy: 32.1; --scale: 0.85; }
  .candle--10 { --cx: 19.2; --cy: 17.3; --scale: 0.95; }
  .candle--11 { --cx: 35.8; --cy: 8.2;  --scale: 0.8;  }
  .candle--12 { --cx: 54.8; --cy: 6.2;  --scale: 0.9;  }
  .candle--13 { --cx: 73;   --cy: 11.9; --scale: 0.72; }
  .candle--14 { --cx: 87.2; --cy: 24.1; --scale: 0.8;  }
  .candle--15 { --cx: 95;   --cy: 40.9; --scale: 0.7;  }
}

/* Short-landscape corner case (a phone rotated sideways — width lands
   in the tablet tier above, e.g. ~844px, but height is only
   ~375-430px): placed last so it wins over both width-tier blocks
   above regardless of which one also matches. Without this, the
   tablet tier's min-height floor (38rem/608px, sized for a *portrait*
   tablet) and its top padding (9rem/144px) forced several hundred
   px of scrolling just to reach the CTA buttons on a viewport that's
   only ~400px tall — the buttons never fit "one screen" the way they
   do in every other orientation. Trimming the candles too: the
   tablet orbit's bottom-center ones have nowhere safe left between
   the CTA and the proof strip once the hero is this squat. */
@media (min-width: 48rem) and (max-height: 30rem) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: calc(clamp(3.5rem, 11vh, 4.5rem) + env(safe-area-inset-top, 0px)) clamp(1rem, 3vh, 1.5rem); }
  .hero__title { font-size: clamp(1.75rem, 6vh, 2.5rem); }
  .candle--3, .candle--4, .candle--5, .candle--6 { display: none; }
}

/* ================================================================
   DESKTOP TWO-COLUMN COMPOSITION (>=1025px, per reference design) —
   candles cluster into a left "chart wall" zone; content pins to a
   right zone; a genuine empty band between them (no hard divider
   line) reads as a natural transition rather than a split. Placed
   last in the file (after every other breakpoint block, including
   the 67.5rem/1080px and short-landscape ones above) so its
   --cx/--cy/--scale and .hero__copy overrides always win for any
   width in this range, regardless of which earlier tier(s) also
   technically match.

   Desktop-only by explicit product decision, and NOT mirrored for
   LTR: the candle cluster is purely decorative/atmospheric (not
   reading-direction-dependent) and stays physically left in both
   languages, matching the reference image — `left: calc(var(--cx)*1%)`
   below is a physical position, same mechanism every other tier in
   this file already uses. .hero__copy stays physically right in both
   languages too (`margin-left: auto` — deliberately the *physical*
   property, not the logical `margin-inline-start`, which would flip
   sides in LTR and collide with the fixed-left candles). Within that
   physically-right zone, `text-align: start` still reads correctly
   for whichever language is active: right-aligned Arabic (matching
   the reference) or left-aligned English. This is a deliberate,
   narrowly-scoped exception to this project's usual full logical-
   property mirroring, made only for this one fixed composition —
   every other section, and this same hero below 1025px, mirrors
   normally. */
@media (min-width: 1025px) {
  .hero {
    /* Fills the space actually left below the navbar instead of a
       guessed vh fraction ("Hero يجب أن يملأ المساحة المتبقية من
       الشاشة") — --nav-h is the bar's real measured height, set by
       sections/navbar/navbar.js. The 5.5rem fallback only matters for
       the first frame before that script runs, or in a browser
       without svh support. */
    min-height: calc(100svh - var(--nav-h, 5.5rem));
  }
  .hero__scroll { display: none; } /* mobile/tablet-only cue — the pyramid composition doesn't use one */
  .hero__copy {
    max-width: min(46%, 34rem);
    margin-inline: 0;
    margin-left: auto;
    text-align: start;
  }
  .hero__copy .eyebrow { justify-content: start; }
  .hero__title {
    width: auto;
    margin-inline: 0;
    /* Noticeably larger than the centered-composition tiers above —
       the column is narrower now, so the headline needs more size to
       still read as "كبير جدًا" (very large) within it. */
    font-size: clamp(3rem, 1.5rem + 3.6vw, 5.5rem);
  }
  /* English-only, desktop-only: the same 3 semantic lines wrap to 6
     visual lines in English (longer words than Arabic at this column
     width — expected, not a bug on its own, see the file-level note
     near the pyramid/platform block below), which read as oversized
     at the Arabic-tuned size above. ~12% smaller across the board —
     same font/weight/line order, just a size step down for breathing
     room. Higher specificity than the plain .hero__title rule above
     (two selectors vs. one) wins regardless of source order; scoped
     inside this same >=1025px query so mobile/tablet English is
     untouched. */
  html[lang="en"] .hero__title {
    font-size: clamp(2.65rem, 1.3rem + 3.2vw, 4.85rem);
  }
  .hero__sub { width: 100%; max-width: 100%; margin: 0.9rem 0 0; }
  .hero__cta { width: fit-content; margin-inline: 0; }
  .hero__proof { margin-inline: 0; justify-content: start; }

  /*
   * DESKTOP HERO CANDLE PYRAMID + PLATFORM
   * Replaces the wider, scattered "chart wall" with a tight triangular
   * staircase of 13 candles standing on a gold platform, per the
   * reference design. .hero__candles itself becomes the bounded
   * "stage": instead of spanning the full hero (inset: 0, every tier
   * above this one), it's resized to a left-side box (~48% wide,
   * physically anchored left — see the file-level comment above this
   * block for why the stage is never mirrored for LTR) with its own
   * `overflow: hidden`. Every --cx/--cy below is now a percentage of
   * *this stage*, not the whole hero — that's what makes the pyramid
   * math simple (cx: 50 = the stage's own horizontal center) and what
   * guarantees no candle, even mid float/retreat/parallax, can ever
   * render outside this bounded box.
   */
  .hero__candles {
    /* Height is capped and vertically centered (NOT inset-block: 0 /
       100% of .hero, like every tier above this one) — .hero's own
       height is content-driven (flex + min-height, see .hero's base
       rule), and the title column is *much* taller in English than
       Arabic (the 3 semantic lines wrap to 6 visual ones — expected,
       not a bug on its own). Tying the stage to 100% of that variable
       height meant the whole pyramid+platform silently stretched
       taller and drifted down between languages, pushing the platform
       below the fold in English even though nothing about the stage
       itself changed — this decouples the two so the composition
       stays visually identical regardless of how tall the text
       column happens to be in either language ("Platform: بنفس
       الموضع البصري" between AR/EN). */
    inset-block: auto;
    top: 50%;
    height: min(92%, 38rem);
    transform: translateY(-50%);
    /* Nudges the whole stage — candles + platform move together, this
       is the stage's own position, not a per-candle/platform value —
       off the left edge toward center. Physical `left` (not a logical
       inset-inline property), same reasoning as the file-level
       comment above: the stage is fixed decorative art in both
       languages, not mirrored. */
    left: clamp(2.5rem, 5vw, 6.25rem);
    right: auto;
    width: min(48%, 34rem);
    overflow: hidden;
    --candle-scale-mult: 1;
    --candle-max-opacity: 0.95;
  }
  .candle { filter: none; } /* crisp, not hazy, standing close-up on the platform */

  /* The platform the pyramid stands on — purely decorative and
     completely static: hero.js's parallax/float loop only ever writes
     `transform` on .candle elements, never touches this, so it can't
     drift even though it shares the same stage. Placed first in the
     HTML (see hero.html) with no z-index of its own (candles are also
     z-index:auto) so plain DOM order — not a hand-maintained z-index
     number — puts it behind every candle; safer than assigning
     explicit z-index values that would have to stay in sync by hand. */
  .hero__platform {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 13%;
    width: 90%;
    aspect-ratio: 3.1 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 25%, rgba(80, 62, 22, .9), rgba(8, 6, 3, .97) 72%);
    border: 1px solid rgba(201, 162, 77, .55);
    box-shadow:
      0 0 46px -8px rgba(201, 162, 77, .55),
      inset 0 10px 22px -10px rgba(255, 235, 180, .35),
      inset 0 -16px 26px -10px rgba(0, 0, 0, .7);
  }
  .hero__platform::after {
    content: "";
    position: absolute;
    inset: 16% 20%;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 77, .3);
  }

  /* Triangular staircase, apex at the top: 1 / 2 / 3 / 4 / 3 candles
     per row (13 total — candle--14..19 sit this tier out), scale
     shrinking row by row toward the platform ("الأعلى: شمعة طويلة
     وكبيرة ... ثم شموع صغيرة في الأسفل"). Numbered top-to-bottom in
     the DOM already (candle--1 = apex ... candle--13 = front row), so
     the same DOM-order stacking that keeps the platform behind also
     makes each lower/closer row paint over the row behind it — no
     extra z-index needed here either. */
  .candle--14, .candle--15, .candle--16, .candle--17, .candle--18, .candle--19 { display: none; }

  .candle--1  { --cx: 50; --cy: 14; --scale: 1.2;  }
  .candle--2  { --cx: 35; --cy: 28; --scale: 0.96; }
  .candle--4  { --cx: 65; --cy: 28; --scale: 0.96; }
  .candle--3  { --cx: 22; --cy: 42; --scale: 0.8;  }
  .candle--5  { --cx: 50; --cy: 42; --scale: 0.8;  }
  .candle--6  { --cx: 78; --cy: 42; --scale: 0.8;  }
  .candle--7  { --cx: 10; --cy: 55; --scale: 0.64; }
  .candle--8  { --cx: 37; --cy: 55; --scale: 0.64; }
  .candle--9  { --cx: 63; --cy: 55; --scale: 0.64; }
  .candle--10 { --cx: 90; --cy: 55; --scale: 0.64; }
  .candle--11 { --cx: 26; --cy: 65; --scale: 0.5;  }
  .candle--12 { --cx: 50; --cy: 65; --scale: 0.5;  }
  .candle--13 { --cx: 74; --cy: 65; --scale: 0.5;  }
}

/*
 * FILE: sections/hub/hub.css
 * PURPOSE: Full visual system for "ماذا نقدم" — header, the 6-item
 *   service navigation, the two-column active-service stage (one
 *   visual composition per service), the "why LEADERS" grid and the
 *   closing CTA.
 * RESPONSIBILITY: Layout/spacing/color/typography/animation for
 *   every .hub-*/.strat-*/.plat-term-*/.mi-*/.cert-hero-*/.copy-*
 *   selector below, plus the modal system shared with the coaching
 *   roster. Consumes design tokens from assets/css/variables.css —
 *   no hardcoded hex here, so this stays in sync with the rest of
 *   the site's black/gold palette automatically.
 * DO NOT: give any layout-affecting size a fixed px value — every
 *   one below is clamp()/%/rem/vw. Don't modify selectors outside
 *   .hub-section (this file only ever styles this one section).
 */
/* ================================================================
   Mobile-first throughout: every unqualified rule below is the
   phone layout. min-width queries only ever ADD capability going
   up (30rem tablet tweaks, 48rem strategy/why grids, 64rem the full
   two-column desktop stage + 6-across nav row).
   ================================================================ */

.hub-section { position: relative; overflow: hidden; }
.hub-section > .container { position: relative; z-index: 1; }

/* ---------- Ambient backdrop: grid + one soft gold glow ---------- */
/* Pure CSS gradients, not an image — cheap, and stays crisp at any
   zoom/DPR. Masked to fade out toward the edges so it frames the
   content instead of competing with it ("الخلفية يجب أن تدعم
   المحتوى وليس تنافسه"). */
.hub-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hub-bg__grid {
  position: absolute; inset: -5%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 20%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 55% at 50% 20%, #000 35%, transparent 80%);
  opacity: .6;
}
.hub-bg__glow {
  position: absolute;
  top: -14%; inset-inline-end: -16%;
  width: clamp(20rem, 60vw, 44rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 77, .14), transparent 68%);
  filter: blur(6px);
}

/* ---------- 1. Header ---------- */
.hub-head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 44px); }
.hub-head__title { font-size: clamp(24px, 3vw, 36px); font-weight: 800; text-wrap: balance; line-height: 1.28; }
.hub-head__gold { color: var(--gold); }
.hub-head__sub { margin-top: 12px; color: var(--muted); font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.7; max-width: 56ch; }

/* ---------- 2. Service navigation ---------- */
/* Phone/tablet: horizontal scroll-snap strip. Desktop (64rem+): one
   equal-width row of 6 — see the block at the bottom of this file. */
.hub-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-anchor: none; /* stop the browser from silently re-scrolling to compensate when hub.js prepends "Platforms" on mobile — see syncMobileOrder() */
  scroll-snap-type: x proximity;
  padding-block-end: 4px;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scrollbar-width: none;
  margin-bottom: 10px;
  /* Soft edge fade both sides — a constant visual cue that the strip
     keeps going (not scroll-position-aware on purpose: with 6 items at
     ~150-168px each, this never fully fits below the desktop cutoff, so
     "more content" is always true here). Fades the viewport edges of the
     scroll container itself, not the long scrolled content, so it stays
     put as the strip scrolls underneath it. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.hub-nav::-webkit-scrollbar { display: none; }

/* Swipe hint — mobile/tablet only, cancelled at the desktop cutoff
   below. Purely a visual affordance (the real accessible path is the
   tablist's own role/keyboard support), so it's hidden from AT. */
.hub-nav__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
}
.hub-nav__hint svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .hub-nav__hint svg { transform: scaleX(-1); }

.hub-nav__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: start;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.hub-nav__num { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); opacity: .8; }
.hub-nav__icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--muted); transition: color .25s ease; }
.hub-nav__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-nav__text { display: flex; flex-direction: column; gap: 1px; }
.hub-nav__text strong { font-size: 13px; font-weight: 700; color: var(--text); }
.hub-nav__text em { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .75; }

.hub-nav__item.is-active {
  border-color: rgba(201, 162, 77, .5);
  background: linear-gradient(150deg, rgba(201, 162, 77, .14), transparent 70%);
  box-shadow: 0 0 0 1px rgba(201, 162, 77, .12), 0 18px 34px -22px rgba(201, 162, 77, .38);
}
.hub-nav__item.is-active .hub-nav__num,
.hub-nav__item.is-active .hub-nav__icon { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .hub-nav__item:hover { border-color: rgba(201, 162, 77, .32); transform: translateY(-2px); }
}
.hub-nav__item:focus-visible { outline: 2px solid rgba(201, 162, 77, .6); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hub-nav__item { transition: border-color .25s ease, background .25s ease; } }

@media (min-width: 30rem) {
  .hub-nav__item { width: 10.5rem; }
}

/* ---------- 3. Active service stage ---------- */
.hub__stage {
  position: relative;
  transform: scale(var(--hub-scale, 1));
  transition: transform .1s linear;
}
/* Decorative rotating ring behind the visual column — desktop-only,
   driven by assets/js/animations.js's hubRings() (sets --hub-scale on
   .hub__stage and a live rotate() transform directly on .hub__rings;
   both already guard on prefers-reduced-motion there, not here). */
.hub__rings { display: none; }

.hub-panel { display: block; }
.hub-panel:not(.is-active) { display: none; }
.hub-panel.is-active { animation: hubPanelIn .45s var(--ease); }
@keyframes hubPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hub-panel.is-active { animation: none; } }

.hub-panel__info { position: relative; z-index: 1; }
.hub-panel__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold); text-transform: uppercase;
}
.hub-panel__badge span:first-child { opacity: .65; }
.hub-panel__badge span:last-child::before { content: "/"; margin-inline-end: 8px; color: var(--line-strong); }
.hub-panel__title { margin-top: 10px; font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; line-height: 1.32; text-wrap: balance; max-width: 30ch; }
.hub-panel__desc { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 46ch; }

.hub-panel__visual {
  position: relative;
  z-index: 1;
  margin-top: clamp(22px, 3.4vw, 30px);
}

/* ---------- Feature list (3 per panel) ---------- */
.hub-features { list-style: none; margin: clamp(20px, 3vw, 26px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hub-feature { display: flex; align-items: flex-start; gap: 14px; }
.hub-feature__num {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 77, .32);
  font-family: var(--font-mono); font-size: 11px; color: var(--gold);
}
.hub-feature strong { display: block; font-size: 14px; font-weight: 700; }
.hub-feature p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.hub-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 20px); margin-top: clamp(22px, 3vw, 28px); }
.cc-link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.cc-link:hover, .cc-link:focus-visible { color: var(--gold); }

/* ---------- Education: learning journey (vertical, connected) ---------- */
.hub-journey { display: flex; flex-direction: column; }
.hub-journey__step { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.hub-journey__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px; bottom: 0;
  inset-inline-start: 15px;
  width: 1px;
  background: var(--line);
}
.hub-journey__dot {
  flex-shrink: 0;
  z-index: 1;
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted);
}
.hub-journey__step.is-current .hub-journey__dot { border-color: var(--gold); color: var(--gold); background: linear-gradient(150deg, rgba(201, 162, 77, .18), var(--surface)); box-shadow: 0 0 0 4px rgba(201, 162, 77, .1); }
.hub-journey__body { padding-top: 4px; }
.hub-journey__body strong { display: block; font-size: 14.5px; font-weight: 700; }
.hub-journey__body p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; max-width: 34ch; }
.hub-journey__state { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.hub-journey__state--current { color: var(--gold); opacity: 1; }
.hub-journey__lock { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Strategies: 4 big cards ---------- */
.strat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.strat-card {
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 55%), var(--surface);
  transition: border-color .3s ease, transform .1s linear;
}
.strat-card__head { display: flex; align-items: center; justify-content: space-between; }
.strat-card__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--gold); }
.strat-card__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.strat-card__tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: #05070F; background: linear-gradient(135deg, var(--accent), var(--gold) 62%); padding: 3px 10px; border-radius: var(--r-pill); }
.strat-card__name { margin-top: 14px; font-size: 15.5px; font-weight: 700; }
.strat-card__desc { margin-top: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.strat-card__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.strat-card__meta > div { display: flex; flex-direction: column; gap: 2px; }
.strat-card__meta dt { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.strat-card__meta dd { margin: 0; font-size: 12px; font-weight: 700; color: var(--text); }
.strat-card__more { margin-top: 12px; }
.strat-card__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--gold); min-height: 32px; }
.strat-card__more summary::-webkit-details-marker { display: none; }
.strat-card__more summary::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); }
.strat-card__more[open] summary::after { transform: rotate(-135deg); }
.strat-card__more p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) { .strat-card__more[open] p { animation: popIn .3s var(--ease); } }
@media (hover: hover) and (pointer: fine) { .strat-card:hover { border-color: rgba(201, 162, 77, .34); } }

@media (min-width: 48rem) {
  .strat-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Platforms: LEADERS M2 / M5 terminal cards ---------- */
.plat-term-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 34rem) { .plat-term-grid { grid-template-columns: 1fr 1fr; } }
.plat-term {
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 55%), var(--surface);
  transition: border-color .3s ease, transform .1s linear;
}
@media (hover: hover) and (pointer: fine) { .plat-term:hover { border-color: rgba(201, 162, 77, .38); } }
.plat-term__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plat-term__name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.plat-term__badge { font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: #05070F; background: linear-gradient(135deg, var(--accent), var(--gold) 62%); padding: 2px 8px; border-radius: var(--r-pill); }
.plat-term__desc { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.plat-term__chart-wrap { margin-top: 12px; border-radius: var(--r-sm); overflow: hidden; background: rgba(0, 0, 0, .18); }
.plat-term__chart { width: 100%; height: auto; aspect-ratio: 240 / 90; display: block; }
.tdash__grid { stroke: var(--grid); stroke-width: 1; }
.plat-term__signal { display: flex; gap: 6px; margin-top: 12px; }
.tdash__signal-pill { flex: 1; text-align: center; padding: 7px 10px; border-radius: var(--r-md); font-family: var(--font-mono); font-weight: 800; font-size: 12px; letter-spacing: .04em; border: 1px solid var(--line); }
.tdash__signal-pill.is-buy { color: var(--success); background: rgba(0, 210, 106, .12); border-color: rgba(0, 210, 106, .4); }
.tdash__signal-pill.is-sell { color: var(--danger); background: rgba(255, 77, 79, .1); border-color: rgba(255, 77, 79, .38); }
.tdash__signal-pill.is-ghost { color: var(--muted); background: transparent; }
.plat-term__rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.plat-term__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.plat-term__row dt { color: var(--muted); }
.plat-term__row dd { margin: 0; font-weight: 600; color: var(--text); text-align: end; }
.plat-term__analysis { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.plat-term__analysis span:first-child { color: var(--gold); font-weight: 700; }
.tdash__demo { margin-top: 16px; font-size: 10.5px; color: var(--muted); opacity: .7; line-height: 1.5; text-align: center; }

/* ---------- Platforms, mobile-only (<64rem): "Trading Terminal" ---------- */
/* Visible by default (mobile-first, matching this whole file's
   convention); switched off entirely — and the two desktop-only
   children above switched back on — inside the file's one existing
   desktop cutoff at the bottom (`6. Desktop (64rem+)`). Scoped to
   #panel-platforms specifically so the other 5 panels never see these
   rules. Reuses .mi__stats/.mi__stat, .tdash__signal-pill and
   .plat-term__chart-wrap wherever the shape already matches instead of
   duplicating them. */
#panel-platforms > .hub-panel__info,
#panel-platforms > .hub-panel__visual { display: none; }

.hub-term { margin-top: clamp(22px, 3.4vw, 30px); }

.hub-term__selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: clamp(20px, 3vw, 26px);
}
.hub-term__chip {
  min-width: 0;
  padding: 10px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  direction: ltr;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.hub-term__chip.is-active { color: var(--gold); border-color: rgba(201, 162, 77, .5); background: linear-gradient(150deg, rgba(201, 162, 77, .14), transparent 70%); }
.hub-term__chip:focus-visible { outline: 2px solid rgba(201, 162, 77, .6); outline-offset: 2px; }

.hub-term__panel {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 55%), var(--surface);
}
.hub-term__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-term__name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--text); direction: ltr; }
.hub-term__live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--success); }
.hub-term__live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulseDot 1.8s ease infinite; }
@media (prefers-reduced-motion: reduce) { .hub-term__live-dot { animation: none; } }

.hub-term__ticker { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; direction: ltr; }
.hub-term__pair { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); }
.hub-term__price { font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--text); }
.hub-term__change { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.hub-term__change.is-up { color: var(--success); }
.hub-term__change.is-down { color: var(--danger); }

.hub-term__chart-wrap { margin-top: 12px; }
.hub-term__chart { aspect-ratio: 320 / 140; }

.hub-term__stats { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hub-term__actions { display: flex; gap: 8px; margin-top: 12px; }
.hub-term__actions .tdash__signal-pill { min-width: 0; appearance: none; margin: 0; cursor: default; font-family: var(--font-mono); }
.hub-term__actions .tdash__signal-pill:disabled { opacity: 1; }

.hub-term__ltr { direction: ltr; }
.mi__stat strong.is-down { color: var(--danger); }

.hub-term__compare { margin-top: clamp(30px, 4vw, 40px); }
.hub-term__compareTitle { font-size: clamp(16px, 2vw, 19px); font-weight: 800; text-align: center; margin-bottom: 16px; }
.hub-term__card {
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 55%), var(--surface);
  transition: border-color .3s ease;
}
.hub-term__card + .hub-term__card { margin-top: 12px; }
.hub-term__card.is-active { border-color: rgba(201, 162, 77, .45); }
.hub-term__cardHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hub-term__cardHead strong { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; direction: ltr; }
.hub-term__liveTag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--success); }
.hub-term__cardTag { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--gold); }
.hub-term__cardDesc { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.hub-term__cardTf { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); }
.hub-term__cardTf .hub-term__ltr { color: var(--text); font-weight: 700; }
.hub-term__card .btn { margin-top: 14px; }

.hub-term__cta {
  margin-top: clamp(32px, 4vw, 40px);
  text-align: center;
  padding: clamp(24px, 4vw, 32px) 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 162, 77, .22);
  background: linear-gradient(165deg, rgba(201, 162, 77, .08), transparent 60%), var(--surface-soft);
}
.hub-term__cta h4 { font-size: clamp(17px, 2.2vw, 20px); font-weight: 800; }
.hub-term__cta p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.hub-term__ctaActions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }

/* ---------- Platforms mobile: 2x2 feature grid (modifies .hub-features) ---------- */
.hub-features--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-features--grid .hub-feature {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  transition: border-color .3s ease;
}
.hub-features--grid .hub-feature__num { width: 26px; height: 26px; font-size: 10px; }
@media (hover: hover) and (pointer: fine) { .hub-features--grid .hub-feature:hover { border-color: rgba(201, 162, 77, .34); } }

/* ---------- Copy trading: converging flow diagram + 4 process cards ---------- */
.cc-copyflow { position: relative; aspect-ratio: 320 / 160; max-width: 30rem; margin-inline: auto; }
.cc-copyflow__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-copyflow__path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.cc-copyflow__dot { fill: var(--gold); offset-distance: 0%; animation: ccFlowDot 2.6s linear infinite; }
.cc-copyflow__dot--out { fill: var(--accent); }
@keyframes ccFlowDot { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cc-copyflow__dot { animation: none; opacity: 0; } }

.cc-copyflow__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-mono); font-weight: 700;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  white-space: nowrap;
}
/* Physical `left` (not logical inset-inline-start) — must match the
   SVG lines' physical viewBox coordinates exactly; see the mirrored
   `d` paths in hub.html. Logical properties would flip independently
   of the SVG and break the line/node alignment under RTL. */
.cc-copyflow__node--coach { top: 17.5%; left: 82.5%; font-size: 10px; padding: 7px 12px; }
.cc-copyflow__node--bot   { top: 50%;   left: 82.5%; font-size: 10px; padding: 7px 12px; }
.cc-copyflow__node--time  { top: 82.5%; left: 82.5%; font-size: 10px; padding: 7px 12px; }
.cc-copyflow__node--engine {
  top: 50%; left: 38.75%;
  font-size: 9.5px; line-height: 1.3; white-space: normal;
  width: clamp(90px, 22%, 108px); aspect-ratio: 1/1; border-radius: 50%;
  border-color: rgba(201, 162, 77, .45); color: var(--gold);
  background: radial-gradient(circle at 50% 30%, rgba(201, 162, 77, .16), var(--bg-deep) 75%);
  box-shadow: 0 0 0 1px var(--line), 0 16px 40px -24px rgba(0, 0, 0, .8);
}
.cc-copyflow__node--exec { top: 50%; left: 7%; font-size: 9.5px; padding: 7px 10px; border-color: rgba(201, 162, 77, .35); }

/* Authored physical-LTR-mirrored to read right (source) -> left
   (Execution) for this page's default RTL direction. In the English
   toggle (dir="ltr"), flip the whole diagram so it reads left ->
   right, then counter-flip each node so its own label text isn't
   mirrored. */
html[dir="ltr"] .cc-copyflow { transform: scaleX(-1); }
html[dir="ltr"] .cc-copyflow__node { transform: translate(50%, -50%) scaleX(-1); }

@media (max-width: 26rem) {
  .cc-copyflow__node--coach, .cc-copyflow__node--bot, .cc-copyflow__node--time,
  .cc-copyflow__node--engine, .cc-copyflow__node--exec { font-size: 8.5px; }
}

.copy-stages { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(22px, 3vw, 30px); }
@media (min-width: 30rem) { .copy-stages { grid-template-columns: 1fr 1fr; } }
.copy-stage { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-soft); }
.copy-stage__num { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--gold); opacity: .85; }
.copy-stage strong { display: block; font-size: 13px; font-weight: 700; }
.copy-stage p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.55; }

/* ---------- Advanced analysis: "Market Intelligence" interface ---------- */
.mi__ticker { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mi__pair { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); direction: ltr; }
.mi__tf-group { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.mi__tf-group span { padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.mi__tf-group span.is-active { color: var(--gold); border-color: rgba(201, 162, 77, .4); background: rgba(201, 162, 77, .1); }

.mi__chart-wrap { margin-top: 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-soft); overflow: hidden; }
.mi__chart { width: 100%; height: auto; aspect-ratio: 320 / 150; max-height: 22rem; display: block; }
.an-grid { stroke: var(--grid); stroke-width: 1; }

.mi__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.mi__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-soft); text-align: center; }
.mi__stat span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mi__stat strong { font-size: 13.5px; font-weight: 700; direction: ltr; }
.mi__stat strong.is-up { color: var(--success); }

@media (min-width: 30rem) {
  .mi__stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Certificates: process chip (reused) + premium cert visual ---------- */
.cc-flowchip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-flowchip span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text); padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid rgba(201, 162, 77, .3); background: rgba(201, 162, 77, .08); white-space: nowrap; }
.cc-flowchip i { width: 10px; height: 1px; background: var(--line-strong); flex-shrink: 0; }

.cert-hero {
  margin-top: clamp(22px, 3vw, 30px);
  padding: clamp(30px, 5vw, 46px) 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 162, 77, .32);
  background: linear-gradient(165deg, rgba(201, 162, 77, .1), transparent 60%), var(--glass);
  backdrop-filter: blur(10px);
  animation: certHeroIn .6s var(--ease) .05s both;
}
@keyframes certHeroIn { from { opacity: 0; transform: perspective(900px) rotateX(8deg) translateY(10px); } to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cert-hero { animation: none; } }
.cert-hero__seal { width: 52px; height: 52px; margin-bottom: 4px; }
.cert-hero__seal svg { width: 100%; height: 100%; }
.cert-hero__seal-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.cert-hero__seal-ring--inner { stroke: rgba(201, 162, 77, .5); stroke-dasharray: 2.6 3.2; }
.cert-hero__seal-check { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cert-hero__brand { font-family: var(--font-mono); font-size: clamp(13px, 1.8vw, 15px); font-weight: 700; letter-spacing: .06em; color: var(--text); direction: ltr; line-height: 1.5; }
.cert-hero__title { margin-top: 6px; font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: .1em; color: var(--gold); direction: ltr; }
.cert-hero__sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* ---------- 4. Why LEADERS ---------- */
.hub-why { margin-top: clamp(48px, 7vw, 80px); }
.hub-why__title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; text-align: center; }
.hub-why__grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(22px, 3vw, 30px); }
.hub-why__card {
  padding: 22px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: center;
  transition: border-color .3s ease, transform .1s linear;
}
@media (hover: hover) and (pointer: fine) { .hub-why__card:hover { border-color: rgba(201, 162, 77, .34); } }
.hub-why__icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; border: 1px solid rgba(201, 162, 77, .3); color: var(--gold); }
.hub-why__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hub-why__card strong { display: block; font-size: 14.5px; font-weight: 700; }
.hub-why__card p { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

@media (min-width: 30rem) { .hub-why__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .hub-why__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 5. Closing CTA ---------- */
.hub-cta { margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.hub-cta__title { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; }
.hub-cta__sub { margin-top: 8px; color: var(--muted); font-size: 14px; }
.hub-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(20px, 3vw, 28px); }

/* ---------- Shared: subtle "tap for details" pop-in ---------- */
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 6. Desktop (64rem+): 6-across nav row + two-column stage ---------- */
@media (min-width: 64rem) {
  /* Platforms panel: restore the original two-terminal desktop content
     and switch the mobile-only "Trading Terminal" block off entirely —
     see the "(mobile-only)" block above this file's section 6. */
  #panel-platforms > .hub-panel__info,
  #panel-platforms > .hub-panel__visual { display: block; }
  .hub-term { display: none; }

  .hub-nav {
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: clamp(20px, 3vw, 30px);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hub-nav__item { width: auto; }
  .hub-nav__hint { display: none; }

  .hub__rings {
    display: block;
    position: absolute;
    top: 50%;
    inset-inline-end: 2%;
    width: 24rem;
    height: 24rem;
    margin-top: -12rem;
    border: 1px dashed rgba(201, 162, 77, .14);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  }
  .hub__rings::before {
    content: "";
    position: absolute;
    inset: 2.75rem;
    border: 1px dashed rgba(201, 162, 77, .1);
    border-radius: 50%;
  }

  /* Info column first in the DOM = the reading-start side in either
     direction (right in RTL, left in LTR) — matches the spec's
     "RIGHT: info / LEFT: visual" for the default RTL page without any
     order/mirroring hack, and mirrors correctly for the English toggle
     for free. */
  .hub-panel.is-active { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
  .hub-panel__visual { margin-top: 0; }
  .hub-panel__title { max-width: 26ch; }

  .strat-grid { gap: 18px; }
}

/* ---------- Modal system (coaching roster) — unchanged from before ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(3, 5, 10, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.modal-panel {
  position: relative;
  width: min(100%, 640px);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 162, 77, .3);
  background: linear-gradient(165deg, var(--surface-soft), transparent 50%), var(--surface);
  box-shadow: var(--shadow-lg), var(--glow-gold);
  padding: clamp(24px, 4vw, 40px);
  transform: translateY(18px) scale(.97);
  transition: transform .4s var(--ease);
}
.modal-overlay.is-open .modal-panel { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.modal-close:hover, .modal-close:focus-visible { color: var(--gold); border-color: rgba(201, 162, 77, .45); }

.modal-title { font-size: clamp(19px, 2.6vw, 25px); font-weight: 700; text-wrap: balance; max-width: 32ch; margin-inline-end: 34px; }
.modal-body > .coach-grid { margin-top: clamp(18px, 2.6vw, 26px); }

body.modal-lock { overflow: hidden; }

.coach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.coach-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-soft); }
.coach-card--lead { border-color: rgba(201, 162, 77, .3); }
.coach-card__num {
  position: absolute;
  top: 10px;
  inset-inline-start: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  opacity: .8;
}
.coach-card__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background-size: cover;
  background-position: var(--focus, center 20%);
  background-repeat: no-repeat;
  margin-bottom: 4px;
}
.coach-card--lead .coach-card__avatar { border-color: rgba(201, 162, 77, .5); }
.coach-card__name { font-size: 14.5px; font-weight: 700; }
.coach-card__role { font-size: 11.5px; color: var(--muted); line-height: 1.45; max-width: 22ch; }
.coach-card__cta { margin-top: 8px; }

/* ---------- Reduced motion: freeze hover/entrance transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  .hub-nav__item, .plat-term, .strat-card, .hub-why__card, .hub__stage { transition: none; }
  .hub__stage { transform: none; }
}

/* ---------- FEATURE BAR ---------- */
/* Soft edge-faded divider instead of a flat full-bleed line, so the
   section break reads as a gentle gradient rather than a hard rule. */
.feature-bar {
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent) 1;
}

/* Six independent cards (icon -> title -> text), one per service.
   CSS Grid only (no flex-basis/positioning) so every column is a real
   equal-width `1fr` track — minmax(0,1fr) keeps unbreakable content
   (e.g. "1M · 2M · 5M") from blowing a column past its track and
   overlapping its neighbor. Row height is grid's own default
   (align-items: stretch + auto row sizing), so every card sharing a
   row matches the tallest one without a hardcoded min-height that
   could clip a longer translation. */
.fbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 359.98px) {
  .fbar { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 680px) {
  .fbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1080px) {
  .fbar { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
}

.fbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  padding: 24px 18px;
  border-radius: 18px;
  border: 1px solid rgba(201, 162, 77, .18);
  background: linear-gradient(165deg, rgba(255, 255, 255, .015), transparent 60%), var(--surface);
  text-align: center;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}

.fbar__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(201, 162, 77, .16), transparent 70%);
  transition: transform .4s var(--ease), border-color .4s ease;
}
.fbar__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.fbar__title {
  font-size: clamp(16px, 1.4vw + .6rem, 18px);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: normal;
}
.fbar__text {
  font-size: clamp(13px, .5vw + .7rem, 14px);
  line-height: 1.7;
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .fbar__item {
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }
  .fbar__item:hover {
    transform: translateY(-3px);
    border-color: rgba(201, 162, 77, .45);
    box-shadow: var(--glow-gold);
  }
  .fbar__item:hover .fbar__icon { transform: scale(1.08); border-color: rgba(201, 162, 77, .5); }
}

/* ============================================================
   ABOUT — "من نحن" homepage section. Reuses shared tokens/
   components (assets/css/variables|reset|typography|animations|
   components|app.css, all concatenated before this file by
   build.js) for everything a shared class already covers — .btn,
   .eyebrow/.head, .offer-grid/.offer-card, .workflow--row, .reveal.
   Only section-exclusive pieces (hero rotator, ambient canvas
   layer, stats strip, coach bio, CTA panel) live here.
   ============================================================ */

/* ---------- Hero (intro + rotator) ---------- */
.about-hero {
  position: relative;
  padding-block: var(--section-y);
  overflow: clip;
}
/* Same "chart horizon" treatment as the main hero (sections/hero/
   hero.css's .hero::after) — a thin gold gradient line at the block's
   foot, echoed here at identical values for family resemblance. */
.about-hero::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  bottom: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 77, .45) 50%, transparent);
  box-shadow: 0 0 16px 1px rgba(201, 162, 77, .22);
  pointer-events: none;
}

/* Ambient backdrop (about.js draws into #aboutHeroFx) — sits behind the
   copy/visual and the stats strip, both lifted above it via z-index. */
.about-hero__fx { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.about-hero__fx-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--scrim); opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .about-hero__fx { display: none; }
}

.about-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 64px);
}
.about-hero__title {
  margin-top: 4px;
  font-size: clamp(30px, 4.4vw, 54px); /* head__title scale — this is a section title, not the page h1 */
  text-wrap: balance;
}
.about-hero__sub {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.75;
}
.about-hero__cta { margin-top: clamp(26px, 3.4vw, 36px); display: flex; flex-wrap: wrap; gap: 14px; }

@media (min-width: 56rem) { /* 896px */
  .about-hero__inner { grid-template-columns: 6fr 5fr; }
}

/* ---------- Hero visual: the two coaches, side by side ---------- */
/* One layout at every width, by design (see the brief: "side by side,
   never one over/behind the other") — a plain 2-up grid, both photos
   the same size. Faisal reads first in a RTL document without any
   left/right hack; no badge/label — reading-order is the only signal,
   never a size difference between the two frames. */
.about-hero__visual { position: relative; }
.about-duo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 26rem;
  margin-inline: auto;
}
@media (min-width: 56rem) { .about-duo { max-width: 34rem; gap: 16px; } }
.about-duo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18%;
  background: radial-gradient(circle at 60% 20%, rgba(201, 162, 77, .32), transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.about-duo__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  /* --focus (set inline per photo in about.html) lets a real photo's
     crop be nudged later without touching this file. */
  background-size: cover;
  background-position: var(--focus, center 18%);
  background-repeat: no-repeat;
}
.about-duo__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(3, 3, 3, .62), transparent 48%);
}
.about-duo__photo--lead { border-color: rgba(201, 162, 77, .5); }
.about-duo__photo figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 10px 12px;
}
.about-duo__photo figcaption strong { font-size: 12.5px; font-weight: 700; color: #fff; }

@media (min-width: 56rem) {
  .about-duo__photo figcaption { padding: 14px 16px; }
  .about-duo__photo figcaption strong { font-size: 14px; }
}

/* ---------- Stats strip ---------- */
.about-stats {
  position: relative;
  z-index: 3;
  margin-top: clamp(44px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.about-stat { background: var(--bg); padding: clamp(20px, 3vw, 32px) clamp(12px, 2vw, 20px); text-align: center; }
.about-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--accent), var(--gold) 60%, #C9971A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-stat__label { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.4; }

@media (min-width: 40rem) { .about-stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Coaches: two independent, equal-weight profile cards ---------- */
/* Same premium-card visual language as .offer-card (assets/css/
   components.css) — border, glass gradient, gold corner glow, hover
   lift — reused here as design tokens since the shape (photo + stat
   fields, not icon + short text) doesn't fit that component directly. */
.coach-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 28px);
  margin-top: clamp(28px, 4vw, 40px);
}
@media (min-width: 50rem) { .coach-duo { grid-template-columns: 1fr 1fr; } }

.coach-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 60%), var(--surface);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s var(--ease);
}
.coach-profile::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -30%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 77, .14), transparent 70%);
  pointer-events: none;
}
.coach-profile--lead { border-color: rgba(201, 162, 77, .3); }
@media (hover: hover) and (pointer: fine) {
  .coach-profile:hover { transform: translateY(-6px); border-color: rgba(201, 162, 77, .38); box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .85); }
}

.coach-profile__media {
  aspect-ratio: 5 / 4;
  border-bottom: 1px solid var(--line);
  background-size: cover;
  background-position: var(--focus, center 20%);
  background-repeat: no-repeat;
}

.coach-profile__body { position: relative; padding: clamp(22px, 3vw, 30px); }
.coach-profile__name { font-size: clamp(19px, 2vw, 23px); font-weight: 800; }
.coach-profile__role { margin-top: 6px; color: var(--gold); font-weight: 600; font-size: 13.5px; }

.coach-profile__stats {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.coach-profile__stats dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.coach-profile__stats dd { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--text); }

.coach-profile__tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coach-profile__tags li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold);
  padding: 5px 10px;
  border: 1px solid rgba(201, 162, 77, .32);
  border-radius: var(--r-pill);
  background: rgba(201, 162, 77, .08);
}

/* ---------- Why-us grid: 5 cards, own column count at wide ---------- */
@media (min-width: 68rem) { /* 1088px */
  .about-why .offer-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Final CTA ---------- */
.about-cta-panel {
  position: relative;
  text-align: center;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 162, 77, .3);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 77, .14), transparent 60%),
    linear-gradient(165deg, var(--surface-soft), transparent 60%), var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black, transparent 75%);
  pointer-events: none;
}
.about-cta-title { position: relative; font-size: clamp(26px, 4vw, 44px); font-weight: 700; text-wrap: balance; max-width: 22ch; margin-inline: auto; }
.about-cta-sub { position: relative; margin-top: 16px; color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); max-width: 56ch; margin-inline: auto; }
.about-cta-actions { position: relative; margin-top: clamp(28px, 4vw, 40px); display: flex; justify-content: center; }

/* ---------- Small-phone tightening (360–420px) ---------- */
@media (max-width: 26rem) { /* 416px */
  .about-duo { max-width: 100%; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contact / Social Hub ---------- */
/* Ambient backdrop reuses sections/hub/hub.css's .hub-bg pattern
   verbatim (pure CSS grid + one soft gold glow, no canvas) so this
   section reads as part of the same premium system as hub/about
   instead of a flat footer background. */
.contact-hub { position: relative; overflow: hidden; }
.contact-hub > .container { position: relative; z-index: 1; }
.contact-hub__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-hub__grid {
  position: absolute; inset: -5%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 25%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 25%, #000 35%, transparent 80%);
  opacity: .5;
}
.contact-hub__glow {
  position: absolute;
  top: -12%; inset-inline-start: -14%;
  width: clamp(18rem, 50vw, 38rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 77, .13), transparent 68%);
  filter: blur(6px);
}

/* ---------- Header: title + description share one centered axis ---------- */
/* .head (assets/css/components.css) is a max-width block with no
   margin-inline:auto of its own — fine for this file's other,
   intentionally start-aligned headers, but here the block itself needs
   centering too, not just its text. .head__sub separately carries its
   own max-width (58ch, narrower than the 850px block, for a readable
   line length) with no auto margin either, so without this it collapses
   flush against the RTL-start edge instead of sharing the title's
   center axis — the exact "text pulled to one side" bug this fixes. */
.contact-hub__head {
  width: 100%;
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}
.contact-hub__head .head__sub { margin-inline: auto; }

/* ---------- Social cards grid ---------- */
/* Mobile-first single column (the exact order requested: YouTube,
   Telegram-main, TikTok, Abu Faisal, Abu Mohammad). 40rem+ settles into
   a plain 2-up grid. 64rem+ (this file's own desktop cutoff) upgrades
   to a 6-track grid where the first 3 cards each take 2 tracks (equal
   row) and the last 2 each take 3 tracks (wider row) — a clean integer-
   span way to reproduce the brief's "row of 3, then a wider row of 2"
   without any fractional/asymmetric column math. */
.social-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(32px, 5vw, 52px);
}
@media (min-width: 40rem) {
  .social-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .social-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .social-card:nth-child(1), .social-card:nth-child(2), .social-card:nth-child(3) { grid-column: span 2; }
  .social-card:nth-child(4), .social-card:nth-child(5) { grid-column: span 3; }
}

.social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 15rem;
  padding: clamp(24px, 3vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface-soft), transparent 60%), var(--surface);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s var(--ease);
}
.social-card::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -30%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 77, .13), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.social-card--featured { border-color: rgba(201, 162, 77, .32); }

.social-card__num { position: relative; font-family: var(--font-mono); font-size: 11px; color: var(--muted); opacity: .75; }
.social-card__badge {
  position: absolute;
  top: clamp(22px, 3vw, 28px);
  inset-inline-end: clamp(22px, 3vw, 28px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #05070F;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--accent), var(--gold) 62%);
}

.social-card__icon {
  position: relative;
  width: clamp(48px, 5vw, 56px);
  height: clamp(48px, 5vw, 56px);
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(201, 162, 77, .16), transparent 70%);
  color: var(--gold);
  transition: transform .35s var(--ease), border-color .35s ease;
}
.social-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-card__person {
  position: absolute;
  bottom: -4px;
  inset-inline-end: -4px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--muted);
}
.social-card__person svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.social-card__title { position: relative; font-size: clamp(17px, 1.8vw, 19px); font-weight: 800; }
.social-card__desc { position: relative; margin-top: -6px; font-size: 13px; color: var(--muted); line-height: 1.65; flex-grow: 1; }
.social-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold);
}
.social-card__arrow { display: inline-grid; place-items: center; width: 18px; height: 18px; transition: transform .3s var(--ease); }
.social-card__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .social-card__arrow svg { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
  .social-card:hover { transform: translateY(-5px); border-color: rgba(201, 162, 77, .4); box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .85); }
  .social-card:hover::before { opacity: 1; }
  .social-card:hover .social-card__icon { transform: scale(1.06); border-color: rgba(201, 162, 77, .5); }
  .social-card:hover .social-card__arrow { transform: translateX(-4px); }
  html[dir="ltr"] .social-card:hover .social-card__arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-card, .social-card__icon, .social-card__arrow { transition: border-color .25s ease; }
}

/* ---------- Contact CTA bar ---------- */
.contact-cta-bar {
  position: relative;
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 36px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(201, 162, 77, .25);
  background: linear-gradient(165deg, rgba(201, 162, 77, .08), transparent 60%), var(--surface-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.contact-cta-bar__copy h3 { font-size: clamp(17px, 2vw, 20px); font-weight: 800; }
.contact-cta-bar__copy p { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
@media (min-width: 48rem) {
  .contact-cta-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .contact-cta-bar__copy { flex: 1; }
}

/* ---------- FOOTER ---------- */
.footer {
  scroll-margin-top: 96px; /* offset for the fixed nav, matching section[id] elsewhere */
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent) 1;
  padding-block: clamp(46px, 6vw, 72px) calc(56px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .28));
}
[data-theme="light"] .footer { background: linear-gradient(180deg, transparent, rgba(10, 15, 28, .04)); }

/* 4 zones: brand+blurb, then 3 link/icon columns — one flat grid so
   every column shares the exact same top alignment and row rhythm. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 44px);
}
.footer__tagline { margin-top: 14px; color: var(--muted); font-size: 13.5px; max-width: 32ch; line-height: 1.6; }

.footer__colTitle { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--text); margin-bottom: 14px; }
.footer__col .footer__links { flex-direction: column; align-items: flex-start; gap: 12px; }

.footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__links a {
  position: relative;
  width: fit-content;
  font-size: 14px;
  color: var(--muted);
  transition: color .25s ease;
}
.footer__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--to, left);
  transition: transform .35s var(--ease);
}
html[dir="rtl"] .footer__links a::after { --to: right; }
.footer__links a:hover { color: var(--text); }
.footer__links a:hover::after { transform: scaleX(1); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  max-width: 68ch;
}
.social { display: flex; gap: 8px; }
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.social a:hover { color: var(--gold); border-color: rgba(201, 162, 77, .5); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 40rem) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
}