/*! MAG Real Estate – Frontend stylesheet. */
@font-face { font-family: "Apercu Arabic Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ApercuArabicPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Apercu Arabic Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ApercuArabicPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Apercu Arabic Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ApercuArabicPro-Bold.woff2") format("woff2"); }
    :root {
      /* Light mode tokens (default) */
      --bg: #FAFAF7;
      --bg-2: #FFFFFF;
      --surface: #F2F2EC;
      --surface-2: #E9E9E2;
      --surface-3: #DEDED6;
      --border: rgba(10, 10, 15, 0.08);
      --border-strong: rgba(10, 10, 15, 0.16);
      --text: #0A0A0F;
      --text-dim: rgba(10, 10, 15, 0.62);
      --text-mute: rgba(10, 10, 15, 0.42);

      /* MAG Growth brand greens (verified from maggrowth.ai HAR 2026-05-10) */
      --accent: #57f093;            /* primary lime green — buttons, dots, fills */
      --accent-2: #b9ff47;           /* brighter highlight (cursor, scroll cue) */
      --accent-deep: #074b1a;        /* dark green for text/borders on white */
      --accent-mid: #16A34A;         /* mid green for italic accent text on white */
      --accent-glow: rgba(87, 240, 147, 0.32);
      --accent-soft: rgba(87, 240, 147, 0.10);
      --accent-faint: #57f09314;     /* their actual alpha tint */

      --danger: #E11D48;
      --warn: #F59E0B;

      --display-font: "Bacasime Antique", Georgia, "Times New Roman", serif;
      --body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --mono-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
      --ar-display: "Apercu Arabic Pro", "Tajawal", system-ui, sans-serif;
      --ar-body: "Apercu Arabic Pro", "Tajawal", system-ui, sans-serif;

      --radius-s: 8px;
      --radius-m: 14px;
      --radius-l: 22px;
      --radius-xl: 28px;

      --section-pad: clamp(72px, 10vw, 144px);
      --container: 1280px;
      --gutter: clamp(20px, 4vw, 40px);

      /* vorszk-style easing */
      --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-quart: cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* White theme only — dark mode removed per client request 2026-05-17 */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: clip;          /* prevents horizontal scroll without creating a competing scroll container */
    }
    /* Lenis-required resets: it controls smooth scrolling; native CSS smooth-scroll fights it.
       CRITICAL: do NOT set overflow-x:hidden on html or body — Lenis needs the document
       to be the scroll container, not the body. Use overflow-x:clip on html only. */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
    .lenis.lenis-stopped { overflow: hidden; }
    .lenis.lenis-scrolling iframe { pointer-events: none; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--body-font);
      font-size: 17px;
      line-height: 1.55;
      font-weight: 400;
      letter-spacing: -0.005em;
      /* DO NOT add overflow-x:hidden here — it breaks Lenis scroll on macOS / trackpad. */
    }
    body.lang-ar { font-family: var(--ar-body); letter-spacing: 0; }

    /*
     * Clean Arabic heading override (client request 2026-05-17).
     * Bacasime Antique has NO Arabic glyphs, so without this override the browser
     * falls back to system Geeza Pro / Apple Arabic for AR headings, which produces
     * decorative tails/swashes on letters like ك ن ي ل ت ه. We force Apercu Arabic
     * Pro everywhere a heading-like class lives and explicitly disable swash/
     * stylistic-set/discretionary-ligature OpenType features. Joining features
     * (calt, liga, rlig, init, medi, fina, isol) stay ON — required for correct
     * Arabic letter shaping.
     */
    body.lang-ar h1,
    body.lang-ar h2,
    body.lang-ar h3,
    body.lang-ar h4,
    body.lang-ar h5,
    body.lang-ar h6,
    body.lang-ar .display,
    body.lang-ar .hero-title,
    body.lang-ar .case-title,
    body.lang-ar .who-text,
    body.lang-ar .testimonial-name,
    body.lang-ar .footer-tagline {
      font-family: var(--ar-display) !important;
      font-style: normal !important;
      font-weight: 700;
      /* Disable decorative-only features. Do NOT explicitly set init/medi/fina/isol/calt/
         liga/rlig — the browser's Arabic shaping engine selects them automatically based
         on letter position. Forcing all four positional features to 1 produces broken
         disconnected letters (each glyph rendered as isolated form). */
      font-feature-settings:
        "swsh" 0, "salt" 0,
        "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0,
        "ss06" 0, "ss07" 0, "ss08" 0, "ss09" 0, "ss10" 0,
        "ss11" 0, "ss12" 0, "ss13" 0, "ss14" 0, "ss15" 0,
        "ss16" 0, "ss17" 0, "ss18" 0, "ss19" 0, "ss20" 0,
        "dlig" 0, "hlig" 0, "cswh" 0, "nalt" 0 !important;
      font-variant-alternates: normal !important;
      font-variant-ligatures: normal !important;
      font-variation-settings: normal !important;
    }
    /* em accent words in AR headings: keep brand-green color, drop italic
       (Apercu Arabic Pro has no italic style — italic would force a fallback). */
    body.lang-ar .display em,
    body.lang-ar .display i,
    body.lang-ar h1 em, body.lang-ar h2 em, body.lang-ar h3 em,
    body.lang-ar h4 em, body.lang-ar h5 em, body.lang-ar h6 em {
      font-style: normal !important;
      color: var(--accent-mid);
    }
    body.lang-en .lang-ar-only { display: none !important; }
    body.lang-ar .lang-en-only { display: none !important; }

    a { color: inherit; text-decoration: none; }
    img, video { max-width: 100%; display: block; }
    button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    ::selection { background: var(--accent); color: var(--bg); }

    /* ─── Typography utilities ──────────────────────────────────────────────── */
    .display {
      font-family: var(--display-font);
      font-weight: 400;
      letter-spacing: -0.015em;
      line-height: 1.02;
    }
    .display em, .display i { font-style: italic; color: var(--accent-mid); }
    .eyebrow {
      font-family: var(--mono-font);
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    body.lang-ar .eyebrow { font-family: var(--ar-body); font-weight: 500; letter-spacing: 0.04em; }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--accent);
      display: inline-block;
    }
    .h1 { font-size: clamp(44px, 7.2vw, 104px); }
    .h2 { font-size: clamp(36px, 5vw, 72px); }
    .h3 { font-size: clamp(24px, 2.6vw, 36px); }
    .lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--text-dim); line-height: 1.5; max-width: 56ch; }
    body.lang-ar .lead { line-height: 1.7; }

    /* ─── Container & section ───────────────────────────────────────────────── */
    .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
    section { padding-block: var(--section-pad); position: relative; }
    .section-label {
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--text-mute);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    body.lang-ar .section-label { font-family: var(--ar-body); letter-spacing: 0.05em; font-weight: 500; }
    .section-label::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent-glow);
    }

    /* ─── Buttons ───────────────────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 28px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 15px;
      letter-spacing: -0.005em;
      transition: transform 0.4s var(--ease-out), background 0.3s, box-shadow 0.4s, color 0.3s;
      will-change: transform;
      position: relative;
    }
    .btn-primary {
      background: var(--accent);
      color: var(--accent-deep);
      font-weight: 600;
      box-shadow: 0 0 0 0 var(--accent-glow), 0 6px 24px -8px rgba(87, 240, 147, 0.45);
    }
    .btn-primary:hover {
      background: var(--accent-2);
      box-shadow: 0 0 0 8px var(--accent-soft), 0 16px 44px -10px var(--accent-glow);
      transform: translateY(-2px);
    }
    .btn-primary .arrow { transition: transform 0.3s var(--ease-out); }
    .btn-primary:hover .arrow { transform: translateX(4px); }
    body.lang-ar .btn-primary:hover .arrow { transform: translateX(-4px) scaleX(-1); }
    body.lang-ar .arrow { transform: scaleX(-1); }

    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border-strong);
    }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

    /* ─── Nav ───────────────────────────────────────────────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 18px 0;
      transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
      border-bottom: 1px solid transparent;
    }
    .nav.scrolled {
      background: rgba(250, 250, 247, 0.78);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      border-bottom-color: var(--border);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      position: relative;
    }
    .brand-logo {
      height: 30px;
      width: auto;
      display: block;
      transition: opacity 0.5s var(--ease-out);
    }
    .brand-logo.is-light { display: none; }
    .brand-name { display: none; }
    .nav-links { display: none; align-items: center; gap: 28px; }
    @media (min-width: 920px) { .nav-links { display: flex; } }
    .nav-links a {
      font-size: 14px;
      color: var(--text-dim);
      transition: color 0.2s;
      position: relative;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .lang-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      padding: 3px;
      background: var(--surface);
    }
    .lang-toggle button,
    .lang-toggle a {
      padding: 6px 14px;
      font-size: 12px;
      font-family: var(--mono-font);
      letter-spacing: 0.1em;
      color: var(--text-mute);
      border-radius: 999px;
      transition: all 0.25s;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }
    .lang-toggle button.active,
    .lang-toggle a.active { background: var(--accent); color: #FFFFFF; }

    .nav-cta {
      padding: 10px 18px;
      font-size: 13px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid var(--accent);
      color: var(--accent);
      transition: all 0.25s;
    }
    .nav-cta:hover { background: var(--accent); color: #FFFFFF; }

    /* ─── Hero ──────────────────────────────────────────────────────────────── */
    .hero {
      padding-block: 180px clamp(96px, 14vw, 200px);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .hero-grid-bg {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 70%);
      opacity: 0.5;
      z-index: -2;
    }
    .hero-orb {
      position: absolute;
      width: 720px; height: 720px;
      top: -120px;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
      filter: blur(40px);
      z-index: -1;
      animation: orb 14s var(--ease-in-out) infinite;
    }
    @keyframes orb {
      0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.7; }
      50% { transform: translate(-46%, 30px) scale(1.1); opacity: 0.95; }
    }
    .hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 980px; }
    .hero-meta {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--border);
      font-size: 12px;
      font-family: var(--mono-font);
      letter-spacing: 0.08em;
      color: var(--text-dim);
    }
    body.lang-ar .pill { font-family: var(--ar-body); letter-spacing: 0; font-size: 13px; }
    .pill-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent-glow);
      animation: pulse 1.8s var(--ease-in-out) infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.4); }
    }

    .hero-title { font-size: clamp(48px, 8.4vw, 124px); }
    .hero-title .word { display: inline-block; overflow: hidden; padding-bottom: 0.05em; }
    .hero-title .word > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease-out); }
    .hero-title.visible .word > span { transform: translateY(0); }
    .hero-title .accent { color: var(--accent); font-style: italic; }

    .hero-sub { font-size: clamp(18px, 1.6vw, 22px); color: var(--text-dim); max-width: 60ch; line-height: 1.5; opacity: 0; transform: translateY(20px); transition: all 0.8s var(--ease-out) 0.6s; }
    .hero-sub.visible { opacity: 1; transform: translateY(0); }

    .hero-cta-row {
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
      opacity: 0; transform: translateY(20px); transition: all 0.8s var(--ease-out) 0.8s;
    }
    .hero-cta-row.visible { opacity: 1; transform: translateY(0); }
    .scarcity {
      font-size: 13px;
      color: var(--text-mute);
      font-family: var(--mono-font);
      letter-spacing: 0.06em;
    }
    body.lang-ar .scarcity { font-family: var(--ar-body); letter-spacing: 0; font-size: 14px; }
    .scarcity strong { color: var(--accent); font-weight: 500; }

    /* video frame */
    .hero-video {
      margin-top: 56px;
      width: 100%;
      aspect-ratio: 16 / 9;
      max-width: 1100px;
      border-radius: var(--radius-l);
      background:
        linear-gradient(135deg, rgba(6,182,212,0.10), transparent 50%),
        var(--surface);
      border: 1px solid var(--border-strong);
      position: relative;
      overflow: hidden;
      opacity: 0; transform: translateY(40px);
      transition: all 1s var(--ease-out) 1s;
      box-shadow: 0 40px 80px -32px rgba(10,10,15,0.18), 0 4px 16px -4px rgba(10,10,15,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .hero-video.visible { opacity: 1; transform: translateY(0); }
    .hero-video iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: var(--radius-l);
      display: block;
    }
    /* .hero-video::before removed - the iframe now fills the container. */
    .play-btn {
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 88px; height: 88px;
      border-radius: 50%;
      background: var(--accent);
      color: #FFFFFF;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 0 var(--accent-glow), 0 12px 32px -8px rgba(6,182,212,0.5);
      animation: ring 2.4s var(--ease-in-out) infinite;
      z-index: 2;
    }
    @keyframes ring {
      0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
      50% { box-shadow: 0 0 0 24px transparent; }
    }
    .play-btn svg { width: 32px; height: 32px; margin-inline-start: 4px; }
    .video-caption {
      position: absolute;
      bottom: 20px; left: 24px;
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-mute);
      z-index: 2;
    }
    body.lang-ar .video-caption { font-family: var(--ar-body); letter-spacing: 0; }

    /* ─── Logos marquee ─────────────────────────────────────────────────────── */
    /* Section is DARK — client SVGs contain white/near-white PNG logos that
       need a dark canvas. Self-scoped to .logos only, the rest of the page
       stays white. */
    .logos {
      padding-block: 56px 64px;
      background: #080809;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: #ffffff;
    }
    .logos-label { text-align: center; margin-bottom: 28px; color: rgba(255,255,255,0.62); font-size: 13px; font-family: var(--mono-font); letter-spacing: 0.16em; text-transform: uppercase; }
    body.lang-ar .logos-label { font-family: var(--ar-body); letter-spacing: 0.04em; }
    /* Logos render at full opacity, pure white, no dim. */
    .logos .logo-cell { opacity: 1; }
    .marquee {
      display: flex;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .marquee-track {
      display: flex;
      gap: 0;
      animation: scroll 45s linear infinite;
      animation-delay: 0s;
      will-change: transform;
      flex-shrink: 0;
    }
    @keyframes scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    /* RTL keyframe — positive translation because in RTL the flex track grows
       from the right, so we need to shift right (not left) to surface duplicates. */
    @keyframes scroll-rtl {
      from { transform: translateX(0); }
      to { transform: translateX(50%); }
    }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    .logo-cell {
      flex-shrink: 0;
      width: 240px;            /* 160px logo zone + 80px built-in spacing */
      height: 60px;
      padding-inline: 40px;
      box-sizing: border-box;
      display: grid;
      place-items: center;
      transition: transform 0.3s var(--ease-out);
    }
    .logo-cell:hover { transform: scale(1.06); }
    .logo-cell img {
      max-height: 50px;
      max-width: 140px;
      width: auto;
      height: auto;
      display: block;
      object-fit: contain;
    }

    /* ─── Numbers ───────────────────────────────────────────────────────────── */
    .numbers {
      padding-block: clamp(96px, 12vw, 160px);
      position: relative;
    }
    .numbers-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-l);
      background: var(--bg-2);
      overflow: hidden;
      margin-top: 56px;
      box-shadow: 0 24px 64px -32px rgba(10,10,15,0.16);
    }
    @media (min-width: 880px) { .numbers-grid { grid-template-columns: repeat(5, 1fr); } }
    .number-cell {
      padding: clamp(28px, 3vw, 44px);
      border-inline-end: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s;
    }
    .number-cell:hover { background: var(--surface-2); }
    .number-cell:last-child { border-inline-end: none; }
    @media (max-width: 879px) {
      .number-cell:nth-child(2n) { border-inline-end: none; }
      .number-cell:nth-last-child(-n+2) { border-bottom: none; }
    }
    @media (min-width: 880px) {
      .number-cell { border-bottom: none; }
    }
    .number-value {
      font-family: var(--display-font);
      font-size: clamp(48px, 6vw, 84px);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--text);
      font-feature-settings: "tnum";
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .number-value .accent { color: var(--accent); }
    .number-label {
      margin-top: 16px;
      font-size: 14px;
      color: var(--text-dim);
      line-height: 1.4;
      max-width: 22ch;
    }
    body.lang-ar .number-label { font-size: 15px; }

    /* ─── Generic two-column section header ─────────────────────────────────── */
    .section-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: 56px;
    }
    @media (min-width: 880px) {
      .section-head { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
    }

    /* ─── Problem ───────────────────────────────────────────────────────────── */
    .problem-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 720px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
    .problem-card {
      padding: clamp(24px, 2.6vw, 36px);
      border-radius: var(--radius-l);
      background: var(--bg-2);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: border-color 0.4s, transform 0.4s var(--ease-out), background 0.4s, box-shadow 0.4s;
      box-shadow: 0 1px 2px rgba(10,10,15,0.04);
    }
    .problem-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(10,10,15,0.14); }
    .problem-card::before {
      content: attr(data-num);
      position: absolute;
      top: 24px; right: 24px;
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--text-mute);
    }
    body.lang-ar .problem-card::before { right: auto; left: 24px; }
    .problem-card h3 {
      font-family: var(--display-font);
      font-size: clamp(22px, 2vw, 28px);
      line-height: 1.15;
      margin-bottom: 14px;
      color: var(--text);
      max-width: 22ch;
    }
    body.lang-ar .problem-card h3 { line-height: 1.4; max-width: none; }
    .problem-card p { color: var(--text-dim); font-size: 15px; line-height: 1.55; }
    body.lang-ar .problem-card p { font-size: 16px; line-height: 1.7; }
    .problem-card .icon {
      width: 56px; height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-mid);              /* deeper green on white */
      margin-bottom: 28px;
      transition: color 0.3s var(--ease-out), transform 0.45s var(--ease-out);
    }
    .problem-card .icon svg {
      width: 100%;
      height: 100%;
      stroke-width: 1.4;
    }
    .problem-card:hover .icon {
      color: var(--accent-deep);
      transform: translateX(2px) scale(1.05);
    }

    /* ─── Solution ──────────────────────────────────────────────────────────── */
    .solution { background: linear-gradient(180deg, transparent, var(--surface) 50%, transparent); }
    .solution-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius-l);
      overflow: hidden;
    }
    @media (min-width: 720px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .solution-grid { grid-template-columns: repeat(3, 1fr); } }
    .solution-card {
      padding: clamp(28px, 3.2vw, 44px);
      background: var(--bg-2);
      transition: background 0.4s;
      position: relative;
    }
    .solution-card:hover { background: var(--surface); }
    .solution-card .num {
      font-family: var(--mono-font);
      font-size: 12px;
      letter-spacing: 0.14em;
      color: var(--accent);
      margin-bottom: 24px;
      display: inline-block;
    }
    .solution-card h3 {
      font-family: var(--display-font);
      font-size: clamp(22px, 2vw, 28px);
      line-height: 1.15;
      margin-bottom: 14px;
      color: var(--text);
    }
    body.lang-ar .solution-card h3 { line-height: 1.4; font-weight: 700; }
    .solution-card p { color: var(--text-dim); font-size: 15px; }
    body.lang-ar .solution-card p { font-size: 16px; line-height: 1.7; }

    /* ─── Timeline ──────────────────────────────────────────────────────────── */
    .timeline-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      position: relative;
    }
    .timeline-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding-block: clamp(28px, 4vw, 56px);
      border-bottom: 1px solid var(--border);
      align-items: start;
    }
    @media (min-width: 880px) {
      .timeline-row { grid-template-columns: 240px 1fr 80px; gap: 56px; }
    }
    .timeline-row:last-child { border-bottom: none; }
    .timeline-step {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--mono-font);
      font-size: 12px;
      color: var(--accent);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    body.lang-ar .timeline-step { font-family: var(--ar-body); letter-spacing: 0.05em; font-weight: 500; }
    .timeline-step .dot {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--bg);
      border: 2px solid var(--accent);
      box-shadow: 0 0 16px var(--accent-glow);
      flex-shrink: 0;
    }
    .timeline-content h3 {
      font-family: var(--display-font);
      font-size: clamp(28px, 3vw, 44px);
      line-height: 1.1;
      margin-bottom: 12px;
    }
    body.lang-ar .timeline-content h3 { line-height: 1.4; }
    .timeline-content p { color: var(--text-dim); max-width: 60ch; line-height: 1.6; }
    body.lang-ar .timeline-content p { line-height: 1.8; }
    .timeline-num {
      font-family: var(--display-font);
      font-style: italic;
      font-size: clamp(48px, 5vw, 88px);
      color: var(--accent);
      opacity: 0.4;
      text-align: end;
      line-height: 1;
    }

    /* ─── Who this is for ───────────────────────────────────────────────────── */
    .who { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
    .who-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      counter-reset: who;
      max-width: 920px;
    }
    .who-item {
      counter-increment: who;
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 24px;
      padding: clamp(20px, 2.4vw, 28px) 0;
      border-bottom: 1px solid var(--border);
      align-items: start;
      transition: padding 0.3s var(--ease-out);
    }
    .who-item:hover { padding-inline-start: 16px; }
    body.lang-ar .who-item:hover { padding-inline-start: 0; padding-inline-end: 16px; }
    .who-item:last-child { border-bottom: none; }
    .who-check {
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid var(--border-strong);
      display: grid; place-items: center;
      color: var(--accent);
      flex-shrink: 0;
      transition: background 0.3s, border-color 0.3s;
    }
    .who-item:hover .who-check { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
    .who-text {
      font-family: var(--display-font);
      font-size: clamp(22px, 2.4vw, 32px);
      line-height: 1.25;
      color: var(--text);
    }
    body.lang-ar .who-text { line-height: 1.6; font-weight: 500; }

    /* ─── Partners ─────────────────────────────────────────────────────────── */
    .partners {
      padding-block: clamp(72px, 9vw, 120px);
    }
    .partners-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      overflow: hidden;
      margin-top: 48px;
    }
    @media (min-width: 600px) { .partners-grid { grid-template-columns: repeat(5, 1fr); } }
    .partner-img {
      max-width: 70%;
      max-height: 50%;
      object-fit: contain;
      opacity: 0.85;
      transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    }
    .partner-cell:hover .partner-img { opacity: 1; transform: scale(1.06); }
    .partner-cell {
      aspect-ratio: 2 / 1;
      background: var(--bg-2);
      display: grid; place-items: center;
      transition: background 0.3s var(--ease-out);
    }
    .partner-cell:hover { background: var(--surface); }
    .partner-logo {
      display: block;
      width: 56%;
      height: 50%;
      background-color: var(--accent-mid); /* brand green (deeper on light, brighter on dark via token override) */
      -webkit-mask-image: var(--logo-src);
      mask-image: var(--logo-src);
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    }
    .partner-cell:hover .partner-logo {
      background-color: var(--accent-deep);
      transform: scale(1.08);
    }

    /* ─── Case studies ──────────────────────────────────────────────────────── */
    .cases-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 880px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
    .case-card {
      position: relative;
      padding: clamp(28px, 3.2vw, 48px);
      border-radius: var(--radius-l);
      background:
        linear-gradient(135deg, rgba(6,182,212,0.06) 0%, transparent 50%),
        var(--bg-2);
      border: 1px solid var(--border);
      overflow: hidden;
      isolation: isolate;
      transition: border-color 0.4s, transform 0.4s var(--ease-out), box-shadow 0.4s;
      box-shadow: 0 1px 2px rgba(10,10,15,0.04);
    }
    .case-card:hover { box-shadow: 0 24px 48px -16px rgba(10,10,15,0.12); }
    .case-card:hover { border-color: var(--accent); transform: translateY(-6px); }
    .case-card::before {
      content: "";
      position: absolute;
      top: -100px; right: -100px;
      width: 320px; height: 320px;
      background: radial-gradient(circle, var(--accent-glow), transparent 60%);
      filter: blur(40px);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.5s;
    }
    .case-card:hover::before { opacity: 1; }
    .case-tag {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.12em;
      margin-bottom: 24px;
    }
    body.lang-ar .case-tag { font-family: var(--ar-body); letter-spacing: 0; }
    .case-title {
      font-family: var(--display-font);
      font-size: clamp(26px, 2.8vw, 38px);
      line-height: 1.15;
      margin-bottom: 24px;
      max-width: 24ch;
    }
    body.lang-ar .case-title { line-height: 1.4; }
    .case-stats {
      display: flex;
      gap: 28px;
      flex-wrap: wrap;
      margin-bottom: 24px;
      padding-block: 20px;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .case-stat .v {
      font-family: var(--display-font);
      font-size: clamp(28px, 3vw, 40px);
      color: var(--accent);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .case-stat .l {
      font-family: var(--mono-font);
      font-size: 11px;
      color: var(--text-mute);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-top: 6px;
    }
    body.lang-ar .case-stat .l { font-family: var(--ar-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
    .case-photo {
      width: 100%;
      margin-top: 8px;
      border-radius: var(--radius-m);
      border: 1px solid var(--border);
      display: block;
      box-shadow: 0 4px 12px -4px rgba(10,10,15,0.06);
      background: var(--bg);
    }

    /* ─── Testimonials ──────────────────────────────────────────────────────── */
    .testimonials { background: var(--surface); }
    .testimonial-stack {
      display: flex;
      flex-direction: column;
      gap: 64px;
    }

    /* 7-screenshot grid (top of section) */
    .testimonial-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 600px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 980px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1280px) { .testimonial-grid { grid-template-columns: repeat(4, 1fr); } }
    .testimonial-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: clamp(14px, 1.4vw, 18px);
      border-radius: var(--radius-l);
      background: var(--bg-2);
      border: 1px solid var(--border);
      transition: border-color 0.3s, transform 0.4s var(--ease-out), box-shadow 0.4s;
      box-shadow: 0 1px 2px rgba(10,10,15,0.04);
      overflow: hidden;
    }
    .testimonial-card:hover {
      border-color: var(--accent-mid);
      transform: translateY(-4px);
      box-shadow: 0 18px 44px -16px rgba(10,10,15,0.16);
    }
    .testimonial-card img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius-m);
      background: #0E1218;
    }
    .testimonial-card figcaption {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-inline: 4px;
      padding-block: 2px 0;
    }

    /* Sub-divider between screenshots and videos */
    .testimonial-video-divider {
      padding-top: 24px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .testimonial-video {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .video-frame {
      width: 100%;
      border-radius: var(--radius-l);
      overflow: hidden;
      background: #000;
      position: relative;
      box-shadow: 0 12px 32px -12px rgba(10,10,15,0.16);
      transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    }
    .testimonial-video:hover .video-frame {
      transform: translateY(-4px);
      box-shadow: 0 24px 56px -20px rgba(10,10,15,0.22);
    }
    .video-landscape { aspect-ratio: 16 / 9; }
    .video-vertical  { aspect-ratio: 9 / 16; }
    .video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .testimonial-reels {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    @media (min-width: 720px)  {
      .testimonial-reels { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
      .testimonial-reels > .testimonial-video { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
    }
    .testimonial-video figcaption {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-inline: 4px;
    }
    .testimonial-name {
      font-family: var(--display-font);
      font-style: italic;
      font-size: clamp(18px, 1.6vw, 22px);
      color: var(--text);
      letter-spacing: -0.01em;
    }
    body.lang-ar .testimonial-name { font-family: var(--ar-body); font-style: normal; font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); }
    .testimonial-role {
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-mute);
    }
    body.lang-ar .testimonial-role { font-family: var(--ar-body); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
    .testimonial-note {
      margin-top: 8px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      font-size: 14px;
      color: var(--text-dim);
      max-width: 60ch;
    }
    /* Featured video sits on its own width */
    .testimonial-video.featured .video-frame { max-width: 920px; margin: 0 auto; }
    .testimonial-video.featured figcaption { text-align: center; align-items: center; }

    /* ─── Audit info ────────────────────────────────────────────────────────── */
    .audit-card {
      padding: clamp(40px, 5vw, 80px);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 100% 0%, rgba(6,182,212,0.12), transparent 50%),
        var(--bg-2);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      box-shadow: 0 24px 64px -32px rgba(10,10,15,0.18);
    }
    .audit-card::before {
      content: "";
      position: absolute;
      bottom: -100px; left: -100px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, var(--accent-glow), transparent 60%);
      filter: blur(60px);
      opacity: 0.6;
    }
    .audit-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
    @media (min-width: 880px) { .audit-grid { grid-template-columns: 1.2fr 1fr; gap: 80px; } }
    .audit-list { display: grid; gap: 16px; }
    .audit-list li {
      list-style: none;
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 16px;
      padding: 18px 0;
      border-top: 1px solid var(--border);
      font-size: 16px;
      color: var(--text);
      align-items: start;
    }
    body.lang-ar .audit-list li { font-size: 17px; line-height: 1.7; }
    .audit-list li:last-child { border-bottom: 1px solid var(--border); }
    .audit-list .check {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid; place-items: center;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ─── Final CTA ─────────────────────────────────────────────────────────── */
    .final-cta {
      padding-block: clamp(120px, 16vw, 200px);
      text-align: center;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .final-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(6,182,212,0.16), transparent 60%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(6,182,212,0.10), transparent 70%);
      z-index: -1;
    }
    .final-cta-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; }
    .final-cta h2 { font-size: clamp(48px, 7vw, 96px); }

    /* ─── Footer ────────────────────────────────────────────────────────────── */
    .footer {
      padding-block: 80px 32px;
      border-top: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-mute);
      font-size: 14px;
    }
    .footer-inner {
      display: grid; gap: 56px; grid-template-columns: 1fr;
    }
    @media (min-width: 880px) { .footer-inner { grid-template-columns: 1fr 2fr; gap: 80px; } }
    .footer-brand { display: flex; flex-direction: column; gap: 18px; max-width: 280px; }
    .footer-tagline {
      font-family: var(--display-font);
      font-style: italic;
      font-size: 18px;
      line-height: 1.4;
      color: var(--text-dim);
    }
    body.lang-ar .footer-tagline { font-family: var(--ar-body); font-weight: 500; font-style: normal; }
    .footer-cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
    @media (min-width: 600px) { .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
    .footer-col { display: flex; flex-direction: column; gap: 12px; }
    .footer-label {
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-mute);
      margin-bottom: 4px;
    }
    body.lang-ar .footer-label { font-family: var(--ar-body); letter-spacing: 0.04em; font-weight: 500; }
    .footer a { color: var(--text); transition: color 0.2s; }
    .footer a:hover { color: var(--accent); }
    .footer-bottom {
      margin-top: 56px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
      color: var(--text-mute);
      font-size: 12px;
    }
    .footer-spots {
      font-family: var(--mono-font);
      letter-spacing: 0.08em;
      color: var(--accent-mid);
    }
    body.lang-ar .footer-spots { font-family: var(--ar-body); letter-spacing: 0; }

    /* Social row in footer */
    .social-row { display: flex; flex-direction: column; gap: 14px; }
    .social-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text-dim);
      transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
    .social-icon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      transition: color 0.25s var(--ease-out);
    }
    .social-icon svg { width: 20px; height: 20px; display: block; }
    .social-link:hover { color: var(--accent-mid); transform: translateX(3px); }
    .social-link:hover .social-icon { color: var(--accent-mid); }
    body.lang-ar .social-link:hover { transform: translateX(-3px); }
    .social-handle { font-size: 14px; }

    /* ─── Reveal animation utility ──────────────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
    .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.0s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
    .reveal-stagger.visible > *:nth-child(n+7) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      .hero-title .word > span { transform: translateY(0) !important; }
      /* Marquee is a passive infinite decorative scroll, keep it moving even
         with reduced-motion (continuous scroll does not trigger vestibular issues). */
      .marquee-track { animation-duration: 45s !important; }
      body.lang-ar .marquee-track { animation-duration: 45s !important; }
    }

    /* RTL adjustments */
    body.lang-ar .marquee-track { animation-name: scroll-rtl; }
    body.lang-ar .timeline-num { text-align: start; }

    /* ─── Mobile-specific layout fixes (client request 2026-05-17) ─────────── */
    /* Task: testimonial videos render landscape on mobile (16:9) instead of portrait */
    @media (max-width: 768px) {
      .testimonial-video .video-frame.video-vertical {
        aspect-ratio: 16 / 9;
      }
      .testimonial-reels { gap: 16px; }
      .testimonial-stack { gap: 48px; }
    }

    /* Task: center the 5th (odd-one-out) cell in 2-col mobile grids
       so it doesn't leave an empty cell next to it AND the content reads centered,
       not stuck on one side of the spanning row. */
    @media (max-width: 879px) {
      .numbers-grid .number-cell:last-child {
        grid-column: 1 / -1;
        border-inline-end: none;
        text-align: center;
      }
      .numbers-grid .number-cell:last-child .number-value { justify-content: center; }
      .numbers-grid .number-cell:last-child .number-label  { margin-inline: auto; max-width: 32ch; }
    }
    @media (max-width: 599px) {
      .partners-grid .partner-cell:last-child {
        grid-column: 1 / -1;
        aspect-ratio: 4 / 1;  /* keeps same visual height as the 2-col cells above */
      }
    }

    /* ─── Custom cursor (vorszk-inspired) ───────────────────────────────────── */
    .cursor {
      position: fixed;
      top: 0; left: 0;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--accent);
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: difference;
      transform: translate(-50%, -50%);
      transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), background-color 0.3s, opacity 0.3s;
      opacity: 0;
    }
    .cursor.visible { opacity: 1; }
    .cursor.link { width: 56px; height: 56px; background: var(--accent-2); }
    .cursor.text { width: 4px; height: 28px; border-radius: 2px; }
    @media (hover: none) or (pointer: coarse) { .cursor { display: none !important; } }

    /* ─── Blinking scroll cue (vorszk-inspired) ─────────────────────────────── */
    .scroll-cue {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--text-mute);
      font-family: var(--mono-font);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      pointer-events: none;
      z-index: 4;
    }
    body.lang-ar .scroll-cue { font-family: var(--ar-body); letter-spacing: 0.04em; }
    .scroll-cue-dots { display: flex; flex-direction: column; gap: 6px; }
    .scroll-cue-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--accent);
      opacity: 0.25;
      animation: cue-blink 1.5s linear infinite;
    }
    .scroll-cue-dot:nth-child(2) { animation-delay: 0.5s; }
    .scroll-cue-dot:nth-child(3) { animation-delay: 1s; }
    @keyframes cue-blink {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; transform: scale(1.3); }
    }

    /* ─── Split-line text reveal (vorszk-inspired) ──────────────────────────── */
    .split-lines { display: block; }
    .split-line {
      display: block;
      overflow: hidden;
      padding-block: 0.06em;
    }
    .split-line > .split-line-inner {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 1.1s var(--ease-out);
    }
    .visible .split-line > .split-line-inner,
    .split-lines.visible .split-line > .split-line-inner { transform: translateY(0); }
    .split-line:nth-child(1) > .split-line-inner { transition-delay: 0.05s; }
    .split-line:nth-child(2) > .split-line-inner { transition-delay: 0.18s; }
    .split-line:nth-child(3) > .split-line-inner { transition-delay: 0.31s; }
    .split-line:nth-child(4) > .split-line-inner { transition-delay: 0.44s; }

    /* ─── Booking page (GoHighLevel widget) ─────────────────────────────────── */
    /* Standalone booking offer: shared nav + footer, calendar iframe between.   */
    .booking {
      padding-block: clamp(120px, 16vw, 180px) clamp(72px, 10vw, 120px);
      position: relative;
    }
    .booking-inner {
      max-width: 880px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .booking-title { font-size: clamp(36px, 5vw, 64px); }
    .booking-lead {
      font-size: clamp(16px, 2.1vw, 20px);
      line-height: 1.55;
      color: var(--text-dim);
      max-width: 620px;
      margin-bottom: clamp(20px, 4vw, 40px);
    }
    .booking-embed {
      width: 100%;
      min-height: 720px;
    }
    .booking-embed iframe {
      width: 100%;
      min-height: 720px;
      border: none;
      overflow: hidden;
    }
    /* In-page anchor links (#problem, #solution …) don't exist on booking
       pages, so drop them from the nav and keep just brand + lang toggle. */
    body.page-booking .nav-links { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════════════
       Paid Consultation offer (paid-consultation-ar / -en) — scoped pc-* rules
       ═══════════════════════════════════════════════════════════════════════ */

    /* Hero price chip */
    .pc-price {
      display: inline-flex; align-items: baseline; gap: 10px;
      padding: 12px 22px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
      font-weight: 700; margin-block: 8px 4px;
    }
    .pc-price .amt { font-family: var(--display-font); font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }
    .pc-price .per { font-size: 13px; font-weight: 600; opacity: 0.85; }
    .pc-socialproof { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 14px; margin-inline-start: 4px; }
    .pc-socialproof strong { color: var(--text); }

    /* Audience (for whom) — two big cards */
    .pc-audience-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
    @media (min-width: 880px) { .pc-audience-grid { grid-template-columns: repeat(2, 1fr); } }
    .pc-audience-card {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(28px, 3vw, 44px);
      transition: border-color 0.3s, transform 0.3s;
    }
    .pc-audience-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
    .pc-audience-card .pc-tag {
      font-family: var(--mono-font); font-size: 12px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--accent-mid); margin-bottom: 8px; display: block;
    }
    .pc-audience-card h3 { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 22px; line-height: 1.2; }
    .pc-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
    .pc-feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-dim); font-size: 16px; line-height: 1.5; }
    .pc-feature-list .ck {
      flex: none; width: 22px; height: 22px; border-radius: 999px;
      background: var(--accent-soft); color: var(--accent-mid);
      display: grid; place-items: center; margin-top: 2px;
    }

    /* "What you get in the consultation" — numbered steps */
    .pc-consult-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; grid-template-columns: 1fr; }
    @media (min-width: 720px) { .pc-consult-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .pc-consult-grid { grid-template-columns: repeat(3, 1fr); } }
    .pc-consult-card { background: var(--bg-2); padding: clamp(26px, 3vw, 40px); transition: background 0.3s; }
    .pc-consult-card:hover { background: var(--surface); }
    .pc-consult-card .step {
      font-family: var(--mono-font); font-size: 12px; letter-spacing: 0.14em;
      color: var(--accent-mid); display: block; margin-bottom: 16px;
    }
    .pc-consult-card h3 { font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 10px; }
    .pc-consult-card p { color: var(--text-dim); font-size: 15px; line-height: 1.55; }

    /* Problems we solve — two columns of pain bullets */
    .pc-problems-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
    @media (min-width: 880px) { .pc-problems-grid { grid-template-columns: repeat(2, 1fr); } }
    .pc-problem-col { background: var(--surface); border-radius: var(--radius-l); padding: clamp(28px, 3vw, 40px); }
    .pc-problem-col h3 { font-size: clamp(19px, 2vw, 24px); margin-bottom: 22px; }
    .pc-pain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
    .pc-pain-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-dim); font-size: 16px; line-height: 1.5; }
    .pc-pain-list .x {
      flex: none; width: 22px; height: 22px; border-radius: 999px;
      background: rgba(220, 38, 38, 0.10); color: #DC2626;
      display: grid; place-items: center; margin-top: 2px; font-size: 13px; font-weight: 700;
    }

    /* After-call deliverables — checklist grid */
    .pc-deliver-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; grid-template-columns: 1fr; }
    @media (min-width: 720px) { .pc-deliver-grid { grid-template-columns: repeat(2, 1fr); } }
    .pc-deliver-item { background: var(--bg-2); padding: clamp(20px, 2.4vw, 30px); display: flex; gap: 14px; align-items: flex-start; transition: background 0.3s; }
    .pc-deliver-item:hover { background: var(--surface); }
    .pc-deliver-item .ck {
      flex: none; width: 28px; height: 28px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
      display: grid; place-items: center; margin-top: 1px;
    }
    .pc-deliver-item span.t { color: var(--text); font-size: 16px; line-height: 1.45; font-weight: 500; }

    /* Upwork reviews — masonry-ish two columns */
    .pc-upwork-grid { columns: 1; column-gap: 20px; }
    @media (min-width: 760px) { .pc-upwork-grid { columns: 2; } }
    .pc-upwork-card {
      break-inside: avoid; margin-bottom: 20px;
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-m); overflow: hidden;
      box-shadow: 0 1px 0 rgba(10,10,15,0.02);
    }
    .pc-upwork-card img { display: block; width: 100%; height: auto; }
    .pc-upwork-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; margin-top: 16px; }
    .pc-upwork-badge .stars { color: #f5a623; letter-spacing: 2px; }

    /* Case study proof images on paid page */
    .pc-case-proof { margin-top: 20px; border-radius: var(--radius-m); border: 1px solid var(--border); overflow: hidden; }
    .pc-case-proof img { display: block; width: 100%; height: auto; }

    /* ═══════════════════════════════════════════════════════════════════════
       Strategy Session — conversion-optimized paid page (cs-* rules)
       ═══════════════════════════════════════════════════════════════════════ */

    /* Hero price anchor + risk-reversal microcopy */
    .cs-anchor {
      display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
      margin-top: 18px; padding: 14px 20px; border-radius: var(--radius-m);
      background: var(--surface); border: 1px solid var(--border);
      font-size: 15px; color: var(--text-dim); max-width: 60ch;
    }
    .cs-anchor strong { color: var(--text); }
    .cs-anchor .thru { text-decoration: line-through; opacity: 0.6; }
    .cs-riskline { display: block; margin-top: 12px; font-size: 14px; color: var(--text-dim); }
    .cs-riskline b { color: var(--accent-mid); }
    .cs-proofrow { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
    .cs-proofrow .pf { display: flex; flex-direction: column; gap: 2px; }
    .cs-proofrow .pf .v { font-family: var(--display-font); font-size: clamp(24px, 3vw, 34px); line-height: 1; color: var(--text); }
    .cs-proofrow .pf .l { font-size: 12px; letter-spacing: 0.04em; color: var(--text-mute); }

    /* Guarantee band */
    .cs-guarantee { }
    .cs-guarantee-card {
      max-width: 760px; margin-inline: auto; text-align: center;
      background: var(--bg-2); border: 1px solid var(--border-strong);
      border-radius: var(--radius-xl); padding: clamp(36px, 5vw, 64px);
      position: relative;
    }
    .cs-seal {
      width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
      display: grid; place-items: center;
      box-shadow: 0 0 0 10px var(--accent-soft);
    }
    .cs-seal svg { width: 40px; height: 40px; }
    .cs-guarantee-card h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 16px; }
    .cs-guarantee-card p { color: var(--text-dim); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; max-width: 52ch; margin-inline: auto; }

    /* FAQ accordion (native details/summary, no JS) */
    .cs-faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--border); }
    .cs-faq-item { border-bottom: 1px solid var(--border); }
    .cs-faq-item > summary {
      list-style: none; cursor: pointer; padding: 24px 8px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
      font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; color: var(--text);
    }
    .cs-faq-item > summary::-webkit-details-marker { display: none; }
    .cs-faq-item .ico { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; transition: transform 0.3s, background 0.3s; }
    .cs-faq-item[open] .ico { transform: rotate(45deg); background: var(--accent); }
    .cs-faq-item .ico::before { content: "+"; font-size: 20px; line-height: 1; color: var(--text); }
    .cs-faq-item[open] .ico::before { color: var(--accent-deep); }
    .cs-faq-answer { padding: 0 8px 26px; color: var(--text-dim); font-size: 16px; line-height: 1.6; max-width: 70ch; }

    /* ── Mid-page CTA band (long pages) ── */
    .cta-band { padding-block: clamp(28px, 4vw, 48px); }
    .cta-band-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 20px 36px; flex-wrap: wrap;
      background: var(--accent-soft); border: 1px solid var(--accent);
      border-radius: var(--radius-l); padding: clamp(24px, 3vw, 40px);
    }
    .cta-band-copy { flex: 1 1 320px; }
    .cta-band-copy .eyebrow { color: var(--accent-mid); margin-bottom: 6px; }
    .cta-band-copy h3 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; max-width: 30ch; }
    .cta-band-copy h3 em { color: var(--accent-mid); }
    .cta-band-action { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
    .cta-band-risk { font-size: 13px; color: var(--text-dim); }
    .cta-band-risk b { color: var(--accent-mid); }
    @media (max-width: 720px) {
      .cta-band-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: start; gap: 18px; }
      .cta-band-copy { flex: 0 0 auto; }          /* don't let the 320px flex-basis become a tall column height */
      .cta-band-copy h3 { max-width: none; }
      .cta-band-action { align-items: stretch; }
      .cta-band-action .btn { justify-content: center; }
    }

    /* Centered CTA wrapper for non-hero sections (always visible; not tied to the hero entrance animation) */
    .cta-center { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }

    /* Money-back guarantee badge image (replaces the inline shield seal) */
    .cs-badge {
      display: block; width: clamp(132px, 17vw, 184px); height: auto;
      margin: 0 auto 26px;
      filter: drop-shadow(0 8px 20px rgba(22,163,74,0.18));
      animation: cs-badge-float 5s ease-in-out infinite;
    }
    @keyframes cs-badge-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
    @media (prefers-reduced-motion: reduce) { .cs-badge { animation: none; } }

    /* ═══════════════════════════════════════════════════════════════════════
       Performance: hero entrance runs on load via pure CSS (no JS/GSAP gating),
       so the headline/sub paint immediately and don't gate LCP. Native smooth
       scroll replaces Lenis. (Added 2026-06-08 perf pass.)
       ═══════════════════════════════════════════════════════════════════════ */
    @keyframes mag-rise    { from { transform: translateY(110%); } to { transform: translateY(0); } }
    @keyframes mag-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    .hero-title .split-line > .split-line-inner { animation: mag-rise 1.0s var(--ease-out) both; }
    .hero-title .split-line:nth-child(1) > .split-line-inner { animation-delay: 0.05s; }
    .hero-title .split-line:nth-child(2) > .split-line-inner { animation-delay: 0.16s; }
    .hero-title .split-line:nth-child(3) > .split-line-inner { animation-delay: 0.27s; }
    .hero-title .split-line:nth-child(4) > .split-line-inner { animation-delay: 0.38s; }
    .hero-title.visible .word > span { } /* legacy no-op */
    .hero-sub      { animation: mag-fade-up 0.7s var(--ease-out) 0.25s both; }
    .hero-cta-row  { animation: mag-fade-up 0.7s var(--ease-out) 0.40s both; }
    .hero-video    { animation: mag-fade-up 0.9s var(--ease-out) 0.55s both; }

    /* Native smooth anchor scroll + sticky-nav offset (Lenis removed) */
    html { scroll-behavior: smooth; }
    section[id], [id="book"], [id="problem"], [id="solution"], [id="timeline"], [id="cases"], [id="audit"], [id="consultation"], [id="guarantee"], [id="faq"] { scroll-margin-top: 88px; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-title .split-line > .split-line-inner,
      .hero-sub, .hero-cta-row, .hero-video { animation: none !important; opacity: 1 !important; transform: none !important; }
    }

    /* ============================================================
       Acquisition System Audit offer (asa-*)
       ============================================================ */

    /* ---- Hero ---- */
    .asa-hero { padding-block: var(--section-pad); text-align: center; }

    .asa-hero-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 16px; border-radius: 999px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      font-size: 13px; font-weight: 600; color: var(--text-dim);
      letter-spacing: 0.03em; margin-block-end: 18px;
    }
    .asa-hero-pill--scarcity {
      border-color: var(--accent); background: var(--accent-soft);
      color: var(--accent-mid);
    }

    .asa-hero-price-chip {
      display: inline-flex; align-items: baseline; gap: 10px;
      padding: 12px 24px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
      font-weight: 700; margin-block: 20px 8px;
    }
    .asa-hero-price-chip .amt {
      font-family: var(--display-font);
      font-size: clamp(22px, 2.4vw, 30px); line-height: 1;
    }
    .asa-hero-price-chip .per { font-size: 13px; font-weight: 600; opacity: 0.85; }
    .asa-hero-priceline { font-size: 13.5px; color: var(--text-mute); letter-spacing: 0.01em; margin-block-start: 16px; }
    /* Disable the custom cursor dot (reads as a stray magenta blob via mix-blend-mode). */
    .cursor { display: none !important; }

    /* Trust bar under hero */
    .asa-hero-trust {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: center; gap: 6px 20px;
      margin-block-start: 12px; font-size: 14px; color: var(--text-dim);
    }
    .asa-hero-trust-item { display: flex; align-items: center; gap: 6px; }
    .asa-hero-trust-sep { color: var(--border-strong); font-size: 16px; }

    /* Hero CTA row */
    .asa-hero-cta-row {
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: center; gap: 12px 16px; margin-block-start: 28px;
    }
    .asa-hero-meta {
      font-size: 13px; color: var(--text-mute);
      display: flex; align-items: center; gap: 6px;
    }

    /* ---- Problem grid (3-col) ---- */
    .asa-problem-grid {
      display: grid; gap: 20px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 720px) { .asa-problem-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .asa-problem-grid { grid-template-columns: repeat(3, 1fr); } }

    .asa-problem-card {
      position: relative;
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(26px, 3vw, 38px);
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .asa-problem-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(10,10,15,0.25); }
    .asa-problem-card .icon {
      width: 52px; height: 52px; border-radius: var(--radius-m);
      background: var(--surface); color: var(--text);
      display: grid; place-items: center; margin-block-end: 22px;
    }
    .asa-problem-card .icon svg { width: 26px; height: 26px; }
    .asa-problem-card h3 {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; font-style: normal;
      line-height: 1.28; color: var(--text); margin: 0 0 12px; max-width: 22ch;
    }
    .asa-problem-card p {
      font-size: 15px; line-height: 1.62; color: var(--text-dim); margin: 0;
    }
    .asa-problem-card::after {
      content: attr(data-num);
      position: absolute; inset-block-start: clamp(26px,3vw,38px); inset-inline-end: clamp(26px,3vw,38px);
      font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.1em;
      color: var(--text-mute);
    }
    body.lang-ar .asa-problem-card h3 { font-family: var(--ar-display); }

    /* ---- Pillars (5 cards + stats row) ---- */
    .asa-pillars { }
    .asa-pillars-grid {
      display: grid; gap: 20px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px)  { .asa-pillars-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1040px) { .asa-pillars-grid { grid-template-columns: repeat(3, 1fr); } }
    /* 5th card centers on 2-col layout (RTL-safe: 1/-1 spans full row logically) */
    @media (min-width: 640px) and (max-width: 1039px) {
      .asa-pillars-grid > .asa-pillar-card:last-child { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; }
    }

    .asa-pillar-card {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(24px, 3vw, 36px);
      transition: border-color 0.25s, transform 0.25s;
    }
    .asa-pillar-card:hover { border-color: var(--accent); transform: translateY(-2px); }
    .asa-pillar-num {
      font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--accent-mid);
      margin-block-end: 14px; display: block;
    }
    .asa-pillar-header { display: flex; align-items: flex-start; gap: 12px; margin-block-end: 10px; }
    .asa-pillar-name { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; line-height: 1.2; }
    .asa-pillar-meta { font-size: 14px; color: var(--text-dim); line-height: 1.5; }

    /* Stats row (4 cells) */
    .asa-pillars-stats {
      display: grid; gap: 1px; background: var(--border);
      border: 1px solid var(--border); border-radius: var(--radius-l);
      overflow: hidden; margin-block-start: 24px;
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 720px) { .asa-pillars-stats { grid-template-columns: repeat(4, 1fr); } }

    .asa-pillars-stat {
      background: var(--bg-2); padding: clamp(20px, 2.5vw, 32px);
      text-align: center;
    }
    .asa-pillars-stat-value {
      font-family: var(--display-font);
      font-size: clamp(28px, 3.5vw, 42px); line-height: 1; font-weight: 700;
      color: var(--text); display: block; margin-block-end: 6px;
    }
    .asa-pillars-stat-label {
      font-size: 13px; color: var(--text-mute); letter-spacing: 0.04em;
    }

    /* ---- Who We Serve ---- */
    .asa-who-icp  { margin-block-start: clamp(40px, 5vw, 64px); }
    .asa-who-fit  { margin-block-start: clamp(40px, 5vw, 64px); }
    .asa-who-not  { margin-block-start: clamp(40px, 5vw, 64px); }

    .asa-who-icp-title,
    .asa-who-fit-title,
    .asa-who-not-title {
      font-size: clamp(19px, 2vw, 25px); font-weight: 700; margin: 0 0 20px;
    }

    /* Ideal-client spec table (bordered card, label | value rows) */
    .asa-who-icp-table {
      border: 1px solid var(--border); border-radius: var(--radius-l);
      overflow: hidden; background: var(--bg-2);
    }
    .asa-who-icp-row {
      display: grid; grid-template-columns: 1fr; gap: 3px 24px;
      padding: clamp(14px, 1.6vw, 18px) clamp(18px, 2vw, 26px);
      border-block-end: 1px solid var(--border);
    }
    @media (min-width: 680px) {
      .asa-who-icp-row { grid-template-columns: 210px 1fr; align-items: baseline; }
    }
    .asa-who-icp-row:last-child { border-block-end: none; }
    .asa-who-icp-label {
      color: var(--text-mute); font-size: 12px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .asa-who-icp-value { color: var(--text); font-size: 15px; line-height: 1.5; }

    /* Target verticals as a card grid with spend pill */
    .asa-who-fit-list {
      list-style: none; padding: 0; margin: 0;
      display: grid; gap: 14px; grid-template-columns: 1fr;
    }
    @media (min-width: 720px) { .asa-who-fit-list { grid-template-columns: repeat(2, 1fr); } }
    .asa-who-fit-item {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-m); padding: clamp(18px, 2vw, 24px);
      display: flex; gap: 12px; align-items: flex-start;
      transition: border-color 0.25s, transform 0.25s;
    }
    .asa-who-fit-item:hover { border-color: var(--accent); transform: translateY(-2px); }
    .asa-who-check {
      flex: none; width: 24px; height: 24px; border-radius: 999px;
      background: var(--accent-soft); color: var(--accent-mid);
      display: grid; place-items: center; margin-block-start: 1px;
    }
    .asa-who-check svg { width: 13px; height: 13px; }
    .asa-who-fit-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
    .asa-who-fit-name { display: block; font-weight: 700; color: var(--text); font-size: 15.5px; line-height: 1.3; }
    .asa-who-fit-spend {
      display: inline-block; align-self: flex-start;
      font-size: 12px; font-weight: 700; color: var(--accent-deep);
      background: var(--accent-soft); border: 1px solid rgba(7,75,26,0.12);
      padding: 3px 10px; border-radius: 999px;
    }
    .asa-who-fit-why { display: block; font-size: 13.5px; color: var(--text-dim); line-height: 1.45; }

    /* Who we do NOT serve */
    .asa-who-not-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
    @media (min-width: 720px) { .asa-who-not-list { grid-template-columns: repeat(2, 1fr); } }
    .asa-who-not-item {
      display: flex; gap: 12px; align-items: flex-start;
      background: rgba(220,38,38,0.04); border: 1px solid rgba(220,38,38,0.12);
      border-radius: var(--radius-m); padding: 16px 18px;
    }
    .asa-who-not-icon {
      flex: none; width: 24px; height: 24px; border-radius: 999px;
      background: rgba(220, 38, 38, 0.10); color: #DC2626;
      display: grid; place-items: center; margin-block-start: 1px;
    }
    .asa-who-not-icon svg { width: 13px; height: 13px; }
    .asa-who-not-text { color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }

    .asa-who-cta { margin-block-start: clamp(32px, 4vw, 48px); }

    /* ---- Pain grid ---- */
    .asa-gap-section { }
    .asa-pain-grid {
      display: grid; gap: 20px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 720px) { .asa-pain-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1080px) { .asa-pain-grid { grid-template-columns: repeat(3, 1fr); } }

    .asa-pain-card {
      background: var(--surface); border-radius: var(--radius-l);
      padding: clamp(24px, 3vw, 36px);
      border: 1px solid transparent;
      transition: border-color 0.25s, transform 0.25s;
    }
    .asa-pain-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
    .asa-pain-icon {
      width: 40px; height: 40px; border-radius: 999px;
      background: var(--accent-soft); color: var(--accent-mid);
      display: grid; place-items: center;
      margin-block-end: 14px; font-size: 20px;
    }
    .asa-pain-card-title { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; margin-block-end: 8px; }
    .asa-pain-card-body { font-size: 15px; color: var(--text-dim); line-height: 1.55; }

    /* ---- Gap analysis table (asa-gap-*) ---- */
    .asa-gap-section { }
    .asa-gap-title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; margin-block-end: 24px; }

    /* Responsive gap rows: label | gap | mag columns */
    .asa-gap-head,
    .asa-gap-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    @media (min-width: 720px) {
      .asa-gap-head,
      .asa-gap-row { grid-template-columns: 2fr 1fr 1fr; }
    }
    .asa-gap-head {
      font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-mute); padding-block-end: 10px;
      border-block-end: 1px solid var(--border);
    }
    .asa-gap-row {
      border-block-end: 1px solid var(--border);
      padding-block: 14px; font-size: 15px; color: var(--text-dim);
      transition: background 0.2s;
    }
    .asa-gap-row:hover { background: var(--surface); }
    .asa-gap-label { font-weight: 600; color: var(--text); padding-inline-end: 12px; }
    .asa-gap-cell-gap  { color: var(--danger); font-weight: 600; }
    .asa-gap-cell-mag  { color: var(--accent-mid); font-weight: 600; }
    .asa-gap-cell-market { color: var(--text-mute); }

    /* ---- Personas (2-col -> 1-col mobile) ---- */
    .asa-personas { }
    .asa-personas-grid {
      display: grid; gap: 20px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 760px) { .asa-personas-grid { grid-template-columns: repeat(2, 1fr); } }

    .asa-persona-card {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(24px, 3vw, 36px);
      transition: border-color 0.25s, transform 0.25s;
    }
    .asa-persona-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
    .asa-persona-label {
      font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--accent-mid);
      margin-block-end: 10px; display: block;
    }
    .asa-persona-headline { font-size: clamp(19px, 2vw, 24px); font-weight: 700; margin-block-end: 8px; }
    .asa-persona-context {
      font-size: 14.5px; color: var(--text-dim); line-height: 1.55;
      margin-block: 16px; padding-block-start: 16px;
      border-block-start: 1px solid var(--border);
    }
    .asa-persona-phrases { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .asa-persona-phrase {
      display: flex; gap: 10px; align-items: flex-start;
      font-size: 15px; color: var(--text-dim); line-height: 1.45;
    }
    .asa-persona-phrase::before { content: '"'; color: var(--accent-mid); font-size: 18px; line-height: 1; flex: none; }

    /* ---- Packages / pricing (4-col grid, entry tier highlighted) ---- */
    .asa-packages-grid {
      display: grid; gap: 20px;
      grid-template-columns: 1fr;
      max-width: 1120px; margin-inline: auto;
    }
    @media (min-width: 900px) { .asa-packages-grid { grid-template-columns: repeat(3, 1fr); } }

    .asa-package-card {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(22px, 2.4vw, 30px);
      display: flex; flex-direction: column; gap: 14px;
      transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    }
    .asa-package-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(10,10,15,0.28); }
    .asa-package-card--featured {
      border: 1.5px solid var(--accent); background: var(--bg-2);
      box-shadow: 0 0 0 4px var(--accent-soft); position: relative;
    }
    .asa-package-card--featured:hover { box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 40px -24px rgba(10,10,15,0.28); }
    .asa-package-card--custom { background: var(--surface); border-color: var(--border-strong); }
    .asa-package-badge--custom { background: var(--text); color: var(--bg); }

    .asa-package-badge {
      position: absolute; inset-block-start: -11px; inset-inline-start: clamp(22px, 2.4vw, 30px);
      font-size: 10px; font-weight: 800;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 5px 12px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
    }
    .asa-package-head { display: flex; flex-direction: column; gap: 6px; }
    .asa-package-type {
      align-self: flex-start;
      display: inline-flex; align-items: center;
      font-size: 12px; font-weight: 700; letter-spacing: 0;
      color: var(--accent-mid);
      background: var(--accent-soft); border: 1px solid rgba(22,163,74,0.22);
      padding: 6px 13px; border-radius: 999px; line-height: 1;
      margin-block-end: 8px;
    }
    body.lang-ar .asa-package-type { font-family: var(--ar-display); font-weight: 700; }
    .asa-package-kicker {
      font-size: 13px; font-weight: 600; color: var(--text-dim);
      letter-spacing: 0.01em; line-height: 1.2; margin: 0;
    }
    body.lang-ar .asa-package-kicker { font-family: var(--ar-display); }
    .asa-package-name { font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; line-height: 1.2; margin-block: 1px 4px; }
    .asa-package-price {
      font-family: var(--display-font);
      font-size: clamp(26px, 2.7vw, 35px); font-weight: 700; line-height: 1.05;
      color: var(--text); margin-block: 2px; letter-spacing: -0.01em;
    }
    /* Arabic prices + stat numbers must use Apercu — Bacasime has no Arabic glyphs and
       falls back to an ugly system font for "950 دولار/شهر" etc. */
    body.lang-ar .asa-package-price,
    body.lang-ar .asa-pillars-stat-value,
    body.lang-ar .asa-hero-price-chip .amt {
      font-family: var(--ar-display) !important;
      font-weight: 700; letter-spacing: 0;
    }
    .asa-package-desc { font-size: 15px; color: var(--text-dim); line-height: 1.5; }
    .asa-package-best {
      font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-block-start: 2px;
    }
    .asa-package-best-k {
      font-weight: 700; color: var(--accent-mid);
      font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
      margin-inline-end: 6px;
    }
    .asa-package-cta { width: 100%; justify-content: center; margin-block: 4px; }

    /* Per-card feature list (clean two-line items, never grid-crammed) */
    .asa-package-feats {
      list-style: none; margin: 0; padding: 0; padding-block-start: 20px;
      display: grid; gap: 13px;
      border-block-start: 1px solid var(--border);
      margin-block-start: 4px;
    }
    .asa-package-card--featured .asa-package-feats { border-block-start-color: rgba(7,75,26,0.14); }
    .asa-package-feat { display: flex; gap: 10px; align-items: flex-start; }
    .asa-package-feat .ck {
      flex: none; width: 18px; height: 18px; margin-block-start: 1px;
      border-radius: 999px; background: var(--accent-soft); color: var(--accent-mid);
      display: grid; place-items: center;
    }
    .asa-package-feat .ck svg { width: 11px; height: 11px; }
    .asa-feat-text  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .asa-feat-label { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }
    .asa-feat-val   { font-size: 13px; color: var(--text-dim); line-height: 1.35; }

    /* ---- Upsell ladder (asa-ladder-*) ---- */
    .asa-ladder { display: grid; gap: 16px; }
    .asa-ladder-title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; margin-block-end: 16px; }

    .asa-ladder-rung {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-m); padding: clamp(20px, 2.5vw, 30px);
      display: flex; flex-wrap: wrap; align-items: flex-start;
      gap: 12px 24px; transition: border-color 0.25s;
    }
    .asa-ladder-rung:hover { border-color: var(--border-strong); }
    .asa-ladder-rung--free { border-color: var(--accent); }

    .asa-ladder-step {
      font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--accent-mid); display: block;
      width: 100%; margin-block-end: 4px;
    }
    .asa-ladder-name  { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; flex: 1 1 200px; }
    .asa-ladder-price {
      font-family: var(--display-font);
      font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1;
      color: var(--text); flex: none;
    }
    .asa-ladder-body  { width: 100%; }
    .asa-ladder-desc  { font-size: 15px; color: var(--text-dim); line-height: 1.5; margin-block-end: 12px; }
    .asa-ladder-list  { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
    .asa-ladder-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-dim); }
    .asa-ladder-action { margin-block-start: 16px; }
    .asa-ladder-cta   { }

    /* ---- Lead magnet block (asa-leadmagnet / asa-lm-*) ---- */
    .asa-leadmagnet {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-l); padding: clamp(32px, 4vw, 56px);
    }
    .asa-lm-grid {
      display: grid; gap: 32px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 760px) { .asa-lm-grid { grid-template-columns: 1fr 1fr; } }

    .asa-lm-card {
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--radius-m); padding: clamp(22px, 2.5vw, 32px);
    }
    .asa-lm-check {
      flex: none; width: 26px; height: 26px; border-radius: 999px;
      background: var(--accent); color: var(--accent-deep);
      display: grid; place-items: center; margin-block-start: 1px;
    }
    .asa-lm-check svg { width: 13px; height: 13px; }
    .asa-lm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
    .asa-lm-item { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text-dim); }

    /* Defensive: no round icon inside an asa flex row may ever shrink/stretch into a pill */
    .asa-who-check, .asa-who-not-icon, .asa-package-feat .ck, .asa-lm-check,
    .asa-pain-icon, .asa-pillar-icon {
      flex: 0 0 auto; aspect-ratio: 1 / 1;
    }
    .asa-lm-rewards { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 12px; }
    .asa-lm-note { font-size: 13px; color: var(--text-mute); margin-block-start: 12px; }

    /* ---- Competitive comparison (asa-comp-*) ---- */
    .asa-competitive { }
    .asa-comp-table-wrap { overflow-x: auto; }

    /* 3-column comparison grid: type | how | edge */
    .asa-comp-head,
    .asa-comp-row {
      display: grid;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
      .asa-comp-head,
      .asa-comp-row { grid-template-columns: 1.4fr 1fr 1fr; }
    }
    .asa-comp-head {
      font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-mute); padding-block-end: 10px;
      border-block-end: 2px solid var(--border-strong);
    }
    .asa-comp-row {
      border-block-end: 1px solid var(--border);
      padding-block: 14px; transition: background 0.2s;
    }
    .asa-comp-row:hover { background: var(--surface); }
    .asa-comp-label     { font-weight: 600; color: var(--text); font-size: 15px; }
    .asa-comp-cell-type { font-size: 14px; color: var(--text-dim); }
    .asa-comp-cell-how  { font-size: 14px; color: var(--text-dim); }
    .asa-comp-cell-edge { font-size: 14px; color: var(--accent-mid); font-weight: 600; }
    .asa-comp-cell {
      padding-block: 4px;
      font-size: 14px; color: var(--text-dim);
    }
    .asa-comp-cta { margin-block-start: 28px; text-align: center; }

    /* ---- FAQ accordion (native details/summary) ---- */
    .asa-faq { max-width: 820px; margin-inline: auto; }
    .asa-faq-item { border-block-end: 1px solid var(--border); }
    .asa-faq-item:first-child { border-block-start: 1px solid var(--border); }
    .asa-faq-item > summary {
      list-style: none; cursor: pointer;
      padding-block: 22px; padding-inline: 4px;
      display: flex; align-items: center; justify-content: space-between; gap: 20px;
      font-size: clamp(16px, 1.7vw, 20px); font-weight: 600; color: var(--text);
    }
    .asa-faq-item > summary::-webkit-details-marker { display: none; }
    .asa-faq-item > summary::after {
      content: "+"; flex: none;
      width: 28px; height: 28px; border-radius: 999px;
      background: var(--surface); color: var(--text);
      display: grid; place-items: center;
      font-size: 20px; line-height: 1;
      transition: transform 0.28s, background 0.28s;
    }
    .asa-faq-item[open] > summary::after {
      transform: rotate(45deg);
      background: var(--accent); color: var(--accent-deep);
    }
    .asa-faq-answer {
      padding-inline: 4px; padding-block-end: 24px;
      font-size: 16px; color: var(--text-dim); line-height: 1.6; max-width: 70ch;
    }
    .asa-faq-cta { margin-block-start: 28px; text-align: center; }

    /* ---- Final CTA ---- */
    .asa-final-cta {
      padding-block: var(--section-pad); text-align: center;
    }
    .asa-final-cta-inner {
      max-width: 720px; margin-inline: auto;
      display: flex; flex-direction: column; align-items: center; gap: 20px;
    }
    .asa-final-cta-action {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px;
    }
    .asa-final-cta-trust {
      font-size: 13px; color: var(--text-mute);
      display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
    }
    .asa-final-cta-trust span { display: flex; align-items: center; gap: 5px; }

    /* ---- Mobile overrides (asa-* blocks) ---- */
    @media (max-width: 640px) {
      .asa-hero-cta-row   { flex-direction: column; align-items: stretch; }
      .asa-hero-cta-row .btn { justify-content: center; }
      .asa-final-cta-action { flex-direction: column; align-items: stretch; }
      .asa-final-cta-action .btn { justify-content: center; }
      .asa-ladder-rung    { flex-direction: column; gap: 8px; }
      .asa-ladder-price   { font-size: clamp(22px, 6vw, 30px); }
    }

    /* ====================================================================
       Site Home (Phase 1 tracer, SELF_PROMPT.md) — main-site chrome + home
       page sections. New class names only where the item count differs from
       an existing offer-scoped grid (6 stats vs numbers.php's 5, 7 partners
       vs partners.php's 5, variable case-study count by language). Reuses
       .number-cell/.number-value/.number-label, .partner-cell/.partner-logo,
       and .case-card inner classes unchanged — only the outer grid differs.
       ==================================================================== */

    /* ---- Numbers: 6 stats, 3-col >=880px / 2-col below (both divide evenly) ---- */
    .site-numbers-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-l);
      background: var(--bg-2);
      overflow: hidden;
      margin-top: 56px;
      box-shadow: 0 24px 64px -32px rgba(10,10,15,0.16);
    }
    @media (min-width: 880px) { .site-numbers-grid { grid-template-columns: repeat(3, 1fr); } }
    .site-numbers-grid .number-cell {
      padding: clamp(28px, 3vw, 44px);
      border-inline-end: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s;
    }
    .site-numbers-grid .number-cell:hover { background: var(--surface-2); }
    @media (max-width: 879px) {
      .site-numbers-grid .number-cell:nth-child(2n) { border-inline-end: none; }
      .site-numbers-grid .number-cell:nth-last-child(-n+2) { border-bottom: none; }
    }
    @media (min-width: 880px) {
      .site-numbers-grid .number-cell:nth-child(3n) { border-inline-end: none; }
      .site-numbers-grid .number-cell:nth-child(n+4) { border-bottom: none; }
    }

    /* ---- Partners: 7 logos, 4-col >=720px / 2-col below (odd last-cell centers only when odd) ---- */
    .site-partners-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius-m);
      overflow: hidden;
      margin-top: 48px;
    }
    /* Grid items default to min-width:auto, so a cell whose content has a wider
       min-content size than its fair 1fr share can blow the track out past the
       container (verified via computed gridTemplateColumns overflowing 1200px
       container to ~1794px). min-width:0 is the standard grid-blowout fix. */
    .site-partners-grid .partner-cell { min-width: 0; }
    @media (min-width: 720px) { .site-partners-grid { grid-template-columns: repeat(4, 1fr); } }
    /* 7 items in a 4-col grid leaves 3 in the last row (1 empty cell) — span the
       last item across the remaining 2 columns so the row fills completely.
       aspect-ratio must go 2/1 -> 4/1 too: double width at the same 2/1 ratio
       doubles the cell's height, stretching the whole row and leaving empty
       space under its row-mates (verified visually — same fix as the mobile
       odd-centering rule below, same reason). */
    @media (min-width: 720px) {
      .site-partners-grid .partner-cell:last-child { grid-column: span 2; aspect-ratio: 4 / 1; }
    }
    @media (max-width: 719px) {
      .site-partners-grid .partner-cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        aspect-ratio: 4 / 1;
      }
    }

    /* ---- Case studies: EN 6 / AR 5, 1-col / 2-col >=880px (odd count centers the lone last card) ---- */
    .site-cases-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 40px;
    }
    @media (min-width: 880px) { .site-cases-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 880px) {
      .site-cases-grid .case-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 640px;
        margin-inline: auto;
      }
    }