/* ============================================================================
   DEVETRUST — commercial site stylesheet (compiled, no CDN, RTL-first)
   Airy LIGHT base (pearl-lavender ground, navy ink). The Act I hero and the
   Act VI CTA remain DARK cinematic bands — the light page emerges FROM them
   (world-shift). Logical properties only (RTL/LTR share one sheet).
   Palette per BUILD-BLUEPRINT §2.1 accents (crimson/lavender/navy), re-based
   light per founder directive (2026-07-10). Brand accent hexes unchanged.
   ============================================================================ */

/* ---- fonts (self-hosted) ------------------------------------------------- */
@font-face{font-family:"El Messiri";font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/el-messiri-arabic-400.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/el-messiri-latin-400.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"El Messiri";font-weight:500;font-style:normal;font-display:swap;
  src:url("../assets/fonts/el-messiri-arabic-500.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/el-messiri-latin-500.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"El Messiri";font-weight:600;font-style:normal;font-display:swap;
  src:url("../assets/fonts/el-messiri-arabic-600.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/el-messiri-latin-600.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"El Messiri";font-weight:700;font-style:normal;font-display:swap;
  src:url("../assets/fonts/el-messiri-arabic-700.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/el-messiri-latin-700.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Tajawal";font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/tajawal-arabic-400.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/tajawal-latin-400.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Tajawal";font-weight:500;font-style:normal;font-display:swap;
  src:url("../assets/fonts/tajawal-arabic-500.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/tajawal-latin-500.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Tajawal";font-weight:700;font-style:normal;font-display:swap;
  src:url("../assets/fonts/tajawal-arabic-700.woff2?v=mtnsq5wa") format("woff2"),url("../assets/fonts/tajawal-latin-700.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-400.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-500.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-600.woff2?v=mtnsq5wa") format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/inter-latin-700.woff2?v=mtnsq5wa") format("woff2")}

/* ---- tokens -------------------------------------------------------------- */
:root{
  /* dark accents + cinematic grounds. Navy is now an ACCENT (crest, badges,
     deep numerals); --navy-deep is the DARK hero/CTA film band. */
  --navy:#1b2a52; --navy-deep:#10193a; --navy-veil:#232f5e;
  /* light grounds */
  --paper:#eef0f7; --paper-deep:#e4e7f2; --paper-veil:#f7f8fc; --card:#ffffff;
  /* ink (dark text on light) — --ink-faint darkened #585f84→#4a5175 so every
     caption/meta clears WCAG AA (≥4.5:1) on white, --paper and --paper-veil */
  --ink:#161f3d; --ink-body:#333a5c; --ink-soft:#333a5c; --ink-faint:#4a5175;
  /* hairline on light grounds (name kept for minimal churn) */
  --navy-line:#d7dcec;
  /* accents */
  --crimson:#d64257; --crimson-deep:#b3283d;
  --lavender:#6353c1;               /* deepened so it reads on light — text/lines (AA on light grounds) */
  --lavender-glow:#a79be0;          /* lighter lavender for glows/gradients */
  --lavender-dim:rgba(167,155,224,.4);
  --ok:#1c7a43; --warn:#c07d1c; --alert:#cf4257;
  /* elevation (matters now — we lose the dark-glow depth) */
  --sh-sm:0 2px 10px -4px rgba(22,31,61,.12);
  --sh-md:0 18px 40px -20px rgba(22,31,61,.20);
  --sh-lg:0 44px 96px -46px rgba(22,31,61,.26);
  --maxw:1280px; --ease:cubic-bezier(.22,.61,.36,1);
  --fs-display:"El Messiri"; --fs-body:"Tajawal";
  --ambient:var(--paper-deep);
  /* ---- TYPE SCALE (blueprint §1 — exact rem/weight/line-height per token;
     El Messiri/Inter headings · Tajawal/Inter body · weights 400/500/700;
     negative tracking on LATIN headings only, never Arabic). ---- */
  --fs-h1:clamp(2.75rem, 1.6rem + 4.5vw, 3.5rem);     /* hero headline ONLY (56px) */
  --fs-h2:clamp(2.1rem, 1.35rem + 3vw, 3.1rem);       /* act titles — v4 classic drama (was 40px cap) */
  --fs-h3:clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);  /* card / feature titles (26px) */
  --fs-lead:clamp(1.125rem, 1rem + 0.6vw, 1.375rem);  /* subhead / act intro (22px) */
  --fs-body-sz:1.0625rem;                             /* body (17px) */
  --fs-eyebrow:.8125rem;                              /* eyebrow (13px) */
  --fs-caption:.875rem;                               /* caption (14px) */
  --fs-stat:clamp(2.25rem, 1.8rem + 2vw, 3rem);       /* stat numerals (48px) */
  --lh-tight:1.08; --lh-head:1.15; --lh-body:1.6;
  /* ---- SPACING / RHYTHM (blueprint §4 — premium ~80px-class band, fluid;
     restored now that the page is 6 acts, not 15 sections). ---- */
  --sect-pad:clamp(64px,7vh,96px);       /* each act top & bottom (~80px band) */
  --sect-pad-sm:clamp(48px,5vh,72px);    /* utility / interior sections */
  --sect-pad-x:clamp(24px,5vw,80px);     /* logical inline padding */
  --head-gap:clamp(20px,3vh,40px);       /* eyebrow→h2→lead→grid stack */
  --grid-gap:clamp(20px,2vw,32px);       /* between cards */
  --card-pad:clamp(20px,2vw,28px);       /* inside cards */
  --stack-sm:12px; --stack-md:20px; --stack-lg:32px;
  /* ---- site.css governance tokens (2026-07-30 unification) --------------
     Extends the shared vocabulary so interior-page (site.css) literals map to
     named tokens the gates can enforce — the same regime v6.css already lives
     under. Values preserve the EXISTING rendered look (governance refactor,
     not a redesign). ---- */
  /* card-radius stepped scale — the deliberate interior card family that sits
     in the gap between the base 12px and the 999px pill. */
  --radius-16:16px; --radius-18:18px; --radius-20:20px; --radius-22:22px;
  /* typography: --fs-micro is one tier below --fs-eyebrow (micro labels/badges
     converge on 11px); --fs-h2-sm fills the empty H3(26px)->H2(33.6px) gap for
     section/stat sub-heads (25.6-38.4px). */
  --fs-micro:.6875rem;                 /* 11px */
  --fs-h2-sm:clamp(1.6rem,3.4vw,2.4rem);
  /* AA-darkened accent inks for text-on-tint (mirror --crimson/--crimson-deep). */
  --ok-deep:#1a6e3c; --warn-deep:#8a5a12;
  /* repeated card sheen (2nd gradient stop; was a byte-identical literal x3). */
  --card-sheen:#f2f3fb;
  /* device-mock bezel skin (COLOURS only; the mock GEOMETRY stays literal and
     is gate-exempt as sanctioned device geometry). */
  --device-sheen-a:#eaecf5; --device-sheen-b:#e7e9f4;
  --device-stand-a:#e6e8f2; --device-stand-b:#d5dae9;
  /* third-party brand colour (WhatsApp) — documented exception, not palette. */
  --brand-whatsapp:#2bb45f;
  /* chrome shadows: sticky header + floating dropdown panel (distinct geometry
     from the --sh-sm/md/lg card-elevation family). */
  --sh-header:0 1px 0 rgba(22,31,61,.07),0 6px 24px -18px rgba(22,31,61,.24);
  --sh-dropdown:0 12px 32px rgba(22,31,61,.16),0 2px 6px rgba(22,31,61,.08);
  /* coloured "glow" shadows for CTAs / active-states / status dots — the
     grayscale --sh-* family cannot carry these brand accents. */
  --glow-crimson-sm:0 10px 26px -12px rgba(214,66,87,.5);
  --glow-crimson-md:0 16px 40px -16px rgba(214,66,87,.55);
  --glow-crimson-lg:0 22px 50px -16px rgba(214,66,87,.72);
  --glow-crimson-dot:0 0 14px rgba(214,66,87,.7);
  --glow-crimson-featured:0 30px 70px -42px rgba(214,66,87,.45);
  --glow-ok-dot:0 0 8px rgba(47,158,87,.5);
  --glow-lavender-dot:0 0 8px rgba(125,111,206,.5);
  --glow-lavender-line:0 0 12px var(--lavender);
  /* ---- interior type-scale tokens (2026-07-30 faithful re-tokenization) --
     Each carries the EXACT pre-unification value (rendered pixel-identical to
     HEAD). Governance without a redesign. ---- */
  --fs-int-1:var(--fs-body-sz);
  --fs-int-2:clamp(19px,2.2vw,25px);
  --fs-int-3:15.5px;
  --fs-int-4:9px;
  --fs-int-5:15px;
  --fs-int-6:13px;
  --fs-int-7:14px;
  --fs-int-8:19px;
  --fs-int-9:var(--fs-eyebrow);
  --fs-int-10:16px;
  --fs-int-11:11px;
  --fs-int-12:var(--fs-h1);
  --fs-int-13:var(--fs-lead);
  --fs-int-14:clamp(1.7rem,1.2rem+1.4vw,2.15rem);
  --fs-int-15:var(--fs-caption);
  --fs-int-16:12.5px;
  --fs-int-17:clamp(1.9rem,4.5vw,3.1rem);
  --fs-int-18:clamp(1.3rem,2.8vw,2.1rem);
  --fs-int-19:var(--fs-h2);
  --fs-int-20:clamp(1.1rem,2.2vw,1.5rem);
  --fs-int-21:1.15rem;
  --fs-int-22:.92rem;
  --fs-int-23:.85rem;
  --fs-int-24:.9rem;
  --fs-int-25:.72rem;
  --fs-int-26:.98rem;
  --fs-int-27:clamp(1.3rem,2.4vw,1.7rem);
  --fs-int-28:.82rem;
  --fs-int-29:.8rem;
  --fs-int-30:var(--fs-stat);
  --fs-int-31:.78rem;
  --fs-int-32:clamp(2.4rem,7vw,5rem);
  --fs-int-33:clamp(1rem,1.6vw,1.2rem);
  --fs-int-34:clamp(2.2rem,6vw,4.4rem);
  --fs-int-35:clamp(1.05rem,1.7vw,1.3rem);
  --fs-int-36:var(--fs-h3);
  --fs-int-37:.95rem;
  --fs-int-38:12px;
  --fs-int-39:1.5rem;
  --fs-int-40:1.1rem;
  --fs-int-41:.94rem;
  --fs-int-42:clamp(1.9rem,5vw,3.2rem);
  --fs-int-43:clamp(2rem,5vw,3.2rem);
  --fs-int-44:1.4rem;
  --fs-int-45:clamp(5rem,20vw,12rem);
  --fs-int-46:clamp(1.8rem,5vw,3rem);
  --fs-int-47:28px;
  --fs-int-48:clamp(1.7rem,3.6vw,2.6rem);
  --fs-int-49:1.2rem;
  --fs-int-50:14.5px;
  --fs-int-51:1.02rem;
  --fs-int-52:clamp(1.2rem,2.4vw,1.55rem);
  --fs-int-53:clamp(1.6rem,4vw,2.4rem);
  --fs-int-54:clamp(1.3rem,2.6vw,1.7rem);
  --fs-int-55:1.3rem;
  --fs-int-56:.88rem;
  --fs-int-57:clamp(1.5rem,3vw,2.1rem);
  --fs-int-58:clamp(1.7rem,1.2rem+1.4vw,2.3rem);
  --fs-int-59:clamp(1.25rem,2.4vw,1.8rem);
  --fs-int-60:clamp(.98rem,1.4vw,1.15rem);
  --fs-int-61:clamp(2rem,4vw,2.9rem);

}
/* v4 — CLASSIC TITLE SYSTEM: the founder prefers the classic variant's title
   treatment. English display now carries El Messiri too (the classic's actual
   rendered character; latin subsets are self-hosted), body stays Inter. */
:root[data-locale="en"]{--fs-display:"El Messiri"; --fs-body:"Inter";}
/* Arabic reads denser + needs diacritic headroom → slightly higher line-heights */
:root[data-locale="ar"]{--lh-head:1.2; --lh-body:1.65;}

/* Dark cinematic bands (the world the light page emerges from). Re-map the ink
   / line / lavender tokens to their light-on-dark values so every existing rule
   inside these sections renders correctly without per-rule edits.
   NOTE (2026-07-13): #hero was REMOVED from this list — the hero is now a LIGHT
   ground (dark-ink headline over a page-color gradient that melts into the video),
   so it inherits the light :root tokens. Only #cta and device screens stay dark. */
.device .screen{
  --ink:#ffffff; --ink-body:#c6cbe0; --ink-soft:#c6cbe0; --ink-faint:#8b93b8;
  --navy-line:#2c3a68; --lavender:#a79be0;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%} html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink-body);
  font-family:var(--fs-body),"Tajawal","Inter",system-ui,sans-serif;font-weight:400;
  font-size:var(--fs-int-1);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;font-variant-ligatures:common-ligatures;
  text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--crimson);color:var(--card)}
img{max-width:100%;display:block}
/* Two-color type discipline: navy headings, slate body, red accent-only.
   Negative tracking is LATIN-only (Arabic must never be letter-spaced). */
h1,h2,h3,.display{font-family:var(--fs-display),"El Messiri",serif;font-weight:700;
  line-height:var(--lh-head);letter-spacing:normal;color:var(--ink);font-variant-ligatures:common-ligatures}
:root[data-locale="en"] h1,:root[data-locale="en"] h2,:root[data-locale="en"] .display{letter-spacing:-.02em}
:root[data-locale="en"] h3{letter-spacing:-.01em}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- fixed cinematic layers --------------------------------------------- */
#ambient{position:fixed;inset:0;z-index:-4;background:var(--ambient)}
#glow{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 85% at 50% -5%,rgba(167,155,224,.18),rgba(238,240,247,0) 60%)}
#vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(135% 120% at 50% 42%,transparent 62%,rgba(22,31,61,.05) 100%)}
#grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:70;transform-origin:var(--pbar-origin,right);transform:scaleX(0);
  background:linear-gradient(90deg,var(--crimson),var(--crimson-deep))}
:root[dir="ltr"] #progress{--pbar-origin:left}

/* ---- header -------------------------------------------------------------- */
#site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(12px,2vw,22px) clamp(16px,4vw,54px);will-change:transform;
  transition:transform .6s var(--ease),background .6s,backdrop-filter .6s,box-shadow .6s,padding .3s}
#site-header.hidden{transform:translateY(-118%)}
/* Scrolled state: near-opaque frosted bar (≥92% per founder directive #1) with a
   hairline bottom border + very light shadow — solid, clear, no layout jump. */
#site-header.solid{background:rgba(247,248,252,.94);backdrop-filter:blur(16px);
  box-shadow:var(--sh-header);
  padding-block:clamp(9px,1.4vw,14px)}
/* Home now opens on a LIGHT hero, so the header carries DARK ink like everywhere
   else. It renders as a solid frosted light bar from the very top (no white-on-
   light chrome, no seam) — honouring the "sticky solid nav" directive. The JS
   still toggles .solid on scroll for the tighter padding; the frosted background
   is present from scroll 0 on home. */
body.light-hero #site-header{background:rgba(247,248,252,.92);backdrop-filter:blur(16px);
  box-shadow:var(--sh-header)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand img{height:clamp(26px,3vw,34px);width:auto}
.brand .wm{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-int-2);color:var(--ink);white-space:nowrap}
.brand .wm b{color:var(--crimson);font-weight:700}
.nav-main{display:flex;align-items:center;gap:clamp(6px,1.6vw,26px)}
.nav-item{position:relative}
.nav-item>a,.nav-item>button{color:var(--ink-soft);background:none;border:0;cursor:pointer;font-family:inherit;
  text-decoration:none;font-size:var(--fs-int-3);font-weight:600;letter-spacing:0;padding:8px 6px;transition:color .3s;display:inline-flex;align-items:center;gap:5px}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button{color:var(--ink)}
.nav-item .caret{font-size:var(--fs-int-4);opacity:.7;transition:transform .3s}
.nav-item.open .caret{transform:rotate(180deg)}
/* SOLID high-contrast panel. The panel re-declares the DARK ink tokens so it
   ALWAYS renders dark-on-white regardless of header context (belt-and-braces now
   that the home header is a light frosted bar; kept so no future header remap can
   wash the panels out — the original founder screenshot complaint). */
.dropdown{--ink:#141a33;--ink-soft:#333a5c;--ink-faint:#555b7a;--lavender:#6353c1;--navy-line:#e3e6f1;
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;min-width:238px;
  background:var(--card);border:1px solid rgba(22,31,61,.08);border-radius:12px;
  padding:12px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  box-shadow:var(--sh-dropdown);z-index:5}
.nav-item.open .dropdown,
.nav-item.has-dd:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-int-5);font-weight:600;transition:background .2s,color .2s}
.dropdown a:hover{background:rgba(99,83,193,.1);color:var(--lavender)}
.dropdown a small{display:block;color:var(--ink-faint);font-size:var(--fs-int-6);font-weight:400;margin-block-start:3px;line-height:1.4}
.utility{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);flex-shrink:0}
.util-link{color:var(--ink-faint);text-decoration:none;font-size:var(--fs-int-6);font-weight:500;transition:color .3s;white-space:nowrap}
.util-link:hover{color:var(--lavender)}
.lang-toggle{color:var(--ink-soft);text-decoration:none;font-size:var(--fs-int-6);font-weight:600;border:1px solid var(--navy-line);border-radius:999px;padding:5px 12px;transition:all .3s}
.lang-toggle:hover{border-color:var(--lavender);color:var(--ink)}
.nav-cta{background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:var(--card)!important;border:0;border-radius:999px;
  padding:10px 22px;font-weight:600;font-size:var(--fs-int-7);text-decoration:none;white-space:nowrap;transition:transform .3s,box-shadow .3s;box-shadow:var(--glow-crimson-md)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--glow-crimson-lg)}
.hamburger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);transition:all .3s}
.hamburger.open span{background:var(--ink)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobile-panel{position:fixed;inset:0;z-index:49;background:rgba(247,248,252,.98);backdrop-filter:blur(10px);
  padding:88px clamp(22px,6vw,44px) 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-14px);transition:all .3s var(--ease)}
.mobile-panel.open{opacity:1;visibility:visible;transform:none}
.mobile-panel a{display:block;color:var(--ink);text-decoration:none;font-size:var(--fs-int-8);font-weight:600;padding:14px 0;border-block-end:1px solid var(--navy-line)}
.mobile-panel a small{display:block;color:var(--ink-faint);font-size:var(--fs-int-6);font-weight:400}
.mobile-panel .m-group{margin-block-end:8px}
.mobile-panel .m-cta{background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:var(--card);text-align:center;border-radius:999px;margin-block-start:22px;border:0}

/* ---- layout helpers ------------------------------------------------------ */
section{position:relative}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,60px)}
/* eyebrow / act-kicker label — brand-red accent, 13px 700. Arabic is NEVER
   letter-spaced or uppercased; the Latin mirror gets +.08em tracking + caps. */
.eyebrow,.ak{display:block;font-family:var(--fs-body),sans-serif;font-size:var(--fs-int-9);font-weight:700;color:var(--crimson);line-height:1.4}
:root[data-locale="en"] .eyebrow,:root[data-locale="en"] .ak{letter-spacing:.08em;text-transform:uppercase}
.idx{font-family:var(--fs-display),serif;font-size:var(--fs-int-7);color:var(--lavender);font-weight:600}
:root[data-locale="en"] .idx{letter-spacing:.06em}
.lav-text{color:var(--lavender)}
.crim-text{color:var(--crimson)}
/* Reference enterprise quiet reveal: small fade-up (≤16px), 600–900ms, single ease,
   transform/opacity only. Section-level; grids add a ≤80ms per-child stagger. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.grid-stagger>.reveal:nth-child(2){transition-delay:.06s}
.grid-stagger>.reveal:nth-child(3){transition-delay:.12s}
.grid-stagger>.reveal:nth-child(4){transition-delay:.18s}
.grid-stagger>.reveal:nth-child(5){transition-delay:.24s}
.grid-stagger>.reveal:nth-child(6){transition-delay:.30s}
/* No-JS / SEO safety: JS-hidden initial states are visible when JS is off.
   With JS, the inline head script adds html.js so the entrance from-state applies (no FOUC). */
html:not(.js) .reveal,
html:not(.js) .emblem{
  opacity:1!important;transform:none!important;clip-path:none!important}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.fallback-host{position:relative}
.fallback-host.is-missing{background-image:linear-gradient(135deg,var(--paper-veil),var(--paper-deep) 82%)!important;background-size:cover}
.fallback-host.is-missing::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%,rgba(167,155,224,.16),transparent 70%)}

/* buttons */
.btn{border-radius:999px;padding:15px 34px;font-family:var(--fs-display),serif;font-size:var(--fs-int-10);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s}
.btn-primary{background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:var(--card);box-shadow:var(--glow-crimson-md)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--glow-crimson-lg)}
.btn-ghost{border:1px solid var(--lavender-dim);color:var(--lavender);background:rgba(167,155,224,.08)}
.btn-ghost:hover{background:rgba(167,155,224,.18);color:var(--ink);transform:translateY(-3px)}
/* Secondary CTA — was white-on-transparent (built for a dark ground) but the
   cta-band sits on LIGHT paper, so the label rendered invisible (founder caught
   it 2026-07-29). Default is now the light-ground outline; dark surfaces opt
   back into the white treatment. */
.btn-wa{background:var(--card);color:var(--crimson);border:1px solid var(--crimson);box-shadow:none}
.btn-wa svg{color:var(--brand-whatsapp)}
.btn-wa:hover{background:var(--paper-veil);color:var(--crimson-deep);border-color:var(--crimson-deep)}
.v6-night .btn-wa,#v6-footer .btn-wa,.act-dark .btn-wa,#decision .btn-wa,.faq-cta .btn-wa{
  background:transparent;color:var(--card);border-color:rgba(255,255,255,.34)}
.v6-night .btn-wa:hover,#v6-footer .btn-wa:hover,.act-dark .btn-wa:hover,
#decision .btn-wa:hover,.faq-cta .btn-wa:hover{
  background:rgba(255,255,255,.10);color:var(--card);border-color:rgba(255,255,255,.6)}
.link-cta{display:inline-flex;align-items:center;gap:8px;color:var(--crimson);text-decoration:none;font-weight:600;font-size:var(--fs-int-5);transition:gap .3s,color .3s}
.link-cta:hover{color:var(--ink);gap:13px}
.link-cta .arw{transition:transform .3s}
:root[dir="rtl"] .link-cta .arw{transform:scaleX(-1)}

/* ---- ACT rail (scroll-progress anchor nav) ------------------------------- */
.act-rail{position:fixed;inset-block-start:50%;inset-inline-end:clamp(14px,2vw,30px);transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:16px;opacity:0;transition:opacity .6s}
.act-rail.show{opacity:1}
.act-rail button{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:10px;flex-direction:row-reverse;color:var(--ink-faint);font-size:var(--fs-int-11);font-weight:600}
.act-rail .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-faint);transition:all .3s;flex-shrink:0}
.act-rail button .lbl{opacity:0;transform:translateX(6px);transition:all .3s;white-space:nowrap;font-family:var(--fs-body),sans-serif}
.act-rail button:hover .lbl{opacity:1;transform:none;color:var(--ink)}
.act-rail button.active .dot{background:var(--crimson);border-color:var(--crimson);box-shadow:var(--glow-crimson-dot)}
@media(max-width:900px){.act-rail{display:none}}

/* pulse line (scroll-drawn telemetry thread) */
.pulse-line{position:fixed;inset-block:0;inset-inline-end:clamp(38px,4.5vw,64px);width:2px;z-index:39;pointer-events:none;opacity:0;transition:opacity .6s}
.pulse-line.show{opacity:.5}
.pulse-line .track{position:absolute;inset:0;background:linear-gradient(var(--lavender-dim),transparent)}
.pulse-line .fill{position:absolute;inset-block-start:0;inset-inline:0;height:0;background:linear-gradient(var(--crimson),var(--lavender));box-shadow:var(--glow-lavender-line)}
@media(max-width:900px){.pulse-line{display:none}}

/* ============================================================================
   HOMEPAGE ACTS
   ============================================================================ */

/* ACT 1 — HERO. Full-bleed cinematic VIDEO background + a reading-start white
   gradient PLATE (logical direction, RTL-correct) under a DENSE text column
   carrying all 8 first-view signals. Content-sized (no 100svh viewport-eater);
   the fold ENDS on the compliance strip so no scroll-cue is needed. */
/* align-items:flex-start (not center): the dense first-view stack is taller than
   the padded area, and centering overflowed the headline UP under the fixed
   header (measured h1 top 30px vs header bottom 87px, 2026-07-14). Top-aligning
   after the ~118px top padding keeps the whole stack below the header. */
#hero{position:relative;display:flex;align-items:flex-start;
  min-height:min(940px,94svh);padding-block:clamp(104px,15vh,150px) clamp(40px,6vh,72px);overflow:hidden}
#hero .hero-stage{position:absolute;inset:0;z-index:0;background:var(--paper)}
/* Founder decision 2026-07-18: the TEXT COLUMN sits on the PHYSICAL LEFT in BOTH
   locales (not logical reading-start) so the video's city/globe/map side — the
   right half of the landing-loop frame — stays visible beside the copy. */
/* Founder final framing 2026-07-18, browser-iterated: the video asset itself is
   now WIDESCREEN (landing-wide.* = landing-loop extended leftward with its own
   gradient), so cover shows the WHOLE scene — globe/map/city/truck right, clean
   background-color left under the text. Right-anchored so any horizontal crop
   eats only the empty left extension, never the scene. */
#hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% center;display:block}
/* WHITE PLATE — physical: opaque page-ground at the LEFT edge where the headline
   sits, melting to transparent toward the right so the video bleeds in with no
   seam. Plus a soft bottom melt into the next act. */
/* v4 (founder arrow-fix c): the bottom melt now reaches FULL paper at the hero's
   edge so the road/light-trails dissolve into the page instead of chopping —
   boundary-matched with the recomposited video's own in-canvas bottom feather. */
#hero .hero-plate{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(238,240,247,0) 60%,rgba(238,240,247,.55) 84%,var(--paper) 100%),
    linear-gradient(to right,var(--paper) 0%,var(--paper) 34%,rgba(238,240,247,.6) 52%,rgba(238,240,247,0) 66%)}
/* v4 (founder arrow-fix a, text half): .hero-wrap sits INSIDE the absolutely-
   positioned .hero-stage, so #hero's own padding-block never reached it and the
   eyebrow/headline rendered under the fixed header (measured ebTop 16px vs
   header ~70px). The wrap now carries the top padding itself. */
#hero .hero-wrap{position:relative;z-index:2;width:100%;padding-block-start:clamp(104px,15vh,150px)}
#hero .hero-col{max-width:min(92vw,600px);text-align:start}
/* pin the column to the physical LEFT in RTL too (block boxes right-align in RTL
   by default). Founder 2026-07-18: the COPY itself also hugs the physical left
   over the pale zone — the column becomes an LTR-flow island (flex rows start
   at the left edge) while each text element keeps dir=rtl so Arabic reads
   correctly, just flush-left. */
:root[dir="rtl"] #hero .hero-col{margin-right:auto;margin-left:0;direction:ltr;text-align:left}
:root[dir="rtl"] #hero .hero-col :is(h1,.hero-sub,.cc-label,.hstat .u,.cbadge){direction:rtl;text-align:left}
#hero h1{font-size:var(--fs-int-12);line-height:var(--lh-tight);color:var(--ink);margin-block-start:var(--stack-sm);max-width:15ch}
#hero h1 .hl{color:var(--crimson)}
#hero .hero-sub{margin-block-start:var(--stack-md);font-size:var(--fs-int-13);color:var(--ink-soft);max-width:46ch;font-weight:400;line-height:var(--lh-body)}
#hero .hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-block-start:var(--stack-md)}
/* 3 cited stat pairs — big numeral shouts, tiny caption qualifies */
#hero .hero-stats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 22px;margin-block-start:var(--stack-lg)}
#hero .hstat{min-width:0}
#hero .hstat .n{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-int-14);line-height:1;color:var(--ink);letter-spacing:-.01em}
:root[dir="rtl"] #hero .hstat .n{letter-spacing:normal}
#hero .hstat .u{font-size:var(--fs-int-15);color:var(--ink-faint);margin-block-start:6px;max-width:20ch;line-height:1.35}
#hero .hstat-div{width:1px;align-self:stretch;background:var(--navy-line);margin-block:2px}
/* compliance badge strip + one security micro-line, pinned to the fold baseline */
#hero .hero-compliance{margin-block-start:clamp(22px,3vh,34px)}
#hero .cc-label{display:block;font-size:var(--fs-int-15);font-weight:600;color:var(--ink-soft);margin-block-end:10px}
#hero .cbadges{display:flex;flex-wrap:wrap;gap:8px 10px}
#hero .cbadge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);border:1px solid var(--navy-line);
  border-radius:12px;padding:7px 12px;backdrop-filter:blur(6px);box-shadow:var(--sh-sm)}
#hero .cbadge .ci{width:20px;height:20px;flex-shrink:0}
#hero .cbadge .ci svg{width:100%;height:100%}
#hero .cbadge .ct{display:flex;flex-direction:column;line-height:1.15}
#hero .cbadge .ct b{font-size:var(--fs-int-16);font-weight:700;color:var(--ink);white-space:nowrap}
#hero .cbadge .ct i{font-size:var(--fs-int-11);font-style:normal;color:var(--lavender);font-weight:600}
#hero .cc-sec{display:flex;align-items:center;gap:9px;margin-block-start:14px;font-size:var(--fs-int-15);color:var(--ink-faint)}
#hero .cc-sec svg{width:16px;height:16px;color:var(--lavender);flex-shrink:0}

/* CINEMATIC BRIDGE — the classic scroll FILM returns as a full-bleed band
   between Act 1 (hero) and Act 2 (platform). Deliberately NOT a data-act —
   the locked 6-act IA is untouched; this is the world-shift the light page
   emerges from (dark desert roads → routes ignite → the connected Kingdom).
   Frames lazy-load on approach; the canvas is scrubbed by scroll (engine.js
   initScrollFilm). 300vh ≈ 2 viewport-scrolls of film — brisker than the
   classic 560vh hero, honoring the blueprint's minimal-scroll mandate. */
#film{position:relative;height:300vh;background:var(--navy-deep)}
#film .stage{position:sticky;inset-block-start:0;height:100svh;overflow:hidden;background:var(--navy-deep)}
#film canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#film .film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
#film .film-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(16,25,58,.6),transparent 36%),radial-gradient(115% 85% at 50% 32%,transparent 58%,rgba(16,25,58,.38) 100%)}
/* boundary seams — the film BLENDS from the light hero above and into the light
   platform act below (no hard cut): paper melts to the film's navy across the
   band's FIRST viewport, navy melts back to paper across its LAST. Absolute at
   the section's extremes (after .stage in DOM) so they ride over the sticky
   canvas exactly at the two boundaries, then scroll away mid-film. */
#film .film-seam{position:absolute;inset-inline:0;z-index:4;height:34svh;pointer-events:none}
#film .film-seam.top{inset-block-start:0;background:linear-gradient(to bottom,var(--paper) 0%,rgba(238,240,247,.5) 32%,rgba(16,25,58,0) 100%)}
#film .film-seam.bottom{inset-block-end:0;background:linear-gradient(to top,var(--paper) 0%,rgba(238,240,247,.5) 32%,rgba(16,25,58,0) 100%)}
/* opening title — centered (the one sanctioned centered overlay), scrubbed out
   over the first ~12% of the film by engine.js */
#film .film-title{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding-inline:24px;pointer-events:none;will-change:transform,opacity}
#film .film-kicker{font-size:var(--fs-int-9);font-weight:700;color:var(--lavender-glow);text-transform:uppercase}
:root[data-locale="en"] #film .film-kicker{letter-spacing:.08em}
#film .film-title h2{font-size:var(--fs-int-17);color:var(--card);max-width:24ch;line-height:var(--lh-head);text-shadow:0 8px 40px rgba(0,0,0,.55)}
/* narration captions — off-center (inline-end in RTL, inline-start in LTR),
   opacity driven per-cap from the scrub (data-a/data-b windows) */
#film .film-caps{position:absolute;z-index:3;inset-inline-end:clamp(24px,6vw,90px);inset-block-end:clamp(80px,14vh,150px);width:min(80vw,460px);text-align:end;pointer-events:none}
:root[dir="ltr"] #film .film-caps{text-align:start;inset-inline-start:clamp(24px,6vw,90px);inset-inline-end:auto}
#film .film-caps .cap{position:absolute;inset-inline-end:0;inset-block-end:0;opacity:0;transform:translateY(14px);
  font-family:var(--fs-display),serif;font-weight:600;font-size:var(--fs-int-18);line-height:1.3;color:var(--card);text-shadow:0 4px 24px rgba(0,0,0,.6)}
:root[dir="ltr"] #film .film-caps .cap{inset-inline-end:auto;inset-inline-start:0}
#film .loader{position:absolute;z-index:5;inset-inline-start:clamp(20px,5vw,44px);inset-block-end:clamp(22px,5vh,38px);
  font-size:var(--fs-int-11);font-weight:500;color:rgba(255,255,255,.55);transition:opacity .6s}
:root[data-locale="en"] #film .loader{letter-spacing:.2em}
/* mobile tap-to-play (engine injects the button; frames load only on tap) */
#film .film-play-btn{position:absolute;z-index:4;inset-block-end:clamp(64px,15vh,120px);inset-inline-start:50%;transform:translateX(-50%);
  background:rgba(16,25,58,.55);border:1px solid rgba(167,155,224,.5);color:var(--card);border-radius:999px;padding:12px 22px;
  font-family:var(--fs-body),sans-serif;font-size:var(--fs-int-7);font-weight:700;cursor:pointer;backdrop-filter:blur(8px)}
#film .film-play-btn:disabled{opacity:.7}
#film .film-poster.kb{animation:kenburnsFilm 16s var(--ease) infinite alternate}
@keyframes kenburnsFilm{from{transform:scale(1)}to{transform:scale(1.08)}}
/* collapse the scrub band to ONE static viewport wherever scrubbing can't run */
@media(max-width:768px){
  #film{height:auto}
  #film .stage{position:relative;height:92svh}
  #film .film-caps{display:none}
  #film .film-seam{height:22svh}
}
@media(prefers-reduced-motion:reduce){
  #film{height:auto}
  #film .stage{position:relative;height:100svh}
  #film .film-caps{display:none}
  #film .film-title{opacity:1!important;transform:none!important}
}
html:not(.js) #film{height:auto}
html:not(.js) #film .stage{position:relative;height:100svh}
html:not(.js) #film .film-caps{display:none}
html:not(.js) #film .loader{display:none}

/* generic act heading — internal spacing trimmed (compaction #2: ~274px→~165px).
   v4: classic title treatment (idx → pas poetic lavender lead → El Messiri h2)
   with a stagger CHOREOGRAPHY: children rise in sequence once .reveal lands. */
.act-head{max-width:760px}
.act-head.end{margin-inline-start:auto;text-align:end}
.act-head .idx{display:block;margin-block-end:8px}
.act-head h2{font-size:var(--fs-int-19);line-height:var(--lh-head);margin-block:6px 0;color:var(--ink)}
.act-head .kicker{font-size:var(--fs-int-13);color:var(--ink-soft);margin-block-start:12px;max-width:46ch;line-height:var(--lh-body)}
.act-head.end .kicker{margin-inline-start:auto}
.pas{font-size:var(--fs-int-20);font-family:var(--fs-display),serif;color:var(--lavender);line-height:1.35;max-width:34ch;margin-block-end:10px}
.act-head.end .pas{margin-inline-start:auto}
/* stagger choreography (JS pages only; no-JS + reduced-motion see full state) */
html.js .act-head.reveal>*{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .act-head.reveal.in>*{opacity:1;transform:none}
html.js .act-head.reveal.in .pas{transition-delay:.12s}
html.js .act-head.reveal.in .ak{transition-delay:.18s}
html.js .act-head.reveal.in h2{transition-delay:.22s}
html.js .act-head.reveal.in .kicker{transition-delay:.34s}
/* comparison rows cascade in after their wrap reveals */
html.js .compare-wrap.reveal tbody tr{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .compare-wrap.reveal.in tbody tr{opacity:1;transform:none}
html.js .compare-wrap.reveal.in tbody tr:nth-child(2){transition-delay:.08s}
html.js .compare-wrap.reveal.in tbody tr:nth-child(3){transition-delay:.16s}
html.js .compare-wrap.reveal.in tbody tr:nth-child(4){transition-delay:.24s}
html.js .compare-wrap.reveal.in tbody tr:nth-child(5){transition-delay:.32s}
html.js .compare-wrap.reveal.in tbody tr:nth-child(n+6){transition-delay:.4s}

/* ACT II — PLATFORM (compaction #2: grid gap 58→36, top margin trimmed) */
#platform{padding-block:var(--sect-pad)}
#platform .p-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px);align-items:center;margin-block-start:clamp(12px,1.8vh,20px)}
@media(min-width:960px){#platform .p-grid{grid-template-columns:1.15fr .85fr}}
/* cap the product monitor height (~427px→~325px) — max-width + 16/10 aspect;
   pushed to the inline-end of its .85fr column. */
#platform .device.monitor{max-width:clamp(340px,42vw,520px);margin-inline-start:auto}
.outcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block-start:8px}
.outcome{border:1px solid var(--navy-line);border-radius:var(--radius-16);padding:22px;background:var(--paper-veil);box-shadow:var(--sh-sm);transition:all .3s var(--ease)}
.outcome:hover{border-color:var(--lavender-dim);transform:translateY(-4px);background:var(--card);box-shadow:var(--sh-md)}
.outcome .oi{width:38px;height:38px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;margin-block-end:14px;color:var(--crimson)}
.outcome h3{font-size:var(--fs-int-21);color:var(--ink);margin-block-end:6px}
.outcome p{font-size:var(--fs-int-22);color:var(--ink-faint);line-height:1.55}
.outcome ul{list-style:none;margin-block-start:10px;font-size:var(--fs-int-23);color:var(--ink-soft)}
.outcome ul li{padding-block:3px;padding-inline-start:16px;position:relative}
.outcome ul li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:11px;width:6px;height:6px;border-radius:50%;background:var(--lavender)}

/* device frame (monitor / phone / console) */
.device{position:relative}
.device.monitor{border-radius:16px;border:1px solid var(--navy-line);background:linear-gradient(160deg,var(--card),var(--device-sheen-a));
  padding:14px 14px 26px;box-shadow:var(--sh-lg),0 0 0 1px rgba(125,111,206,.06)}
.device.monitor .bar{display:flex;gap:6px;padding:0 6px 12px}
.device.monitor .bar i{width:10px;height:10px;border-radius:50%;background:rgba(22,31,61,.16)}
.device.monitor .screen{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:var(--navy-deep)}
.device.monitor::after{content:"";position:absolute;inset-block-end:-9px;inset-inline:22%;height:9px;border-radius:0 0 20px 20px;
  background:linear-gradient(var(--device-stand-a),var(--device-stand-b))}
.device .screen img,.device .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device .screen .tabimg{opacity:0;transition:opacity .6s var(--ease)}
.device .screen .tabimg.active{opacity:1}
/* honest screenshot placeholder overlay (sits INSIDE the dark display) */
.shot-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  background:linear-gradient(160deg,rgba(16,25,58,.62),rgba(16,25,58,.82));padding:20px}
.shot-ph .tag{font-size:var(--fs-int-11);letter-spacing:.18em;text-transform:uppercase;color:var(--lavender);border:1px solid var(--lavender-dim);border-radius:999px;padding:5px 12px;font-weight:600}
.shot-ph p{font-size:var(--fs-int-24);color:var(--ink-soft);max-width:32ch}
/* metric callout */
.callout{position:absolute;background:rgba(255,255,255,.92);border:1px solid var(--navy-line);border-radius:12px;padding:11px 15px;
  backdrop-filter:blur(8px);box-shadow:var(--sh-md);z-index:3;max-width:220px}
.callout .n{font-family:var(--fs-display),serif;font-weight:700;color:var(--ink);font-size:var(--fs-int-21);line-height:1}
.callout .l{font-size:var(--fs-int-25);color:var(--ink-faint);margin-block-start:4px}
.callout.tl{inset-block-start:8%;inset-inline-start:-6%}
.callout.br{inset-block-end:12%;inset-inline-end:-5%}
@media(max-width:600px){.callout{position:static;margin-block-start:12px;max-width:none}}

/* tab tour */
.tabtour .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:14px}
.tabtour .tab{background:var(--paper-veil);border:1px solid var(--navy-line);color:var(--ink-soft);border-radius:999px;
  padding:9px 18px;font-family:inherit;font-size:var(--fs-int-7);font-weight:600;cursor:pointer;transition:all .3s}
.tabtour .tab:hover{color:var(--ink)}
.tabtour .tab.active{background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:var(--card);border-color:transparent;box-shadow:var(--glow-crimson-sm)}
.tabtour .tab-caption{margin-block-start:12px;color:var(--ink-soft);font-size:var(--fs-int-26);min-height:2.6em}

/* ACT III — MOAT emblems */
#moat{padding-block:var(--sect-pad)}
.emblems{display:grid;grid-template-columns:1fr;gap:14px;margin-block-start:clamp(12px,1.8vh,20px)}
@media(min-width:680px){.emblems{grid-template-columns:1fr 1fr}}
.emblem{position:relative;border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(18px,2.4vw,26px);
  background:linear-gradient(160deg,var(--card),var(--card-sheen));overflow:hidden;box-shadow:var(--sh-md);
  opacity:0;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.emblem.in{opacity:1;transform:none}
.emblem::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-20%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(167,155,224,.16),transparent 68%);pointer-events:none}
.emblem .crest{width:52px;height:52px;margin-block-end:14px;position:relative}
.emblem .crest svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(125,111,206,.35))}
.emblem h3{font-size:var(--fs-int-27);color:var(--ink);margin-block-end:6px}
.emblem .en{font-size:var(--fs-int-23);color:var(--lavender);letter-spacing:.06em;margin-block-end:10px;font-family:"Inter",sans-serif}
.emblem p{color:var(--ink-soft);font-size:var(--fs-int-26);line-height:1.6;margin-block-end:12px}
.status-pill{display:inline-flex;align-items:center;gap:9px;background:rgba(47,158,87,.12);border:1px solid rgba(47,158,87,.35);
  border-radius:999px;padding:8px 15px;font-size:var(--fs-int-28);color:var(--ok-deep);font-weight:600;margin-block-end:10px}
.status-pill .d{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:var(--glow-ok-dot);flex-shrink:0}
.status-pill.info{background:rgba(125,111,206,.12);border-color:rgba(125,111,206,.35);color:var(--lavender)}
.status-pill.info .d{background:var(--lavender);box-shadow:var(--glow-lavender-dot)}
.emblem .pill-note{display:block;font-size:var(--fs-int-29);color:var(--ink-faint);margin-block-end:12px;line-height:1.5}

/* ACT IV — DRIVER (dawn) */
#driver{padding-block:var(--sect-pad);overflow:hidden}
#driver .d-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,40px);align-items:center}
@media(min-width:960px){#driver .d-grid{grid-template-columns:.9fr 1.1fr}}
.dawn-frame{position:relative;border-radius:var(--radius-22);overflow:hidden;aspect-ratio:3/4;max-width:420px;
  box-shadow:var(--sh-lg)}
.dawn-frame img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;will-change:transform}
.dawn-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,25,58,.4),transparent 55%)}
.phone{position:relative;width:min(74vw,270px);margin-inline:auto;border-radius:34px;border:1px solid var(--navy-line);
  background:linear-gradient(160deg,var(--card),var(--device-sheen-b));padding:11px;box-shadow:var(--sh-lg),0 0 0 1px rgba(125,111,206,.06)}
.phone .screen{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:9/19.5;background:var(--navy-deep)}
.driver-feats{list-style:none;margin-block-start:18px;display:flex;flex-direction:column;gap:12px}
.driver-feats li{display:flex;align-items:center;gap:14px;color:var(--ink);font-weight:500}
.driver-feats .fi{width:42px;height:42px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;color:var(--crimson);flex-shrink:0}
.driver-feats li small{display:block;color:var(--ink-faint);font-size:var(--fs-int-23);font-weight:400}

/* ACT V — PROOF */
#proof{padding-block:var(--sect-pad)}
#proof .stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,34px);margin-block:clamp(14px,2vh,22px) 0}
@media(min-width:760px){#proof .stat-band{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat .n{font-family:var(--fs-display),serif;font-weight:700;color:var(--ink);font-size:var(--fs-int-30);line-height:1;
  background:linear-gradient(180deg,var(--navy),var(--lavender));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .u{color:var(--ink-soft);font-size:var(--fs-btn);margin-block-start:10px;font-weight:500}
.stat .prov{color:var(--ink-faint);font-size:var(--fs-int-31);margin-block-start:6px}
#proof .console-cameo{margin-block-start:clamp(16px,2.4vh,26px);display:grid;grid-template-columns:1fr;gap:clamp(24px,3.4vw,40px);align-items:center}
@media(min-width:960px){#proof .console-cameo{grid-template-columns:1.1fr .9fr}}
.device.console{border-radius:16px;border:1px solid var(--navy-line);overflow:hidden;position:relative;aspect-ratio:16/9;
  box-shadow:var(--sh-lg)}
.device.console img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device.console .ol{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,25,58,.55),transparent 60%)}

/* ACT VI — CTA — stays DARK (the film returns for the close). Height trimmed
   200vh→130vh→112vh (compaction pass 2). The .stage is sticky at 100svh, so the
   ScrollTrigger scrub range (engine.js initCTA: start "top top" → end
   "bottom bottom") = section height − 100svh. 112vh leaves 12vh of scrub; the
   veil (smooth 0.30→0.62) + content (smooth 0.38→0.70) reveal still completes
   ~8vh in over a smooth ~5vh span. 100svh is the HARD FLOOR — at/below it the
   scrub range collapses to ≤0 and the reveal SNAPS instead of animating, so do
   NOT drop #cta to 90vh or any value ≤100vh. */
#cta{height:112vh}
#cta .stage{position:sticky;inset-block-start:0;height:100svh;overflow:hidden;display:grid;place-items:center}
#cta .cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#cta .cta-veil{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 100% at 50% 50%,rgba(16,25,58,.55),rgba(16,25,58,.9));opacity:0}
#cta .cta-content{position:relative;z-index:2;text-align:center;padding-inline:24px;opacity:0;transform:translateY(28px);max-width:820px}
#cta h2{font-size:var(--fs-int-32);color:var(--card);line-height:1.02}
#cta h2 .hl{color:var(--crimson)}
#cta .cta-content p{margin-block-start:20px;color:var(--ink-soft);font-size:var(--fs-int-33)}
#cta .btns{margin-block-start:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#cta .reassure{margin-block-start:22px;font-size:var(--fs-int-23);color:var(--ink-faint);display:inline-flex;align-items:center;gap:8px}

/* ============================================================================
   SUBPAGE SKELETON
   ============================================================================ */
.sub-hero{position:relative;min-height:clamp(340px,50vh,500px);display:flex;align-items:flex-end;overflow:hidden;padding-block:clamp(96px,13vh,132px) clamp(32px,5vh,52px)}
.sub-hero .bg{position:absolute;inset:0;z-index:0}
.sub-hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.sub-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--paper),rgba(238,240,247,.9) 45%,rgba(238,240,247,.72))}
.sub-hero .inner{position:relative;z-index:2}
.sub-hero h1{font-size:var(--fs-int-34);color:var(--ink);max-width:18ch}
.sub-hero h1 .hl{color:var(--crimson)}
.sub-hero .lead{margin-block-start:20px;font-size:var(--fs-int-35);color:var(--ink-soft);max-width:46ch}
.sub-hero .hero-cta{margin-block-start:30px;display:flex;gap:14px;flex-wrap:wrap}

.anchor-rail{position:sticky;inset-block-start:0;z-index:30;background:rgba(247,248,252,.88);backdrop-filter:blur(12px);
  border-block-end:1px solid var(--navy-line)}
.anchor-rail .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.anchor-rail .wrap::-webkit-scrollbar{display:none}
.anchor-rail a{white-space:nowrap;color:var(--ink-soft);text-decoration:none;font-size:var(--fs-int-7);font-weight:600;padding:8px 16px;border-radius:999px;transition:all .3s}
.anchor-rail a:hover,.anchor-rail a.active{background:rgba(125,111,206,.12);color:var(--ink)}

.sub-section{padding-block:var(--sect-pad-sm)}
.sub-section.alt{background:linear-gradient(180deg,transparent,rgba(228,231,242,.6),transparent)}
.section-head{max-width:720px;margin-block-end:var(--head-gap)}
.section-head .idx{display:block;margin-block-end:12px}
.section-head h2{font-size:var(--fs-int-19);line-height:var(--lh-head);color:var(--ink)}
.section-head p{margin-block-start:16px;color:var(--ink-soft);font-size:var(--fs-int-13);max-width:52ch;line-height:var(--lh-body)}

.feature-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:680px){.feature-grid.c2{grid-template-columns:1fr 1fr}.feature-grid.c3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--navy-line);border-radius:var(--radius-18);padding:var(--card-pad);background:var(--paper-veil);box-shadow:var(--sh-sm);transition:all .3s var(--ease)}
.card:hover{border-color:var(--lavender-dim);transform:translateY(-5px);background:var(--card);box-shadow:var(--sh-md)}
.card .ci{width:44px;height:44px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;color:var(--crimson);margin-block-end:16px}
.card h3{font-size:var(--fs-int-36);color:var(--ink);margin-block-end:8px}
.card p{color:var(--ink-faint);font-size:var(--fs-int-37);line-height:1.6}
.card .link-cta{margin-block-start:16px}

/* pricing */
.tier-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:820px){.tier-grid{grid-template-columns:repeat(3,1fr)}}
.tier{border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(26px,3vw,36px);background:var(--paper-veil);box-shadow:var(--sh-sm);position:relative;display:flex;flex-direction:column}
.tier.featured{border-color:var(--crimson);box-shadow:var(--glow-crimson-featured),var(--sh-md)}
.tier.featured .badge{position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:var(--card);font-size:var(--fs-int-38);font-weight:700;padding:6px 16px;border-radius:999px;white-space:nowrap}
.tier h3{font-size:var(--fs-int-39);color:var(--ink)}
.tier .desc{color:var(--ink-faint);font-size:var(--fs-int-22);margin-block:8px 20px;min-height:3em}
.tier .price{font-family:var(--fs-display),serif;color:var(--lavender);font-size:var(--fs-int-40);font-weight:600;margin-block-end:6px}
/* A3 pricing-ladder cards (TRUTH graft): SAR figure + per-vehicle unit + the
   fleet-size band the tier serves. Token-only sizes per the site.css gates. */
.tier .price .unit{font-size:var(--fs-int-23);font-weight:600;color:var(--ink-faint);font-family:var(--fs-body),sans-serif}
.tier .price .vat-tag{font-size:var(--fs-int-25);font-weight:500;color:var(--ink-faint);font-family:var(--fs-body),sans-serif}
/* VAT-inclusive second figure (STC-TERMS §6 point 6) — same muted voice as .band,
   sits between the ex-VAT headline and the fleet-size band. */
.tier .price-vat{color:var(--ink-faint);font-size:var(--fs-int-25);font-weight:500;margin-block-end:10px}
.tier .band{color:var(--ink-faint);font-size:var(--fs-int-23);font-weight:600;margin-block-end:20px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-block-end:26px;flex-grow:1}
.tier ul li{display:flex;gap:11px;color:var(--ink-soft);font-size:var(--fs-int-41);align-items:flex-start}
.tier ul li svg{flex-shrink:0;color:var(--crimson);margin-block-start:3px}
.tier .btn{width:100%;justify-content:center}
.matrix{width:100%;border-collapse:collapse;font-size:var(--fs-int-41);min-width:560px}
.matrix th,.matrix td{padding:10px 16px;text-align:start;border-block-end:1px solid var(--navy-line)}
.matrix thead th{color:var(--ink);font-family:var(--fs-display),serif;font-size:var(--fs-btn)}
.matrix td:not(:first-child),.matrix th:not(:first-child){text-align:center}
.matrix tbody td:first-child{color:var(--ink-soft)}
.matrix .yes{color:var(--ok)} .matrix .no{color:var(--ink-faint)}
.matrix-scroll{overflow-x:auto}

/* two-step form */
.lead-form{border:1px solid var(--navy-line);border-radius:var(--radius-22);padding:clamp(26px,3.4vw,40px);background:var(--paper-veil);box-shadow:var(--sh-md)}
.lead-form .steps{display:flex;align-items:center;gap:12px;margin-block-end:26px;color:var(--ink-faint);font-size:var(--fs-int-7);font-weight:600}
.lead-form .steps .bar{flex-grow:1;height:3px;border-radius:4px;background:var(--navy-line);overflow:hidden}
.lead-form .steps .bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--crimson),var(--crimson-deep));transition:width .3s var(--ease)}
.field{margin-block-end:18px}
.field label{display:block;font-size:var(--fs-int-7);font-weight:600;color:var(--ink);margin-block-end:8px}
.field input,.field select,.field textarea{width:100%;background:var(--card);border:1px solid var(--navy-line);border-radius:12px;
  padding:13px 16px;color:var(--ink);font-family:inherit;font-size:var(--fs-int-5);transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lavender)}
.field textarea{resize:vertical;min-height:90px}
.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:520px){.radio-row{grid-template-columns:repeat(4,1fr)}}
.radio-row label{display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--navy-line);border-radius:12px;
  padding:12px 8px;cursor:pointer;font-size:var(--fs-int-7);font-weight:600;color:var(--ink-soft);transition:all .3s}
.radio-row input{position:absolute;opacity:0;width:0;height:0}
.radio-row label:has(input:checked){border-color:var(--crimson);background:rgba(214,66,87,.1);color:var(--crimson-deep)}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:var(--crimson)}
.radio-row.invalid label{border-color:var(--crimson)}
.form-hint{margin-block-end:12px;color:var(--crimson-deep);font-size:var(--fs-int-24);font-weight:600}
.form-hint[hidden]{display:none}
.form-step{display:none} .form-step.active{display:block}
.form-nav{display:flex;gap:12px;margin-block-start:8px}

/* FAQ */
.faq{border-block-start:1px solid var(--navy-line)}
.faq details{border-block-end:1px solid var(--navy-line)}
.faq summary{cursor:pointer;list-style:none;padding:15px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--fs-display),serif;font-size:var(--fs-int-21);font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--navy-line);display:grid;place-items:center;
  color:var(--lavender);transition:transform .3s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 4px 16px;color:var(--ink-soft);line-height:1.7;max-width:70ch}

/* CTA band (subpage) */
.cta-band{text-align:center;padding-block:clamp(48px,7vh,84px);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(167,155,224,.16),transparent 60%)}
.cta-band .inner{position:relative;z-index:2;max-width:680px;margin-inline:auto}
.cta-band h2{font-size:var(--fs-int-42);color:var(--ink)}
.cta-band p{margin-block-start:16px;color:var(--ink-soft)}
.cta-band .btns{margin-block-start:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* legal pages */
.legal{padding-block:clamp(96px,12vh,132px) clamp(44px,7vh,80px)}
.legal .doc{max-width:760px;margin-inline:auto}
.legal .draft-banner{border:1px solid var(--warn);background:rgba(200,125,28,.1);border-radius:12px;padding:16px 20px;margin-block-end:36px;
  color:var(--warn-deep);font-size:var(--fs-int-22);display:flex;gap:12px;align-items:flex-start}
.legal h1{font-size:var(--fs-int-43);color:var(--ink);margin-block-end:10px}
.legal .updated{color:var(--ink-faint);font-size:var(--fs-int-24);margin-block-end:36px}
.legal h2{font-size:var(--fs-int-44);color:var(--ink);margin-block:36px 14px}
.legal h3{font-size:var(--fs-int-40);color:var(--lavender);margin-block:24px 10px}
.legal p,.legal li{color:var(--ink-soft);line-height:1.8;margin-block-end:12px}
.legal ul,.legal ol{margin-inline-start:22px;margin-block-end:16px}
.legal a{color:var(--lavender)}

/* founder placeholder chip */
.founder-ph{display:inline-flex;align-items:center;gap:6px;color:var(--ink-faint);font-style:normal;
  border:1px dashed var(--navy-line);border-radius:8px;padding:1px 9px;font-size:.85em}
.founder-ph::before{content:"قريباً";font-size:.72em;color:var(--lavender);text-transform:uppercase;opacity:.85}
:root[data-locale="en"] .founder-ph::before{content:"soon";letter-spacing:.05em}

/* 404 */
.nf{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px}
.nf .big{font-family:var(--fs-display),serif;font-size:var(--fs-int-45);line-height:1;color:var(--lavender);opacity:.22}
.nf h1{font-size:var(--fs-int-46);color:var(--ink);margin-block:10px 16px}
.nf p{color:var(--ink-soft);margin-block-end:28px;max-width:40ch}

/* ---- footer -------------------------------------------------------------- */
#site-footer{border-block-start:1px solid var(--navy-line);padding-block:clamp(30px,4vh,44px) 28px;position:relative}
#site-footer .fgrid{display:grid;grid-template-columns:1fr;gap:32px;margin-block-end:26px}
@media(min-width:680px){#site-footer .fgrid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1000px){#site-footer .fgrid{grid-template-columns:1.5fr repeat(5,1fr)}}
#site-footer .fbrand .wm{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-int-47);color:var(--ink);margin-block-end:14px;display:inline-flex;gap:10px;align-items:center}
#site-footer .fbrand .wm img{height:30px}
#site-footer .fbrand .wm b{color:var(--crimson)}
#site-footer .fbrand p{color:var(--ink-faint);font-size:var(--fs-int-22);max-width:34ch;margin-block-end:18px}
#site-footer .fcol h4{font-family:var(--fs-display),serif;font-size:var(--fs-int-37);color:var(--ink);margin-block-end:16px}
:root[data-locale="en"] #site-footer .fcol h4{letter-spacing:.02em}
#site-footer .fcol a{display:block;color:var(--ink-faint);text-decoration:none;font-size:var(--fs-int-24);padding-block:6px;transition:color .3s}
#site-footer .fcol a:hover{color:var(--lavender)}
#site-footer .fcol a .ext{font-size:.72em;opacity:.6;margin-inline-start:4px}
#site-footer .fbar{border-block-start:1px solid var(--navy-line);padding-block-start:26px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
#site-footer .fbar .legal-links{display:flex;gap:20px;flex-wrap:wrap}
#site-footer .fbar a{color:var(--ink-faint);text-decoration:none;font-size:var(--fs-int-23);transition:color .3s}
#site-footer .fbar a:hover{color:var(--lavender)}
#site-footer .fbar .cr{color:var(--ink-faint);font-size:var(--fs-int-23)}
/* powered-by — the COMPANY hex-bars crest (distinct from the product eagle mark) */
#site-footer .powered-by{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-block-start:18px;color:var(--ink-faint);font-size:var(--fs-int-29)}
#site-footer .powered-by .pb-crest svg{width:18px;height:20px;display:block;opacity:.8}
#site-footer .fmeta{color:var(--ink-faint);font-size:var(--fs-int-29);margin-block-start:14px;display:flex;flex-wrap:wrap;gap:14px}

/* focus visibility */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--lavender);outline-offset:3px;border-radius:6px}

/* ---- responsive / mobile ------------------------------------------------- */
@media(max-width:900px){
  .nav-main,.utility .util-link,.utility .lang-toggle{display:none}
  .hamburger{display:flex}
  .utility .nav-cta{display:none}
  /* mobile hero: video full-bleed; headline drops to the bottom-third over a
     soft bottom scrim, centered (subjects read above it). */
  #hero .hero-inner{inset:auto 0 0 0;left:clamp(20px,6vw,40px);right:clamp(20px,6vw,40px);
    max-width:none;justify-content:flex-end;align-items:stretch;text-align:center;padding-block-end:clamp(40px,9vh,80px)}
  /* mobile: dark-ink headline reads over a light bottom wash of the page ground
     (matches the desktop light blend; no dark scrim). */
  #hero .hero-scrim{background:linear-gradient(to top,var(--paper) 4%,rgba(238,240,247,.92) 30%,rgba(238,240,247,.5) 52%,rgba(238,240,247,0) 74%)}
  #hero .wm-line,#hero .trust-strip,#hero .hero-cta{justify-content:center}
  .outcome-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  #proof .stat-band{grid-template-columns:1fr 1fr}
  .radio-row{grid-template-columns:1fr 1fr}
}

/* ---- reduced motion ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .emblem{opacity:1!important;transform:none!important}
}

/* ---- page-specific composition additions -------------------------------- */
.device-col{position:relative}
.copy-col .tabtour{margin-block-start:18px}
#proof .stat-band.c3{grid-template-columns:1fr}
@media(min-width:760px){#proof .stat-band.c3{grid-template-columns:repeat(3,1fr)}}
.driver-media{position:relative;max-width:440px;margin-inline:auto;
  padding-inline-end:clamp(18px,7%,46px);padding-block-end:clamp(16px,6%,40px)}
.driver-media .phone{position:absolute;inset-block-end:0;inset-inline-end:0;width:min(44%,178px);margin:0}
@media(max-width:960px){.driver-media .phone{position:relative;inset:auto;width:min(60vw,210px);margin:-46px auto 0}}
.act-link{margin-block-start:clamp(14px,2.2vh,22px)}
.act-head.end .act-link{text-align:end}

/* ============================================================================
   V2 — reference-enterprise-grammar sections (light base, thin-border cards, quiet reveals)
   ============================================================================ */

/* trust band (first-scroll proof, under the dark hero) */
.trust-band{padding-block:clamp(14px,2.4vh,22px);border-block-end:1px solid var(--navy-line);background:var(--paper-veil)}
.trust-band .tb-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px}
.tb-facts{display:flex;flex-wrap:wrap;gap:14px 26px}
.tb-item{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-int-22);font-weight:600;color:var(--ink-soft)}
.tb-item .d{width:6px;height:6px;border-radius:50%;background:var(--lavender);flex-shrink:0}
.tb-pills{display:flex;flex-wrap:wrap;gap:10px}
.tb-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--navy-line);border-radius:999px;
  padding:6px 14px;font-size:var(--fs-int-28);font-weight:600;color:var(--ink-soft);background:var(--card)}
.tb-pill .d{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}

/* shared 1/2/3-col self-select + benefit grid */
.v2grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gap);margin-block-start:clamp(10px,1.6vh,18px)}
@media(min-width:640px){.v2grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.v2grid{grid-template-columns:repeat(3,1fr)}}

/* self-select card = whole card is the link (reference card grammar) */
.selectcard{text-decoration:none;display:flex;flex-direction:column}
.selectcard .link-cta{margin-block-start:auto;padding-block-start:16px}
.selectcard:hover .link-cta{gap:12px}

/* comparison table (reuses .matrix; left-aligned phrase cells, us-column tint) */
.compare-matrix td{text-align:start}
.compare-matrix .cap-cell{font-weight:600;color:var(--ink)}
.compare-matrix .us-cell{color:var(--ink);font-weight:500;background:rgba(99,83,193,.06)}
.compare-matrix .them-cell{color:var(--ink-faint)}
.compare-matrix thead th:nth-child(2){color:var(--lavender)}

/* platform updates band ("what's new" analog — honest changelog cards) */
.update-card{border:1px solid var(--navy-line);border-radius:var(--radius-18);padding:clamp(16px,2.2vw,24px);background:var(--paper-veil);box-shadow:var(--sh-sm)}
.update-card .u-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:14px}
.update-card .u-tag{font-size:var(--fs-int-38);font-weight:600;color:var(--lavender);background:rgba(99,83,193,.10);border:1px solid var(--navy-line);border-radius:999px;padding:4px 11px}
.update-card .u-date{font-size:var(--fs-int-38);color:var(--ink-faint);font-weight:500}
.update-card h3{font-size:var(--fs-int-21);color:var(--ink);margin-block-end:8px}
.update-card p{color:var(--ink-faint);font-size:var(--fs-int-37);line-height:1.6}

/* support & onboarding strip */
.support-strip{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,44px);align-items:center;
  border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(18px,3vw,30px);background:var(--paper-veil);box-shadow:var(--sh-sm)}
@media(min-width:860px){.support-strip{grid-template-columns:1.1fr .9fr}}
.support-strip h2{font-size:var(--fs-h2-sm);color:var(--ink)}
.support-strip .ss-copy p{margin-block-start:14px;color:var(--ink-soft);max-width:48ch}
.ss-items{list-style:none;display:flex;flex-direction:column;gap:14px}
.ss-items li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-weight:500}
.ss-items li svg{color:var(--crimson);flex-shrink:0;margin-block-start:3px;width:20px;height:20px}

/* ---- icon sizing discipline (giant-icon bugfix, 2026-07-11) --------------
   icon() now emits width/height="1em"; these contexts want specific sizes.
   The :not([width]) guard is defense-in-depth for any future unsized svg. */
svg:not([width]){width:1.3em;height:1.3em;flex-shrink:0}
.link-cta svg{width:19px;height:19px;flex-shrink:0}
.oi svg,.fi svg,.ci svg{width:22px;height:22px}
.lm-icon svg{width:24px;height:24px}
.faq summary .pm svg{width:14px;height:14px}

/* founding partners band + lead-magnet strip (pre-CTA) */
.partners-wrap{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
.founding-band{position:relative;overflow:hidden;border:1px solid var(--navy-line);border-radius:var(--radius-22);
  padding:clamp(18px,2.6vw,28px);background:linear-gradient(160deg,var(--card),var(--card-sheen));box-shadow:var(--sh-md)}
.founding-band::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-10%;width:44%;height:120%;
  background:radial-gradient(circle,rgba(167,155,224,.16),transparent 68%);pointer-events:none}
.founding-band .eyebrow{display:block;margin-block-end:14px}
.founding-band h2{font-size:var(--fs-int-48);max-width:24ch;color:var(--ink)}
.founding-band>p{margin-block-start:16px;color:var(--ink-soft);max-width:58ch}
.founding-items{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin-block:16px}
.founding-items li{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:var(--fs-int-37)}
.founding-items li svg{color:var(--crimson);width:20px;height:20px;flex-shrink:0}
.leadmagnet{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;border:1px solid var(--navy-line);
  border-radius:var(--radius-18);padding:clamp(16px,2.4vw,24px);background:var(--paper-veil);box-shadow:var(--sh-sm)}
.leadmagnet .lm-icon{width:48px;height:48px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;color:var(--crimson);flex-shrink:0}
.leadmagnet .lm-copy{flex:1 1 320px}
.leadmagnet h3{font-size:var(--fs-int-49);color:var(--ink)}
.leadmagnet p{color:var(--ink-faint);font-size:var(--fs-int-22);margin-block-start:6px}

/* non-affiliation disclaimer (moat + footer) */
.disclaimer{color:var(--ink-faint);font-size:var(--fs-int-28);line-height:1.65;max-width:82ch;margin-block-start:clamp(16px,2.6vh,26px)}
#site-footer .disclaimer{margin-block:24px 0;max-width:none}
#site-footer .cookieless{color:var(--ink-faint);font-size:var(--fs-int-29);margin-block-start:8px}

/* two link-CTAs share a row (moat act) */
#moat .act-link{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* PDPL consent (contact form) */
.consent-field{display:flex;align-items:flex-start;gap:10px;margin-block:6px 18px;cursor:pointer;
  font-size:var(--fs-int-24);color:var(--ink-soft);line-height:1.55}
.consent-field input{margin-block-start:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--crimson)}
.consent-field a{color:var(--lavender);text-decoration:underline}
.consent-field.invalid span{color:var(--crimson-deep)}

/* ============================================================================
   REPLICA IA — mega nav · breadcrumb · hubs · spokes · gateway
   (light periwinkle grammar, thin-border cards, logical props only)
   ============================================================================ */

/* mega dropdown (Solutions: by-need / by-sector sub-headed columns) */
.dropdown.mega{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;min-width:460px;padding:18px}
.dropdown.mega .mega-col h5{font-family:var(--fs-body),sans-serif;font-size:var(--fs-int-11);font-weight:700;
  text-transform:uppercase;color:var(--lavender);padding:6px 12px 8px;margin:0}
:root[data-locale="en"] .dropdown.mega .mega-col h5{letter-spacing:.16em}
.dropdown.mega .mega-col a{font-size:var(--fs-int-50)}
/* mobile drawer sub-heading between grouped links */
.mobile-panel .m-sub{font-family:var(--fs-body),sans-serif;font-size:var(--fs-int-11);font-weight:700;
  text-transform:uppercase;color:var(--lavender);padding:18px 0 4px;border:0}
:root[data-locale="en"] .mobile-panel .m-sub{letter-spacing:.16em}

/* breadcrumb trail */
.breadcrumb{border-block-end:1px solid var(--navy-line);background:var(--paper-veil)}
.breadcrumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:12px;font-size:var(--fs-int-23)}
.breadcrumb a{color:var(--ink-faint);text-decoration:none;transition:color .3s}
.breadcrumb a:hover{color:var(--lavender)}
.breadcrumb .sep{color:var(--navy-line);user-select:none}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* solution-spoke showcase (real screenshot + value bullets) */
.spoke-showcase{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,54px);align-items:center}
@media(min-width:900px){.spoke-showcase{grid-template-columns:1.05fr .95fr}}
.value-bullets{list-style:none;display:flex;flex-direction:column;gap:14px;margin-block-end:8px}
.value-bullets li{display:flex;align-items:flex-start;gap:12px;color:var(--ink);font-weight:500;font-size:var(--fs-int-51)}
.value-bullets li svg{color:var(--crimson);flex-shrink:0;margin-block-start:3px;width:20px;height:20px}

/* goal blocks (problem → solution bullets → proof callout) */
.goal-stack{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,32px)}
@media(min-width:820px){.goal-stack{grid-template-columns:1fr 1fr}}
.goal-block{border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(24px,3vw,34px);
  background:linear-gradient(160deg,var(--card),var(--card-sheen));box-shadow:var(--sh-sm)}
.goal-block h3{font-size:var(--fs-int-52);color:var(--ink);margin-block-end:10px}
.goal-block .goal-problem{color:var(--lavender);font-family:var(--fs-display),serif;font-size:var(--fs-int-51);line-height:1.5;margin-block-end:16px}
.goal-block .goal-points{list-style:none;display:flex;flex-direction:column;gap:10px;margin-block-end:18px}
.goal-block .goal-points li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);font-size:var(--fs-int-37)}
.goal-block .goal-points li svg{color:var(--crimson);flex-shrink:0;margin-block-start:3px;width:18px;height:18px}
.proof-callout{display:flex;align-items:center;gap:10px;border:1px solid rgba(28,122,67,.32);background:rgba(28,122,67,.08);
  border-radius:12px;padding:12px 15px;color:var(--ok-deep);font-size:var(--fs-int-24);font-weight:600}
.proof-callout .pc-i{display:inline-flex;color:var(--ok);flex-shrink:0}
.proof-callout .pc-i svg{width:18px;height:18px}

/* related cross-links card (title + link only) */
.card.cross{justify-content:space-between}
.card.cross h3{font-size:var(--fs-int-40);margin-block-end:14px}

/* industry hub photo-cards (T3 grammar) */
.ind-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:620px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.ind-grid{grid-template-columns:repeat(3,1fr)}}
.ind-card{position:relative;border:1px solid var(--navy-line);border-radius:var(--radius-18);overflow:hidden;background:var(--card);
  text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:all .3s var(--ease)}
.ind-card:hover{border-color:var(--lavender-dim);transform:translateY(-5px);box-shadow:var(--sh-md)}
.ind-card .ind-bg{position:relative;aspect-ratio:16/9;overflow:hidden}
.ind-card .ind-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ind-card:hover .ind-bg img{transform:scale(1.05)}
.ind-card .ind-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,25,58,.28),transparent 60%)}
.ind-card .ind-body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.ind-card .ind-body .ci{width:42px;height:42px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;color:var(--crimson);margin-block-end:14px;margin-block-start:-42px;position:relative;border:3px solid var(--card);background-clip:padding-box}
.ind-card h3{font-size:var(--fs-int-49);color:var(--ink);margin-block-end:8px}
.ind-card p{color:var(--ink-faint);font-size:var(--fs-int-22);line-height:1.55}
.ind-card .link-cta{margin-block-start:auto;padding-block-start:14px}

/* industry-spoke trust stats (honest platform facts) */
.trust-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px);
  border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(26px,4vw,40px);background:var(--paper-veil);box-shadow:var(--sh-sm)}
@media(min-width:760px){.trust-stats{grid-template-columns:repeat(4,1fr)}}
.tstat{text-align:center}
.tstat .n{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-int-53);line-height:1;
  background:linear-gradient(180deg,var(--navy),var(--lavender));-webkit-background-clip:text;background-clip:text;color:transparent}
.tstat .u{color:var(--ink-soft);font-size:var(--fs-int-23);margin-block-start:8px;line-height:1.4}

/* compliance-spoke: status + requires/implements two-col */
.reg-status{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-block-end:clamp(30px,5vh,48px)}
.reg-status .crest{width:56px;height:56px}
.reg-status .crest svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(125,111,206,.35))}
.reg-status .pill-note{color:var(--ink-faint);font-size:var(--fs-int-24);line-height:1.6;max-width:62ch}
.reg-cols{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,48px)}
@media(min-width:820px){.reg-cols{grid-template-columns:1fr 1fr}}
.reg-col h2{font-size:var(--fs-int-54);color:var(--ink);margin-block-end:20px}

/* login gateway cards */
.gateway-card{text-decoration:none;display:flex;flex-direction:column}
.gateway-card .link-cta{margin-block-start:auto;padding-block-start:16px}
.gateway-card .link-cta .ext{font-size:.85em;opacity:.7}
.gateway-help{margin-block-start:clamp(30px,5vh,48px);border:1px solid var(--navy-line);border-radius:var(--radius-20);
  padding:clamp(26px,4vw,40px);background:var(--paper-veil);box-shadow:var(--sh-sm);max-width:760px}
.gateway-help h3{font-size:var(--fs-int-55);color:var(--ink);margin-block-end:18px}
.gateway-note{display:flex;align-items:flex-start;gap:10px;color:var(--ink-faint);font-size:var(--fs-int-56);line-height:1.6;
  margin-block-start:20px;padding-block-start:18px;border-block-start:1px solid var(--navy-line)}
.gateway-note svg{color:var(--lavender);flex-shrink:0;margin-block-start:2px;width:18px;height:18px}

/* compliance emblems that are whole-card links (hub) */
a.emblem{text-decoration:none;display:block}
a.emblem .link-cta{margin-block-start:6px}

/* ============================================================================
   HOMEPAGE — 6-ACT REBUILD (blueprint lock 2026-07-14)
   Alternating act grounds (white ↔ faint navy tint) + new act layouts.
   Logical properties only; Arabic never letter-spaced.
   ============================================================================ */

/* act rhythm + alternating grounds */
#platform,#security,#proof,#sol,#start{padding-block:var(--sect-pad);position:relative;z-index:1}
.act-white{background:var(--card)}
.act-tint{background:linear-gradient(180deg,var(--paper),var(--paper-deep))}
.act-head{margin-block-end:var(--head-gap)}
.act-head .ak{margin-block:8px 4px}
.act-head.end .ak{margin-inline-start:auto;text-align:end}

/* ---- ACT 2 — ONE PLATFORM (2×2 bento + product monitor + driver strip) ---- */
#platform .p-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:960px){#platform .p-grid{grid-template-columns:1fr 1fr}}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
@media(max-width:460px){.bento{grid-template-columns:1fr}}
.bento-tile{border:1px solid var(--navy-line);border-radius:var(--radius-16);padding:var(--card-pad);
  background:var(--paper-veil);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.bento-tile:hover{transform:translateY(-4px);border-color:var(--lavender-dim);box-shadow:var(--sh-md);background:var(--card)}
.bento-tile .bi{width:40px;height:40px;border-radius:12px;background:rgba(214,66,87,.10);display:grid;place-items:center;color:var(--crimson);margin-block-end:14px}
.bento-tile .bi svg{width:22px;height:22px}
.bento-tile h3{font-size:var(--fs-int-36);color:var(--ink);margin-block-end:8px}
.bento-tile p{font-size:var(--fs-int-37);color:var(--ink-faint);line-height:1.55}
#platform .device-col{position:relative}
#platform .device.monitor{max-width:none;margin-inline:0}
#platform .device-col .tabtour{margin-block-start:20px}
/* driver strip — folds the driver app into the platform act (no separate screen) */
.driver-strip{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);align-items:center;
  margin-block-start:clamp(36px,5vh,64px);padding-block-start:clamp(28px,4vh,44px);border-block-start:1px solid var(--navy-line)}
@media(min-width:820px){.driver-strip{grid-template-columns:.42fr .58fr}}
.ds-media{display:flex;justify-content:center}
.ds-media .phone{margin-inline:auto}
.ds-copy h3{font-size:var(--fs-int-57);color:var(--ink)}
.ds-kicker{margin-block-start:12px;color:var(--ink-soft);font-size:var(--fs-int-13);line-height:var(--lh-body);max-width:48ch}
.ds-copy .driver-feats{margin-block-start:20px}
.ds-links{margin-block-start:22px;display:flex;flex-wrap:wrap;gap:14px 28px}

/* ---- ACT 3 — SECURITY & SAUDI COMPLIANCE (emblems + benefit row) ---------- */
#security .emblems{margin-block-start:0}
.secben-row{display:grid;grid-template-columns:1fr;gap:var(--grid-gap);margin-block-start:var(--grid-gap)}
@media(min-width:760px){.secben-row{grid-template-columns:repeat(3,1fr)}}
.secben{border:1px solid var(--navy-line);border-radius:var(--radius-16);padding:var(--card-pad);background:rgba(255,255,255,.7);box-shadow:var(--sh-sm)}
.secben .bi{width:40px;height:40px;border-radius:12px;background:rgba(99,83,193,.12);display:grid;place-items:center;color:var(--lavender);margin-block-end:12px}
.secben .bi svg{width:22px;height:22px}
.secben h3{font-size:var(--fs-int-21);color:var(--ink);margin-block-end:6px}
.secben p{font-size:var(--fs-int-22);color:var(--ink-faint);line-height:1.55}
#security .act-link{margin-block-start:clamp(20px,3vh,32px);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}

/* ---- ACT 4 — PROOF + COMPARE --------------------------------------------- */
.proof-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:start}
@media(min-width:900px){.proof-grid{grid-template-columns:.82fr 1.18fr}}
.proof-grid .stat-band{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vh,26px);margin-block:0}
.proof-grid .stat{text-align:start;border-inline-start:2px solid var(--crimson);padding-inline-start:16px}
.proof-grid .stat .n{font-family:var(--fs-display),serif;font-weight:700;color:var(--ink);font-size:var(--fs-int-30);line-height:1;
  background:linear-gradient(180deg,var(--navy),var(--lavender));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
:root[dir="rtl"] .proof-grid .stat .n{letter-spacing:normal}
.proof-grid .stat .n.word{font-size:var(--fs-int-58)}
.proof-grid .stat .u{color:var(--ink);font-size:var(--fs-int-51);margin-block-start:10px;font-weight:600}
.proof-grid .stat .prov{color:var(--ink-faint);font-size:var(--fs-int-28);margin-block-start:6px;line-height:1.4}
.compare-wrap{border:1px solid var(--navy-line);border-radius:var(--radius-20);padding:clamp(20px,2.6vw,30px);background:var(--paper-veil);box-shadow:var(--sh-sm)}
.compare-h{font-size:var(--fs-int-36);color:var(--ink)}
.compare-k{margin-block:8px 18px;color:var(--ink-soft);font-size:var(--fs-int-37);line-height:1.55;max-width:60ch}

/* ---- MID-PAGE CTA re-offer band (after Act 4) ---------------------------- */
.mid-cta{background:linear-gradient(120deg,var(--navy-deep),var(--navy-veil));position:relative;z-index:1}
.mid-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
  padding-block:clamp(26px,4vh,40px)}
.mid-cta-inner p{font-family:var(--fs-display),serif;font-weight:700;font-size:var(--fs-int-59);color:var(--card);max-width:26ch;line-height:1.25}
.mid-cta-inner .btn-primary{white-space:nowrap}

/* ---- ACT 5 — SOLUTIONS × INDUSTRIES (tab-filtered grid) ------------------ */
.soltabs{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:clamp(20px,3vh,30px);
  border-block-end:1px solid var(--navy-line);padding-block-end:2px}
.soltab{background:transparent;border:0;border-block-end:2px solid transparent;color:var(--ink-soft);
  font-family:var(--fs-display),serif;font-size:var(--fs-int-60);font-weight:600;cursor:pointer;
  padding:10px 14px;margin-block-end:-2px;transition:color .3s,border-color .3s}
.soltab:hover{color:var(--ink)}
.soltab.active{color:var(--crimson);border-block-end-color:var(--crimson)}
.solpanel[hidden]{display:none}
.solpanel .v2grid{margin-block-start:0}

/* ---- ACT 6 — CTA + FAQ (close) ------------------------------------------- */
.close-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:start}
@media(min-width:900px){.close-grid{grid-template-columns:.92fr 1.08fr}}
.close-cta{border-radius:var(--radius-22);padding:clamp(26px,3.4vw,40px);position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-deep),var(--navy-veil));box-shadow:var(--sh-lg)}
.close-cta::before{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-15%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(167,155,224,.22),transparent 68%);pointer-events:none}
.close-cta .idx{color:var(--lavender-glow);position:relative}
.close-cta h2{color:var(--card);font-size:var(--fs-int-61);line-height:1.1;margin-block:10px 0;position:relative}
.close-cta h2 .hl{color:var(--crimson)}
.close-cta>p{color:var(--ink-body);margin-block-start:16px;font-size:var(--fs-int-13);line-height:var(--lh-body);position:relative;max-width:42ch}
.close-cta .btns{margin-block-start:28px;display:flex;flex-wrap:wrap;gap:14px;position:relative}
.close-cta .reassure{margin-block-start:20px;font-size:var(--fs-int-23);color:var(--ink-faint);display:inline-flex;align-items:center;gap:8px;position:relative}
.close-cta .reassure svg{width:16px;height:16px;color:var(--lavender-glow)}
.close-cta .btn-ghost{border-color:rgba(167,155,224,.4);color:var(--card);background:rgba(167,155,224,.12)}
.close-cta .btn-ghost:hover{background:rgba(167,155,224,.22);color:var(--card)}
.close-faq h3{font-size:var(--fs-int-36);color:var(--ink);margin-block-end:8px}

/* ---- responsive polish --------------------------------------------------- */
@media(max-width:900px){
  #hero{padding-block:clamp(104px,16vh,150px) clamp(40px,6vh,64px)}
  #hero .hero-plate{background:linear-gradient(to top,var(--paper) 6%,rgba(238,240,247,.92) 34%,rgba(238,240,247,.55) 56%,rgba(238,240,247,0) 78%)}
  #hero .hero-col{max-width:none}
  #platform .device-col{margin-block-start:8px}
}
@media(max-width:600px){
  #hero .hstat-div{display:none}
  #hero .hero-stats{gap:16px 26px}
  .mid-cta-inner{flex-direction:column;align-items:flex-start}
}