/* ==========================================================================
   MVA FLOW — shared stylesheet
   One stylesheet serves both locales. Direction is handled with CSS logical
   properties (inline-start/end), so the RTL and LTR pages share every rule;
   only typography tokens differ per locale (see "Locale typography").
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --blue: #4c7cff;
  --blue-deep: #2b5ce6;
  --blue-dark: #1b3aa0;
  --blue-bright: #5a87ff;
  --blue-light: #9fbbff;
  --blue-mid: #6c93f5;
  --blue-pale: #7fa3ff;
  --amber: #f5b027;
  --amber-light: #f5c464;
  --amber-pale: #e8d6ae;
  --violet: #7856ff;

  /* Ground */
  --bg: #05070c;
  --bg-alt: #070a11;
  --bg-card: rgba(12, 17, 28, 0.92);
  --bg-nav: rgba(9, 12, 20, 0.72);

  /* Type colour ramp — lightest to dimmest */
  --fg-max: #f8faff;
  --fg-strong: #f7f9ff;
  --fg: #f2f5ff;
  --fg-bright: #e7ecf8;
  --fg-soft: #c4cee4;
  --fg-body: #98a4c0;
  --fg-muted: #8e9bb8;
  --fg-lede: #8a96b4;
  --fg-dim: #7a86a3;
  --fg-faint: #5d6a87;

  /* Surfaces */
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-3: rgba(255, 255, 255, 0.05);
  --surface-4: rgba(255, 255, 255, 0.06);
  --surface-5: rgba(255, 255, 255, 0.07);
  --surface-hover: rgba(255, 255, 255, 0.11);

  /* Hairlines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.07);
  --line-3: rgba(255, 255, 255, 0.08);
  --line-4: rgba(255, 255, 255, 0.1);
  --line-5: rgba(255, 255, 255, 0.12);

  /* Accent washes */
  --blue-wash: rgba(76, 124, 255, 0.1);
  --blue-wash-soft: rgba(76, 124, 255, 0.09);
  --blue-wash-strong: rgba(76, 124, 255, 0.13);
  --blue-edge: rgba(76, 124, 255, 0.26);
  --blue-edge-soft: rgba(76, 124, 255, 0.24);
  --blue-edge-strong: rgba(76, 124, 255, 0.3);
  --amber-wash: rgba(245, 176, 39, 0.08);
  --amber-wash-strong: rgba(245, 176, 39, 0.13);
  --amber-edge: rgba(245, 176, 39, 0.24);
  --amber-edge-strong: rgba(245, 176, 39, 0.32);

  /* Gradients */
  --grad-blue: linear-gradient(150deg, var(--blue), var(--blue-deep));
  --grad-amber: linear-gradient(150deg, var(--amber-light), var(--amber));

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-3xl: 28px;
  --r-4xl: 32px;
  --r-5xl: 38px;
  --r-pill: 999px;

  /* Shadows */
  --sh-nav: 0 18px 50px rgba(0, 0, 0, 0.5);
  --sh-card: 0 14px 34px rgba(0, 0, 0, 0.5);
  --sh-panel: 0 30px 70px rgba(0, 0, 0, 0.4);
  --sh-cta: 0 40px 100px rgba(0, 0, 0, 0.5);
  --sh-phone: 0 40px 90px rgba(0, 0, 0, 0.6);
  --sh-btn: 0 16px 40px rgba(43, 92, 230, 0.42);
  --sh-btn-hover: 0 22px 54px rgba(43, 92, 230, 0.62);

  /* Rhythm */
  --gutter: clamp(18px, 3vw, 32px);
  --section-y: clamp(64px, 8vw, 110px);
  --shell: 1244px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Typography — LTR / Poppins defaults, overridden for Persian below */
  --font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-latin: Poppins, system-ui, sans-serif;

  --fs-h1: clamp(38px, 6vw, 74px);
  --fs-h2: clamp(28px, 3.6vw, 46px);
  --fs-h3: clamp(22px, 2.6vw, 32px);
  --fs-lede: clamp(24px, 3.4vw, 42px);
  --fs-lead: clamp(15px, 1.4vw, 17.5px);
  --fs-lead-sm: clamp(14.5px, 1.3vw, 16.5px);
  --fs-body: clamp(14px, 1.3vw, 16px);
  --fs-eyebrow: 10.5px;
  --fs-nav: 13px;
  --fs-card-title: 18px;
  --fs-card-body: 13.6px;
  --fs-stat-label: 15px;
  --fs-stat-body: 13px;
  --fs-mini-body: 12.5px;
  --fs-tag: 12.5px;
  --fs-check: 13.2px;
  --fs-tab: 13.5px;
  --fs-link: 13.4px;
  --fs-tl-body: 13.8px;
  --fs-badge: 11.5px;
  --fs-kicker: 10.5px;

  --lh-h1: 1.02;
  --lh-h2: 1.12;
  --lh-h3: 1.2;
  --lh-lede: 1.32;
  --lh-lead: 1.75;
  --lh-body: 1.7;
  --lh-tight: 1.3;
  --lh-snug: 1.25;
  --lh-mini: 1.6;
  --lh-note: 1.65;

  --ls-h1: -2.2px;
  --ls-h2: -1.4px;
  --ls-h3: -0.8px;
  --ls-lede: -1px;
  --ls-eyebrow: 1.8px;
  --ls-kicker: 1.2px;
  --ls-marquee: 2.4px;
  --tt-eyebrow: uppercase;

  /* Pill heights — Persian glyphs need a touch more room */
  --h-badge: 34px;
  --h-tag: 34px;
  --h-chip: 38px;
}

/* Locale typography — the only place the two versions genuinely diverge.
   Persian sets taller leading (the script needs it), drops letter-spacing
   and uppercasing (meaningless in Persian), and nudges sizes up slightly. */
:root:lang(fa) {
  --font: Vazirmatn, Tahoma, system-ui, sans-serif;
  --font-latin: Poppins, Vazirmatn, sans-serif;

  --fs-h1: clamp(32px, 5vw, 62px);
  --fs-h2: clamp(26px, 3.4vw, 42px);
  --fs-h3: clamp(21px, 2.5vw, 30px);
  --fs-lede: clamp(22px, 3.1vw, 38px);
  --fs-eyebrow: 12px;
  --fs-nav: 13.5px;
  --fs-card-body: 13.8px;
  --fs-stat-label: 15.5px;
  --fs-stat-body: 13.4px;
  --fs-mini-body: 12.8px;
  --fs-tag: 13px;
  --fs-check: 13.4px;
  --fs-tab: 14px;
  --fs-link: 13.6px;
  --fs-tl-body: 14px;
  --fs-badge: 12.5px;
  --fs-kicker: 11.5px;

  --lh-h1: 1.32;
  --lh-h2: 1.45;
  --lh-h3: 1.45;
  --lh-lede: 1.62;
  --lh-lead: 1.95;
  --lh-body: 1.9;
  --lh-tight: 1.5;
  --lh-snug: 1.3;
  --lh-mini: 1.8;
  --lh-note: 1.85;

  --ls-h1: normal;
  --ls-h2: normal;
  --ls-h3: normal;
  --ls-lede: normal;
  --ls-eyebrow: normal;
  --ls-marquee: normal;
  --tt-eyebrow: none;

  --h-badge: 36px;
  --h-tag: 36px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--blue-light);
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Latin runs inside Persian copy (book titles, product names).
   Isolating the run is enough for the bidi algorithm to order pure-Latin text
   left-to-right. Deliberately NOT setting `direction: ltr` here: on a block
   element that would flip `text-align: start` to the left edge, and the design
   aligns these titles to the RTL start edge (right). */
.lat {
  font-family: var(--font-latin);
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(6%, -5%) scale(1.12); }
  66%      { transform: translate(-5%, 4%) scale(0.95); }
}
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes spinBack { to { transform: rotate(-360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes shine {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  55%, 100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes shineRtl {
  0%        { transform: translateX(120%) skewX(18deg); }
  55%, 100% { transform: translateX(-320%) skewX(18deg); }
}
@keyframes grow {
  from { transform: scaleY(0.15); }
  to   { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}

.section {
  scroll-margin-top: 110px;
  position: relative;
}

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line-1);
}

.section--clip {
  overflow: hidden;
}

/* Ambient radial washes */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.eyebrow {
  display: block;
  font: 600 var(--fs-eyebrow) / 1 var(--font);
  letter-spacing: var(--ls-eyebrow);
  text-transform: var(--tt-eyebrow);
  color: var(--blue-mid);
}

.eyebrow--amber {
  color: var(--amber-light);
}

.h2 {
  margin-top: 16px;
  font: 700 var(--fs-h2) / var(--lh-h2) var(--font);
  letter-spacing: var(--ls-h2);
  color: var(--fg-strong);
  text-wrap: balance;
}

.section-lead {
  margin-top: 18px;
  font: 400 var(--fs-lead-sm) / var(--lh-lead) var(--font);
  color: var(--fg-body);
  text-wrap: pretty;
}

.section-head--center {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
}

/* Reveal-on-scroll. Only arms when JS is present, so no-JS never hides copy. */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   5. Buttons & pills
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 60px;
  padding-inline: 30px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 600 16px / 1 var(--font);
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}

.btn--primary {
  background: var(--grad-blue);
  color: #fff;
  box-shadow: var(--sh-btn);
}

.btn--primary:hover {
  color: #fff;
  box-shadow: var(--sh-btn-hover);
}

.btn--ghost {
  background: var(--surface-3);
  border-color: var(--line-5);
  color: var(--fg-bright);
}

.btn--ghost:hover {
  background: var(--surface-hover);
  color: #fff;
}

.btn--sm {
  height: 50px;
  padding-inline: 22px;
  gap: 9px;
  font-size: var(--fs-tab);
}

.btn--nav {
  height: 42px;
  padding-inline: 20px;
  gap: 8px;
  font-size: var(--fs-nav);
  box-shadow: 0 10px 26px rgba(43, 92, 230, 0.36);
}

.btn--nav:hover {
  box-shadow: 0 14px 34px rgba(43, 92, 230, 0.55);
}

.btn--lg {
  height: 62px;
  padding-inline: 32px;
  font-size: 16.5px;
  box-shadow: 0 18px 44px rgba(43, 92, 230, 0.46);
}

.btn--lg.btn--primary:hover {
  box-shadow: 0 24px 58px rgba(43, 92, 230, 0.66);
}

.btn--lg.btn--ghost {
  background: var(--surface-4);
  border-color: rgba(255, 255, 255, 0.14);
}

.btn--lg.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Platform buttons: an element with data-for shows only on the platforms it
   names - Android the APK, iPhone the web app, a computer both. The inline
   script in <head> sets data-platform on <html>; without JS there is none,
   so everything shows. */
[data-platform="android"] [data-for]:not([data-for~="android"]),
[data-platform="ios"] [data-for]:not([data-for~="ios"]),
[data-platform="desktop"] [data-for]:not([data-for~="desktop"]) {
  display: none;
}

/* Sweeping highlight on primary CTAs */
.shine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.shine--wide { width: 40%; animation-duration: 4.2s; }
.shine--slow { animation-duration: 3.4s; }

[dir="rtl"] .shine {
  animation-name: shineRtl;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, 0.32), transparent);
}

/* Directional glyph — mirrored for RTL rather than duplicated in markup */
.icon-arrow {
  transition: transform 0.3s var(--ease);
}

[dir="rtl"] .icon-arrow {
  transform: scaleX(-1);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--h-badge);
  padding-inline: 15px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-5);
  font: 600 var(--fs-badge) / 1 var(--font);
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-soft);
}

.badge--amber {
  background: var(--amber-wash-strong);
  border-color: var(--amber-edge-strong);
  color: var(--amber-light);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}

.dot--amber {
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
}

.tag {
  display: inline-flex;
  align-items: center;
  height: var(--h-tag);
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-4);
  font: 500 var(--fs-tag) / 1 var(--font);
  color: var(--fg-soft);
}

.tag--blue {
  background: var(--blue-wash-strong);
  border-color: var(--blue-edge-strong);
  color: var(--blue-light);
}

.tag--lg {
  height: var(--h-chip);
  padding-inline: 16px;
  font-size: var(--fs-link);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.tag-row--lg {
  gap: 10px;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   6. Scroll progress
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 80;
  background: rgba(255, 255, 255, 0.05);
}

.progress__bar {
  height: 100%;
  width: 0%;
  margin-inline-end: auto;
  background: linear-gradient(90deg, var(--blue), var(--amber));
}

[dir="rtl"] .progress__bar {
  background: linear-gradient(270deg, var(--blue), var(--amber));
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 18px;
  inset-inline: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  pointer-events: none;
}

.nav__inner {
  pointer-events: auto;
  max-width: 1120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px;
  padding-inline-start: 18px;
  border-radius: var(--r-pill);
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--sh-nav);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* The MVA app's mark (its icon's three stacked layers, from the app's
   mva_logo_Dark.svg), white with a blue glow as on the app icon. */
.brand__mark {
  display: block;
  flex: none;
  width: 28px;
  height: 30px;
  fill: #fff;
  filter: drop-shadow(0 0 9px rgba(76, 124, 255, 0.6));
}

.brand__text {
  font: 700 15.5px / 1 var(--font-latin);
  letter-spacing: 0.5px;
  color: #f4f7ff;
  direction: ltr;
  unicode-bidi: isolate;
}

.brand__text b {
  color: var(--amber);
  font-weight: 700;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.nav__link {
  font: 500 var(--fs-nav) / 1 var(--font);
  color: #b9c4dc;
  transition: color 0.2s;
}

.nav__link:hover {
  color: #fff;
}

.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-5);
  border: 1px solid var(--line-5);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  padding: 0;
}

/* Mobile-only cluster: app download + burger. On a phone the download is the
   one action people come back for, so it lives in the always-visible bar
   rather than behind the menu. */
.nav__end {
  display: none;
  align-items: center;
  gap: 8px;
}

.nav__app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: var(--blue-wash-strong);
  border: 1px solid var(--blue-edge-strong);
  font: 600 12.5px / 1 var(--font);
  color: var(--blue-light);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.nav__app:hover {
  background: rgba(76, 124, 255, 0.22);
  color: #c6d6ff;
}

/* Mobile menu overlay.
   `display: flex` below would otherwise beat the [hidden] attribute's UA
   `display: none`, so the closed state has to be restated explicitly. */
.menu[hidden] {
  display: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(5, 7, 12, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  animation: rise 0.3s ease;
}

.menu__close {
  position: absolute;
  inset-block-start: 26px;
  inset-inline-end: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface-5);
  border: 1px solid var(--line-5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.menu__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu__link {
  font: 600 28px / var(--lh-tight) var(--font);
  color: var(--fg);
}

.menu__cta {
  margin-top: 28px;
  height: 58px;
  border-radius: var(--r-pill);
  background: var(--grad-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px / 1 var(--font);
  color: #fff;
}

.menu__app {
  margin-top: 12px;
  height: 58px;
  border-radius: var(--r-pill);
  background: var(--surface-5);
  border: 1px solid var(--line-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 600 16px / 1 var(--font);
  color: var(--fg-bright);
}

.menu__app-note {
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-margin-top: 100px;
}

.hero__bg {
  position: absolute;
  inset: -15%;
  pointer-events: none;
  transition: transform 0.5s var(--ease);
}

.hero__bg .glow:nth-child(1) {
  top: 6%;
  inset-inline-end: 8%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.3), transparent 62%);
  animation: drift 22s ease-in-out infinite;
}

.hero__bg .glow:nth-child(2) {
  bottom: 2%;
  inset-inline-start: 2%;
  width: 44vw;
  height: 44vw;
  background: radial-gradient(circle, rgba(245, 176, 39, 0.16), transparent 62%);
  animation: drift 28s ease-in-out infinite reverse;
}

.hero__bg .glow:nth-child(3) {
  top: 34%;
  inset-inline-start: 32%;
  width: 34vw;
  height: 34vw;
  background: radial-gradient(circle, rgba(120, 86, 255, 0.16), transparent 64%);
  animation: drift 34s ease-in-out infinite;
}

.hero__grid {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(110px, 13vw, 150px) var(--gutter) clamp(56px, 7vw, 90px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(36px, 4vw, 60px);
  align-items: center;
}

.hero__badge {
  animation: rise 0.7s ease both;
}

.hero__title {
  margin-top: 22px;
  font: 700 var(--fs-h1) / var(--lh-h1) var(--font);
  letter-spacing: var(--ls-h1);
  color: var(--fg-strong);
}

/* Words rise in sequence; --i carries the stagger index. */
/* Each word is its own span for the staggered rise. The whitespace between
   the spans is the word space — no extra margin, or the gaps read double. */
.hero__title span {
  display: inline-block;
  animation: rise 0.8s ease both;
  animation-delay: calc(0.05s + var(--i, 0) * 0.08s);
}

.hero__title .accent {
  background: linear-gradient(110deg, var(--blue-light), var(--blue) 45%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  margin-top: 24px;
  max-width: 520px;
  font: 400 var(--fs-lead) / var(--lh-lead) var(--font);
  color: var(--fg-body);
  text-wrap: pretty;
  animation: rise 0.9s ease both;
  animation-delay: 0.7s;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
  animation: rise 0.9s ease both;
  animation-delay: 0.78s;
}

/* Orbit diagram */
.hero__visual {
  display: flex;
  justify-content: center;
  animation: rise 1s ease both;
  animation-delay: 0.3s;
}

.orbit {
  position: relative;
  width: min(430px, 86vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit__ring {
  position: absolute;
  border-radius: 50%;
}

.orbit__ring--outer { inset: 0; border: 1px solid var(--line-2); }
.orbit__ring--dashed { inset: 12%; border: 1px dashed var(--line-5); animation: spin 46s linear infinite; }
.orbit__ring--inner { inset: 26%; border: 1px solid rgba(76, 124, 255, 0.2); }

.orbit__track { position: absolute; inset: 3%; }
.orbit__track--fast { animation: spin 17s linear infinite; }
.orbit__track--slow { animation: spinBack 26s linear infinite; }

.orbit__satellite {
  position: absolute;
  top: -4.5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 16px var(--amber);
}

.orbit__satellite--sm {
  top: -3.5px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--blue-pale);
  box-shadow: 0 0 14px var(--blue);
}

.orbit__chips {
  position: absolute;
  inset: 0;
}

.chip {
  position: absolute;
  animation: float 6.5s ease-in-out infinite;
}

.chip__body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-card);
  border: 1px solid rgba(76, 124, 255, 0.34);
  box-shadow: var(--sh-card);
  font: 600 12.5px / 1 var(--font);
  color: #eaeffa;
  white-space: nowrap;
}

:lang(fa) .chip__body {
  padding-inline: 15px;
  font-size: 13px;
}

.chip--amber .chip__body {
  border-color: rgba(245, 176, 39, 0.36);
}

.chip--top { top: 0; left: 50%; transform: translateX(-50%); }
.chip--end { bottom: 2%; inset-inline-end: 0; animation-duration: 7.6s; animation-delay: 0.7s; }
.chip--start { bottom: 2%; inset-inline-start: 0; animation-duration: 8.4s; animation-delay: 1.2s; }

.orbit__core {
  position: relative;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-bright), var(--blue-deep) 62%, var(--blue-dark));
  box-shadow: 0 0 90px rgba(76, 124, 255, 0.45), inset 0 -10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: float 8s ease-in-out infinite;
  text-align: center;
}

.orbit__core b {
  font: 700 clamp(15px, 2vw, 20px) / 1 var(--font-latin);
  letter-spacing: 1.2px;
  color: #fff;
  direction: ltr;
}

.orbit__core span {
  margin-top: 8px;
  font: 500 10.5px / 1 var(--font);
  letter-spacing: 1.4px;
  text-transform: var(--tt-eyebrow);
  color: rgba(255, 255, 255, 0.72);
}

:lang(fa) .orbit__core span {
  font-size: 11px;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   9. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  padding-block: 18px;
  border-block: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

[dir="rtl"] .marquee__track {
  animation-name: marqueeRtl;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 34px;
  flex: 0 0 auto;
  padding-inline-end: 34px;
}

:lang(fa) .marquee__group {
  gap: 32px;
  padding-inline-end: 32px;
}

.marquee__item {
  font: 600 13px / 1 var(--font);
  letter-spacing: var(--ls-marquee);
  text-transform: var(--tt-eyebrow);
  color: var(--fg-dim);
  white-space: nowrap;
}

.marquee__sep { color: var(--amber); }
.marquee__sep--blue { color: var(--blue); }

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */
.lede {
  max-width: 920px;
}

.lede p {
  margin-top: 22px;
  font: 600 var(--fs-lede) / var(--lh-lede) var(--font);
  letter-spacing: var(--ls-lede);
  color: var(--fg-lede);
  text-wrap: pretty;
}

.lede strong {
  color: var(--fg-strong);
  font-weight: 600;
}

.stat-grid {
  margin-top: clamp(38px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.stat {
  padding: 26px;
  border-radius: var(--r-2xl);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
}

.stat--accent {
  background: var(--blue-wash);
  border-color: rgba(76, 124, 255, 0.28);
}

.stat__num {
  font: 700 clamp(30px, 3.4vw, 40px) / 1 var(--font);
  background: linear-gradient(120deg, var(--blue-light), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__num--amber {
  background: linear-gradient(120deg, var(--amber-light), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
}

.stat__num--plain {
  background: none;
  color: var(--fg-strong);
}

.stat__label {
  margin-top: 12px;
  font: 600 var(--fs-stat-label) / var(--lh-tight) var(--font);
  color: var(--fg);
}

.stat__desc {
  margin-top: 7px;
  font: 400 var(--fs-stat-body) / var(--lh-note) var(--font);
  color: var(--fg-muted);
}

.stat--accent .stat__desc {
  color: var(--fg-soft);
}

/* --------------------------------------------------------------------------
   11. Pillars
   -------------------------------------------------------------------------- */
.pillars__glow {
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.14), transparent 62%);
  border-radius: 0;
}

.tabs {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-4);
  cursor: pointer;
  font: 600 var(--fs-tab) / 1 var(--font);
  color: var(--fg-soft);
  transition: background 0.25s, color 0.25s;
}

.tab:hover {
  background: var(--surface-hover);
  color: #fff;
}

/* Selected ring is a pseudo-element rather than a conditional node */
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-pill);
  border: 1.6px solid var(--blue);
  box-shadow: 0 0 26px rgba(76, 124, 255, 0.5);
  pointer-events: none;
}

.tab--amber[aria-selected="true"]::after {
  border-color: var(--amber);
  box-shadow: 0 0 26px rgba(245, 176, 39, 0.42);
}

.panel-shell {
  margin-top: 26px;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-4xl);
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow: var(--sh-panel);
  min-height: 280px;
}

:lang(fa) .panel-shell {
  min-height: 300px;
}

.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  animation: rise 0.5s ease both;
}

.panel[hidden] {
  display: none;
}

.pillar__kicker {
  font: 700 12px / 1 var(--font);
  letter-spacing: 1.6px;
  color: var(--blue-mid);
}

:lang(fa) .pillar__kicker {
  font-size: 12.5px;
  letter-spacing: normal;
}

.pillar__kicker--amber {
  color: var(--amber-light);
}

.pillar h3 {
  margin-top: 14px;
  font: 700 var(--fs-h3) / var(--lh-h3) var(--font);
  letter-spacing: var(--ls-h3);
  color: var(--fg-strong);
}

.pillar p {
  margin-top: 14px;
  font: 400 var(--fs-body) / var(--lh-lead) var(--font);
  color: var(--fg-body);
  text-wrap: pretty;
}

.note {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--amber-wash);
  border: 1px solid var(--amber-edge);
  font: 400 13.4px / var(--lh-body) var(--font);
  color: var(--fg-soft);
}

:lang(fa) .note {
  font-size: 13.6px;
}

.note--inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(245, 176, 39, 0.09);
  border-color: rgba(245, 176, 39, 0.26);
  color: var(--amber-pale);
  font-size: 12.8px;
  line-height: 1.5;
}

:lang(fa) .note--inline {
  font-size: 13px;
  line-height: 1.6;
}

/* At most two columns — the design's 2x2. The minimum is half the row
   (1px under, so rounding never drops it to one), or 140px when half would
   be narrower, which is when it stacks to a single column. */
.minicard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(140px, calc((100% - 13px) / 2)), 1fr));
  gap: 12px;
}

.minicard {
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--line-3);
}

.minicard--blue {
  background: var(--blue-wash);
  border-color: var(--blue-edge);
}

.minicard--amber {
  background: var(--amber-wash);
  border-color: var(--amber-edge);
}

.minicard__kicker {
  font: 600 var(--fs-kicker) / 1 var(--font);
  letter-spacing: var(--ls-kicker);
  text-transform: var(--tt-eyebrow);
  color: var(--fg-muted);
}

:lang(fa) .minicard__kicker {
  letter-spacing: normal;
}

.minicard--blue .minicard__kicker { color: var(--blue-light); }
.minicard--amber .minicard__kicker { color: var(--amber-light); }

.minicard__title {
  margin-top: 10px;
  font: 600 17px / var(--lh-snug) var(--font);
  color: var(--fg);
}

.minicard__desc {
  margin-top: 7px;
  font: 400 var(--fs-mini-body) / var(--lh-mini) var(--font);
  color: var(--fg-muted);
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  font: 500 var(--fs-check) / var(--lh-tight) var(--font);
  color: var(--fg-bright);
}

.steps {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}

.step {
  padding: 24px;
  border-radius: var(--r-2xl);
  background: var(--surface-2);
  border: 1px solid var(--line-3);
}

.step--blue { background: var(--blue-wash-soft); border-color: var(--blue-edge-soft); }
.step--amber { background: var(--amber-wash); border-color: var(--amber-edge); }

.step__kicker {
  font: 600 var(--fs-kicker) / 1 var(--font);
  letter-spacing: 1.3px;
  text-transform: var(--tt-eyebrow);
  color: var(--blue-light);
}

:lang(fa) .step__kicker {
  letter-spacing: normal;
}

.step--amber .step__kicker { color: var(--amber-light); }

.step__title {
  margin-top: 11px;
  font: 600 16.5px / var(--lh-tight) var(--font);
  color: var(--fg);
}

.loop-note {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 13px / 1.5 var(--font);
  color: var(--fg-dim);
  text-align: center;
}

:lang(fa) .loop-note {
  font-size: 13.4px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   12. Features
   -------------------------------------------------------------------------- */
.features__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.features__head > div {
  max-width: 640px;
}

.feature-grid {
  margin-top: clamp(30px, 3.8vw, 50px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}

.feature {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border-radius: var(--r-3xl);
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition: transform 0.35s var(--ease), background 0.3s;
}

.feature:hover {
  transform: translateY(-6px);
  background: var(--surface-4);
}

.feature--amber {
  background: rgba(245, 176, 39, 0.06);
  border-color: rgba(245, 176, 39, 0.22);
}

.feature--amber:hover {
  background: rgba(245, 176, 39, 0.1);
}

.feature__glow {
  position: absolute;
  top: -60px;
  inset-inline-end: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.2), transparent 66%);
  pointer-events: none;
}

.feature__glow--amber {
  background: radial-gradient(circle, rgba(245, 176, 39, 0.2), transparent 66%);
}

.feature__glow--violet {
  top: auto;
  bottom: -70px;
  inset-inline-end: auto;
  inset-inline-start: -50px;
  background: radial-gradient(circle, rgba(120, 86, 255, 0.22), transparent 66%);
}

.feature__body {
  position: relative;
}

.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(76, 124, 255, 0.14);
  border: 1px solid var(--blue-edge-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box--amber {
  background: rgba(245, 176, 39, 0.16);
  border-color: var(--amber-edge-strong);
}

.feature h3 {
  margin-top: 18px;
  font: 600 var(--fs-card-title) / var(--lh-tight) var(--font);
  color: var(--fg);
}

.feature p {
  margin-top: 10px;
  font: 400 var(--fs-card-body) / var(--lh-body) var(--font);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.feature p b {
  color: var(--fg-soft);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Wordkit / phone mock
   -------------------------------------------------------------------------- */
.split {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(34px, 4vw, 64px);
  align-items: center;
}

.wordkit__glow {
  top: -10%;
  inset-inline-end: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.16), transparent 62%);
  animation: drift 30s ease-in-out infinite;
}

.wordkit__actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.wordkit__note {
  font: 500 var(--fs-link) / 1.6 var(--font);
  color: var(--fg-dim);
}

.phone-wrap {
  display: flex;
  justify-content: center;
}

.phone {
  position: relative;
  /* 300x600 exactly whenever there is room; shrinks proportionally on very
     narrow screens (<=320px) instead of pushing the page sideways. */
  width: 300px;
  max-width: 100%;
  aspect-ratio: 1 / 2;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line-5);
  box-shadow: var(--sh-phone);
  animation: float 7.5s ease-in-out infinite;
}

.phone__glow {
  position: absolute;
  top: -60px;
  inset-inline-end: -70px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.26), transparent 68%);
}

.phone__glow--amber {
  top: auto;
  bottom: -60px;
  inset-inline-end: auto;
  inset-inline-start: -70px;
  background: radial-gradient(circle, rgba(245, 176, 39, 0.14), transparent 68%);
}

/* The screen reproduces the real MVA Wordkit unit view: course header, unit
   card, and the lesson list with its progress rail. Kept as markup rather than
   a screenshot so it stays sharp at any DPI, adds no image request, and can be
   relabelled. The app's own UI is English, so this block is not localised —
   only the wrapper's aria-label is. */
.app {
  position: relative;
  direction: ltr;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-inline: 12px;
  font-family: var(--font-latin);
}

.app__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding-inline: 4px;
  font: 600 10.5px / 1 var(--font-latin);
  color: rgba(242, 245, 255, 0.92);
  flex: none;
}

.app__status span:last-child {
  letter-spacing: 1.5px;
  font-size: 9px;
  color: rgba(242, 245, 255, 0.7);
}

/* Course header ---------------------------------------------------------- */
.app__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex: none;
}

.app__icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-4);
  border: 1px solid var(--line-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.app__icon-btn--info {
  background: rgba(76, 124, 255, 0.12);
  border-color: rgba(76, 124, 255, 0.42);
  font: 700 12px / 1 var(--font-latin);
  color: var(--blue-light);
}

.app__title {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.app__title b {
  display: block;
  font: 700 12.5px / 1.2 var(--font-latin);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app__title span {
  display: block;
  margin-top: 2px;
  font: 500 9.5px / 1 var(--font-latin);
  color: var(--fg-dim);
}

/* Unit card -------------------------------------------------------------- */
.unit {
  flex: 1;
  min-height: 0;
  margin-top: 6px;
  padding: 12px 11px 0;
  border-radius: var(--r-xl);
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.085);
  overflow: hidden;
}

.unit__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unit__num {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad-blue);
  box-shadow: 0 6px 16px rgba(43, 92, 230, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px / 1 var(--font-latin);
  color: #fff;
  flex: none;
}

.unit__head > div {
  flex: 1;
  min-width: 0;
}

.unit__title {
  font: 700 13.5px / 1.2 var(--font-latin);
  color: var(--fg);
}

.unit__count {
  margin-top: 2px;
  font: 500 9.5px / 1 var(--font-latin);
  color: var(--fg-dim);
}

/* Lesson list ------------------------------------------------------------ */
.lessons {
  position: relative;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* progress rail, threaded behind the lesson icons */
.lessons::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.13);
}

.lsn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.lsn__icon {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: var(--surface-4);
  border: 1px solid var(--line-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
  z-index: 1;
}

.lsn--done .lsn__icon {
  background: rgba(61, 220, 132, 0.13);
  border-color: rgba(61, 220, 132, 0.32);
}

.lsn__body {
  min-width: 0;
  flex: 1;
}

.lsn__name {
  display: block;
  font: 600 11.5px / 1.25 var(--font-latin);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsn__time {
  display: block;
  margin-top: 3px;
  font: 500 9.5px / 1 var(--font-latin);
  color: var(--fg-dim);
}

/* the lesson the learner is on */
.lsn--active {
  background: rgba(76, 124, 255, 0.15);
  border-radius: 12px;
  padding-inline: 8px;
  margin-inline-start: 41px;
  padding-block: 7px;
  border-left: 3px solid var(--blue);
}

.lsn--active .lsn__icon {
  position: absolute;
  left: -44px;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.lsn--active .lsn__name {
  color: #fff;
}

/* Floating tab bar ------------------------------------------------------- */
.app__tabs {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 48px;
  border-radius: var(--r-pill);
  background: rgba(14, 19, 33, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-inline: 5px;
  gap: 4px;
}

.tab-item {
  height: 38px;
  border-radius: var(--r-pill);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: 500 8.5px / 1 var(--font-latin);
  color: var(--fg-muted);
}

.tab-item--on {
  background: var(--grad-blue);
  color: #fff;
  font-weight: 600;
}

/* the list runs under the floating bar, as it does on a real device */
.unit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  background: linear-gradient(180deg, transparent, var(--bg) 78%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   13b. App tour — the Wordkit onboarding pages, side by side
   Base styles are a plain swipe carousel (no JS, reduced motion, short
   screens). The media query further down pins the section and site.js then
   maps vertical scroll onto the track, writing per-page --dx (signed,
   physical direction) and --ad (distance, 0..1) for the parallax layers.
   -------------------------------------------------------------------------- */
.tour {
  --panels: 4;
  position: relative;
  background: var(--bg-alt);
}

.tour__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 24px);
  padding-block: var(--section-y);
  overflow: hidden;
}

.tour__glow {
  top: 8%;
  inset-inline-start: -15%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.16), transparent 62%);
  animation: drift 28s ease-in-out infinite;
}

.tour__glow--amber {
  top: auto;
  bottom: -25%;
  inset-inline-start: auto;
  inset-inline-end: -10%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(245, 176, 39, 0.1), transparent 62%);
  animation-duration: 34s;
  animation-direction: reverse;
}

.tour__head {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Page indicator — the app's expanding onboarding dots. --sel (0..1) is how
   selected a dot is; site.js interpolates it continuously while scrolling. */
.tour__dots {
  display: flex;
  align-items: center;
}

.tour__dot {
  --sel: 0;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.tour__dot::before {
  content: "";
  width: calc(6px + 18px * var(--sel));
  height: 6px;
  border-radius: 6px;
  background: var(--grad-blue);
  opacity: calc(0.35 + 0.65 * var(--sel));
  box-shadow: 0 0 10px rgba(76, 124, 255, 0.35);
}

.tour__viewport {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tour__viewport::-webkit-scrollbar {
  display: none;
}

.tour__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each page spans the viewport; its content sits in the usual shell width. */
.tour__panel {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}

.tour__panel--intro {
  grid-template-columns: minmax(0, 1fr);
}

/* Outlined page number, the deepest parallax layer */
.tour__ghost {
  position: absolute;
  inset-block-end: -0.08em;
  inset-inline-end: max(var(--gutter), calc((100% - var(--shell)) / 2));
  font: 700 clamp(180px, 28vw, 400px) / 1 var(--font);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}

.tour__copy {
  position: relative;
}

.tour__num {
  display: block;
  font: 700 var(--fs-kicker) / 1 var(--font);
  letter-spacing: var(--ls-kicker);
  color: var(--blue-mid);
}

/* Light title with bold, gradient keywords — the app's <w800> runs */
.tour__title {
  margin-top: 14px;
  font: 400 clamp(24px, 3.2vw, 40px) / var(--lh-h3) var(--font);
  letter-spacing: var(--ls-h3);
  color: var(--fg-strong);
  text-wrap: balance;
}

.tour__title strong {
  font-weight: 700;
  background: linear-gradient(110deg, var(--blue-light), var(--blue) 45%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tour__title--xl {
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.tour__desc {
  margin-top: 16px;
  max-width: 460px;
  font: 400 var(--fs-lead-sm) / var(--lh-lead) var(--font);
  color: var(--fg-body);
  text-wrap: pretty;
}

.tour__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tour__hint {
  margin-top: 30px;
  font: 500 var(--fs-link) / 1 var(--font);
  color: var(--fg-dim);
}

.tour__hint > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tour__hint .tour__hint-pinned {
  display: none;
}

.tour__hint-pinned svg {
  animation: float 2.4s ease-in-out infinite;
}

.tour__art {
  position: relative;
  margin: 0;
  height: clamp(280px, 34vw, 440px);
  animation: float 7s ease-in-out infinite;
}

.tour__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}

/* Pinned mode. Keep this query identical to PIN_QUERY in site.js: CSS sets
   the layout up front (no shift when the script arrives), JS drives it. */
@media (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .tour {
    height: calc(100vh + (var(--panels) - 1) * 90vh);
    height: calc(100svh + (var(--panels) - 1) * 90svh);
  }

  .js .tour__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-block: 96px clamp(18px, 3vh, 34px);
  }

  .js .tour__viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
    scroll-snap-type: none;
  }

  .js .tour__track {
    position: absolute;
    inset: 0;
    will-change: transform;
  }

  .js .tour__hint .tour__hint-pinned {
    display: inline-flex;
  }

  .js .tour__hint .tour__hint-swipe {
    display: none;
  }

  .js .tour__art {
    height: min(440px, 52vh);
    height: min(440px, 52svh);
  }

  /* Layers move at different speeds against the track: the art lags (reads
     as deeper), the ghost number lags more, the copy leads slightly. All
     fade with distance — the same translate + opacity the app's pages use —
     so a lagging neighbour never peeks in at the edge of a settled page. */
  .js .tour__art img {
    transform: translate3d(calc(var(--dx, 0) * 18vw), 0, 0)
      rotate(calc(var(--dx, 0) * -6deg))
      scale(calc(1 - var(--ad, 0) * 0.22));
    opacity: calc(1 - var(--ad, 0));
    will-change: transform;
  }

  .js .tour__ghost {
    transform: translate3d(calc(var(--dx, 0) * 38vw), 0, 0);
    opacity: calc(1 - var(--ad, 0));
  }

  .js .tour__copy {
    transform: translate3d(calc(var(--dx, 0) * -6vw), 0, 0);
    opacity: calc(1 - var(--ad, 0) * 0.9);
  }
}

/* --------------------------------------------------------------------------
   14. Resources
   -------------------------------------------------------------------------- */
.book-grid {
  margin-top: clamp(30px, 3.8vw, 50px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 18px;
}

.book {
  padding: 20px;
  border-radius: 30px;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition: transform 0.4s var(--ease);
}

.book:hover {
  transform: translateY(-8px);
}

.book__cover {
  height: 230px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-2);
}

.book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.pill {
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--r-sm);
  background: var(--surface-4);
  border: 1px solid var(--line-5);
  display: inline-flex;
  align-items: center;
  font: 600 var(--fs-kicker) / 1 var(--font);
  color: var(--fg-soft);
}

:lang(fa) .pill {
  height: 26px;
}

.pill--blue {
  background: rgba(76, 124, 255, 0.14);
  border-color: var(--blue-edge-strong);
  color: var(--blue-light);
}

.pill--amber {
  background: rgba(245, 176, 39, 0.14);
  border-color: var(--amber-edge-strong);
  color: var(--amber-light);
}

.book__note {
  font: 500 11.5px / 1 var(--font);
  color: var(--fg-dim);
}

:lang(fa) .book__note {
  font-size: 12px;
}

.book h3 {
  margin-top: 12px;
  font: 600 19px / var(--lh-tight) var(--font-latin);
  color: var(--fg);
  unicode-bidi: isolate;
  text-align: start;
}

.book p {
  margin-top: 9px;
  font: 400 13.4px / var(--lh-body) var(--font);
  color: var(--fg-muted);
}

:lang(fa) .book p {
  font-size: 13.6px;
}

/* --------------------------------------------------------------------------
   15. Mentoring
   -------------------------------------------------------------------------- */
.mentor__media {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mentor__photo {
  border-radius: 30px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  height: clamp(250px, 28vw, 350px);
}

.mentor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-note {
  padding: 22px;
  border-radius: var(--r-2xl);
  background: rgba(245, 176, 39, 0.07);
  border: 1px solid var(--amber-edge);
}

.ai-note__title {
  font: 600 var(--fs-kicker) / 1 var(--font);
  letter-spacing: 1.4px;
  text-transform: var(--tt-eyebrow);
  color: var(--amber-light);
}

:lang(fa) .ai-note__title {
  letter-spacing: normal;
}

.ai-note p {
  margin-top: 11px;
  font: 400 var(--fs-card-body) / var(--lh-body) var(--font);
  color: var(--fg-soft);
  text-wrap: pretty;
}

.mentor__lead {
  margin-top: 18px;
  max-width: 520px;
  font: 400 var(--fs-lead-sm) / var(--lh-lead) var(--font);
  color: var(--fg-body);
  text-wrap: pretty;
}

.mentor__checks {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}

.mentor__checks .check {
  padding: 15px 16px;
}

/* --------------------------------------------------------------------------
   16. Journey timeline
   -------------------------------------------------------------------------- */
.timeline {
  position: relative;
  margin-top: clamp(34px, 4.4vw, 56px);
}

.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(76, 124, 255, 0.55), rgba(245, 176, 39, 0.45), rgba(255, 255, 255, 0.05));
}

/* Semantic <ol> for the steps; the numbered badges are the visible marker,
   so the native list marker and indent are removed. */
.timeline__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  position: relative;
  padding-inline-start: 72px;
}

.tl-num {
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--grad-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 17px / 1 var(--font);
  color: #fff;
  box-shadow: 0 0 0 6px var(--bg), 0 12px 30px rgba(43, 92, 230, 0.4);
}

.tl-num--amber {
  background: var(--grad-amber);
  color: #1a1405;
  box-shadow: 0 0 0 6px var(--bg), 0 12px 30px rgba(245, 176, 39, 0.3);
}

.tl-card {
  padding: 24px 26px;
  border-radius: var(--r-2xl);
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.tl-card--accent {
  background: var(--blue-wash);
  border-color: rgba(76, 124, 255, 0.28);
}

.tl-card h3 {
  font: 600 var(--fs-card-title) / var(--lh-tight) var(--font);
  color: var(--fg);
}

.tl-card p {
  margin-top: 9px;
  max-width: 660px;
  font: 400 var(--fs-tl-body) / var(--lh-body) var(--font);
  color: var(--fg-muted);
}

.tl-card--accent p {
  color: var(--fg-soft);
}

/* --------------------------------------------------------------------------
   17. Register CTA
   -------------------------------------------------------------------------- */
.cta__glow {
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(76, 124, 255, 0.22), transparent 60%);
  animation: drift 26s ease-in-out infinite;
  border-radius: 0;
}

.cta__shell {
  position: relative;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 100px) var(--gutter);
}

.cta__card {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px) clamp(24px, 4vw, 60px);
  border-radius: var(--r-5xl);
  background: linear-gradient(150deg, rgba(76, 124, 255, 0.2), rgba(43, 92, 230, 0.05));
  border: 1px solid rgba(76, 124, 255, 0.32);
  text-align: center;
  box-shadow: var(--sh-cta);
}

.cta__title {
  margin: 22px auto 0;
  max-width: 720px;
  font: 700 clamp(30px, 4.4vw, 54px) / 1.08 var(--font);
  letter-spacing: -1.8px;
  color: var(--fg-max);
  text-wrap: balance;
}

:lang(fa) .cta__title {
  font-size: clamp(27px, 4vw, 48px);
  line-height: 1.4;
  letter-spacing: normal;
}

.cta__lead {
  margin: 20px auto 0;
  max-width: 540px;
  font: 400 var(--fs-lead-sm) / var(--lh-lead) var(--font);
  color: #a9b4ce;
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.cta__fineprint {
  margin-top: 22px;
  font: 400 12.5px / var(--lh-note) var(--font);
  color: var(--fg-lede);
}

:lang(fa) .cta__fineprint {
  font-size: 13px;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   17b. Invite — a friend's link (?ref=<code>). Hidden until site.js finds a
   code; it floats in the inline-end corner, over the hero's artwork rather
   than its copy.
   -------------------------------------------------------------------------- */
.invite {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 60; /* under the nav (70), the menu (75) and the progress bar (80) */
  width: min(380px, calc(100vw - 36px));
  padding: 22px;
  border-radius: var(--r-3xl);
  background: var(--bg-card);
  border: 1px solid var(--amber-edge);
  box-shadow: var(--sh-panel);
  animation: rise 0.6s var(--ease) both;
}

.invite[hidden] {
  display: none;
}

.invite__close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-4);
  color: var(--fg-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.invite__close:hover {
  background: var(--surface-hover);
  color: #fff;
}

.invite__title {
  margin-top: 16px;
  font: 700 var(--fs-card-title) / var(--lh-tight) var(--font);
  color: var(--fg-strong);
}

/* The code and its copy button are one control: a dashed amber slot. */
.invite__code {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-radius: var(--r-lg);
  background: var(--amber-wash);
  border: 1px dashed var(--amber-edge-strong);
}

.invite__value {
  flex: 1;
  text-align: center;
  font: 700 26px / 1 var(--font-latin);
  letter-spacing: 0.18em;
  color: var(--amber-light);
  user-select: all;
}

.invite__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding-inline: 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--grad-amber);
  color: var(--bg);
  font: 600 var(--fs-tab) / 1 var(--font);
  cursor: pointer;
}

.invite__note {
  margin-top: 12px;
  font: 400 var(--fs-card-body) / var(--lh-mini) var(--font);
  color: var(--fg-body);
}

.invite__actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

/* Two pills of one height side by side, whatever their labels. */
.invite__actions .btn {
  flex: 1;
  height: 46px;
  padding-inline: 14px;
  gap: 8px;
  font-size: var(--fs-tab);
  white-space: nowrap;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line-2);
  background: var(--bg-alt);
}

.footer__grid {
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 70px) var(--gutter) 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 32px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.footer__about {
  margin-top: 16px;
  max-width: 300px;
  font: 400 13px / var(--lh-body) var(--font);
  color: var(--fg-dim);
}

:lang(fa) .footer__about {
  font-size: 13.4px;
}

/* eNamad trust seal, framed as a tile under the brand blurb. The image is
   served by enamad.ir (only on the registered domain) and must stay as
   issued, so sizing is done here, on its height; the width follows. */
.footer__trust {
  margin-top: 20px;
  display: inline-flex;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line-3);
  transition: border-color 0.2s, background 0.2s;
}

.footer__trust:hover {
  background: var(--surface-4);
  border-color: var(--line-5);
}

.footer__trust[hidden] {
  display: none;
}

.footer__trust img {
  display: block;
  height: 84px;
  width: auto;
}

.footer__head {
  font: 600 var(--fs-kicker) / 1 var(--font);
  letter-spacing: 1.4px;
  text-transform: var(--tt-eyebrow);
  color: var(--fg-faint);
}

:lang(fa) .footer__head {
  letter-spacing: normal;
}

.footer__links {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: start;
}

.footer__links a,
.footer__links span {
  font: 400 var(--fs-link) / 1 var(--font);
  color: var(--fg-soft);
  transition: color 0.2s;
}

.footer__links a:hover {
  color: #fff;
}

.footer__links span {
  color: var(--fg-dim);
  line-height: 1.5;
}

:lang(fa) .footer__links span {
  line-height: 1.7;
}

.footer__cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding-inline: 20px;
  border-radius: var(--r-pill);
  background: rgba(76, 124, 255, 0.14);
  border: 1px solid rgba(76, 124, 255, 0.34);
  font: 600 var(--fs-link) / 1 var(--font);
  color: var(--blue-light);
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}

.footer__cta:hover {
  background: rgba(76, 124, 255, 0.22);
  color: #c6d6ff;
}

.footer__bottom {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--gutter) 34px;
  border-top: 1px solid var(--line-1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font: 400 12.2px / 1.5 var(--font);
  color: var(--fg-faint);
}

:lang(fa) .footer__bottom {
  font-size: 12.5px;
  line-height: 1.7;
}

/* Language switch sits with the footer utilities */
.footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-dim);
}

.footer__lang a {
  color: var(--fg-soft);
}

.footer__lang a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   19. Responsive — replaces the design's JS width state with real media queries
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  .nav__inner {
    padding-inline-start: 14px;
  }

  .nav__end {
    display: flex;
  }

  /* App tour: stack art above copy, as in the app */
  .tour__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
  }

  .tour__art {
    order: -1;
    width: 100%;
    height: clamp(200px, 58vw, 320px);
  }

  .tour__ghost {
    inset-block-start: 0;
    inset-block-end: auto;
    font-size: clamp(160px, 52vw, 280px);
  }

  .tour__desc {
    font-size: 14px;
  }
}

/* Pinned on a phone: the art takes whatever height the copy leaves. Same
   query as the pinned block above, narrowed to the stacked layout. */
@media (max-width: 899px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .tour__art {
    flex: 1 1 0;
    min-height: 110px;
    max-height: 340px;
    height: auto;
  }
}

/* Two-column footer: brand (with the trust seal) and registration (with its
   CTA) take full rows; the two link lists share the row between them. */
@media (max-width: 549px) {
  .footer__grid > :first-child,
  .footer__grid > :last-child {
    grid-column: 1 / -1;
  }
}

/* A phone: the invite card spans the bottom edge. */
@media (max-width: 549px) {
  .invite {
    inset-inline: 12px;
    inset-block-end: 12px;
    width: auto;
    padding: 18px;
  }
}

/* Too narrow for the label: the download pill becomes an icon button. */
@media (max-width: 359px) {
  .nav__app {
    width: 42px;
    padding: 0;
  }

  .nav__app-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .menu {
    display: none;
  }
}

@media (max-width: 560px) {
  /* Pillar cards run two-up on a phone: trim padding and title size so the
     titles stay on one line in a ~150px column. */
  .panel-shell {
    padding: 20px;
  }

  .minicard {
    padding: 16px 14px;
  }

  .minicard__title {
    font-size: 15px;
  }

  /* Wider panel above means two checks fit a row; only go two-up when the
     longest label has room for one line. */
  .check-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  }

  .menu__link {
    font-size: 24px;
  }

  .cta__card {
    border-radius: var(--r-4xl);
  }

  .timeline::before {
    inset-inline-start: 20px;
  }

  .tl-item {
    padding-inline-start: 58px;
  }

  .tl-num {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   20. Reduced motion — the design leans on ambient animation; honour the
   user's system preference without altering layout.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__bg {
    transform: none !important;
  }
}

@media print {
  .nav,
  .progress,
  .menu,
  .marquee {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}