:root{
  --night:#070B22;
  --navy:#12183A;
  --ivory:#FBFAF7;
  --paper:#F4F3EF;
  --accent:#4B5EF0;
  --accent-hover:#3D4FD8;
  --accent-text:#5668F0;
  --peri:#8B98F5;
  --ink2:#5C6272;
  --muted:#6B738D;
  --line:#E2E3EA;
  --paid:#1B7E50;--paidw:#E9F5EE;--pend:#906716;--pendw:#FBF1E1;--part:#1C7689;--partw:#E4F1F4;--over:#B3341F;--overw:#FBEAE6;--draft:#666D86;--draftw:#F0F0F2;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(4,6,20,.9),0 4px 18px rgba(4,6,20,.6),0 12px 50px rgba(4,6,20,.6);
  --f-display:"Bricolage Grotesque","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4.5vw,64px);
}
html[lang=ar]{--f-display:"IBM Plex Sans Arabic",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--night);color:var(--navy);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;animation:pagein 1s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:13px;color:var(--muted)}
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.wrap{width:min(1180px,100% - var(--gutter)*2);margin-inline:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;font:600 16px/1 var(--f-body);text-decoration:none;border:0;white-space:nowrap;box-shadow:0 14px 34px -14px rgba(75,94,240,.75);transition:transform .4s var(--ease),background-color .3s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(75,94,240,.85)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn-lg{min-height:56px;padding:0 32px;font-size:17px}
.btn-ghost{background:rgba(255,255,255,.4);color:var(--navy);box-shadow:inset 0 0 0 1.5px rgba(18,24,58,.3);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px rgba(18,24,58,.5)}
@media (pointer:coarse){.btn,.lang,.links a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);color:#F6F5F1;transition:background-color .5s var(--ease),color .5s var(--ease),padding .4s var(--ease),box-shadow .5s var(--ease)}
.nav.solid{background:rgba(7,11,34,.55);backdrop-filter:blur(14px) saturate(1.2);padding-block:12px}
.nav.on-light{color:var(--navy)}
.nav.on-light.solid{background:rgba(251,250,247,.78);box-shadow:0 1px 0 rgba(18,24,58,.08)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:600 18px/1 var(--f-body)}
.mark{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none}
.mark svg{width:70%;height:70%}
.links{display:flex;gap:28px}
.links a{text-decoration:none;font-size:15px;opacity:.78;transition:opacity .3s var(--ease)}
.links a:hover{opacity:1}
.nav-end{display:flex;align-items:center;gap:14px}
.lang{background:none;border:0;color:inherit;opacity:.78;font:500 15px/1 var(--f-body);cursor:pointer;padding:8px 4px}
.lang:hover{opacity:1}
@media (max-width:900px){.links{display:none}}

/* ============ CINEMATIC STAGE ============ */
.film{position:relative;height:768vh;background:var(--night)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.layer{position:absolute;inset:0}
.poster{background:center/cover no-repeat}
#filmVideo{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #filmVideo{opacity:1}
.stage.video-failed #filmVideo{display:none}
.vignette{pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 45%,rgba(4,6,20,.55) 100%);opacity:var(--vig,1)}
.motes{pointer-events:none;opacity:calc(var(--vig,1)*.7);background-image:radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,236,200,.6),transparent 60%),radial-gradient(1px 1px at 72% 34%,rgba(139,152,245,.55),transparent 60%),radial-gradient(1.6px 1.6px at 38% 68%,rgba(255,236,200,.35),transparent 60%),radial-gradient(1px 1px at 86% 78%,rgba(139,152,245,.5),transparent 60%),radial-gradient(1.4px 1.4px at 54% 12%,rgba(255,236,200,.45),transparent 60%);background-size:380px 380px;animation:motes 90s linear infinite;animation-delay:-30s}
@keyframes motes{to{background-position:-380px -760px}}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* each plate arrives with a slow settle, as if the camera eases into the new set */
.layer.plate.tl{transform:scale(calc(1.07 - .07*var(--t,1)));transform-origin:50% 45%}
.plate img.drift{animation:drift 60s ease-in-out infinite alternate;animation-delay:-12s}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.06) translate(-1%,-.5%)}}
.warm{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 28%,rgba(255,210,140,.28),transparent 60%);pointer-events:none}
.shadow-over{mix-blend-mode:multiply;opacity:.36;pointer-events:none}

/* timeline-driven elements: JS writes --v (visibility 0..1) and --t (entry progress 0..1) */
.tl{opacity:var(--v,0);will-change:opacity,transform}
.layer.tl{visibility:visible}
.kpi.tl,.tbl-r.tl,.tbl-h.tl,.dash-top.tl{transform:translateY(calc((1 - var(--t,0))*18px))}
.pay.tl{transform:translateY(calc((1 - var(--t,0))*26px)) scale(calc(.97 + .03*var(--t,0)))}
.chip.tl{transform:scale(calc(.85 + .15*var(--t,0)))}

/* ui hosts mapped by JS */
.ui-host{position:absolute;left:0;top:0;transform-origin:0 0}
.sheet{mix-blend-mode:multiply}

/* ---------- handwriting on the filmed paper (design size 600 x 780) ---------- */
.hw-host{position:absolute;left:0;top:0;width:600px;height:780px;transform-origin:0 0;pointer-events:none;z-index:3;mix-blend-mode:multiply;opacity:calc(var(--iw,0)*var(--fade,1));visibility:hidden}
.hw{position:relative;width:600px;height:780px;padding:58px 56px;direction:ltr;color:#1C2660;font:600 34px/1.2 "Caveat",cursive}
.hw-l{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-inline:12px;margin-inline:-12px;clip-path:inset(0 calc((1 - var(--w,1))*100%) 0 0)}
.hw-l.done{clip-path:none}
.hw-l.t{font:400 72px/1 "Great Vibes",cursive;margin-bottom:6px}
.hw-l.n{justify-content:flex-end;font-size:28px;margin-top:-34px;margin-bottom:34px;opacity:.85}
.hw-l.c{font-size:48px;margin-bottom:40px}
.hw-l.r{padding:10px 0;border-bottom:1.5px dashed rgba(28,38,96,.22)}
.hw-rule{height:3px;margin:30px 0 18px;border-radius:2px;background:#1C2660;transform:rotate(-.6deg);opacity:.85}
.hw-l.tot{justify-content:flex-end;font-size:54px}
.hw-macro{position:absolute;z-index:3;left:0;top:0;direction:ltr;color:#1C2660;mix-blend-mode:multiply;font-family:"Caveat",cursive;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none}
.hw-macro span{display:block;padding-inline:.25em;margin-inline:-.25em;clip-path:inset(0 calc((1 - var(--w,0))*100%) 0 0)}

/* ---------- real UI: invoice (design size 600 x 780) ---------- */
.inv{width:600px;height:780px;padding:46px 46px 40px;color:var(--navy);font-family:var(--f-body);position:relative;background:transparent}
.inv.bare{opacity:.62}
.inv-hd{display:flex;justify-content:space-between;align-items:flex-start}
.inv-co{display:flex;gap:14px;align-items:center}
.inv-co .mark{width:46px;height:46px;border-radius:12px}
.inv-cn{font:700 24px/1.1 "Bricolage Grotesque",var(--f-body)}
.inv-cs{font-size:14px;color:var(--ink2)}
.inv-no{text-align:end}
.inv-no small{display:block;font-size:12px;letter-spacing:.14em;color:var(--ink2)}
.inv-no b{font:500 22px var(--f-mono)}
.inv-bt{display:flex;justify-content:space-between;margin-top:46px}
.inv-bt small{display:block;font-size:12px;letter-spacing:.06em;color:var(--ink2)}
.inv-bt b{font-size:19px;font-weight:600}
.inv-items{margin-top:40px}
.inv-row{display:flex;justify-content:space-between;padding:14px 12px;border-bottom:1px solid #E7E6E2;font-size:16px}
.inv-row.th{background:rgba(18,24,58,.05);color:var(--ink2);font-size:13px;padding-block:10px;border:0}
.inv-tot{display:flex;justify-content:flex-end;gap:40px;margin-top:22px;padding-top:16px;border-top:2px solid var(--navy);font-size:19px}
.inv-tot b{font:500 22px var(--f-mono)}
.inv-chips{position:absolute;inset-inline-start:46px;bottom:40px;display:grid}
.inv-chips>.chip{grid-area:1/1;font-size:17px;padding:10px 17px}
/* the invoice builds in groups as the scroll advances */
.inv .g{opacity:var(--g,1);transform:translateY(calc((1 - var(--g,1))*12px))}

.chip{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--f-body);font-style:normal;padding:8px 13px;border-radius:999px;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.c-pend{color:var(--pend);background:var(--pendw)}.c-paid{color:var(--paid);background:var(--paidw)}.c-part{color:var(--part);background:var(--partw)}.c-over{color:var(--over);background:var(--overw)}.c-draft{color:var(--draft);background:var(--draftw)}

/* payment panel (design width 420) */
.pay{width:420px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.95);border-radius:22px;padding:30px;color:var(--navy);box-shadow:0 34px 80px -30px rgba(18,24,58,.45)}
.pay-h{font:700 24px "Bricolage Grotesque",var(--f-body);margin-bottom:8px}
.pay-l{display:block;font-size:13px;color:var(--ink2);margin:14px 0 6px}
.pay-f{border:1.5px solid #868FBC;border-radius:10px;padding:12px 14px;font-size:19px;background:#fff;display:grid}
.pay-f>.swap,.pay-bal b>.swap{grid-area:1/1}
.pay-btn{margin-top:22px;background:var(--accent);color:#fff;border-radius:12px;padding:15px;text-align:center;font-weight:600}
.pay-bal{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.pay-bal b{display:grid;font:500 22px var(--f-mono);color:var(--navy)}
.pay-bal .ok{color:var(--paid)}
.pay-bar{position:relative;height:8px;border-radius:4px;background:#EFEDE6;margin-top:12px;overflow:hidden}
.pay-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:42%;border-radius:inherit;background:var(--part)}
.pay-bar i.full{width:100%;background:var(--paid)}

/* chips on the table */
.chips-field{position:absolute;inset:0}
.chips-field .pt{position:absolute;left:0;top:0;translate:-50% -50%;box-shadow:0 8px 20px -8px rgba(18,24,58,.35)}
.hero-chip{font-size:17px;padding:11px 17px;box-shadow:0 0 0 6px rgba(75,94,240,.18),0 0 40px rgba(75,94,240,.55)!important}

/* overview on the wall (design width 1180) */
.dash-wrap{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(var(--ds,.8));transform-origin:50% 50%}
.dash{width:1180px;color:var(--navy)}
.dash-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.dash-h{font:700 42px/1 "Bricolage Grotesque",var(--f-body)}
.dash-s{margin-top:8px;color:var(--ink2);font-size:17px}
.dash-new{background:var(--accent);color:#fff;border-radius:12px;padding:14px 22px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kpi{background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 20px 44px -26px rgba(18,24,58,.35)}
.kpi small{font-size:15px;color:var(--ink2);display:block}
.kpi b{display:block;font:500 34px/1.2 var(--f-mono);margin:8px 0 6px}
.kpi>span{font-size:13px;color:var(--muted)}
.tbl{margin-top:22px;background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tbl-h{display:flex;justify-content:space-between;padding:18px 24px;font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
.tbl-r{display:grid;grid-template-columns:1.4fr 1fr .8fr 1fr 1fr;padding:14px 24px;border-bottom:1px solid #EFEFF2;font-size:15px;align-items:center}
.tbl-r.hl{background:#EDEEFB}
.accent-t{color:var(--accent-text)}

/* ---------- captions ---------- */
/* captions stay on the physical left in both languages: the filmed composition does not mirror */
.cap{position:absolute;z-index:5;left:var(--gutter);top:50%;translate:0 -50%;width:min(24vw,420px);color:#F6F5F1;text-shadow:var(--tshadow)}
.cap h1,.cap h2{font:500 clamp(26px,3.2vw,58px)/1.06 var(--f-display);letter-spacing:-.025em}
.cap-ink{color:var(--navy);text-shadow:0 1px 18px rgba(251,250,247,.7)}
.cap-ink::before{background:radial-gradient(ellipse 60% 55% at 45% 50%,rgba(251,250,247,.6),rgba(251,250,247,.25) 50%,transparent 75%)}
.cap-ink .cap-sub{color:#3A4060}
html[lang=ar] .cap h1,html[lang=ar] .cap h2{font-weight:600;letter-spacing:0;line-height:1.3}
.cap::before{content:"";position:absolute;inset:-40% -30% -40% -60%;z-index:-1;background:radial-gradient(ellipse 60% 55% at 45% 50%,rgba(4,6,20,.55),rgba(4,6,20,.25) 50%,transparent 75%);opacity:calc(.3 + .7*var(--t,1))}
.cap-dark{color:var(--navy);text-shadow:none;top:max(96px,14%);translate:0 0}
.cap-dark::before{background:radial-gradient(ellipse 60% 55% at 45% 50%,rgba(251,250,247,.75),rgba(251,250,247,.35) 50%,transparent 75%)}
.cap-card{color:var(--navy);text-shadow:none;top:max(96px,12%);translate:0 0;background:rgba(251,250,247,.84);backdrop-filter:blur(10px);padding:28px 32px;border-radius:20px;width:auto;max-width:min(40vw,560px)}
.cap-card::before{display:none}
.cap-card h2{font-size:clamp(30px,3.4vw,54px)}
.kicker{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#C9CEF7;margin-bottom:20px}
html[lang=ar] .kicker{letter-spacing:0;font:600 15px/1.4 var(--f-body)}
.cap-sub{margin-top:18px;font-size:clamp(16px,1.3vw,19px);opacity:calc(var(--t,1));max-width:38ch;color:inherit}
.cap-dark .cap-sub{color:var(--ink2)}
.split .w{display:inline-block;white-space:nowrap;--kc:clamp(0,(var(--t,1) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.demo{position:absolute;z-index:6;inset-inline-end:var(--gutter);bottom:22px;font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:6px;background:rgba(18,24,58,.08);color:rgba(18,24,58,.7)}
.skip-intro{position:absolute;z-index:6;inset-inline-start:var(--gutter);bottom:24px;font-size:14px;color:inherit;opacity:.75;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .3s var(--ease),color .5s var(--ease)}
.skip-intro:hover,.skip-intro:focus{opacity:1}
.stage{color:#F6F5F1}
.stage.lit{color:var(--navy)}
.ring{position:absolute;z-index:6;width:40px;height:40px;bottom:22px;left:50%;margin-left:-20px;color:var(--peri);transform:rotate(-90deg);transition:opacity .6s var(--ease)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
@media (max-height:560px){.ring,.skip-intro{display:none}}

/* ============ STATIC STORY (phones, reduced motion) ============ */
.story{display:none}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .film{display:none}
  .story{display:block;background:var(--ivory)}
}
.m-hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;color:#F6F5F1;overflow:hidden;background:var(--night)}
.m-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,34,.75) 0%,rgba(7,11,34,.25) 50%,rgba(7,11,34,.1) 100%)}
.m-hero-in{position:relative;z-index:1;padding:110px var(--gutter) 40px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%}
.m-hero h1{font:500 clamp(34px,9vw,52px)/1.05 var(--f-display);letter-spacing:-.02em;text-shadow:var(--tshadow);max-width:13ch}
.m-hero .btn{width:100%;max-width:420px}
.link-quiet{color:#C9CEF7;font-size:15px}
.m-card{position:relative;overflow:hidden;min-height:92svh;display:flex;align-items:flex-end}
.m-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-in{position:relative;z-index:1;width:100%;padding:40px var(--gutter) 48px;display:flex;flex-direction:column;gap:16px}
.m-in h2{font:500 clamp(30px,8vw,46px)/1.08 var(--f-display);letter-spacing:-.02em;color:#F6F5F1;text-shadow:var(--tshadow);max-width:14ch}
.m-in.dark h2{color:var(--navy);text-shadow:none}
.m-dawn .m-in{align-self:stretch;justify-content:space-between}
.m-inv{width:600px;height:auto;background:#fff;border-radius:14px;box-shadow:0 30px 60px -30px rgba(18,24,58,.6);zoom:var(--ms,.55)}
.m-in{padding-top:96px}
.m-tl{list-style:none;margin:0;padding:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-radius:18px;display:flex;flex-direction:column;gap:10px;max-width:360px}
.m-tl small{color:var(--ink2);font-size:13px;padding-inline-start:4px}
.m-in .kpi{max-width:420px}
.demo-s{font:500 11px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ============ FINAL (5A) ============ */
.final{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ivory);padding:140px var(--gutter) 100px}
.final-bg{position:absolute;inset:0;background:url(plate-8.jpg) center/cover no-repeat}
.final-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 50% 48%,rgba(251,250,247,.55),transparent 75%)}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:900px}
.brand.big{font-size:22px}
.brand.big .mark{width:38px;height:38px;border-radius:11px}
.final-h{font:500 clamp(46px,7vw,108px)/1 var(--f-display);letter-spacing:-.035em}
html[lang=ar] .final-h{letter-spacing:0;line-height:1.25;font-weight:600}
.final-s{font-size:clamp(17px,1.5vw,21px);color:#3A4060;max-width:46ch}
.final-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
.trust{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[lang=ar] .trust{letter-spacing:0;font:500 14px var(--f-body)}
@media (max-width:520px){.final-cta .btn{width:100%}}

/* ============ SECTIONS ============ */
.sec{background:var(--ivory);padding-block:clamp(90px,12vw,160px)}
.label{font:500 12px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
html[lang=ar] .label{letter-spacing:0;font:600 14px var(--f-body)}
.sec-h{font:500 clamp(34px,4.6vw,62px)/1.05 var(--f-display);letter-spacing:-.025em;max-width:18ch}
html[lang=ar] .sec-h{letter-spacing:0;line-height:1.3;font-weight:600}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

.feats{margin-top:60px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:820px){.feats{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease)}
.feat:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(18,24,58,.35)}
.feats .feat:nth-child(2){transition-delay:.08s}.feats .feat:nth-child(3){transition-delay:.16s}.feats .feat:nth-child(4){transition-delay:.24s}
.feats .feat.in:nth-child(n){transition-delay:0s}
.feat h3{font:600 22px/1.25 var(--f-display);margin-top:8px}
.feat p{color:var(--ink2);font-size:16px}
.feat-ui{min-height:110px;border-radius:14px;background:var(--paper);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:18px}
.link-chip{display:flex;align-items:center;gap:12px;background:var(--navy);color:#F6F5F1;border-radius:12px;padding:12px 14px;font-size:13px}
.link-chip b{font:600 12px/1 var(--f-body);background:var(--accent);color:#fff;border-radius:999px;padding:6px 10px}
.bi{justify-content:space-around;font-size:clamp(28px,3vw,40px)}
.bi-en{font-family:"Bricolage Grotesque";font-weight:500}
.bi-ar{font-family:"IBM Plex Sans Arabic";font-weight:600;color:var(--accent)}
.cur span{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;font-size:16px}

.faq-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}
.q{border-bottom:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(17px,1.5vw,20px);font-weight:600}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";flex:none;width:11px;height:11px;border-inline-end:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg) translate(-3px,-3px);transition:transform .4s var(--ease)}
.q[open] summary::after{transform:rotate(225deg)}
.q p{color:var(--ink2);padding:0 0 24px;max-width:58ch}
.q[open] p{animation:qin .5s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.band{background:var(--navy);color:#F6F5F1;padding-block:clamp(80px,10vw,130px)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.band h2{font:500 clamp(30px,4vw,54px)/1.08 var(--f-display);letter-spacing:-.02em;max-width:16ch}
html[lang=ar] .band h2{letter-spacing:0;line-height:1.3;font-weight:600}

.foot{background:var(--ivory);border-top:1px solid var(--line);padding-block:40px;color:var(--navy)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{text-decoration:none;color:var(--ink2);font-size:15px}
.foot-links a:hover{color:var(--navy)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal{opacity:1;transform:none}
}