/* ============================================================
   DESIGN TOKENS
   Palette: azure + lavender + warm gold on a cool near-white ground.
   Gold is the accent because the mark's compass needle is gold; lavender is a
   secondary hue only, never a purple-to-pink gradient.
   ============================================================ */
:root{
  --pri-900:#0A1642; --pri-800:#132A78; --pri-700:#1E45C4;
  --pri-600:#2A5CEA; --pri-500:#4B82FF; --pri-300:#A6C3FF;
  /* acc-700/600 are the text-safe golds (measured 4.5:1+ on the light ground);
     acc-500/400 are the fill golds that match the wordmark and must not be
     used for small text. */
  --acc-700:#63450B; --acc-600:#8A6412; --acc-500:#D9A93F;
  --acc-400:#EDC463; --acc-200:#F6E4B0;
  --lav-600:#6C4FD8; --lav-500:#8B6FF0; --lav-400:#A992F7; --lav-200:#DDD3FD;
  --aqua:#12B5C9; --clay:#D0563B; --sky:#2A5CEA; --plum:#8B6FF0;

  --bg:#F7F9FE; --bg-alt:#EEF2FC; --surface:#FFFFFF; --surface-2:#F3F6FD;
  --ink:#0E1633; --ink-2:#39446B; --muted:#5C678D; --faint:#6A7597;
  --line:rgba(14,22,51,.12); --line-strong:rgba(14,22,51,.25);
  --brand:var(--pri-700); --brand-ink:var(--pri-800); --accent:var(--acc-600);
  --map-base:#DEE5F7; --map-line:#F7F9FE;
  --shadow-1:0 1px 2px rgba(16,28,70,.06);
  --shadow-2:0 4px 18px -4px rgba(16,28,70,.13), 0 1px 3px rgba(16,28,70,.07);
  --shadow-3:0 26px 64px -18px rgba(16,28,70,.3), 0 2px 8px rgba(16,28,70,.1);

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px;
  --u:8px;
  --ease:cubic-bezier(.32,.72,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.42s;

  /* IBM Plex Sans Arabic, inlined as woff2 data URIs (the Artifact CSP blocks
     font CDNs). One family covers both scripts deliberately: pairing a
     Latin-only display face would leave the Arabic edition falling back to a
     system font — a second-class typographic voice in a bilingual platform.
     Contrast comes from weight and scale (400/600/700) instead. */
  --font-latin:"Plex Arabic","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-arabic:"Plex Arabic","Segoe UI","Geeza Pro",Tahoma,sans-serif;
  --font-num:"Plex Arabic","Segoe UI",Arial,sans-serif;
  --font:var(--font-latin);
  /* Readex Pro carries headlines in BOTH scripts, so the Arabic edition gets
     the same display voice as the English one rather than a fallback. */
  --font-display:"Readex","Plex Arabic","Segoe UI",Arial,sans-serif;
  --maxw:1280px;
}
html[data-theme="dark"]{
  --bg:#060A1C; --bg-alt:#0A1029; --surface:#0F1735; --surface-2:#151E44;
  --ink:#E9EDFB; --ink-2:#BCC5E6; --muted:#9AA5CC; --faint:#8792B9;
  --line:rgba(233,237,251,.13); --line-strong:rgba(233,237,251,.28);
  --brand:var(--pri-500); --brand-ink:var(--pri-300); --accent:var(--acc-400);
  --map-base:#1B2550; --map-line:#060A1C;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 16px -4px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-3:0 24px 60px -18px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
}
html[lang="ar"]{ --font:var(--font-arabic); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16.5px; line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  text-wrap:pretty; overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
h1,h2,h3,h4{
  margin:0; font-family:var(--font-display); line-height:1.12; letter-spacing:-.022em;
  font-weight:600; text-wrap:balance;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ letter-spacing:0; line-height:1.3; }
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--acc-200); color:var(--pri-900); }
html[data-theme="dark"] ::selection{ background:var(--pri-700); color:#fff; }

.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }
@media (max-width:640px){ .wrap{ width:min(100% - 28px, var(--maxw)); } }

.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em; }
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px;
}
html[lang="ar"] .eyebrow{ letter-spacing:.04em; font-size:12.5px; }
.eyebrow::before{ content:""; width:26px; height:1.5px; background:currentColor; flex:none; opacity:.75; }
.lede{ color:var(--muted); font-size:clamp(15.5px,1.15vw,17.5px); line-height:1.72; max-width:64ch; }

/* ---------- section chrome ---------- */
.section{ padding:clamp(60px,7.5vw,120px) 0; position:relative; }
.section--alt{ background:var(--bg-alt); }
.section--alt::before,.section--alt::after{
  content:""; position:absolute; inset-inline:0; height:1px; background:var(--line);
}
.section--alt::before{top:0} .section--alt::after{bottom:0}
.s-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(32px,4vw,56px); max-width:78ch; }
.s-head h2{ font-size:clamp(28px,3.4vw,46px); }
.s-head--split{ max-width:none; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.s-head--split > div{ max-width:70ch; display:flex; flex-direction:column; gap:14px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; font-weight:640; font-size:15px;
  letter-spacing:-.01em; border:1px solid transparent; white-space:nowrap;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-2); }
.btn--primary:hover{ background:var(--pri-800); box-shadow:var(--shadow-3); }
html[data-theme="dark"] .btn--primary{ color:#050B22; }
html[data-theme="dark"] .btn--primary:hover{ background:var(--pri-300); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand); background:color-mix(in oklab, var(--brand) 7%, transparent); }
.btn--gold{ background:var(--acc-500); color:var(--pri-900); box-shadow:var(--shadow-2); }
.btn--gold:hover{ background:var(--acc-400); }
.btn--sm{ padding:9px 16px; font-size:13.5px; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(1.5) blur(18px); -webkit-backdrop-filter:saturate(1.5) blur(18px);
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.topbar.is-stuck{ border-bottom-color:var(--line); }
.topbar__in{ display:flex; align-items:center; gap:20px; height:70px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark{ width:42px; height:42px; flex:none; display:block; }
.brand__mark svg{ width:100%; height:100%; }
.emblem{ overflow:visible; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{ font-size:15.5px; font-weight:720; letter-spacing:-.02em; }
/* tracking tightened when the size went 10.5 -> 12px so the brand block keeps its
   269px width and the nav beside it still fits on one line */
.brand__txt span{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:600; }
html[lang="ar"] .brand__txt span{ letter-spacing:.02em; text-transform:none; font-size:12px; }

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav a{
  padding:9px 13px; border-radius:999px; font-size:14.5px; font-weight:560; color:var(--ink-2); white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav a:hover{ background:var(--surface-2); color:var(--ink); }
.tools{ display:flex; align-items:center; gap:8px; flex:none; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-2); transition:.2s var(--ease);
}
.icon-btn:hover{ border-color:var(--brand); color:var(--brand); }
.lang-btn{ width:auto; padding:0 15px; font-size:13.5px; font-weight:680; letter-spacing:.02em; }
.burger{ display:none; }
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:grid; }
}
/* English labels are longer. Between 1081 and 1260px the bar tightens its
   type and padding so the six items still sit on one line; below that both
   languages hand over to the menu button. */
@media (max-width:1260px){
  html[lang="en"] .nav a{ font-size:13.5px; padding:8px 10px; }
  html[lang="en"] .brand__txt b{ font-size:15px; }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--bg); padding:24px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .45s var(--ease-out), opacity .3s;
  overflow-y:auto;
}
.drawer.is-open{ transform:none; opacity:1; pointer-events:auto; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer a{ padding:15px 4px; font-size:19px; font-weight:640; border-bottom:1px solid var(--line); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-top:clamp(48px,6vw,86px); padding-bottom:clamp(40px,5vw,72px); }
.hero__glow{
  position:absolute; inset-inline-start:50%; top:-320px; width:1100px; height:900px;
  transform:translateX(-50%); pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--pri-500) 26%, transparent), transparent 72%);
  filter:blur(20px);
}
html[data-theme="dark"] .hero__glow{ opacity:.42; }
.hero__in{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media (max-width:940px){ .hero__in{ grid-template-columns:1fr; } }
.hero h1{ font-size:clamp(38px,6.2vw,80px); font-weight:720; margin-top:20px; }
.hero h1 em{ font-style:normal; color:var(--brand); position:relative; white-space:nowrap; }
.hero h1 em::after{
  content:""; position:absolute; inset-inline:0; bottom:.06em; height:.13em;
  background:linear-gradient(90deg,var(--acc-500),color-mix(in oklab,var(--acc-500) 20%, transparent));
  border-radius:2px;
}
.hero__lede{ margin-top:22px; font-size:clamp(16px,1.3vw,19px); color:var(--muted); line-height:1.7; max-width:56ch; }
.hero__cta{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero__trust{ margin-top:34px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.hero__trust b{ color:var(--ink-2); font-weight:640; }

/* hero silhouette card */
.hero__art{ position:relative; }
.silhouette{ width:100%; height:auto; overflow:visible; }
.silhouette .sh-state{
  fill:var(--map-base); stroke:var(--map-line); stroke-width:1.6;
  transition:fill .9s var(--ease);
}
.silhouette .sh-state.lit{ fill:var(--brand); }
.silhouette .sh-state.lit2{ fill:var(--acc-500); }
.hero__pin{
  position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 14px; box-shadow:var(--shadow-3); font-size:12.5px; line-height:1.35;
  animation:floaty 7s var(--ease) infinite;
}
.hero__pin b{ display:block; font-size:17px; font-weight:720; letter-spacing:-.02em; }
.hero__pin span{ color:var(--muted); font-size:12px; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ---------- stat strip ---------- */
.stats{ border-block:1px solid var(--line); background:var(--surface); }
.stats__in{
  display:grid; grid-template-columns:repeat(5,1fr);
  divide:none;
}
@media (max-width:900px){ .stats__in{ grid-template-columns:repeat(2,1fr); } }
.stat{ padding:26px 22px; border-inline-end:1px solid var(--line); position:relative; }
.stat:last-child{ border-inline-end:0; }
@media (max-width:900px){
  .stat{ border-bottom:1px solid var(--line); }
  .stat:nth-child(2n){ border-inline-end:0; }
}
.stat__v{ font-size:clamp(26px,2.9vw,38px); font-weight:720; letter-spacing:-.035em; color:var(--brand); }
.stat__v small{ font-size:.5em; font-weight:600; color:var(--muted); letter-spacing:0; margin-inline-start:4px; }
.stat__l{ font-size:13px; color:var(--muted); margin-top:6px; font-weight:540; }
.stat__src{ font-size:12px; color:var(--faint); margin-top:4px; }

/* ---------- demo-data badge ---------- */
.demo-note{
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px;
  background:color-mix(in oklab, var(--acc-500) 15%, var(--surface));
  border:1px solid color-mix(in oklab, var(--acc-600) 42%, transparent);
  color:var(--acc-700); font-size:12.5px; font-weight:620; line-height:1.35;
}
html[data-theme="dark"] .demo-note{ color:var(--acc-400); }
.demo-note svg{ flex:none; }

/* ---------- footer ---------- */
.footer{ background:var(--pri-900); color:#D7DEF6; padding:clamp(52px,6vw,88px) 0 30px; }
html[data-theme="dark"] .footer{ background:#04081A; }
.footer a{ color:#D7DEF6; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--acc-400); margin-bottom:16px; font-weight:700; }
html[lang="ar"] .footer h4{ letter-spacing:.02em; text-transform:none; font-size:13.5px; }
/* Row rhythm is unchanged (32px pitch): the 10px gap moved into link padding
   so each link is a 32px-tall target instead of a 21px one. */
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.footer ul a{ display:inline-block; padding:5px 0; min-height:32px; font-size:14px; color:#A3AFD6; transition:color .2s; }
.footer ul a:hover{ color:#fff; }
.footer__bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:#8892BC;
}
.partner{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg); padding:26px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  margin-bottom:42px;
}
.partner__logo{
  width:82px; height:82px; flex:none; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(145deg, var(--acc-500), var(--acc-700));
  color:var(--pri-900); font-weight:800; font-size:24px; letter-spacing:-.04em;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
}
.partner__body{ flex:1; min-width:240px; }
.partner__body .eyebrow{ color:var(--acc-400); margin-bottom:8px; }
.partner__body h3{ font-size:24px; color:#fff; margin-bottom:6px; }
.partner__body p{ font-size:14px; color:#A3AFD6; line-height:1.65; }
.partner__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.partner__tags span{
  font-size:12px; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#C2CBEC;
}

/* ---------- utility ---------- */
/* ---------- touch targets ----------
   Kept in this block (not styles.css) because styles.css is inlined earlier at
   build time and would lose the cascade to the base rules above. */
@media (pointer:coarse), (max-width:760px){
  .btn--sm{ padding:12px 18px; min-height:44px; }
  .chip{ padding:12px 18px; min-height:44px; }
  .seg button{ padding:12px 18px; min-height:44px; }
  .icon-btn{ width:44px; height:44px; }
  .sector-select,.f-group select,.reg-form input[type=text]{ min-height:44px; }
  .rank-row{ padding:14px 12px; }
  .topbar__in{ height:64px; gap:12px; }
}

.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; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- narrow screens: no horizontal scroll ----------
   The top bar was wider than the screen below ~440px in English and ~340px in
   Arabic, which widened the whole page. The tagline goes first, then the bar
   tightens. Long button labels may wrap instead of pushing the page wide.
   When the nav is hidden its auto margin goes with it, so the tools take it
   over and stay at the far edge. */
@media (max-width:1080px){ .tools{ margin-inline-start:auto; } }
@media (max-width:1260px){ html[lang="en"] .tools{ margin-inline-start:auto; } }
@media (max-width:480px){
  html[lang="en"] .brand__txt span{ display:none; }
  .btn{ white-space:normal; text-align:center; }
}
@media (max-width:360px){
  .brand__txt span{ display:none; }
  .brand{ gap:8px; }
  .brand__mark{ width:34px; height:34px; }
  .brand__txt b{ font-size:14px; }
  .tools{ gap:4px; }
  .topbar__in{ gap:8px; }
}

/* ---------- skip link ---------- */
.skip{
  position:fixed; inset-block-start:10px; inset-inline-start:10px; z-index:120;
  padding:12px 20px; border-radius:999px; background:var(--brand); color:#fff;
  font-weight:640; font-size:15px; box-shadow:var(--shadow-3);
  transform:translateY(-200%); transition:transform .2s var(--ease);
}
html[data-theme="dark"] .skip{ color:#050B22; }
.skip:focus{ transform:none; }