/* =====================================================
   شراع — Base: tokens · reset · type · buttons · nav
   Brand (from the logo): navy #192553 · gold #B38942
   Supporting blues (from the colour reference): #03195B → #CBE9FD
   ===================================================== */

:root{
  --paper:#F3F3FB;
  --paper-2:#E7E8F7;
  --white:#fff;
  --ink:#0C1230;
  --ink-2:#39426A;
  --mute:#8A92AD;
  --line:rgba(12,18,48,.1);

  --navy:#192553;
  --navy-900:#070B22;
  --black:#02030A;
  --gold:#B38942;
  --gold-300:#DDB878;

  --electric:#1951FC;
  --blue-950:#03195B;
  --blue-600:#0B2CB1;
  --blue-400:#3781FC;
  --blue-200:#62B4FF;
  --blue-100:#CBE9FD;

  --f-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-text:"IBM Plex Sans Arabic","Alexandria",system-ui,sans-serif;
  --f-serif:"Noto Naskh Arabic","Amiri",serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:20px;
  --nav-h:62px;

  --grain-dark: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.3 0 0 0 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.75 var(--f-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;border-radius:10px}
::selection{background:var(--navy);color:#fff}
.wrap{width:min(100% - var(--gutter)*2,1200px);margin-inline:auto}
.ico{width:1em;height:1em;flex:none}

/* ---------------- type ---------------- */
.h-lg{font:300 clamp(2.2rem,9vw,4.8rem)/1.18 var(--f-display);color:var(--ink);text-wrap:balance}
.h-md{font:300 clamp(1.7rem,6.2vw,2.8rem)/1.3 var(--f-display);color:var(--ink);text-wrap:balance}
.dim{color:var(--mute)}
.serif{font-family:var(--f-serif);font-weight:600}
.lead{font-size:1.06rem;color:var(--ink-2);max-width:32em}
.label{
  display:inline-flex;align-items:center;gap:10px;
  font:500 13px/1 var(--f-text);color:var(--ink);
}
.label::before{content:"";width:7px;height:7px;background:currentColor;border-radius:1px;flex:none}
.label em{font-style:normal;opacity:.45;font-feature-settings:"tnum"}
.on-dark .label,.label--light{color:rgba(255,255,255,.78)}

.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grain-dark);mix-blend-mode:multiply;opacity:.16;pointer-events:none;z-index:1}
.id__card.grain::after,.scene--market .grain::after,.scene--road .grain::after{background-image:var(--grain-light);mix-blend-mode:overlay;opacity:.5}

/* ---------------- buttons ---------------- */
.btn{
  --bg:var(--navy);--fg:#fff;--chip:#fff;--chip-fg:var(--navy);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:54px;padding-inline:26px 7px;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font:500 15.5px/1 var(--f-text);white-space:nowrap;isolation:isolate;
  transition:transform .7s var(--ease),translate .6s var(--ease),box-shadow .7s var(--ease),background-color .4s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn--plain{padding-inline:28px}
.btn__t{position:relative;display:block;overflow:hidden;height:1.4em;line-height:1.4}
.btn__t i{display:block;font-style:normal;transition:transform .7s var(--ease)}
.btn__t i+i{position:absolute;inset:0;transform:translateY(110%)}
.btn:hover .btn__t i:first-child{transform:translateY(-110%)}
.btn:hover .btn__t i+i{transform:none}
.btn__chip{
  position:relative;width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;background:var(--chip);color:var(--chip-fg);
  transition:transform .7s var(--ease);
}
.btn__chip svg{grid-area:1/1;width:17px;height:17px;transition:transform .7s var(--ease)}
.btn__chip svg+svg{transform:translateX(170%)}
.btn:hover .btn__chip svg:first-child{transform:translateX(-170%)}
.btn:hover .btn__chip svg+svg{transform:none}

.btn--navy{box-shadow:0 14px 30px -16px rgba(25,37,83,.8)}
.btn--navy:hover{--bg:var(--blue-600)}
.btn--white{--bg:#fff;--fg:var(--ink);--chip:var(--navy);--chip-fg:#fff;box-shadow:0 14px 34px -18px rgba(0,0,0,.45)}
.btn--sky{
  --fg:#fff;--chip:#fff;--chip-fg:#5170E8;
  background:linear-gradient(100deg,#5F80EE 0%,#8FA8F6 100%);
  box-shadow:0 16px 36px -14px rgba(84,112,230,.7),inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--glass{
  --bg:rgba(255,255,255,.12);--fg:#fff;--chip:#fff;--chip-fg:var(--navy);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--line{--bg:transparent;--fg:var(--ink);--chip:var(--ink);--chip-fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(12,18,48,.2)}
.btn--line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--sm{height:44px;padding-inline:22px;font-size:14.5px}
.btn--block{width:100%}

.play{display:inline-flex;align-items:center;gap:12px;font:500 15.5px/1 var(--f-text);color:var(--ink)}
.play__dot{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--ink);box-shadow:0 12px 30px -14px rgba(12,18,48,.5);
  transition:transform .6s var(--ease);
}
.play__dot svg{width:15px;height:15px;transform:scaleX(-1);margin-inline-start:-2px}
.play:hover .play__dot{transform:scale(1.1)}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:300;
  transform:translate(-50%,30px);opacity:0;pointer-events:none;
  padding:12px 22px;border-radius:999px;font-size:.9rem;font-weight:500;color:#fff;
  background:rgba(12,18,48,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .6s var(--ease),opacity .4s;
}
.toast.is-on{transform:translate(-50%,0);opacity:1}

/* ---------------- nav ---------------- */
.nav{
  --nav-fg:#fff;--nav-bg:rgba(255,255,255,.22);--nav-bd:rgba(255,255,255,.42);--act-bg:#fff;--act-fg:var(--ink);
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 14px 0 14px;pointer-events:none;color:var(--nav-fg);
  transition:transform .8s var(--ease),color .4s;
}
.nav>*{pointer-events:auto}
.nav[data-theme="light"]{--nav-fg:var(--ink);--nav-bg:rgba(255,255,255,.78);--nav-bd:rgba(12,18,48,.08);--act-bg:var(--navy);--act-fg:#fff}
.nav[data-theme="dark"]{--nav-fg:#fff;--nav-bg:rgba(255,255,255,.1);--nav-bd:rgba(255,255,255,.18);--act-bg:#fff;--act-fg:var(--ink)}
.nav[data-theme="paper"]{--nav-fg:#14196A;--nav-bg:transparent;--nav-bd:transparent;--act-bg:transparent;--act-fg:#14196A}
.nav.is-hidden{transform:translateY(-130%)}
/* phones: once scrolled, a soft frosted band sits behind the bar so it never collides with page text */
@media (max-width:899px){
  .nav::before{
    content:"";position:absolute;inset:0 0 -14px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
    background:rgba(243,243,251,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    -webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent);
  }
  .nav[data-theme="dark"]::before{background:rgba(5,9,30,.62)}
  .nav.is-solid::before{opacity:1}
  .menu-open .nav::before{opacity:0}
}
.nav__brand{display:flex;align-items:center;--logo-n:#192553}
.nav__logo{display:block;width:60px;height:46px;filter:drop-shadow(0 6px 14px rgba(20,25,106,.12))}
.nav__logo .lg-g{fill:#B38942}
.nav__logo .lg-n{fill:var(--logo-n);transition:fill .4s}
.nav[data-theme="dark"] .nav__brand,.menu-open .nav .nav__brand{--logo-n:#fff}
.nav__menu,.nav__cta{display:none}
.nav__burger{
  position:relative;width:46px;height:46px;border-radius:50%;flex:none;
  background:var(--nav-bg);box-shadow:inset 0 0 0 1px var(--nav-bd);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  transition:background-color .4s;
}
.nav__burger i{position:absolute;inset-inline:15px;height:1.75px;border-radius:2px;background:currentColor;transition:transform .6s var(--ease),top .6s var(--ease)}
.nav__burger i:first-child{top:19px}.nav__burger i:last-child{top:26px}
.nav__burger[aria-expanded="true"] i:first-child{top:22.5px;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{top:22.5px;transform:rotate(-45deg)}
.menu-open .nav{--nav-fg:#fff;--nav-bg:rgba(255,255,255,.1);--nav-bd:rgba(255,255,255,.2)}

.menu{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;
  padding:110px 24px calc(30px + env(safe-area-inset-bottom));color:#fff;background:var(--navy-900);
  clip-path:circle(0% at calc(100% - 37px) 37px);visibility:hidden;
  transition:clip-path .9s var(--ease-io),visibility 0s .9s;
}
.menu::before{content:"";position:absolute;inset:auto -30% -25% -30%;height:60%;background:radial-gradient(50% 55% at 50% 60%,rgba(25,81,252,.55),rgba(11,44,177,.25) 50%,transparent 75%);filter:blur(20px);pointer-events:none}
.menu.is-open{clip-path:circle(150% at calc(100% - 37px) 37px);visibility:visible;transition:clip-path .9s var(--ease-io),visibility 0s}
.menu__links{position:relative;display:flex;flex-direction:column}
.menu__links a{
  display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font:300 clamp(2rem,9vw,2.8rem)/1.2 var(--f-display);
  opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease),color .3s;
}
.menu__links a small{font:400 .78rem var(--f-text);color:var(--gold-300);min-width:1.8em;font-feature-settings:"tnum"}
.menu__links a:hover{color:var(--gold-300)}
.menu.is-open .menu__links a{opacity:1;transform:none;transition-delay:calc(.3s + var(--i,0)*.06s)}
.menu .btn{position:relative}
.menu__foot{position:relative;font-size:.82rem;color:rgba(255,255,255,.45)}

/* ---------------- reveals ---------------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* word-mask headline reveal */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.14em;margin-block:-.14em}
.js [data-split] .wi{display:inline-block;transform:translateY(112%);transition:transform 1.1s var(--ease) calc(var(--i,0)*.045s)}
.js [data-split].is-in .wi{transform:none}
.js [data-in]{opacity:0;transform:translateY(24px);animation:in 1.3s var(--ease) var(--d,0s) forwards}
@keyframes in{to{opacity:1;transform:none}}

/* ---------------- desktop ---------------- */
@media (min-width:900px){
  :root{--gutter:40px;--nav-h:66px}
  .nav{padding:22px 32px 0}
  .nav__logo{width:68px;height:52px}
  .nav__menu{
    position:absolute;left:50%;top:calc(22px + 3px);transform:translateX(-50%);
    display:flex;gap:2px;padding:5px;border-radius:999px;
    background:var(--nav-bg);box-shadow:inset 0 0 0 1px var(--nav-bd);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    transition:background-color .4s;
  }
  .nav__menu a{position:relative;z-index:1;padding:11px 22px;border-radius:999px;font:500 14.5px/1 var(--f-text);transition:color .5s var(--ease)}
  .nav__menu a.is-active{color:var(--act-fg)}
  .nav__ind{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;opacity:0;border-radius:999px;background:var(--act-bg);transition:transform .7s var(--ease),width .7s var(--ease),opacity .4s,background-color .4s;box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
  .nav__cta{display:inline-flex;--bg:#fff;--fg:var(--ink)}
  .nav[data-theme="light"] .nav__cta,.nav[data-theme="paper"] .nav__cta{--bg:var(--navy);--fg:#fff}
  .nav[data-theme="paper"] .nav__menu{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .nav[data-theme="paper"] .nav__menu a{opacity:.62}
  .nav[data-theme="paper"] .nav__menu a.is-active,.nav[data-theme="paper"] .nav__menu a:hover{opacity:1}
  .nav__burger,.menu{display:none}
  .nav.is-hidden{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal],.js [data-in]{opacity:1;transform:none;animation:none;transition:none}
  .js [data-split] .wi{transform:none;transition:none}
}