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

    /* ─── TOKEN LAYER ─────────────────────────────────────────────
       Mirrors the mobile app's editorial tokens. Neutrals are cool
       zinc; brand color appears only at deliberate moments. */
    :root {
      --bg:        #FAFAFA;                 /* page canvas            */
      --panel:     #F4F4F5;                 /* raised zinc surface    */
      --card:      #FFFFFF;                 /* white card             */
      --hairline:  rgba(24,24,27,0.10);
      --hairline-2:rgba(24,24,27,0.16);     /* stronger rule          */
      --ink:       #1A1A1A;
      --ink-2:     #52525B;
      --ink-3:     #A1A1AA;
      --indigo:    #4826EB;                 /* brand — used sparingly */
      --indigo-dim:rgba(72,38,235,0.07);
      --coral:     #DB4B80;                 /* vendor accent          */
      --coral-deep:#BA2C62;
      /* third audience accent (business). A new hue is justified here because
         it carries a new semantic role — the audience — exactly like indigo
         and coral do. Deep teal reads institutional and clears both. */
      --b2b:       #0E7A6B;
      --b2b-lift:  #45C2AE;                 /* dark-mode / on-dark lift */                 /* vendor accent on light */
      --nav-bg:    rgba(250,250,250,0.85);

      /* dark editorial panels (used in BOTH themes — flat, no gradients) */
      --dark-panel:#141416;
      --dark-card: #1D1D20;
      --dark-line: rgba(244,244,245,0.12);
      --dark-ink:  #F4F4F5;
      --dark-ink-2:#A1A1AA;
      --dark-ink-3:#6E6E76;

      --r-btn: 6px;
      --r-md:  12px;
      --r-lg:  20px;
      --shadow-1: 0 1px 2px rgba(24,24,27,0.05);            /* whisper  */
      --shadow-2: 0 1px 3px rgba(24,24,27,0.06), 0 12px 32px -18px rgba(24,24,27,0.18);
      --wrap: 1140px;
      --pad-x: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
    }

    html[data-theme="dark"] {
      --bg:        #101012;
      --panel:     #17171A;
      --card:      #1C1C1F;
      --hairline:  rgba(244,244,245,0.10);
      --hairline-2:rgba(244,244,245,0.16);
      --ink:       #F4F4F5;
      --ink-2:     #A1A1AA;
      --ink-3:     #63636B;
      --indigo:    #4826EB;                 /* fills keep true brand   */
      --indigo-dim:rgba(124,142,255,0.10);
      --coral-deep:#F3A6C2;
      --nav-bg:    rgba(16,16,18,0.82);

      --dark-panel:#141416;                 /* bands blend, borders separate */
      --dark-card: #1D1D20;

      --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
      --shadow-2: 0 1px 3px rgba(0,0,0,0.4), 0 14px 36px -18px rgba(0,0,0,0.6);
    }

    /* The business audience remaps the accent token itself rather than
       overriding each rule that uses it: every indigo affordance on a shared
       section (timeline eyebrow and progress fill, screening dots, the mock
       profile, trust icons) follows the audience automatically, and anything
       added later inherits that for free. --b2b stays the canonical name for
       business-only components. Placed after the dark block so it wins there,
       with the two-attribute selector taking dark + business. */
    html[data-page="b2b"] { --indigo: #0E7A6B; --indigo-dim: rgba(14,122,107,0.10); }
    html[data-theme="dark"][data-page="b2b"] { --indigo: #45C2AE; --indigo-dim: rgba(69,194,174,0.14); }

    html { scroll-behavior: smooth; }

    /* ─── PLATFORM & INTERACTION BASELINE ─────────────── */
    /* Native scrollbars and form controls follow the active theme. */
    :root { color-scheme: light; }
    html[data-theme="dark"] { color-scheme: dark; }
    /* Anchor jumps and keyboard focus stop below the sticky nav instead of
       under it. experience.js keeps --nav-h equal to the nav's real height. */
    html { scroll-padding-top: calc(var(--nav-h, 80px) + 1rem); }
    /* The width/height attributes reserve each image's box before it loads
       (no layout shift); :where() keeps this at zero specificity so any class
       that sizes an image still wins. */
    :where(img[width][height]) { height: auto; }
    /* Placeholder CTAs are real <button data-preview> elements (they open the
       preview dialogs). Strip the browser's button chrome at zero specificity
       so their existing classes style them exactly as the old links. */
    :where(button[data-preview]) {
      font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
      background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    }
    /* No double-tap-zoom delay on controls. (The tap highlight is already set
       to transparent on purpose in experience.css.) */
    a, button, summary, label, input, select { touch-action: manipulation; }
    /* Headings break into even lines rather than leaving a one-word widow. */
    h1, h2, h3, .h2, .hero-h1 { text-wrap: balance; }

    body {
      font-family: 'Outfit', system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
    }

    ::selection { background: rgba(72,38,235,0.18); }

    /* ─── I18N (EN / AR) ────────────────────────────────
       Sibling-span pattern; html[data-lang] picks the language. */
    html[data-lang="en"] [lang="ar"] { display: none !important; }
    html[data-lang="ar"] [lang="en"] { display: none !important; }
    html[data-lang="ar"] { direction: rtl; }
    html[data-lang="ar"] body,
    html[data-lang="ar"] button,
    html[data-lang="ar"] input { font-family: 'Cairo', 'Outfit', system-ui, sans-serif; }
    /* numerals stay L→R inside RTL text */
    html[data-lang="ar"] .mono { direction: ltr; unicode-bidi: isolate; }

    /* ─── AUDIENCE (SEEKER / VENDOR) ─────────────────── */
    /* Audience gating is an ALLOW-list: a block is hidden unless its data-sv
       names the current audience. ~= matches one space-separated token, so a
       block shown to several audiences lists them — data-sv="s b" appears for
       home seekers and business, and nothing else. HANDOFF: adding a fourth
       audience means one more line here, not edits across every block. */
    html[data-page="seeker"] [data-sv]:not([data-sv~="s"]) { display: none !important; }
    html[data-page="vendor"] [data-sv]:not([data-sv~="v"]) { display: none !important; }
    html[data-page="b2b"]    [data-sv]:not([data-sv~="b"]) { display: none !important; }

    /* ─── SHARED PRIMITIVES ────────────────────────────── */
    .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

    .mono {
      font-family: inherit;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      color: var(--ink-3);
    }
    /* A number sitting INSIDE a sentence or label must look like the words
       around it. .mono gives standalone figures their own grey, size and
       tracking — but nested in running text (its parent is the EN/AR text
       span) that turned 'Stage 01 · Groundwork' or 'SAR 180,000 in escrow'
       into two colours and two sizes. Nested, it now inherits. Standalone
       indices (timeline badges, step numbers, stat figures) are not children
       of a [lang] span, so they keep their own styling. */
    [lang] > .mono, .vet-foot .mono { color: inherit; font-size: inherit; letter-spacing: inherit; }

    /* Section shell: transparent on canvas, separated by hairlines only */
    .sec { border-top: 1px solid var(--hairline); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

    .h2 {
      font-size: clamp(1.7rem, 3.2vw, 2.4rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.18;
      color: var(--ink);
      max-width: 640px;
    }
    /* Cairo's glyph box is ~1.9x its font-size — nearly double Outfit's. At the
       Latin leading the second line of a two-line Arabic heading collides with
       the descenders above it, so Arabic headings get their own line-height. */
    html[data-lang="ar"] .h2 { line-height: 1.55; }
    html[data-lang="ar"] .hero-h1 { line-height: 1.4; }
    .h2 .dim { color: var(--ink-3); display: block; }
    .sec-sub {
      margin-top: 1.1rem;
      font-size: 1rem;
      line-height: 1.65;
      color: var(--ink-2);
      max-width: 560px;
    }
    /* inline text link — the only place brand color appears in body flow */
    .link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1.25rem;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--indigo);
      text-decoration: none;
    }
    html[data-theme="dark"] .link { color: var(--experience-accent); }
    .link:hover { text-decoration: underline; text-underline-offset: 3px; }
    .link.vnd { color: var(--coral-deep); }

    /* Buttons: small rectangles, near-black, quiet (no pills) */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.68rem 1.3rem;
      border-radius: var(--r-btn);
      font-family: inherit;
      font-size: 0.9rem;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid transparent;
      white-space: nowrap;
      transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
    }
    .btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
    .btn-primary:hover { opacity: 0.86; }
    .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
    .btn-ghost:hover { border-color: var(--ink-3); }
    /* on dark/indigo bands */
    .btn-light { background: #FFFFFF; color: #1A1A1A; border-color: #FFFFFF; }
    .btn-light:hover { opacity: 0.9; }

    /* Reveal-on-scroll: fade + slide up as the element enters view.
       Longer travel and an ease-out-expo curve make the motion read as a
       deliberate "animate in" (rather than a barely-there fade). Children
       in a group stagger via .d1–.d4. Honored only until reduced-motion. */
    .rv {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .rv.on { opacity: 1; transform: none; }
    /* during an audience-switch replay, snap reveals to hidden with no fade-out */
    .rv-replay .rv { transition: none !important; }
    .rv.d1 { transition-delay: 0.09s; }
    .rv.d2 { transition-delay: 0.18s; }
    .rv.d3 { transition-delay: 0.27s; }
    .rv.d4 { transition-delay: 0.36s; }

    /* ─── NAV ──────────────────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 60;
      background: var(--nav-bg);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--hairline);
    }
    .nav-inner {
      max-width: var(--wrap);
      margin: 0 auto;
      padding: 0.8rem var(--pad-x);
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }
    .nav-logo { display: flex; align-items: center; text-decoration: none; }
    .nav-logo-img { height: 26px; width: auto; display: block; }
    /* audience segmented control — quiet, hairline, ink active */
    /* audience toggle: no control chrome at all — two text tabs. The active
       audience is ink with a short accent underline (indigo = seekers,
       coral = vendors); the inactive one is muted text. */
    .page-toggle { display: flex; gap: 1.4rem; }
    .pt-btn {
      position: relative;
      border: none;
      background: none;
      padding: 0.3rem 0;
      color: var(--ink-3);
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s ease;
      white-space: nowrap;
    }
    .pt-btn:hover { color: var(--ink); }
    .pt-btn::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 2px; border-radius: 2px;
      background: transparent;
      transition: background 0.2s ease;
    }
    html[data-page="seeker"] .pt-btn[data-target="seeker"],
    html[data-page="vendor"] .pt-btn[data-target="vendor"],
    html[data-page="b2b"] .pt-btn[data-target="b2b"] { color: var(--ink); }
    html[data-page="seeker"] .pt-btn[data-target="seeker"]::after { background: var(--indigo); }
    html[data-page="vendor"] .pt-btn[data-target="vendor"]::after { background: var(--coral); }
    html[data-page="b2b"] .pt-btn[data-target="b2b"]::after { background: var(--b2b); }
    html[data-theme="dark"][data-page="seeker"] .pt-btn[data-target="seeker"]::after { background: var(--experience-accent); }
    html[data-theme="dark"][data-page="b2b"] .pt-btn[data-target="b2b"]::after { background: var(--b2b-lift); }
    .nav-links {
      display: flex;
      gap: 1.4rem;
      list-style: none;
      margin-left: auto;
    }
    html[data-lang="ar"] .nav-links { margin-left: 0; margin-right: auto; }
    .nav-links a {
      color: var(--ink-2);
      text-decoration: none;
      font-size: 0.88rem;
      font-weight: 500;
    }
    .nav-links a:hover { color: var(--ink); }
    /* current page indicator for nav links (e.g. About on about.html) */
    .nav-links a.active { color: var(--ink); position: relative; }
    .nav-links a.active::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -6px;
      height: 2px; border-radius: 2px;
      background: var(--ink);
    }
    /* ─── NAV DROPDOWN: About ▸ About Ertah / Vision 2030 ───
       Opens on hover and on keyboard focus (:focus-within), so it never
       depends on a mouse. Touch and the phone menu get the links inline
       (see the menu-open rules below); the Vision page is also linked from
       the About page body and the footer, so the dropdown is a shortcut,
       never the only way in. */
    .nav-has-sub { position: relative; display: flex; align-items: center; gap: 0.3rem; }
    .nav-caret {
      width: 0; height: 0;
      border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
      border-top: 4px solid currentColor;
      opacity: 0.6;
    }
    .nav-sub {
      position: absolute; top: calc(100% + 12px); inset-inline-start: -0.8rem;
      min-width: 12rem; margin: 0; padding: 0.35rem; list-style: none;
      background: var(--night, #100b1e);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
      box-shadow: 0 14px 30px -14px rgba(0,0,0,0.55);
      display: none; z-index: 80;
    }
    .nav-sub::before {                            /* hover bridge across the gap */
      content: ''; position: absolute; inset-inline: 0; top: -14px; height: 14px;
    }
    .nav-has-sub:hover .nav-sub,
    .nav-has-sub:focus-within .nav-sub { display: block; }
    .nav-sub a { display: block; padding: 0.55rem 0.7rem; white-space: nowrap; }
    .nav-sub a.active::after { display: none; }
    body > nav.menu-open .nav-has-sub,
    body > nav.menu-open .nav-has-sub .nav-sub { display: contents; }
    body > nav.menu-open .nav-sub li:first-child,
    body > nav.menu-open .nav-caret { display: none; }
    body > nav.menu-open .nav-sub a { padding: 0; }

    /* on subpages the audience tabs are navigation back to the home page,
       not a "you are here" — no underline claims location there */
    html[data-subpage] .pt-btn::after { background: transparent !important; }
    .nav-cta { display: flex; align-items: center; gap: 0.6rem; }
    /* lang/theme controls: bare icons — a soft tint appears only on hover */
    .btn-icon {
      width: 34px; height: 34px;
      display: grid;
      place-items: center;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: var(--ink-2);
      cursor: pointer;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .btn-icon:hover { background: var(--panel); color: var(--ink); }
    nav .btn { padding: 0.5rem 1rem; font-size: 0.84rem; }

    /* ─── HERO — full-bleed dark cover the site opens over ── */
    /* Sticky at the top of the document: the .site-sheet that follows slides
       up OVER it (higher z + opaque bg + rounded top). --hp (0→1, set by JS
       from scroll position) scales the cover back and dims it as the sheet
       arrives. The cover is DARK on purpose — the light sheet opening over
       it is the moment. Artwork: the audience blueprint render under a deep
       wash, glow orbs, and floating glass product cards. */
    .hero {
      --hp: 0;
      --hero-bg: #100b1e;                       /* purple-black, matches the seeker blueprint */
      --hl-accent: #A6B4FF;                     /* headline accent on dark */
      --ha-glow-1: rgba(124, 142, 255, 0.17);
      --ha-glow-2: rgba(124, 142, 255, 0.08);
      position: sticky;
      top: 0;
      z-index: 1;
      min-height: calc(100svh - 58px); /* nav sits above in flow */
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      padding: clamp(3rem, 6vw, 5rem) 0;
      background: var(--hero-bg);
      color: #fff;
    }
    html[data-page="vendor"] .hero {
      --hero-bg: #170a0d;                       /* crimson-black, matches the vendor blueprint */
      --hl-accent: #F3A6C2;
      --ha-glow-1: rgba(219,75,128, 0.16);
      --ha-glow-2: rgba(219,75,128, 0.08);
    }
    html[data-page="b2b"] .hero {
      --hero-bg: #06211E;                       /* teal-black */
      --hl-accent: #45C2AE;
      --ha-glow-1: rgba(69,194,174, 0.18);
      --ha-glow-2: rgba(69,194,174, 0.09);
    }
    /* the blueprint render is authored in purple; rotate its hue into the
       business teal rather than shipping a third copy of the same artwork */
    html[data-page="b2b"] .ha-photo { filter: hue-rotate(-96deg) saturate(0.92); }
    .hero-wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      transform: translateY(calc(var(--hp) * -5vh)) scale(calc(1 - var(--hp) * 0.08));
      opacity: calc(1 - var(--hp) * 0.65);
    }
    .hero-h1 .hl { font-style: normal; color: var(--hl-accent); }
    .hero .hero-sub { color: rgba(255, 255, 255, 0.74); }
    /* buttons re-cut for the dark cover */
    .hero .btn-primary { background: #fff; color: #141414; }
    .hero .btn-primary:hover { background: #ECECEE; }
    .hero .btn-ghost { border-color: rgba(255, 255, 255, 0.32); color: #fff; background: transparent; }
    .hero .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }

    /* art layers */
    .hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .hero-art > * { position: absolute; }
    /* the blueprint render itself — seeker purple / vendor crimson */
    .ha-photo {
      inset: 0;
      background: url('assets/demo-bg.jpg') center / cover no-repeat;
      opacity: 0.55;
      transform: scale(calc(1.04 + var(--hp) * 0.06)); /* gentle push-in as the sheet arrives */
    }
    html[data-page="vendor"] .ha-photo { background-image: url('assets/demo-bg-vendor.jpg'); }
    /* legibility wash — heavier on the text side, lighter where the art breathes */
    .ha-wash {
      inset: 0;
      background: linear-gradient(160deg,
        var(--hero-bg) 0%,
        rgba(0, 0, 0, 0.25) 52%,
        var(--hero-bg) 100%);
      opacity: 0.92;
    }
    /* audience-tinted glow orbs, drifting */
    .ha-orb { border-radius: 50%; }
    .ha-o1 {
      width: 58vmin; height: 58vmin;
      top: -14vmin; inset-inline-end: -10vmin;
      background: radial-gradient(circle, var(--ha-glow-1), transparent 66%);
      animation: haDrift1 13s ease-in-out infinite alternate;
    }
    .ha-o2 {
      width: 46vmin; height: 46vmin;
      bottom: -16vmin; inset-inline-start: -8vmin;
      background: radial-gradient(circle, var(--ha-glow-2), transparent 66%);
      animation: haDrift2 17s ease-in-out infinite alternate;
    }
    @keyframes haDrift1 { to { transform: translate(-5vmin, 4vmin); } }
    @keyframes haDrift2 { to { transform: translate(4vmin, -4vmin); } }

    /* scroll cue */
    .hero-cue {
      position: absolute;
      bottom: 1.6rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      opacity: calc(1 - var(--hp) * 2.2); /* first to go as you start scrolling */
    }
    .hc-label {
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
    }
    html[data-lang="ar"] .hc-label { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
    .hc-line { position: relative; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
    .hc-line::after {
      content: '';
      position: absolute; left: 0; top: 0;
      width: 100%; height: 14px;
      background: rgba(255, 255, 255, 0.85);
      animation: hcDrop 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    @keyframes hcDrop { from { transform: translateY(-14px); } to { transform: translateY(40px); } }

    @media (prefers-reduced-motion: reduce) {
      .ha-orb, .hc-line::after { animation: none; }
    }

    /* the sheet that slides over the cover */
    .site-sheet {
      position: relative;
      z-index: 5;
      background: var(--bg);
      border-radius: 28px 28px 0 0;
      box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.10);
    }
    .hero-h1 {
      font-size: clamp(2.4rem, 5.4vw, 4rem);
      font-weight: 500;
      letter-spacing: -0.022em;
      line-height: 1.08;
      max-width: 780px;
    }
    .hero-sub {
      margin-top: 1.4rem;
      font-size: clamp(1rem, 1.5vw, 1.15rem);
      line-height: 1.6;
      color: var(--ink-2);
      max-width: 620px;
    }
    .hero-actions { margin-top: 2.2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }

    /* Product-demo panel: blueprint artwork + fake app window.
       HANDOFF: swap assets/demo-bg.jpg to change the artwork. Shown
       as-is (no blur/wash) per founder direction. */
    .demo-panel {
      margin-top: clamp(2.5rem, 5vw, 4rem);
      position: relative;
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      padding: clamp(1.25rem, 3.5vw, 3rem);
      overflow: hidden;
    }
    .demo-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url('assets/demo-bg.jpg');
      background-size: cover;
      background-position: center;
    }
    /* vendor page gets the crimson blueprint (brand coral); seeker stays indigo */
    html[data-page="vendor"] .demo-bg { background-image: url('assets/demo-bg-vendor.jpg'); }
    .demo-panel > div:not(.demo-bg) { position: relative; z-index: 1; }
    .demo-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
    .chip {
      padding: 0.45rem 0.95rem;
      border-radius: var(--r-btn);
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--ink-2);
      background: var(--card);
      border: 1px solid var(--hairline);
      white-space: nowrap;
    }
    .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
    /* clickable track chips (buttons) + explainer panes in the window */
    button.chip { font-family: inherit; cursor: pointer; transition: border-color 0.15s ease; }
    button.chip:not(.active):hover { border-color: var(--ink-3); }
    /* Panes overlap in one grid cell so the window always sizes to the
       tallest track — no height jump when switching chips. */
    .track-explorer .dw-body { display: grid; }
    .dw-pane { grid-area: 1 / 1; visibility: hidden; }
    .dw-pane.active { visibility: visible; }
    .dw-desc { font-size: 0.95rem; line-height: 1.7; color: var(--ink-2); max-width: 560px; }
    .demo-window {
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-2);
      max-width: 720px;
      margin: 0 auto;
    }
    .dw-body { padding: clamp(1.3rem, 2.8vw, 1.8rem); }
    .dw-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.1rem;
      flex-wrap: wrap;
    }
    .dw-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
    .dw-status {
      font-family: inherit;
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      padding: 0.3rem 0.6rem;
      border-radius: 4px;
      background: var(--indigo-dim);
      color: var(--indigo);
    }
    html[data-theme="dark"] .dw-status { color: var(--experience-accent); }
    .dw-row {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      padding: 0.85rem 0;
      border-top: 1px solid var(--hairline);
    }
    .dw-num { font-family: inherit; font-size: 0.7rem; color: var(--ink-3); width: 20px; flex-shrink: 0; }
    .dw-name { font-size: 0.92rem; font-weight: 500; flex: 1; min-width: 120px; }
    .dw-meta { font-family: inherit; font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
    .dw-meta.ok { color: #2F7A4F; }
    html[data-theme="dark"] .dw-meta.ok { color: #6FB388; }
    .dw-track { flex: 1 1 90px; max-width: 130px; height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
    .dw-track i { display: block; height: 100%; width: 62%; background: var(--indigo); }
    html[data-theme="dark"] .dw-track i { background: var(--experience-accent); }
    .dw-quote {
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: 8px;
      padding: 0.9rem 1.1rem;
      font-size: 0.9rem;
      line-height: 1.55;
      color: var(--ink-2);
      margin-bottom: 1rem;
    }
    .dw-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--hairline);
      flex-wrap: wrap;
    }
    .dw-send {
      font-size: 0.84rem;
      font-weight: 500;
      color: var(--bg);
      background: var(--ink);
      padding: 0.5rem 1rem;
      border-radius: var(--r-btn);
    }

    /* ─── MANIFESTO ───────────────────────────────────── */
    .manifesto { text-align: center; }
    .manifesto-body {
      font-size: clamp(1.45rem, 3vw, 2.15rem);
      font-weight: 500;
      letter-spacing: -0.015em;
      line-height: 1.4;
      max-width: 860px;
      margin: 0 auto;
    }
    .manifesto-body .dim { color: var(--ink-3); }
    .meta-strip {
      margin-top: clamp(2.5rem, 5vw, 3.5rem);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(1.25rem, 3vw, 2.5rem);
      flex-wrap: wrap;
    }
    .meta-item {
      font-family: inherit;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    html[data-lang="ar"] .meta-item { letter-spacing: 0; font-family: 'Cairo', sans-serif; font-size: 0.8rem; }

    /* ─── APP WALKTHROUGH (one phone, two labeled bubble groups) ─── */
    .tour-head { max-width: 640px; margin: 0 auto; text-align: center; }
    .tour-head .dim { display: block; }

    /* phone mockup */
    .phone {
      position: relative;
      width: min(250px, 66vw);
      aspect-ratio: 1290 / 2796;
      border-radius: 44px;
      background: #0c0c0e;
      padding: 9px;
      flex: 0 0 auto;
      box-shadow: 0 40px 70px -28px rgba(24,24,27,0.45), 0 0 0 1px rgba(24,24,27,0.06);
    }
    html[data-theme="dark"] .phone { box-shadow: 0 40px 70px -28px rgba(0,0,0,0.7), 0 0 0 1px rgba(244,244,245,0.08); }
    .phone-island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 30%; height: 20px; background: #0c0c0e; border-radius: 12px; z-index: 3; }
    .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #faf7f2; }
    .phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
    .phone-shot.active { opacity: 1; }

    /* stage: two groups flank the phone */
    .tour-stage {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: flex; align-items: center; justify-content: center;
      gap: clamp(1rem, 3vw, 2.75rem);
    }
    .tour-group { display: flex; flex-direction: column; gap: 1rem; }
    .tour-group-label {
      font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-3); font-weight: 600;
    }
    html[data-lang="ar"] .tour-group-label { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
    .tg-left  { align-items: flex-end;   text-align: right; }
    .tg-right { align-items: flex-start; text-align: left; }
    html[data-lang="ar"] .tg-left  { align-items: flex-start; text-align: left; }
    html[data-lang="ar"] .tg-right { align-items: flex-end;   text-align: right; }
    .tour-bubbles { display: flex; flex-direction: column; gap: 0.85rem; }
    .tg-left  .tour-bubbles { align-items: flex-end; }
    .tg-right .tour-bubbles { align-items: flex-start; }
    html[data-lang="ar"] .tg-left  .tour-bubbles { align-items: flex-start; }
    html[data-lang="ar"] .tg-right .tour-bubbles { align-items: flex-end; }

    /* bubble: icon ring + label, floating gently */
    .tour-bubble {
      display: flex; align-items: center; gap: 0.6rem;
      background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
      animation: tb-float 5.5s ease-in-out infinite; will-change: transform;
    }
    .tb-ring {
      width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
      background: var(--card); border: 1px solid var(--hairline);
      display: grid; place-items: center; box-shadow: var(--shadow-1);
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }
    .tour-bubble svg { width: 22px; height: 22px; stroke: var(--ink-2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .tb-label { font-size: 0.92rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
    .tour-bubble:hover { animation-play-state: paused; }
    .tour-bubble:hover .tb-ring { transform: translateY(-2px); border-color: var(--ink-3); }
    .tour-bubble.active .tb-ring { background: var(--indigo); border-color: var(--indigo); }
    .tour-bubble.active svg { stroke: #fff; }
    .tour-bubble.active .tb-label { color: var(--ink); }
    /* desynced float across the five bubbles in each group */
    .tour-bubble:nth-child(1) { animation-delay: -0.2s; animation-duration: 5.4s; }
    .tour-bubble:nth-child(2) { animation-delay: -1.6s; animation-duration: 6.3s; }
    .tour-bubble:nth-child(3) { animation-delay: -3.1s; animation-duration: 5.8s; }
    .tour-bubble:nth-child(4) { animation-delay: -2.4s; animation-duration: 6.6s; }
    .tour-bubble:nth-child(5) { animation-delay: -0.9s; animation-duration: 5.1s; }

    /* caption below the phone — swaps with the active bubble (constant height) */
    .tour-desc-wrap { display: grid; max-width: 560px; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; text-align: center; }
    .tour-desc { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.4s ease; }
    .tour-desc.active { visibility: visible; opacity: 1; }
    .td-name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
    .td-text { font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
    .tour-avail { margin-top: 1.5rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
    html[data-lang="ar"] .tour-avail { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    /* app store badges under the tour phone — drawn in-house, no remote assets */
    .store-badges { margin-top: 1.6rem; display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
    .sb-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      background: #111113;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 10px;
      padding: 0.55rem 1.05rem;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .sb-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
    .sb-icon { width: 21px; height: 21px; flex-shrink: 0; }
    .sb-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
    .sb-small { font-size: 0.62rem; opacity: 0.75; letter-spacing: 0.02em; }
    html[data-lang="ar"] .sb-small { letter-spacing: 0; font-size: 0.68rem; }
    .sb-big { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }


    @keyframes tb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

    /* desktop: spread each group's bubbles down the phone's height */
    @media (min-width: 761px) {
      .tour-group { min-height: 500px; }
      .tour-bubbles { flex: 1; justify-content: space-between; }
    }

    /* mobile: stack — phone, then each labeled group as a centered chip row */
    @media (max-width: 760px) {
      .tour-stage { flex-direction: column; gap: 2rem; }
      .tour-stage .phone { order: -1; }
      .tour-group,
      .tg-left, .tg-right,
      html[data-lang="ar"] .tg-left, html[data-lang="ar"] .tg-right { align-items: center; text-align: center; width: 100%; }
      .tour-bubbles,
      .tg-left .tour-bubbles, .tg-right .tour-bubbles,
      html[data-lang="ar"] .tg-left .tour-bubbles, html[data-lang="ar"] .tg-right .tour-bubbles {
        flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 1.1rem;
      }
      /* stacked icon-over-label chips so the row packs tightly */
      .tour-bubble { flex-direction: column; gap: 0.5rem; width: 82px; }
      .tb-label { white-space: normal; text-align: center; font-size: 0.8rem; line-height: 1.2; }
    }

    /* ─── WAYS (services) ─────────────────────────────── */
    .ways-cards { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1.25rem; }
    .way-card {
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      padding: clamp(1.5rem, 3.5vw, 2.75rem);
    }
    .way-title { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
    .way-desc { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); max-width: 520px; }
    .way-rows { margin-top: 1.5rem; }
    .way-row {
      display: flex;
      align-items: baseline;
      gap: 1.1rem;
      padding: 0.95rem 0;
      border-top: 1px solid var(--hairline);
    }
    .way-row:last-child { border-bottom: 1px solid var(--hairline); }
    .wr-num { font-family: inherit; font-size: 0.72rem; color: var(--ink-3); width: 22px; flex-shrink: 0; }
    .wr-name { font-size: 1rem; font-weight: 500; flex-shrink: 0; }
    .wr-desc { font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }
    .chip-grid { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

    /* ─── BRIEF MATCHER (vendor) — dark ops panel, briefs land as push notifications ─── */
    /* The briefs way-card goes cinematic: the crimson blueprint artwork from the
       vendor hero sits under a deep wash, trades are glass chips that ignite
       coral, and each matched brief drops in as an instantly-recognisable
       push notification. HANDOFF: markup lives in index.html (#briefMatcher). */
    .way-dark {
      position: relative;
      overflow: hidden;
      background: #150a0d; /* crimson-tinted near-black, matches the blueprint art */
      border-color: rgba(255,255,255,0.08);
    }
    .way-dark::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url('assets/demo-bg-vendor.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.5;
    }
    .way-dark::after {
      /* legibility wash + a faint coral bloom top corner so the panel feels lit */
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(520px 320px at 85% -10%, rgba(219,75,128,0.22), transparent 70%),
        linear-gradient(150deg, rgba(18,8,11,0.92) 0%, rgba(18,8,11,0.72) 55%, rgba(18,8,11,0.88) 100%);
    }
    .way-dark .way-inner { position: relative; z-index: 1; }
    .way-dark .way-title { color: #fff; }
    .way-dark .way-desc { color: rgba(255,255,255,0.72); }
    .way-dark .link.vnd { color: #FF8A8E; }
    .way-dark .link.vnd:hover { color: #FFB3B6; }

    .matcher {
      margin-top: 1.6rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.8rem 2.5rem;
    }

    /* the scope: rings + crosshair + coral core glow, all painted layers */
    .radar {
      position: relative;
      width: min(300px, 76vw);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      flex-shrink: 0;
      margin-inline: auto;
      border: 1px solid rgba(255,255,255,0.16);
      background:
        radial-gradient(circle closest-side, rgba(219,75,128,0.14), transparent 68%),
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.09)) 0 50% / 100% 1px no-repeat,
        repeating-radial-gradient(circle closest-side, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,0.11) calc(25% - 1px), rgba(255,255,255,0.11) 25%);
    }
    /* sweeping beam — bright leading edge, trail fading behind it.
       Rotation is set from JS (transform) so pings stay perfectly in sync. */
    .rd-beam {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 0deg,
        transparent 0deg, transparent 288deg,
        rgba(219,75,128,0.05) 300deg, rgba(219,75,128,0.4) 352deg, rgba(219,75,128,0.55) 360deg);
      will-change: transform;
    }
    .rd-beam::after {
      /* the radius line at the leading edge */
      content: '';
      position: absolute;
      left: calc(50% - 1px);
      top: 0;
      width: 2px;
      height: 50%;
      background: linear-gradient(to top, rgba(219,75,128,0.1), rgba(255,138,142,0.95));
    }
    @media (prefers-reduced-motion: reduce) { .rd-beam { display: none; } }

    /* contacts on the scope */
    .rd-blip {
      position: absolute;
      width: 9px; height: 9px;
      margin: -4.5px 0 0 -4.5px;
      border-radius: 50%;
      background: #FF8A8E;
      opacity: 0.4;
      box-shadow: 0 0 8px rgba(219,75,128,0.55);
      transition: opacity 0.4s ease, background 0.4s ease;
    }
    .rd-blip.ping { opacity: 1; background: #fff; box-shadow: 0 0 14px rgba(255,138,142,0.95); }
    .rd-blip::after {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,138,142,0.85);
      opacity: 0;
    }
    .rd-blip.ping::after { animation: rdPing 1.3s ease-out; }
    @keyframes rdPing {
      0%   { opacity: 0.9; transform: scale(0.4); }
      100% { opacity: 0;   transform: scale(3.4); }
    }
    /* city label surfaces beside the pinged contact */
    .rd-city {
      position: absolute;
      bottom: calc(100% + 9px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      white-space: nowrap;
      color: #fff;
      background: rgba(18,8,11,0.8);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: var(--r-btn);
      padding: 0.18rem 0.5rem;
      opacity: 0;
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }
    html[data-lang="ar"] .rd-city { letter-spacing: 0; }
    .rd-blip.ping .rd-city { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* licence ticker — all nine trades on a slow seamless crawl */
    .rd-trades { margin-top: 1.7rem; }
    .rdt-label {
      font-size: 0.64rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.42);
      margin-bottom: 0.6rem;
    }
    html[data-lang="ar"] .rdt-label { letter-spacing: 0; text-transform: none; font-size: 0.74rem; }
    .rdt-viewport {
      overflow: hidden;
      /* the whole marquee runs in a physical-LTR coordinate space so the
         translateX loop maths hold in RTL pages too — Arabic glyphs inside
         each item still shape right-to-left on their own */
      direction: ltr;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .rdt-track {
      display: flex;
      width: max-content;
      animation: rdtScroll 38s linear infinite;
    }
    html[data-lang="ar"] .rdt-track { animation-direction: reverse; }
    .rdt-seq { display: flex; align-items: center; gap: 1.1rem; padding-inline-end: 1.1rem; white-space: nowrap; }
    .rdt-item { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.72); }
    .rdt-dot { color: var(--coral); font-weight: 700; }
    @keyframes rdtScroll { to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .rdt-track { animation: none; width: auto; }
      .rdt-seq { flex-wrap: wrap; white-space: normal; row-gap: 0.4rem; }
      .rdt-seq[aria-hidden] { display: none; }
      .rdt-viewport { -webkit-mask-image: none; mask-image: none; }
    }

    /* incoming brief — a push notification dropping onto the dark panel.
       Fixed light colors on purpose: a notification card stays white in
       site dark mode too, and reads as "your phone just buzzed". */
    .mb-cards { display: grid; flex: 1 1 250px; max-width: 460px; margin-inline: auto; align-self: center; }
    .mb-card {
      grid-area: 1 / 1;
      align-self: start; /* toast hugs its content; the grid track keeps the tallest height so nothing below shifts */
      visibility: hidden; opacity: 0; transform: translateY(-16px) scale(0.96);
      transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
      background: rgba(255,255,255,0.96);
      border-radius: 16px;
      padding: 0.85rem 1.1rem 1rem;
      box-shadow: 0 24px 48px -12px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.25);
    }
    .mb-card.active { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
    .mb-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.55rem; margin-bottom: 0.6rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
    .mb-appicon {
      width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
      background: #fff url('assets/ertah-mark.png') center / 78% no-repeat;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .mb-app { font-size: 0.74rem; font-weight: 600; color: #52525B; letter-spacing: 0.02em; }
    .mb-now { margin-inline-start: auto; font-size: 0.7rem; color: #A1A1AA; }
    .mb-tag {
      display: inline-block;
      font-size: 0.64rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      color: #BA2C62; /* fixed: the notification card stays white in site dark mode too */
    }
    html[data-lang="ar"] .mb-tag { letter-spacing: 0; text-transform: none; font-size: 0.74rem; }
    .mb-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; color: #1A1A1A; margin-top: 0.3rem; }
    .mb-meta { font-size: 0.82rem; color: #6E6E76; margin-top: 0.2rem; }

    /* ─── PAYMENT FLOW (vendor) — clickable stepper on a filling rail ─── */
    .payflow { margin-top: 1.6rem; }
    .pf-rail {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .pf-track {
      position: absolute;
      top: 21px;
      inset-inline: 12.5%;
      height: 2px;
      background: var(--hairline-2);
      display: flex;
      border-radius: 2px;
      overflow: hidden;
    }
    /* (no RTL override needed: the track is a flex row, and RTL flips its
       main axis, so the fill naturally grows from the right in Arabic) */
    .pf-fill {
      display: block; height: 100%; width: 100%;
      background: var(--coral);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
    }
    html[data-lang="ar"] .pf-fill { transform-origin: right center; }
    .pf-node {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    }
    .pf-ic {
      position: relative; z-index: 0;
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--card); color: var(--ink-2);
      border: 1px solid var(--hairline-2);
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .pf-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .pf-node:hover .pf-ic { transform: translateY(-2px); border-color: var(--ink-3); }
    .pf-node.active .pf-ic {
      background: var(--coral); border-color: var(--coral); color: #fff;
    }
    /* the pulse ring: compositor-only (transform + opacity), drawn behind the icon */
    .pf-node.active .pf-ic::after {
      content: ''; position: absolute; inset: -1px; z-index: -1;
      border-radius: 50%;
      background: rgba(219,75,128,0.35);
      animation: pf-pulse 2.6s ease-out infinite;
    }
    .pf-node.done .pf-ic {
      /* wash layered over an opaque card base so the rail never shows through */
      background-color: var(--card);
      background-image: linear-gradient(rgba(219,75,128,0.14), rgba(219,75,128,0.14));
      border-color: transparent;
      color: var(--coral-deep);
    }
    @keyframes pf-pulse {
      0%        { transform: scale(1);    opacity: 1; }
      55%, 100% { transform: scale(1.55); opacity: 0; }
    }
    .pf-name { font-size: 0.8rem; font-weight: 500; color: var(--ink-3); text-align: center; line-height: 1.25; transition: color 0.2s ease; }
    .pf-node.active .pf-name { color: var(--ink); }
    .pf-node.done .pf-name { color: var(--ink-2); }
    /* detail swaps below, overlaid in one grid cell so height stays constant */
    .pf-details { display: grid; margin-top: 1.4rem; }
    .pf-detail { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.35s ease; }
    .pf-detail.active { visibility: visible; opacity: 1; }
    .pf-chip {
      display: inline-flex;
      font-size: 0.74rem; font-weight: 600;
      padding: 0.32rem 0.7rem; border-radius: 999px;
      background: rgba(219,75,128,0.10); color: var(--coral-deep);
    }
    .pf-chip-green { background: rgba(47,122,79,0.10); color: #2F7A4F; }
    html[data-theme="dark"] .pf-chip-green { color: #6FB388; }
    .pf-text { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); max-width: 460px; }
    @media (max-width: 560px) {
      .pf-name { font-size: 0.7rem; }
    }

    /* ─── BUSINESS — portfolio control room (dark band) ─── */
    /* The page's one moving beat. Dark teal so it breaks the run of light
       sections; the panel's rows approve themselves on a timer (see the
       Portfolio control IIFE). Nothing here is clickable by design. */
    .b2b-control {
      position: relative;
      overflow: hidden;
      background: #06211E;
      color: #fff;
      padding: clamp(3.5rem, 7vw, 6rem) 0;
    }
    .ctrl-glow {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(60vmin 60vmin at 82% -10%, rgba(69,194,174,0.20), transparent 68%),
        radial-gradient(46vmin 46vmin at 6% 110%, rgba(69,194,174,0.12), transparent 66%);
    }
    .ctrl-grid {
      position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: center;
    }
    @media (max-width: 900px) { .ctrl-grid { grid-template-columns: 1fr; } }
    .ctrl-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--b2b-lift); margin-bottom: 1rem;
    }
    html[data-lang="ar"] .ctrl-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .ctrl-h2 {
      font-size: clamp(1.9rem, 3.6vw, 2.8rem);
      font-weight: 500; letter-spacing: -0.022em; line-height: 1.1;
      color: #fff;
    }
    html[data-lang="ar"] .ctrl-h2 { line-height: 1.5; letter-spacing: 0; }
    .ctrl-h2 .ctrl-accent { display: block; font-style: normal; color: var(--b2b-lift); }
    .ctrl-lead { margin-top: 1.2rem; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 46ch; }
    .ctrl-points { margin-top: 1.6rem; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
    .ctrl-points li {
      position: relative;
      padding-inline-start: 1.5rem;
      font-size: 0.92rem;
      color: rgba(255,255,255,0.8);
    }
    .ctrl-points li::before {
      content: '';
      position: absolute; inset-inline-start: 0; top: 0.5rem;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--b2b-lift);
    }

    /* the panel */
    .ctrl-panel {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--r-lg);
      padding: clamp(1.2rem, 2.4vw, 1.75rem);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      box-shadow: 0 30px 60px -30px rgba(0,0,0,0.65);
    }
    .ctrl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .ctrl-title {
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
    html[data-lang="ar"] .ctrl-title { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
    .ctrl-live {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-size: 0.7rem; font-weight: 600; color: var(--b2b-lift);
    }
    .ctrl-live i {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--b2b-lift);
      animation: ctrlPulse 1.8s ease-in-out infinite;
    }
    @keyframes ctrlPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

    /* project identity */
    .ctrl-proj { margin-top: 1.15rem; }
    .ctrl-proj-name { display: block; font-size: 1.15rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
    .ctrl-proj-meta { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: rgba(255,255,255,0.55); }

    /* headline completion — always the mean of the package bars */
    .ctrl-overall { margin: 1.35rem 0 1.5rem; }
    .ctrl-overall-top { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.6rem; }
    .ctrl-stat-num { font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 600; color: #fff; letter-spacing: -0.02em; }
    .ctrl-stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
    .ctrl-bar-lg { height: 6px; border-radius: 6px; }

    /* work packages */
    .ctrl-row { padding: 0.8rem 0; border-top: 1px solid rgba(255,255,255,0.09); }
    .ctrl-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
    .ctrl-name { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.92); }
    .ctrl-state { font-size: 0.72rem; font-weight: 600; white-space: nowrap; transition: color 0.3s ease; }
    .ctrl-state.is-done { color: var(--b2b-lift); }
    .ctrl-state.is-live { color: rgba(255,255,255,0.8); }
    .ctrl-state.is-wait { color: rgba(255,255,255,0.38); }
    .ctrl-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
    .ctrl-fill {
      display: block; height: 100%; width: 100%; border-radius: 4px;
      background: var(--b2b-lift);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }
    html[data-lang="ar"] .ctrl-fill { transform-origin: right center; }
    /* the moment a package completes */
    .ctrl-row.approving .ctrl-name { color: var(--b2b-lift); }
    .ctrl-row.approving .ctrl-state { animation: ctrlPop 1.5s ease-out; }
    @keyframes ctrlPop {
      0%   { transform: scale(1); }
      18%  { transform: scale(1.16); }
      100% { transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .ctrl-live i { animation: none; }
      .ctrl-fill, .ctrl-state { transition: none; }
      .ctrl-row.approving .ctrl-state { animation: none; }
    }

    /* ─── BUSINESS (b2b) — third audience sections ─── */
    .b2b-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--b2b); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .b2b-eyebrow { color: var(--b2b-lift); }
    html[data-lang="ar"] .b2b-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }

    /* who we work with — three cards */
    .b2w-grid {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    @media (max-width: 900px) { .b2w-grid { grid-template-columns: 1fr; } }
    .b2w-card {
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      padding: clamp(1.5rem, 3vw, 2rem);
      box-shadow: var(--shadow-1);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .b2w-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
    /* small living figures on each audience card — decorative, aria-hidden,
       and they never gate content: the card reads fine with motion disabled */
    .b2w-fig { display: block; height: 46px; margin-bottom: 1.2rem; }
    /* developers: units rising, one after another */
    .fig-units { display: flex; align-items: flex-end; gap: 6px; }
    .fig-units i {
      width: 14px; border-radius: 3px 3px 0 0;
      background: linear-gradient(180deg, var(--b2b-lift), var(--b2b));
      transform-origin: bottom;
      animation: figRise 3.4s ease-in-out infinite;
    }
    .fig-units i:nth-child(1) { height: 20px; animation-delay: 0s; }
    .fig-units i:nth-child(2) { height: 32px; animation-delay: 0.18s; }
    .fig-units i:nth-child(3) { height: 26px; animation-delay: 0.36s; }
    .fig-units i:nth-child(4) { height: 40px; animation-delay: 0.54s; }
    @keyframes figRise {
      0%, 62%, 100% { transform: scaleY(1); opacity: 0.9; }
      18%           { transform: scaleY(0.28); opacity: 0.55; }
    }
    /* asset owners: a plot outline drawing itself, pin dropping in */
    .fig-plot { position: relative; display: block; width: 62px; }
    .plot-box {
      position: absolute; inset: 2px 0 4px 0;
      border: 2px dashed var(--b2b);
      border-radius: 4px;
      opacity: 0.55;
      animation: figSweep 3.4s linear infinite;
    }
    @keyframes figSweep { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }
    .plot-pin {
      position: absolute; left: 50%; top: 12px;
      width: 12px; height: 12px; margin-left: -6px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      background: var(--b2b);
      animation: figDrop 3.4s ease-in-out infinite;
    }
    @keyframes figDrop {
      0%, 100% { transform: rotate(-45deg) translateY(0); }
      45%      { transform: rotate(-45deg) translateY(-7px); }
    }
    /* corporations: floors of windows lighting up */
    .fig-floors { display: grid; grid-template-columns: repeat(3, 12px); gap: 4px; width: max-content; }
    .fig-floors i {
      height: 12px; border-radius: 2px;
      background: var(--b2b);
      opacity: 0.2;
      animation: figLight 3.6s ease-in-out infinite;
    }
    .fig-floors i:nth-child(1){animation-delay:.0s}   .fig-floors i:nth-child(2){animation-delay:.9s}
    .fig-floors i:nth-child(3){animation-delay:.35s}  .fig-floors i:nth-child(4){animation-delay:1.3s}
    .fig-floors i:nth-child(5){animation-delay:.2s}   .fig-floors i:nth-child(6){animation-delay:.65s}
    .fig-floors i:nth-child(7){animation-delay:1.1s}  .fig-floors i:nth-child(8){animation-delay:.5s}
    .fig-floors i:nth-child(9){animation-delay:1.5s}
    @keyframes figLight { 0%,100% { opacity: 0.18; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .fig-units i, .plot-box, .plot-pin, .fig-floors i { animation: none; }
      .fig-floors i { opacity: 0.75; }
    }

    .b2w-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
    .b2w-desc { font-size: 0.92rem; line-height: 1.62; color: var(--ink-2); }

    /* what we bring — numbered rows on hairlines */
    .b2b-rows { margin-top: clamp(2rem, 4vw, 3rem); }
    .b2b-row {
      display: flex;
      align-items: flex-start;
      gap: clamp(1rem, 3vw, 2.25rem);
      padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
      border-top: 1px solid var(--hairline);
    }
    .b2b-row:last-child { border-bottom: 1px solid var(--hairline); }
    .b2b-num { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--b2b); padding-top: 0.2rem; }
    html[data-theme="dark"] .b2b-num { color: var(--b2b-lift); }
    .b2b-row-title { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4rem; }
    .b2b-row-desc { font-size: 0.92rem; line-height: 1.62; color: var(--ink-2); max-width: 68ch; }

    /* ─── BUILD TIMELINE (seeker) — horizontal, never scroll-jacked ─── */
    /* Replaces the old 460vh sticky sequence. The rail scrolls horizontally on
       its own (swipe / drag / arrows / chapter bar); the page's vertical scroll
       is untouched, so nobody is forced through six stages to reach the footer.
       HANDOFF: behaviour lives in the Build Timeline IIFE in index.html. */
    /* AI: do NOT put overflow:hidden on .build-timeline — it makes the section
       a hidden scroll container, and scrollIntoView() then scrolls the SECTION
       instead of the rail (jump-to-stage silently does nothing). The rail's own
       overflow-x already contains the cards. */
    .tl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
    .tl-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--indigo); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .tl-eyebrow { color: var(--experience-accent); }
    html[data-lang="ar"] .tl-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .tl-arrows { display: flex; gap: 0.5rem; flex-shrink: 0; }
    .tl-arrow {
      width: 40px; height: 40px;
      display: grid; place-items: center;
      border: 1px solid var(--hairline-2);
      border-radius: 50%;
      background: var(--card);
      color: var(--ink);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    }
    .tl-arrow svg { width: 17px; height: 17px; }
    html[data-lang="ar"] .tl-arrow svg { transform: scaleX(-1); } /* prev/next follow reading order */
    .tl-arrow:hover:not(:disabled) { background: var(--panel); border-color: var(--ink-3); }
    .tl-arrow:disabled { opacity: 0.3; cursor: default; }
    @media (max-width: 720px) { .tl-arrows { display: none; } } /* swipe is the native gesture here */

    /* the rail */
    .tl-rail {
      /* Runs edge-to-edge so the stages fill a desktop screen instead of sitting
         in a narrow column. The leading gutter reproduces .wrap's content edge so
         the first card lines up with the heading; the trailing side gets only the
         page padding, so scrolling to the end pushes the last card right up to
         the screen edge instead of leaving a huge empty gutter.
         AI: the gutter resolves % against the SECTION's width — do not switch it
         to 100vw, which includes the scrollbar and drifts the cards out of line
         with the heading by ~15px. */
      --tl-gutter: max(var(--pad-x), calc((100% - var(--wrap)) / 2 + var(--pad-x)));
      margin-top: clamp(2rem, 4vw, 3rem);
      display: flex;
      gap: 1.1rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      padding-inline-start: var(--tl-gutter);
      padding-inline-end: var(--pad-x);
      scroll-padding-inline-start: var(--tl-gutter);
      overscroll-behavior-x: contain;   /* never chain into browser back-swipe */
      cursor: grab;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .tl-rail::-webkit-scrollbar { display: none; }
    .tl-rail:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
    .tl-rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    .tl-rail.dragging .tl-card { pointer-events: none; }

    .tl-card {
      position: relative;
      flex: 0 0 auto;
      width: clamp(255px, 74vw, 370px);
      aspect-ratio: 3 / 4;
      scroll-snap-align: start;
      border-radius: var(--r-lg);
      overflow: hidden;
      background: var(--panel);
      box-shadow: var(--shadow-1);
    }
    .tl-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transform: scale(1.01);
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* the "zoom in": the stage you're on — or the one under the cursor — opens up */
    .tl-card.on .tl-photo, .tl-card:hover .tl-photo { transform: scale(1.07); }
    .tl-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,8,14,0.94) 0%, rgba(10,8,14,0.72) 32%, rgba(10,8,14,0.18) 66%, rgba(10,8,14,0.06) 100%);
    }
    .tl-badge {
      position: absolute;
      top: 1rem; inset-inline-start: 1rem;
      z-index: 2;
      font-size: 0.72rem; font-weight: 600;
      color: #fff;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.28);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 0.2rem 0.6rem;
    }
    .tl-body {
      position: absolute;
      inset-inline: 0; bottom: 0;
      z-index: 2;
      padding: 1.3rem 1.35rem 1.45rem;
      color: #fff;
    }
    .tl-step {
      display: block;
      font-size: 0.66rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
      padding-top: 0.75rem;
      border-top: 1px solid rgba(255,255,255,0.85);
      margin-bottom: 0.85rem;
    }
    html[data-lang="ar"] .tl-step { letter-spacing: 0; text-transform: none; font-size: 0.76rem; }
    .tl-title { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.018em; line-height: 1.12; color: #fff; }
    .tl-text { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.55; color: rgba(255,255,255,0.8); }

    /* chapter bar — progress rail + six jump targets */
    .tl-track {
      position: relative;
      margin-top: clamp(1.75rem, 3vw, 2.5rem);
      height: 2px;
      background: var(--hairline-2);
      border-radius: 2px;
      overflow: hidden;
    }
    .tl-nav { display: flex; gap: 0.4rem; }
    .tl-node {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      align-items: flex-start;
      padding: 0.7rem 0 0;
      background: none;
      border: none;
      font-family: inherit;
      text-align: start;
      color: var(--ink-3);
      cursor: pointer;
      transition: color 0.2s ease;
    }
    html[data-lang="ar"] .tl-node { align-items: flex-end; }
    .tl-node:hover { color: var(--ink-2); }
    .tl-node.on { color: var(--ink); }
    .tl-num { font-size: 0.7rem; font-weight: 600; }
    .tl-nlabel { font-size: 0.84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    @media (max-width: 720px) {
      .tl-nlabel { display: none; }   /* six labels won't fit a phone — the numbers carry it */
      .tl-node, html[data-lang="ar"] .tl-node { align-items: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tl-photo, .tl-card { transition: none; }
      .tl-rail { scroll-behavior: auto; }
    }

    /* ─── REVIEWS (seeker) — three testimonial cards ─── */
    /* The one centred header on the site: this block is a deliberate pause in
       the left-aligned editorial rhythm, so the quotes read as a chorus. */
    .rev-head { text-align: center; }
    .rev-head .h2 { max-width: 20ch; margin-inline: auto; }
    .rev-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--indigo); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .rev-eyebrow { color: var(--experience-accent); }
    html[data-lang="ar"] .rev-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .rev-accent { font-style: normal; color: var(--indigo); }
    html[data-theme="dark"] .rev-accent { color: var(--experience-accent); }
    .rev-grid {
      margin-top: clamp(2.25rem, 4vw, 3.25rem);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      align-items: stretch;
    }
    @media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; } }
    .rev-card {
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      padding: clamp(1.4rem, 2.4vw, 1.85rem);
      box-shadow: var(--shadow-1);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .rev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
    .rev-mark { color: #C5B8FF; margin-bottom: 1.1rem; }
    html[data-theme="dark"] .rev-mark { color: #5A5FA8; }
    .rev-mark svg { width: 26px; height: 26px; display: block; }
    html[data-lang="ar"] .rev-mark svg { transform: scaleX(-1); } /* opening mark faces the text */
    .rev-quote {
      font-size: 0.98rem;
      line-height: 1.6;
      color: var(--ink);
      /* the divider sits at the card's bottom no matter how long the quote is */
      margin-bottom: auto;
      padding-bottom: 1.6rem;
    }
    .rev-by {
      padding-top: 1.1rem;
      border-top: 1px solid var(--hairline);
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }
    .rev-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
    .rev-meta { font-size: 0.82rem; color: var(--ink-3); }

    /* ─── JOIN ERTAH (vendor) — recruitment pitch, two audiences ─── */
    /* Light card = contractors, gradient card = suppliers. The gradient runs
       the vendor coral family (deep crimson → coral → warm highlight) so it
       reads as the vendor side's brand moment, not a stray purple. */
    .jn-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--coral-deep); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .jn-eyebrow { color: var(--coral); }
    html[data-lang="ar"] .jn-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .jn-grid {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      align-items: start;
    }
    @media (max-width: 860px) { .jn-grid { grid-template-columns: 1fr; } }
    .jn-card {
      position: relative;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--r-lg);
      padding: clamp(1.6rem, 3vw, 2.4rem);
      box-shadow: var(--shadow-1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .jn-card-grad {
      border-color: transparent;
      color: #fff;
      background: linear-gradient(142deg, #7A1533 0%, #B82B60 30%, #D84F86 58%, #EB84AF 82%, #F2B2CB 100%);
      box-shadow: 0 18px 40px -18px rgba(217, 68, 75, 0.55);
    }
    /* soft top-corner light so the gradient has depth rather than reading flat */
    .jn-card-grad::before {
      content: '';
      position: absolute;
      top: -30%; inset-inline-end: -20%;
      width: 70%; aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 68%);
      pointer-events: none;
    }
    .jn-card > * { position: relative; z-index: 1; }
    .jn-ic {
      width: 44px; height: 44px;
      display: grid; place-items: center;
      border-radius: 12px;
      background: rgba(219,75,128, 0.12);
      color: var(--coral-deep);
      margin-bottom: 1.5rem;
    }
    .jn-card-grad .jn-ic { background: rgba(255,255,255,0.18); color: #fff; }
    .jn-ic svg { width: 21px; height: 21px; }
    .jn-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.14; }
    .jn-desc { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
    .jn-card-grad .jn-desc { color: rgba(255,255,255,0.86); }

    /* contractor feature list — two columns of soft chips */
    .jn-feats {
      list-style: none;
      margin: 1.6rem 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
    }
    @media (max-width: 520px) { .jn-feats { grid-template-columns: 1fr; } }
    .jn-feat {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      background: var(--panel);
      border-radius: 999px;
      padding: 0.6rem 0.95rem;
      font-size: 0.86rem;
      color: var(--ink-2);
    }
    .jn-feat::before {
      content: '';
      width: 5px; height: 5px; flex-shrink: 0;
      border-radius: 50%;
      background: var(--coral);
    }

    /* supplier categories — translucent pills on the gradient */
    .jn-pills { margin: 1.6rem 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .jn-pill {
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.26);
      border-radius: 999px;
      padding: 0.42rem 0.9rem;
      font-size: 0.84rem;
      font-weight: 500;
      color: #fff;
      white-space: nowrap;
    }

    .jn-btn-coral, .jn-btn-light { margin-top: 1.8rem; align-self: flex-start; }
    .jn-btn-coral {
      background: linear-gradient(120deg, #96234E, #DB4B80);
      color: #fff;
      border: none;
      box-shadow: 0 10px 24px -12px rgba(217, 68, 75, 0.8);
    }
    .jn-btn-coral:hover { filter: brightness(1.06); }
    .jn-btn-light { background: #fff; color: #1A1A1A; border: none; }
    .jn-btn-light:hover { background: #F4F4F5; }

    /* ─── SCREENING (seeker) — step cards + mock vendor profile ─── */
    .scr-grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: clamp(2.5rem, 6vw, 5rem);
      align-items: start;
    }
    .scr-eyebrow {
      font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
      font-weight: 600; color: var(--indigo); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .scr-eyebrow { color: var(--experience-accent); }
    html[data-lang="ar"] .scr-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .scr-accent { color: var(--indigo); }
    html[data-theme="dark"] .scr-accent { color: var(--experience-accent); }

    /* steps: white cards hung on a dotted spine with numbered dots */
    .scr-steps {
      list-style: none;
      margin-top: clamp(1.75rem, 3vw, 2.5rem);
      position: relative;
      display: flex; flex-direction: column; gap: 1rem;
      padding-inline-start: 2.45rem;
    }
    .scr-steps::before {
      content: '';
      position: absolute;
      inset-block: 1.5rem;
      inset-inline-start: 14px;
      border-inline-start: 2px dashed var(--hairline-2);
    }
    .scr-step { position: relative; display: flex; align-items: flex-start; gap: 1rem;
      background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-md);
      padding: 1.1rem 1.25rem; box-shadow: var(--shadow-1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .scr-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
    /* NOTE: physical left/right (not inset-inline-start) — the dot carries
       .mono, whose AR rule flips the element's own direction and would
       flip inline-start with it. */
    .scr-dot {
      position: absolute;
      left: -2.45rem;
      top: 50%; transform: translateY(-50%);
      width: 30px; height: 22px; border-radius: 999px;
      background: var(--indigo); color: #fff;
      display: grid; place-items: center;
      font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
    }
    html[data-lang="ar"] .scr-dot { left: auto; right: -2.45rem; }
    .scr-ic {
      width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
      background: var(--indigo-dim);
      display: grid; place-items: center;
    }
    .scr-ic svg { width: 20px; height: 20px; stroke: var(--indigo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    html[data-theme="dark"] .scr-ic svg { stroke: var(--experience-accent); }
    .scr-body { display: block; }
    .scr-title { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
    .scr-desc { display: block; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }

    /* mock vendor profile, on Airbnb's host-card pattern: a round avatar and
       name beside a stat stack, the rating as the single loudest figure (between
       hairline rules, ink stars, never gold), then review excerpts. Airbnb's one
       shadow tier lifts the card; everything inside sits on hairlines. One
       accent (--vp-accent follows the audience: purple, or teal on business
       via the --indigo remap) marks only the verified status. */
    .scr-right { position: relative; }
    .vprofile {
      --vp-accent: var(--indigo);
      --vp-r: 14px;
      position: relative;
      max-width: 440px;
      margin: 0 auto;
      background: var(--card);
      border-radius: var(--vp-r);
      box-shadow: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0;
      overflow: hidden;
    }
    html[data-theme="dark"] .vprofile {
      --vp-accent: var(--experience-accent, #7C8EFF);
      box-shadow: 0 0 0 1px var(--hairline-2);
    }

    /* record header */
    .vp-head {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: 0.8rem 1.4rem;
      border-bottom: 1px solid var(--hairline);
    }
    .vp-doc {
      font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-3);
    }
    .vp-verified { font-size: 0.74rem; font-weight: 600; color: var(--vp-accent); }
    html[data-lang="ar"] .vp-doc { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

    /* host block: identity left, stat stack right */
    .vp-host {
      display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      align-items: center; gap: 1.2rem;
      padding: 1.4rem;
    }
    .vp-id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; min-width: 0; }
    .vp-avatar {
      position: relative;
      width: 76px; height: 76px; margin-bottom: 0.55rem;
      display: grid; place-items: center;
      background: var(--ink); color: var(--card);
      border-radius: 50%;
      font-size: 1.3rem; font-weight: 600; letter-spacing: 0.02em;
    }
    /* the verified mark sits on the avatar, as Airbnb's badge does */
    .vp-avatar-mark {
      position: absolute; inset-block-end: 0; inset-inline-end: 0;
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--vp-accent);
      border: 2px solid var(--card);
    }
    .vp-avatar-mark::after {
      content: ''; position: absolute; left: 50%; top: 45%;
      width: 6px; height: 10px;
      border: solid #fff; border-width: 0 2px 2px 0;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .vp-name { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
    .vp-meta { font-size: 0.8rem; color: var(--ink-3); }
    .vp-facts { display: flex; flex-direction: column; }
    .vp-fact { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0; }
    .vp-fact + .vp-fact { border-top: 1px solid var(--hairline); }
    .vprofile .vp-num {
      font-size: 1.3rem; font-weight: 700;
      letter-spacing: -0.02em; line-height: 1.1;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }
    .vp-lbl { font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }

    /* the rating: the loudest figure on the card */
    .vp-score {
      display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
      padding: 1.2rem 1.4rem 1.3rem;
      border-top: 1px solid var(--hairline);
      color: var(--ink);
    }
    /* the number sits between two hairline rules: the same editorial device
       the rest of the site uses, in place of Airbnb's laurel ornaments */
    .vp-score-row { display: flex; align-items: center; gap: 1rem; }
    .vp-score-row::before, .vp-score-row::after {
      content: ''; width: 40px; height: 1px; background: var(--hairline-2);
    }
    .vp-score-num {
      font-size: 3.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .vp-stars { display: flex; gap: 2px; }
    .vp-stars svg { width: 12px; height: 12px; fill: var(--ink); }
    .vp-score-lbl { font-size: 0.78rem; color: var(--ink-3); }

    /* review excerpts: two columns, author row above the words */
    .vp-reviews {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
      padding: 1.2rem 1.4rem;
      border-top: 1px solid var(--hairline);
    }
    .vp-review { margin: 0; min-width: 0; }
    .vp-rev-who { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
    .vp-rev-av {
      width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--panel); color: var(--ink-2);
      font-size: 0.76rem; font-weight: 600;
    }
    html[data-theme="dark"] .vp-rev-av { background: rgba(255,255,255,0.08); color: var(--ink); }
    .vp-rev-id { display: flex; flex-direction: column; min-width: 0; }
    .vp-rev-name { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
    .vp-rev-sub { font-size: 0.68rem; color: var(--ink-3); }
    .vp-rev-text {
      margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-2);
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* specialties read as a sentence: a lead-in, then items joined by commas
       in normal text flow. A comma always stays attached to the word before
       it, so a wrap can never strand a separator at the start of a line (the
       middle-dot version did exactly that on phones). */
    .vp-chips {
      padding: 0.9rem 1.4rem;
      border-top: 1px solid var(--hairline);
      font-size: 0.8rem; line-height: 1.55; color: var(--ink-2);
    }
    .vp-chips-lbl { color: var(--ink-3); }
    .vp-chips-lbl::after { content: ':'; }
    /* each item stays whole (a track name never splits across lines); the
       comma lives inside the item, and the space + line-break opportunity come
       from the markup whitespace BETWEEN items — a trailing space inside a
       nowrap item would swallow that break opportunity */
    .vp-chip { white-space: nowrap; }
    .vp-chip:not(:last-child)::after { content: ','; }
    html[data-lang="ar"] .vp-chip:not(:last-child)::after { content: '،'; }

    /* evaluation: rows on hairlines, label left, plain value right */
    .vp-rows { padding: 0 1.4rem 0.4rem; border-top: 1px solid var(--hairline); }
    .vp-row {
      display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
      padding: 0.75rem 0;
    }
    .vp-row + .vp-row { border-top: 1px solid var(--hairline); }
    .vp-row-lbl { font-size: 0.82rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
    .vp-pill {
      font-size: 0.8rem; font-weight: 500; white-space: nowrap;
      color: var(--ink-2);
      font-variant-numeric: tabular-nums;
    }
    .vp-row:nth-child(-n+2) .vp-pill { color: var(--vp-accent); }   /* status results */
    @media (max-width: 420px) {
      .vp-host { grid-template-columns: 1fr; }
      .vp-facts { flex-direction: row; justify-content: center; text-align: center; }
      .vp-fact { flex: 1; padding: 0.4rem 0.3rem; }
      .vp-fact + .vp-fact { border-top: 0; border-inline-start: 1px solid var(--hairline); }
      .vp-reviews { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      .scr-grid { grid-template-columns: 1fr; }
      .scr-right { max-width: 440px; margin: 0 auto; width: 100%; }
    }

    /* ─── VETTING (dark editorial band) ───────────────── */
    /* ─── VETTING (vendor) — crimson band + a live verification card ─── */
    /* Was a flat near-black band ending in placeholder monogram tiles. Now it
       carries the vendor crimson, and an application walks itself through the
       same four checks listed on the left — the step rows light up in sync, so
       the demo can never drift from the copy. Driven by the vetting IIFE. */
    .vetting {
      position: relative;
      overflow: hidden;
      background: #17090C;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    }
    .vet-glow {
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(62vmin 62vmin at 88% -12%, rgba(219,75,128,0.20), transparent 68%),
        radial-gradient(46vmin 46vmin at 4% 108%, rgba(219,75,128,0.12), transparent 66%);
    }
    .vet-grid {
      position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
    }
    @media (max-width: 940px) { .vet-grid { grid-template-columns: 1fr; } }
    .vetting .h2 { color: #fff; }
    .vetting .sec-sub { color: rgba(255,255,255,0.7); }
    .vet-steps { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
    .vet-row {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 0.4rem 1rem;
      align-items: baseline;
      padding: 1rem 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      transition: border-color 0.35s ease;
    }
    .vet-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .vet-num { font-size: 0.72rem; color: rgba(255,255,255,0.4); transition: color 0.35s ease; }
    .vet-name { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.92); }
    .vet-desc { grid-column: 2; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 52ch; }
    /* the step the card is checking right now */
    .vet-row.active { border-top-color: rgba(219,75,128,0.55); }
    .vet-row.active .vet-num { color: var(--coral); }
    .vet-row.active .vet-name { color: #fff; }

    /* the application card */
    .vet-panel {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: var(--r-lg);
      padding: clamp(1.25rem, 2.4vw, 1.8rem);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
      position: sticky;
      top: 96px;
    }
    @media (max-width: 940px) { .vet-panel { position: static; margin-top: 2.5rem; } }
    .vc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .vc-label {
      font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    html[data-lang="ar"] .vc-label { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
    .vc-live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 600; color: var(--coral); }
    .vc-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: vcPulse 1.8s ease-in-out infinite; }
    @keyframes vcPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

    .vc-applicant { display: flex; align-items: center; gap: 0.85rem; margin: 1.3rem 0 1.5rem; }
    .vc-avatar {
      width: 46px; height: 46px; flex-shrink: 0;
      display: grid; place-items: center;
      border-radius: 12px;
      background: linear-gradient(140deg, #96234E, #DB4B80);
      color: #fff; font-size: 0.9rem; font-weight: 600;
    }
    .vc-who { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
    .vc-name { font-size: 1.02rem; font-weight: 600; color: #fff; }
    .vc-meta { font-size: 0.8rem; color: rgba(255,255,255,0.58); }

    .vc-check {
      display: flex; align-items: center; gap: 0.7rem;
      padding: 0.7rem 0;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .vc-tick {
      width: 20px; height: 20px; flex-shrink: 0;
      display: grid; place-items: center;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.22);
      color: transparent;
      transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
    }
    .vc-tick svg { width: 11px; height: 11px; }
    .vc-check-name { font-size: 0.88rem; color: rgba(255,255,255,0.55); transition: color 0.35s ease; }
    .vc-check-state { margin-inline-start: auto; font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.35); white-space: nowrap; }
    /* checking */
    .vc-check.is-check .vc-tick { border-color: var(--coral); animation: vcSpin 1s linear infinite; }
    .vc-check.is-check .vc-check-name { color: #fff; }
    .vc-check.is-check .vc-check-state { color: var(--coral); }
    @keyframes vcSpin { to { transform: rotate(360deg); } }
    .vc-check.is-check .vc-tick { border-inline-end-color: transparent; }
    /* verified */
    .vc-check.is-done .vc-tick { background: var(--coral); border-color: var(--coral); color: #fff; }
    .vc-check.is-done .vc-check-name { color: rgba(255,255,255,0.9); }
    .vc-check.is-done .vc-check-state { color: rgba(255,255,255,0.5); }

    .vc-badge {
      margin-top: 1.4rem;
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.8rem 1rem;
      border-radius: 999px;
      background: #fff; color: #17090C;
      font-size: 0.85rem; font-weight: 600;
      opacity: 0; transform: scale(0.9);
      transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .vc-badge svg { width: 16px; height: 16px; color: var(--coral-deep); }
    .vc-badge.on { opacity: 1; transform: scale(1); }

    @media (prefers-reduced-motion: reduce) {
      .vc-live i, .vc-check.is-check .vc-tick { animation: none; }
      .vc-tick, .vc-badge, .vet-row, .vet-num, .vc-check-name { transition: none; }
    }

    .vet-foot {
      grid-column: 1 / -1;
      margin-top: 2rem;
      font-family: inherit;
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--dark-ink-3);
    }
    html[data-lang="ar"] .vet-foot { font-family: 'Cairo', sans-serif; letter-spacing: 0; font-size: 0.8rem; }

    /* ─── TRUST (raised band + white cards) ───────────── */
    .trust {
      background: var(--panel);
      border-top: 1px solid var(--hairline);
      padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    }
    .trust-grid {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .trust-card {
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--r-md);
      padding: 1.6rem 1.7rem;
      box-shadow: var(--shadow-1);
    }
    .trust-card svg { width: 20px; height: 20px; stroke: var(--indigo); fill: none; stroke-width: 1.8; margin-bottom: 0.9rem; }
    html[data-theme="dark"] .trust-card svg { stroke: var(--experience-accent); }
    .trust-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
    .trust-desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
    .trust-notes { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
    .trust-note { font-size: 0.84rem; color: var(--ink-3); line-height: 1.6; }
    .trust-note strong { color: var(--ink-2); font-weight: 500; }

    /* ─── ABOUT ───────────────────────────────────────── */
    .about-body {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
    }
    .about-story p {
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--ink-2);
    }
    .about-story p + p { margin-top: 1.1rem; }
    .about-facts { display: flex; flex-direction: column; }
    .about-fact {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 0;
      border-top: 1px solid var(--hairline);
    }
    .about-fact:last-child { border-bottom: 1px solid var(--hairline); }
    .about-fact dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
    html[data-lang="ar"] .about-fact dt { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
    .about-fact dd { font-size: 0.92rem; font-weight: 500; color: var(--ink); text-align: end; }
    .about-values {
      margin-top: clamp(2.5rem, 5vw, 3.5rem);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .about-value {
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: var(--r-md);
      padding: 1.6rem 1.7rem;
    }
    .av-num { display: block; color: var(--ink-3); margin-bottom: 0.9rem; }
    .av-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
    .av-desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
    .about-fact dd a { color: inherit; text-underline-offset: 3px; }
    .about-fact dd a:hover { color: var(--indigo); }

    /* ─── VISION 2030 page ─────────────────────────────────
       Numbered rows on hairlines (the site's editorial device): each row
       pairs one published Vision target with what Ertah does toward it.
       Text only, deliberately no Vision 2030 logo (an official mark). */
    .v30-eyebrow {
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--indigo); margin-bottom: 1rem;
    }
    html[data-theme="dark"] .v30-eyebrow { color: var(--experience-accent); }
    html[data-lang="ar"] .v30-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
    .v30-section { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
    .v30-rows { margin-top: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--hairline); }
    .v30-row {
      display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
      gap: 0.4rem 1rem;
      padding: clamp(1.4rem, 3vw, 2rem) 0;
      border-bottom: 1px solid var(--hairline);
    }
    .v30-num { font-size: 0.78rem; font-weight: 600; color: var(--indigo); padding-top: 0.35rem; }
    html[data-theme="dark"] .v30-num { color: var(--experience-accent); }
    .v30-title { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
    .v30-pair {
      grid-column: 2;
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem clamp(1.5rem, 4vw, 3rem);
      margin-top: 0.6rem;
    }
    .v30-lbl {
      display: block; margin-bottom: 0.3rem;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
    }
    html[data-lang="ar"] .v30-lbl { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
    .v30-pair p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }
    .v30-note { margin-top: 2rem; font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); max-width: 70ch; }
    .v30-note a { color: inherit; text-underline-offset: 3px; }
    .v30-next { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
    @media (max-width: 720px) {
      .v30-row { grid-template-columns: 2.2rem minmax(0, 1fr); }
      .v30-pair { grid-template-columns: minmax(0, 1fr); }
    }

    /* ─── FINANCING (Gulf International Bank / GIB partnership) ─── */
    .fin-grid {
      margin-top: clamp(2rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .fin-card {
      background: var(--panel);
      border: 1px solid var(--hairline);
      border-radius: var(--r-md);
      padding: 1.6rem 1.7rem;
    }
    .fin-card svg { width: 20px; height: 20px; stroke: var(--indigo); fill: none; stroke-width: 1.8; margin-bottom: 0.9rem; }
    html[data-theme="dark"] .fin-card svg { stroke: var(--experience-accent); }
    .fin-title { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
    .fin-desc { font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
    /* ─── FINANCING BAND (seeker) — co-branded with the partner bank ─── */
    /* The partner's own palette (see assets/gib-logo.png): GIB yellow #FFC62B
       as the one accent, a deep charcoal from GIB's grey #525659 for the body,
       and a light logo strip so both marks sit unaltered (a partner logo is
       never recoloured). This yellow belongs to this partnership block alone,
       do not spread it. */
    .fin-band {
      --gold: #FFC62B;        /* GIB yellow */
      --gold-bright: #FFD45E; /* lighter step for display text on charcoal */
      --partner-ink: #2B2E31; /* GIB grey, deepened for the band */
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
      background: var(--partner-ink);
      color: #fff;
      box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6);
    }
    /* co-brand strip: both logos in their own colours on paper, closed by a
       yellow rule (the same rule that sits under GIB's wordmark) */
    .fb-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      padding: 1.15rem clamp(1.4rem, 3vw, 2.6rem);
      background: #FAFAF8;
      border-bottom: 2px solid var(--gold);
    }
    .fb-brands { display: flex; align-items: center; gap: 1.1rem; }
    .fb-logo { display: block; width: auto; }
    .fb-logo-ertah { height: 26px; }
    .fb-logo-bank { height: 54px; }   /* the mark carries Arabic text; it needs the height to stay legible */
    .fb-sep { width: 1px; height: 34px; background: rgba(43,46,49,0.18); }
    .fb-partner {
      font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #63676B;
    }
    html[data-lang="ar"] .fb-partner { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

    .fb-main {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: center;
      padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.4rem, 3vw, 2.6rem);
    }
    @media (max-width: 900px) { .fb-main { grid-template-columns: 1fr; } }
    .fb-eyebrow {
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.1rem;
    }
    html[data-lang="ar"] .fb-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
    .fb-h2 {
      font-size: clamp(2.1rem, 4.2vw, 3.2rem);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.05;
      color: #fff;
    }
    .fb-h2 .fb-gold { display: block; font-style: normal; color: var(--gold-bright); }
    /* Cairo needs real leading and no negative tracking — at 1.05 the two
       display lines collide in Arabic */
    html[data-lang="ar"] .fb-h2 { line-height: 1.5; letter-spacing: 0; }
    .fb-lead {
      margin-top: 1.3rem;
      font-size: 1rem;
      line-height: 1.65;
      color: rgba(255,255,255,0.74);
      max-width: 44ch;
    }
    .fb-actions { margin-top: 2rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
    .fb-btn {
      background: var(--gold);
      color: var(--partner-ink);
      border: none;
      font-weight: 600;
      border-radius: 999px;
      padding: 0.85rem 1.6rem;
    }
    .fb-btn:hover { background: var(--gold-bright); }
    .fb-tag {
      display: inline-flex; align-items: center; gap: 0.5rem;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 999px;
      padding: 0.7rem 1.1rem;
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.78);
    }
    html[data-lang="ar"] .fb-tag { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
    .fb-tag svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }

    /* milestone panel — an EXAMPLE of staged disbursement, no figures */
    .fb-panel {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-md);
      padding: clamp(1.2rem, 2.4vw, 1.75rem);
    }
    .fb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
    .fb-panel-title {
      font-size: 0.68rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
    html[data-lang="ar"] .fb-panel-title { letter-spacing: 0; text-transform: none; font-size: 0.8rem; }
    .fb-chip {
      background: var(--gold);
      color: var(--partner-ink);
      border-radius: 999px;
      padding: 0.22rem 0.7rem;
      font-size: 0.7rem; font-weight: 600;
      white-space: nowrap;
    }
    .fb-row + .fb-row { margin-top: 1.15rem; }
    .fb-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
    .fb-row-name { font-size: 0.95rem; font-weight: 500; color: #fff; }
    .fb-row-state {
      font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      white-space: nowrap;
    }
    html[data-lang="ar"] .fb-row-state { letter-spacing: 0; text-transform: none; font-size: 0.76rem; }
    .fb-done { color: var(--gold); }
    .fb-live { color: rgba(255,255,255,0.8); }
    .fb-wait { color: rgba(255,255,255,0.4); }
    .fb-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
    .fb-fill { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
    .fb-row:has(.fb-live) .fb-fill { background: rgba(255,198,43,0.55); }

    /* the three financing products, kept in full under the pitch */
    .fb-products {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(1.5rem, 3vw, 2.5rem);
      padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2.6rem);
      border-top: 1px solid rgba(255,255,255,0.09);
    }
    @media (max-width: 780px) { .fb-products { grid-template-columns: 1fr; } }
    .fb-prod-ic { width: 20px; height: 20px; color: var(--gold); margin-bottom: 0.8rem; }
    .fb-prod-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.4rem; color: #fff; }
    .fb-prod-desc { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.62); }
    .fb-note {
      padding: 0 clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.1rem);
      font-size: 0.78rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.42);
      max-width: 70ch;
    }

    /* ─── FAQ (hairline rows) ─────────────────────────── */
    .faq-list { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
    .faq-item { border-top: 1px solid var(--hairline); }
    .faq-list .faq-item:last-child { border-bottom: 1px solid var(--hairline); }
    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.3rem 0;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      color: var(--ink);
      text-align: start;
      cursor: pointer;
    }
    .faq-icon { flex-shrink: 0; stroke: var(--ink-3); transition: transform 0.25s ease; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .faq-a { display: none; }
    .faq-item.open .faq-a { display: block; animation: faqIn 0.25s ease-out; }
    @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
    .faq-a p {
      padding: 0 0 1.4rem;
      font-size: 0.92rem;
      line-height: 1.7;
      color: var(--ink-2);
      max-width: 680px;
    }

    /* ─── CTA (the single brand-color moment) ─────────── */
    .cta {
      /* the single brand-color moment — and it follows the audience, so the
         vendor CTA lands in vendor coral rather than seeker indigo */
      position: relative;
      overflow: hidden;
      background: var(--indigo);
      padding: clamp(5.5rem, 11vw, 9rem) 0;
      text-align: center;
    }
    html[data-page="vendor"] .cta { background: var(--coral); }
    /* white sits at ~3:1 on the vendor coral — fine for the display heading,
       so the tagline goes full-strength rather than the 78% used on indigo */
    html[data-page="vendor"] .cta-sub { color: #fff; }
    html[data-page="b2b"] .cta { background: var(--b2b); }
    .cta-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .cta-inner { position: relative; z-index: 1; }
    .cta-h2 {
      font-size: clamp(2.1rem, 4.6vw, 3.4rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: #FFFFFF;
    }
    .cta-sub { margin-top: 1rem; font-size: 1.05rem; color: rgba(255,255,255,0.78); }
    .cta-actions { margin-top: 2.2rem; display: flex; justify-content: center; }

    /* ─── FOOTER (dark inset card) ────────────────────── */
    .footer-shell { padding: 1.5rem; }
    footer {
      background: var(--dark-panel);
      border-radius: var(--r-lg);
      max-width: calc(var(--wrap) + 3rem);
      margin: 0 auto;
      padding: clamp(2.5rem, 5vw, 4rem) max(clamp(1.5rem, 4vw, 3.5rem), env(safe-area-inset-left), env(safe-area-inset-right)) calc(clamp(1.75rem, 3vw, 2.25rem) + env(safe-area-inset-bottom));
      color: var(--dark-ink-2);
    }
    .foot-top {
      display: grid;
      grid-template-columns: 1.4fr repeat(3, 1fr);
      gap: 2.5rem;
      padding-bottom: clamp(2rem, 4vw, 3rem);
    }
    .foot-brand { display: flex; flex-direction: column; gap: 0.9rem; }
    .foot-logo { display: flex; align-items: center; }
    .foot-logo-img { height: 30px; width: auto; display: block; }
    .foot-tag { font-size: 0.92rem; line-height: 1.6; color: var(--dark-ink-2); max-width: 240px; }
    .foot-col-h {
      font-family: inherit;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dark-ink-3);
      margin-bottom: 1.1rem;
    }
    html[data-lang="ar"] .foot-col-h { font-family: 'Cairo', sans-serif; letter-spacing: 0; font-size: 0.78rem; }
    .foot-col a,
    .foot-col button[data-preview] {           /* placeholder destinations are buttons until they have URLs */
      display: block; width: 100%;               /* a block <button> still shrink-wraps; match the link's full row */
      color: var(--dark-ink-2);
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.32rem 0;
    }
    .foot-col a:hover, .foot-col button[data-preview]:hover { color: var(--dark-ink); }
    .foot-bottom {
      border-top: 1px solid var(--dark-line);
      padding-top: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      font-size: 0.8rem;
      color: var(--dark-ink-3);
    }
    .foot-bottom a, .foot-bottom button[data-preview] { color: var(--dark-ink-3); text-decoration: none; }
    .foot-bottom a:hover, .foot-bottom button[data-preview]:hover { color: var(--dark-ink); }
    .foot-legal { display: flex; gap: 1.25rem; }

    /* ─── RESPONSIVE ──────────────────────────────────── */
    @media (max-width: 960px) {
      .nav-links { display: none; }
      .vet-desc { grid-column: 2; }
      .fin-grid { grid-template-columns: 1fr; }
      .foot-top { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .page-toggle { margin-left: auto; }
      html[data-lang="ar"] .page-toggle { margin-left: 0; margin-right: auto; }
      nav .btn { display: none; }
      .trust-grid, .fin-grid { grid-template-columns: 1fr; }
      .about-body { grid-template-columns: 1fr; }
      .about-values { grid-template-columns: 1fr; }
      .tl-head { flex-direction: column; align-items: flex-start; gap: 0; }
      .way-row { flex-wrap: wrap; }
      .wr-desc { flex-basis: 100%; padding-left: calc(22px + 1.1rem); }
      html[data-lang="ar"] .wr-desc { padding-left: 0; padding-right: calc(22px + 1.1rem); }
      /* demo window: long mono metadata wraps under the milestone name */
      .dw-row { flex-wrap: wrap; }
      .dw-meta { white-space: normal; flex-basis: 100%; padding-left: calc(20px + 0.9rem); }
      html[data-lang="ar"] .dw-meta { padding-left: 0; padding-right: calc(20px + 0.9rem); }
      .dw-row .dw-track { max-width: none; }
      .footer-shell { padding: 0.75rem; }
      .foot-top { grid-template-columns: 1fr; gap: 1.75rem; }
    }
    @media (max-width: 480px) {
      /* nav compacts: smaller logo, tighter toggle, everything fits 375px */
      .nav-inner { gap: 0.6rem; padding-left: 0.9rem; padding-right: 0.9rem; }
      .nav-logo-img { height: 22px; }
      .page-toggle { gap: 1rem; }
      .pt-btn { font-size: 0.8rem; }
      .btn-icon { width: 32px; height: 32px; }
      .page-toggle { margin-left: 0; }
      .nav-cta { margin-left: auto; }
      html[data-lang="ar"] .nav-cta { margin-left: 0; margin-right: auto; }
    }

    /* ─── REDUCED MOTION ──────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .rv, .faq-icon { transition: none !important; }
      .tour-bubble { animation: none !important; transform: none; }
      .pf-node.active .pf-ic::after { animation: none !important; opacity: 0; }
      .faq-item.open .faq-a { animation: none; }
      .pf-fill { transition: none !important; }
      .mb-chip, .mb-card { transition: none !important; }
      .mb-card { transform: none; }
      .rv { opacity: 1; transform: none; }
    }

    /* ─── SUBPAGE HEADER (about.html etc.) ─────────────── */
    main > .sec:first-child { border-top: none; padding-top: clamp(3rem, 6vw, 5rem); }