/* Oqoodi marketing motion + typography layer.
   Loaded AFTER marketing.2.css. Does not define or change any brand color:
   every color below comes from the existing :root variables. */

/* ---------- Typography ---------- */
:root{
  --f-head:"Readex Pro","IBM Plex Sans Arabic",Tajawal,Cairo,Inter,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Readex Pro",Tajawal,Cairo,Inter,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.1,1);
  interpolate-size:allow-keywords;
}
body{font-family:var(--f-body);font-weight:400;font-kerning:normal;text-rendering:optimizeLegibility;line-height:1.9}
h1,h2,h3,.logo,.btn,summary,.tag,.trust b,.fg h3,.fg h4,.bento .n,.steps b,.hub b{font-family:var(--f-head)}
h1{font-weight:700;font-size:clamp(1.85rem,4.4vw,3.05rem);line-height:1.32;text-wrap:balance}
h2{font-weight:600;line-height:1.45;text-wrap:balance}
h3{font-weight:600}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0}
html[lang=en] h1{letter-spacing:-.025em;line-height:1.18}
html[lang=en] h2{letter-spacing:-.015em}
.lead{font-weight:400;max-width:62ch;text-wrap:pretty}
.prose p,.bento p,.cards p,.hub span,details p,.trust span,.steps span{text-wrap:pretty}
.prose p{line-height:2}
.btn{font-weight:600}
.logo{font-weight:700}
nav.m a{font-weight:500}
summary{font-weight:600}
.fg h3{margin:0 0 .6rem;color:var(--goldt);font-size:1rem}
.tag{font-weight:500}

/* ---------- Always-on refinements (safe without JS) ---------- */
header.top{transition:box-shadow .35s ease,background-color .35s ease}
header.top .bar{transition:padding .35s var(--ease)}
header.top.scrolled{box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
header.top.scrolled .bar{padding-block:.35rem}
nav.m a{transition:background-color .25s ease,color .25s ease}
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .25s var(--ease),box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.btn:hover{transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px))}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
.btn.g::after{display:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* Cursor spotlight on cards (uses the existing gold, drawn only under a fine pointer) */
.bento article,.cards a,.hub a,.trust>div{background-image:radial-gradient(240px circle at var(--mx,-400px) var(--my,-400px),color-mix(in srgb,var(--gold) 13%,transparent),transparent 72%)}
.bento article,.cards a,.hub a{transition:transform .35s var(--ease),border-color .25s ease}
.cards a small{display:inline-block;transition:transform .3s var(--ease)}
.cards a:hover small{transform:translateX(-4px)}
html[dir=ltr] .cards a:hover small{transform:translateX(4px)}

/* FAQ: animated open/close where the browser supports ::details-content */
details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto}
summary::after{transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(180deg)}

/* CTA aurora: same two gradient colors, slow drift */
.cta{background-size:170% 170%;background-position:0% 50%}

/* Scroll progress (element injected by motion.js) */
.mo-bar{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:80;pointer-events:none;background:linear-gradient(90deg,var(--gold),var(--blue));transform:scaleX(var(--p,0));transform-origin:100% 50%}
html[dir=ltr] .mo-bar{transform-origin:0 50%}

/* Hero signature stroke: a contract-signing flourish that draws itself */
.hero h1::after{content:"";display:block;width:min(210px,52vw);height:30px;margin:.35rem auto 0;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 34' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 24C22 6 44 4 48 17c3 11-14 15-10 4C44 6 82 5 112 19c22 10 50 4 70-8 8-5 22-6 34-3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 34' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 24C22 6 44 4 48 17c3 11-14 15-10 4C44 6 82 5 112 19c22 10 50 4 70-8 8-5 22-6 34-3'/%3E%3C/svg%3E") center/contain no-repeat}

/* Word masks (JS wraps words; Arabic is split by word only, never by letter) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.14em .3em;margin-block:-.14em -.3em}
.wi{display:inline-block}

/* ---------- Motion (only when JS marked the page: html.mo) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* cross-page transitions between marketing pages */
  @view-transition{navigation:auto}
  header.top{view-transition-name:mo-head}
  ::view-transition-old(root){animation:.22s ease both mo-out}
  ::view-transition-new(root){animation:.42s var(--ease) both mo-in}
  @keyframes mo-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes mo-in{from{opacity:0;transform:translateY(12px)}}

  .cta{animation:mo-aurora 14s ease-in-out infinite alternate}
  @keyframes mo-aurora{to{background-position:100% 50%}}

  /* 1) Page-load sequence in the hero (the one orchestrated moment) */
  .mo .hero .crumb,.mo .hero .tag,.mo .hero .lead,.mo .hero .row{opacity:0}
  .mo .hero .wi{transform:translateY(115%)}
  .mo .hero h1::after{clip-path:inset(0 100% 0 0)}
  .mo.go .hero .crumb{animation:mo-fade .7s var(--ease) .02s both}
  .mo.go .hero .tag{animation:mo-fade .7s var(--ease) .1s both}
  .mo.go .hero .wi{animation:mo-rise .95s var(--ease) calc(.16s + var(--i,0)*.06s) both}
  .mo.go .hero h1::after{animation:mo-draw 1.5s cubic-bezier(.5,0,.2,1) .85s both}
  .mo.go .hero .lead{animation:mo-fade .8s var(--ease) .62s both}
  .mo.go .hero .row{animation:mo-fade .8s var(--ease) .78s both}
  @keyframes mo-rise{from{transform:translateY(115%)}to{transform:none}}
  @keyframes mo-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes mo-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

  /* 2) Scroll reveals (class .in is added by motion.js through IntersectionObserver) */
  .mo main h2 .wi{transform:translateY(115%);transition:transform .85s var(--ease) calc(var(--i,0)*.045s)}
  .mo main h2.in .wi{transform:none}
  .mo .rv{opacity:0;clip-path:inset(0 0 96% 0 round 20px);transform:translateY(22px) scale(.985);transition:opacity .6s ease,clip-path .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*70ms);will-change:transform}
  .mo .rv.in{opacity:1;clip-path:inset(-24px -24px -24px -24px round 20px);transform:none}
  .mo .rv.done{will-change:auto;clip-path:none}
  .mo .steps div.rv{clip-path:none}
  .mo .steps div.rv:before{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0)*70ms + .25s)}
  .mo .steps div.rv.in:before{transform:scale(1)}
  .mo .bento .n{transition:transform .5s var(--ease)}
  .mo .bento article:hover .n{transform:rotate(-8deg) scale(1.08)}
  .mo .cta.rv{clip-path:inset(0 0 96% 0 round 28px)}
  .mo .cta.rv.in{clip-path:inset(-24px round 28px)}
  .mo .note.rv,.mo details.rv,.mo .tblw.rv{clip-path:none;transform:translateY(14px)}
  .mo .note.rv.in,.mo details.rv.in,.mo .tblw.rv.in{transform:none}
  .mo .prose.rv{clip-path:none;transform:translateY(16px)}
  .mo .chips a.rv{clip-path:none;transform:translateY(10px) scale(.96)}
  .mo .chips a.rv.in{transform:none}
}