/* The landing page itself; site.css carries the base, the nav and the footer. */
.section{padding-top:var(--space-32)}
@media (max-width:719px){.section{padding-top:var(--space-24)}}
/* the first section of a page with no hero clears the fixed nav */
.section.pagetop{padding-top:calc(var(--nav-h) + var(--space-24))}
.sechead{max-width:760px;margin-bottom:var(--space-12)}
.sechead.mid{margin-inline:auto;text-align:center}

/* ---------- hero: the system's gradient, the stone in the middle ---------- */
.heroframe{padding:var(--space-3) var(--space-3) 0}
.hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);color:#fff;text-align:center;
  padding:calc(var(--nav-h) + var(--space-24)) var(--gutter) 0;min-height:min(100svh, 1000px);display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(120% 80% at 50% 100%, var(--blue-200) 0%, rgba(207,231,250,0) 60%),linear-gradient(180deg, var(--blue-500) 0%, var(--blue-500) 35%, var(--blue-200) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.18), transparent 70%)}
.hero>*{position:relative}
.hero .mh-pill--glass{margin-bottom:var(--space-6)}
.hero .mh-pill:lang(ar){font-family:var(--font-arabic);letter-spacing:0;font-size:13px}
.hero h1{font:var(--type-display-xl);letter-spacing:var(--tracking-display-xl);font-size:clamp(36px,5.8vw,68px);line-height:1.05;max-width:32ch;text-wrap:balance}
.hero h1:lang(ar){font:var(--type-ar-display);font-size:clamp(32px,5.2vw,58px);line-height:1.35;max-width:18ch}
.other{margin-bottom:var(--space-4);font-size:clamp(18px,2.2vw,24px);font-weight:500;opacity:.92}
.other:lang(ar){font-family:var(--font-arabic)}
.other:lang(en){font-family:var(--font-display);letter-spacing:-0.01em}
.hero .lede{color:#fff;opacity:.9;max-width:600px;margin:var(--space-6) auto 0}
.heroacts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-4);margin-top:var(--space-8)}
.ghostlink{display:inline-flex;align-items:center;height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);text-decoration:none;font:600 15px/1 var(--font-text);color:#fff;
  box-shadow:inset 0 0 0 1px var(--glass-edge);transition:background-color var(--duration-fast) var(--ease-signature),transform var(--duration-fast) var(--ease-signature)}
.ghostlink:lang(ar){font-family:var(--font-arabic)}
.ghostlink:hover{background:var(--glass)}
.ghostlink:active{transform:scale(.97)}
.hero :focus-visible{outline-color:#fff}

/* the entrance choreography: each part rises in turn */
.js .hero [data-in]{opacity:0;transform:translateY(16px);animation:rise var(--duration-slow) var(--ease-signature) forwards;animation-delay:calc(120ms + var(--d, 0) * 80ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* the cursor over the hero: a gold nugget, the metal the stone tests, with a
   shadow that drifts after it. Mouse only; everywhere else keeps the system
   cursor. Gold lives only in the nugget's drawing: it is not a system colour. */
@media (hover:hover) and (pointer:fine){.js .hero,.js .hero *{cursor:none}}
.nug,.nugshadow{position:fixed;left:0;top:0;z-index:45;pointer-events:none;opacity:0;will-change:transform;
  transition:opacity var(--duration-fast) var(--ease-signature)}
.cursoron .nug,.cursoron .nugshadow{opacity:1}
.nug{width:30px;height:30px;margin:-15px 0 0 -15px}
.nug svg{width:100%;height:100%;overflow:visible;transition:transform var(--duration-fast) var(--ease-signature)}
.nug.hot svg{transform:scale(1.2) rotate(-12deg);transition-duration:var(--duration-base)}
.nug.press svg{transform:scale(.86)}
.nugshadow{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:var(--radius-pill);
  background:radial-gradient(closest-side, rgba(10,40,90,.42), rgba(10,40,90,0));filter:blur(3px)}
/* the stone: the mark, large; it tilts toward the pointer and draws its streak */
.stage{margin-top:auto;padding-top:var(--space-16);width:100%;display:grid;place-items:center;perspective:1200px}
.stone{width:clamp(220px,30vw,340px);aspect-ratio:1;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(28%);
  transition:transform var(--duration-slow) var(--ease-signature);filter:drop-shadow(0 40px 60px rgba(10,40,90,.35))}
.stone svg{width:100%;height:100%;overflow:visible}
.streak{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.drawn .streak{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-signature) 500ms}
@media (prefers-reduced-motion:reduce){.streak{stroke-dashoffset:0}.stone{transform:translateY(28%)}}

/* ---------- the name: a sticky stone, three beats that light in turn ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-16);align-items:start}
.storyart{position:sticky;top:calc(var(--nav-h) + var(--space-12));display:grid;gap:var(--space-6)}
.slab{position:relative;aspect-ratio:1;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card);display:grid;place-items:center;overflow:hidden}
.slab::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%, var(--blue-100), transparent 70%);opacity:.8}
.slab svg{position:relative;z-index:1;width:58%;height:58%;overflow:visible}
.slab .word{position:absolute;z-index:1;inset-inline:0;bottom:var(--space-6);text-align:center;font-family:var(--font-arabic);font-weight:600;font-size:22px;color:var(--ink-secondary)}
.markline{font:var(--type-caption);color:var(--ink-secondary);text-align:center}
.markline:lang(ar){font-family:var(--font-arabic)}
.beats{display:grid}
.beat{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:var(--space-8) 0;
  opacity:.28;transition:opacity var(--duration-slow) var(--ease-signature)}
.beat.on{opacity:1}
.beat .k{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);color:var(--accent);margin-bottom:var(--space-3)}
.beat h3{font:var(--type-headline);letter-spacing:var(--tracking-headline);font-size:clamp(28px,3.4vw,40px);margin-bottom:var(--space-4)}
.beat h3:lang(ar){font-family:var(--font-arabic);letter-spacing:0;line-height:1.4}
.beat p{font:var(--type-body-l);color:var(--ink-secondary);max-width:520px}
.beat p:lang(ar){font-family:var(--font-arabic);line-height:1.8}
.beat .k:lang(ar){font-family:var(--font-arabic);font-size:14px;letter-spacing:0}
@media (max-width:899px){
  .story{grid-template-columns:1fr;gap:var(--space-8)}
  .storyart{position:relative;top:0;max-width:360px}
  .beat,.beat.on{min-height:0;opacity:1;padding:var(--space-6) 0}
  #storystreak{transition:stroke-dashoffset 900ms var(--ease-signature) 200ms}
}

/* ---------- what it is / is not ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
@media (max-width:799px){.pair{grid-template-columns:1fr}}
.side{border-radius:var(--radius-l);padding:var(--space-12) var(--space-8);background:var(--surface);box-shadow:var(--shadow-card)}
.side.not{background:var(--ink);color:var(--on-ink);box-shadow:none}
.side .title-s{display:block;margin-bottom:var(--space-6)}
.side li{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-4) 0;border-top:1px solid var(--hairline);font:var(--type-body-l)}
.side li:lang(ar),.side li span:lang(ar){font-family:var(--font-arabic)}
.side.not li{border-top-color:rgba(127,127,127,.28)}
.side li svg{flex:none;width:22px;height:22px;margin-top:3px}
.side.is li svg{color:var(--success)}
.side.not li svg{color:var(--ink-tertiary)}

/* ---------- how it works: four white cards, in order, with the brand's line icons ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
@media (max-width:1099px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:599px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;padding:var(--space-8) var(--space-6);border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow-card)}
.step .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.step .ico{width:48px;height:48px;border-radius:var(--radius-m);display:grid;place-items:center;background:var(--blue-100);color:var(--accent)}
.step .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.step .n{font:var(--type-caption);font-variant-numeric:tabular-nums;color:var(--ink-tertiary)}
.step h3{margin-bottom:var(--space-2)}
.step p{color:var(--ink-secondary)}
.step p:lang(ar),.step h3:lang(ar),.step .n:lang(ar){font-family:var(--font-arabic)}
.step{transition:box-shadow var(--duration-base) var(--ease-signature)}
@media (hover:hover) and (pointer:fine){
  .step:hover{box-shadow:var(--shadow-float)}
  /* the reveal's transform:none outranks a plain :hover, so the lift names it */
  .js .step[data-reveal].in:hover{transform:translateY(-4px);transition-delay:0s}
}

/* ---------- the facts: an ink band, numbers that count up ---------- */
.band{border-radius:var(--radius-xl);background:var(--ink);color:var(--on-ink);padding:var(--space-16) var(--space-8);
  display:grid;grid-template-columns:repeat(4,1fr);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(50% 50% at 50% 50%, rgba(37,117,211,.35), transparent 70%);pointer-events:none}
.fact{position:relative;padding:0 var(--space-6);text-align:center}
.fact+.fact{border-inline-start:1px solid rgba(127,127,127,.3)}
.fact b{display:block;font:var(--type-display-xl);letter-spacing:var(--tracking-display-xl);font-size:clamp(40px,4.6vw,64px);line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact b:lang(ar){font-family:var(--font-arabic);letter-spacing:0}
.fact span{display:block;margin-top:var(--space-2);color:var(--ink-tertiary);font:var(--type-body)}
.fact span:lang(ar){font-family:var(--font-arabic)}
@media (max-width:899px){.band{grid-template-columns:1fr 1fr;row-gap:var(--space-12)}.fact:nth-child(3){border-inline-start:0}}
@media (max-width:479px){.band{grid-template-columns:1fr;padding:var(--space-12) var(--space-6)}.fact+.fact{border-inline-start:0;border-top:1px solid rgba(127,127,127,.3);padding-top:var(--space-12)}}

/* ---------- testimonials: one quote at a time, slides and fades between ----------
   The slides share one grid cell, so the card is as tall as the longest quote
   and nothing below it jumps. No autoplay: people read at their own pace. */
.voices{position:relative;max-width:980px;margin:0 auto;border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-card);
  padding:var(--space-16) var(--space-16) var(--space-8);overflow:hidden;touch-action:pan-y}
.voices::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(50% 50% at 50% 50%, var(--blue-100), transparent 70%);pointer-events:none}
[dir="rtl"] .voices::before{inset:-40% auto auto -20%}
@media (max-width:719px){.voices{padding:var(--space-12) var(--space-6) var(--space-6)}}
.vstage{position:relative;display:grid;--dir:1}
[dir="rtl"] .vstage{--dir:-1}
.vslide{grid-area:1/1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-12);
  opacity:0;transform:translateX(calc(var(--dir, 1) * 24px));pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-signature),transform var(--duration-slow) var(--ease-signature)}
.vslide.on{opacity:1;transform:none;pointer-events:auto}
.vslide.before{transform:translateX(calc(var(--dir, 1) * -24px))}
.vslide blockquote{margin:0;position:relative}
.vslide blockquote::before{content:"\201C";display:block;height:.5em;margin-bottom:var(--space-4);font:600 96px/1 var(--font-display);color:var(--blue-500)}
[dir="rtl"] .vslide blockquote::before{content:"\201D"}
.vslide q{quotes:none;font:var(--type-headline);letter-spacing:var(--tracking-headline);font-size:clamp(22px,2.8vw,34px);line-height:1.3;text-wrap:pretty}
.vslide q:lang(ar){font-family:var(--font-arabic);letter-spacing:0;line-height:1.7}
.vby{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
.vby b{font:var(--type-title-s);letter-spacing:var(--tracking-title-s)}
.vby span:not(.mh-pill){color:var(--ink-secondary)}
.vby b:lang(ar),.vby span:lang(ar){font-family:var(--font-arabic);letter-spacing:0}
.vby .mh-pill:lang(ar){font-size:12px;letter-spacing:0}
.vctl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--hairline)}
.varr{width:44px;height:44px;border:0;border-radius:var(--radius-pill);display:grid;place-items:center;cursor:pointer;background:var(--surface-muted);color:var(--ink);
  transition:background-color var(--duration-fast) var(--ease-signature),color var(--duration-fast) var(--ease-signature),transform var(--duration-fast) var(--ease-signature)}
.varr:hover{background:var(--ink);color:var(--on-ink)}
.varr:active{transform:scale(.94)}
.varr svg{width:16px;height:16px}
[dir="rtl"] .varr svg{transform:scaleX(-1)}
.vdots{display:flex;gap:var(--space-2)}
/* each dot is a 24px pill drawn at a third of its width, so the active one grows by transform alone */
.vdots button{width:24px;height:8px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--hairline);cursor:pointer;
  transform:scaleX(.334);transition:transform var(--duration-base) var(--ease-signature),background-color var(--duration-base) var(--ease-signature)}
.vdots button[aria-current="true"]{transform:none;background:var(--ink)}
.vdots{margin-inline:calc(var(--space-2) * -1)}

/* ---------- the doors ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:899px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow-card);
  text-decoration:none;color:var(--ink);transition:transform var(--duration-base) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature)}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow-float)}
.door:active{transform:translateY(-2px) scale(.99)}
.door .well{height:160px;border-radius:var(--radius-m);background:var(--surface-muted);display:grid;place-items:center;margin-bottom:var(--space-3);overflow:hidden;position:relative}
.door .well::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 50% 100%, var(--blue-100), transparent 70%);opacity:0;transition:opacity var(--duration-base) var(--ease-signature)}
.door:hover .well::after{opacity:1}
.door .well svg{position:relative;z-index:1;width:48px;height:48px;color:var(--accent);transition:transform var(--duration-base) var(--ease-signature)}
.door:hover .well svg{transform:translateY(-4px)}
.door b{font:var(--type-title);letter-spacing:var(--tracking-title)}
.door b:lang(ar){font:var(--type-ar-title)}
.door .sub{font:var(--type-body-l);color:var(--ink)}
.door .more{color:var(--ink-secondary);flex:1}
.door .sub:lang(ar),.door .more:lang(ar){font-family:var(--font-arabic)}
.door .mh-arrow{margin-top:var(--space-4)}
.door:hover .mh-arrow__disc,.door:focus-visible .mh-arrow__disc{transform:rotate(45deg)}
.door .mh-arrow__disc{transition:transform var(--duration-base) var(--ease-signature)}
.already{margin-top:var(--space-8);text-align:center;color:var(--ink-secondary)}
.already a{color:var(--accent);font-weight:600;text-decoration:none;margin-inline-start:var(--space-2)}
.already a:hover{text-decoration:underline}
.already:lang(ar){font-family:var(--font-arabic)}

/* ---------- questions: rows that open by height, the plus turns ---------- */
.faq{max-width:880px;margin:0 auto;display:grid;gap:var(--space-3)}
.qa{border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow-card)}
.qa button{width:100%;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border:0;background:none;cursor:pointer;text-align:start;
  font:var(--type-title-s);letter-spacing:var(--tracking-title-s)}
.qa button:lang(ar){font-family:var(--font-arabic);letter-spacing:0}
.qa button span{flex:1}
.qa .pm{flex:none;width:34px;height:34px;border-radius:var(--radius-pill);background:var(--surface-muted);display:grid;place-items:center;
  transition:transform var(--duration-base) var(--ease-signature),background-color var(--duration-base) var(--ease-signature),color var(--duration-base) var(--ease-signature)}
.qa .pm svg{width:14px;height:14px}
.qa.open .pm{transform:rotate(45deg);background:var(--ink);color:var(--on-ink)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-base) var(--ease-signature)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 var(--space-8) var(--space-6);color:var(--ink-secondary);font:var(--type-body-l);max-width:70ch;
  opacity:0;transform:translateY(-4px);transition:opacity var(--duration-fast) var(--ease-signature),transform var(--duration-fast) var(--ease-signature)}
.qa.open .ans p{opacity:1;transform:none;transition-duration:var(--duration-base)}
.qa .ans p:lang(ar){font-family:var(--font-arabic);line-height:1.8}
@media (max-width:479px){.qa button{padding:var(--space-4) var(--space-6)}.qa .ans p{padding:0 var(--space-6) var(--space-4)}}

/* ---------- the last word, on the gradient again ---------- */
.close{position:relative;overflow:hidden;border-radius:var(--radius-xl);color:#fff;text-align:center;padding:var(--space-24) var(--gutter);
  background:radial-gradient(120% 80% at 50% 100%, var(--blue-200) 0%, rgba(207,231,250,0) 60%),linear-gradient(180deg, var(--blue-500) 0%, var(--blue-500) 35%, var(--blue-200) 100%)}
.close img{width:72px;height:72px;margin:0 auto var(--space-8)}
.close .h2{max-width:18ch;margin:0 auto var(--space-8)}
.close :focus-visible{outline-color:#fff}

/* ---------- the floating bar: after the hero, gone at the doors ---------- */
.bar{position:fixed;z-index:40;inset-inline:0;bottom:var(--space-4);display:flex;justify-content:center;padding:0 var(--gutter);pointer-events:none}
.barin{pointer-events:auto;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-6);border-radius:var(--radius-pill);
  background:var(--surface);box-shadow:var(--shadow-float),0 0 0 1px var(--hairline);
  opacity:0;transform:translateY(calc(100% + var(--space-6)));
  transition:opacity var(--duration-fast) var(--ease-signature),transform var(--duration-base) var(--ease-signature)}
[dir="rtl"] .barin{padding:var(--space-2) var(--space-6) var(--space-2) var(--space-2)}
.bar.show .barin{opacity:1;transform:none;transition-duration:var(--duration-base),var(--duration-slow)}
.barin p{font:var(--type-body);font-weight:500}
.barin p:lang(ar){font-family:var(--font-arabic)}
@media (max-width:539px){.barin p{display:none}.barin{padding:var(--space-2)}}


/* ---------- hover on this page's own controls (site.css has the shared ones) ---------- */
.ghostlink{transition:background-color var(--duration-fast) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature),transform var(--duration-fast) var(--ease-signature)}
.door .mh-arrow{transition:gap var(--duration-base) var(--ease-signature)}
.qa{transition:box-shadow var(--duration-base) var(--ease-signature)}
.already a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size var(--duration-base) var(--ease-signature)}
[dir="rtl"] .already a{background-position:100% 100%}
.varr svg{transition:transform var(--duration-base) var(--ease-signature)}
@media (hover:hover) and (pointer:fine){
  .ghostlink:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #fff}
  .ghostlink:active{transform:scale(.97)}
  .door:hover .mh-arrow{gap:var(--space-4)}
  /* the reveal's transform:none outranks a plain :hover, so the lift names it */
  .js .door[data-reveal].in:hover{transform:translateY(-4px)}
  .js .door[data-reveal].in:active{transform:translateY(-2px) scale(.99)}
  .qa:hover{box-shadow:var(--shadow-float)}
  .qa:not(.open) button:hover .pm{background:var(--blue-100);color:var(--accent);transform:rotate(90deg)}
  .already a:hover{text-decoration:none;background-size:100% 1px}
  #vnext:hover svg{transform:translateX(3px)}
  #vprev:hover svg{transform:translateX(-3px)}
  [dir="rtl"] #vnext:hover svg{transform:scaleX(-1) translateX(3px)}
  [dir="rtl"] #vprev:hover svg{transform:scaleX(-1) translateX(-3px)}
  .vdots button:not([aria-current="true"]):hover{background:var(--ink-tertiary)}
}

/* ---------- the explainer video: a still that plays on demand ----------
   Nothing loads from YouTube until someone presses play, and then only from
   youtube-nocookie.com: the privacy policy says this site sets no tracking
   cookies. Always dark, like a screen, in both themes. */
.video{position:relative;aspect-ratio:16/9;max-width:1080px;margin:0 auto;border-radius:var(--radius-xl);overflow:hidden;color:#fff;
  background:radial-gradient(70% 90% at 75% 110%, rgba(37,117,211,.55), transparent 60%),radial-gradient(50% 60% at 10% 0%, rgba(159,205,243,.18), transparent 70%),#1d1d1f;
  box-shadow:var(--shadow-float);isolation:isolate}
.video::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vstone{position:absolute;width:46%;inset-inline-end:-6%;top:50%;transform:translateY(-50%) rotate(-10deg);opacity:.9;z-index:-1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));transition:transform 900ms var(--ease-signature)}
[dir="rtl"] .vstone{transform:translateY(-50%) rotate(10deg) scaleX(-1)}
.vsoon{position:absolute;top:var(--space-6);inset-inline-start:var(--space-6);display:inline-flex;align-items:center;gap:var(--space-2);height:28px;padding:0 var(--space-3);
  border-radius:var(--radius-pill);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font:600 11px/1 var(--font-text);letter-spacing:.08em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform var(--duration-base) var(--ease-signature)}
.vsoon:lang(ar){font-family:var(--font-arabic);font-size:13px;letter-spacing:0}
.vsoon.nudge{animation:nudge var(--duration-slow) var(--ease-signature)}
@keyframes nudge{30%{transform:translateY(-3px) scale(1.06)}}
.vplay{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  display:grid;place-items:center;background:#fff;color:#1d1d1f;box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:transform var(--duration-base) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature)}
.vplay::before{content:"";position:absolute;inset:-10px;border-radius:inherit;box-shadow:0 0 0 1px rgba(255,255,255,.35);opacity:0;transform:scale(.9);
  transition:opacity var(--duration-base) var(--ease-signature),transform var(--duration-slow) var(--ease-signature)}
.vplay svg{width:30px;height:30px;margin-inline-start:4px}
[dir="rtl"] .vplay svg{margin-inline-start:0;margin-inline-end:4px}
.vplay:active{transform:scale(.94)}
.vplay:focus-visible{outline:2px solid #fff;outline-offset:6px}
.vcap{position:absolute;inset-inline-start:var(--space-8);bottom:var(--space-8);display:grid;gap:var(--space-1);max-width:60%}
.vcap b{font:var(--type-title);letter-spacing:var(--tracking-title)}
.vcap span{color:rgba(255,255,255,.72)}
.vcap b:lang(ar){font:var(--type-ar-title)}
.vcap span:lang(ar){font-family:var(--font-arabic)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.playing>*:not(iframe){display:none}
@media (hover:hover) and (pointer:fine){
  .vplay:hover{transform:scale(1.08);box-shadow:0 20px 50px rgba(0,0,0,.45)}
  .vplay:hover::before{opacity:1;transform:none}
  .video:hover .vstone{transform:translateY(-52%) rotate(-6deg)}
  [dir="rtl"] .video:hover .vstone{transform:translateY(-52%) rotate(6deg) scaleX(-1)}
  .vplay:active{transform:scale(.94)}
}
@media (max-width:599px){.vcap span{display:none}.vcap{inset-inline-start:var(--space-4);bottom:var(--space-4)}.vcap b{font-size:18px;line-height:24px}
  .vsoon{top:var(--space-4);inset-inline-start:var(--space-4)}.vplay{width:64px;height:64px;margin:-32px 0 0 -32px}.vplay svg{width:24px;height:24px}}

/* ---------- the logo ribbon in the hero: an endless, slow, linear drift ----------
   Two copies of the row sit side by side and the track moves by exactly one
   of them, so the loop has no seam. A constant drift is the one motion here
   that does not use the signature ease: easing would make it pulse. It pauses
   under the pointer, runs the other way in Arabic, and stands still as a
   centred row under reduced motion. Logos are drawn in white on the blue. */
.trust{margin-top:var(--space-16);width:100%;max-width:var(--wide);display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-pill);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.trustlbl{flex:none;max-width:210px;padding-inline-end:var(--space-8);border-inline-end:1px solid var(--glass-edge);text-align:start;font:var(--type-body);font-weight:600;line-height:22px}
.trustlbl:lang(ar){font-family:var(--font-arabic);line-height:26px}
.marquee{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtrack{display:flex;width:max-content;animation:marquee var(--marquee, 40s) linear infinite}
[dir="rtl"] .mtrack{animation-direction:reverse}
.mtrack ul{display:flex;align-items:center;gap:var(--space-12);padding-inline-end:var(--space-12)}
.mtrack li{flex:none;display:flex;align-items:center}
.mtrack img{height:32px;width:auto;max-width:160px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity var(--duration-base) var(--ease-signature)}
.mtrack .ph{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px dashed rgba(255,255,255,.7);
  color:#fff;font:var(--type-caption);white-space:nowrap}
.mtrack .ph:lang(ar){font-family:var(--font-arabic)}
.mtrack .ph svg{width:18px;height:18px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){
  .marquee:hover .mtrack{animation-play-state:paused}
  .mtrack li:hover img{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .mtrack{animation:none;width:auto}
  .mtrack ul{flex-wrap:wrap;justify-content:center;row-gap:var(--space-4);padding:0}
  .mtrack ul+ul{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:719px){
  .trust{flex-direction:column;gap:var(--space-4);border-radius:var(--radius-l);padding:var(--space-4)}
  .trustlbl{max-width:none;padding:0;border:0;text-align:center}
  .marquee{align-self:stretch}
}

/* the floating bar's arrow on About points onward to the doors, not down */
[dir="rtl"] .mh-btn .go.onward{scale:-1 1}
@media (hover:hover) and (pointer:fine){.mh-btn:hover .go.onward{transform:translateX(2px)}}