:root{
  --ink:#02113A; --teal:#00A9B6; --teal-ink:#00727C; --deep:#013E6A; --mid:#0E5E8A;
  --paper:#FFFFFF; --surface:#F4F7F9; --rule:#D6DEE6; --muted:#4F5D78; --amber:#A96200; --amber-on-ink:#FFC978;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --r:10px; --shadow:0 1px 2px rgba(2,17,58,.06),0 12px 32px -12px rgba(2,17,58,.18);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-x:hidden}
[dir=rtl] body{font-family:Cairo,Inter,system-ui,sans-serif;line-height:1.8}
h1,h2,h3{font-family:Montserrat,Inter,sans-serif;letter-spacing:-.022em;line-height:1.08;font-weight:800}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:Tajawal,Cairo,sans-serif;letter-spacing:0;line-height:1.35}
h2{font-size:clamp(30px,4.2vw,50px);max-width:20ch}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{max-width:62ch}
a{color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-feature-settings:"zero"}
[dir=rtl] .mono{font-family:"IBM Plex Mono",Cairo,monospace}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.band{padding-block:clamp(72px,9vw,128px)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-ink);display:flex;align-items:center;gap:10px;margin-bottom:20px}
[dir=rtl] .eyebrow{font-family:Cairo,sans-serif;letter-spacing:0;font-size:14px;font-weight:600}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--teal);flex:none}
.lede{font-size:19px;color:var(--muted);margin-top:20px}
:focus-visible{outline:2.5px solid var(--teal-ink);outline-offset:3px;border-radius:4px}
/* the darker teal fails to show on the navy bands, so those keep the bright one */
.arabic :focus-visible,.founding :focus-visible,.ask :focus-visible,.never :focus-visible,footer :focus-visible,.bar :focus-visible,.stage :focus-visible{outline-color:var(--teal)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding-inline:26px;border-radius:var(--r);font:600 16px/1 Inter,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease;white-space:nowrap}
[dir=rtl] .btn{font-family:Cairo,sans-serif}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-teal{background:var(--teal);color:var(--ink)}
.btn-sm{height:42px;padding-inline:18px;font-size:14.5px}
.px-arrow{width:14px;height:10px;flex:none;transition:transform 220ms var(--ease-out)}
[dir=rtl] .px-arrow{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--deep)}
  .btn-line:hover{background:var(--ink);color:#fff}
  .btn-teal:hover{background:#19BAC6}
  .btn:hover .px-arrow{transform:translateX(4px)}
  [dir=rtl] .btn:hover .px-arrow{transform:scaleX(-1) translateX(4px)}
}

/* deadline bar */
.bar{background:var(--ink);color:#fff;font-size:14px}
.bar .wrap{display:flex;align-items:center;justify-content:center;gap:18px;min-height:44px;flex-wrap:wrap;padding-block:8px}
.bar .count{color:var(--amber-on-ink);font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;direction:ltr}
.bar a{color:#fff;text-underline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:50;transition:background-color 240ms ease,box-shadow 240ms ease,backdrop-filter 240ms ease}
.nav.scrolled{background:rgba(244,247,249,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 22px/1 Montserrat,sans-serif;letter-spacing:-.03em}
.logo svg{height:30px;width:auto}
.logo small{font:500 15px/1 Tajawal,sans-serif;color:var(--muted);letter-spacing:0;margin-inline-start:2px}
.links{display:flex;gap:26px;margin-inline-start:auto;font-size:15px;font-weight:500}
.links a{text-decoration:none;color:var(--muted);transition:color 160ms ease}
.links a:hover{color:var(--ink)}
.lang{font:500 14px/1 "IBM Plex Mono",Cairo,monospace;background:none;border:1px solid var(--rule);border-radius:8px;height:36px;padding-inline:12px;color:var(--ink);cursor:pointer;transition:border-color 160ms ease,transform 160ms var(--ease-out)}
.lang:hover{border-color:var(--ink)} .lang:active{transform:scale(.96)}
@media (max-width:980px){.links{display:none}.nav .wrap{gap:12px}.lang{margin-inline-start:auto}}
@media (max-width:520px){.nav .btn{display:none}}

/* hero */
/* overflow-x:clip, not hidden: it keeps the glow inside the page without making a scroll container.
   Without it the ::after glow sticks out and, in RTL, shifts the whole document sideways. */
.hero{position:relative;overflow-x:clip;padding-block:clamp(24px,3vw,44px) clamp(64px,7vw,104px)}
.hero::before{content:"";position:absolute;inset:-120px 0 0 0;z-index:-1;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 72% 40%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 70% 75% at 72% 40%,#000 0%,transparent 72%)}
[dir=rtl] .hero::before{transform:scaleX(-1)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
h1{font-size:clamp(38px,4.7vw,64px);max-width:15ch}
h1 em{font-style:normal;color:var(--teal-ink)}
.hero .lede{max-width:50ch}
.offer{margin-top:28px;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--paper);border:1px solid var(--rule);border-inline-start:3px solid var(--amber);border-radius:var(--r);max-width:54ch;font-size:15.5px}
.offer b{display:block;font-weight:600}
.offer span{color:var(--muted)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.trust{margin-top:26px;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust span::before{content:"";width:6px;height:6px;background:var(--teal)}
.load>*{opacity:0;transform:translateY(12px);animation:rise 700ms var(--ease-out) forwards;animation-delay:calc(var(--i)*70ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* stage */
.stage{position:relative;max-width:500px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:0;opacity:0;animation:rise 900ms var(--ease-out) 350ms forwards}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.doc{position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:14px 18px;font-size:12.5px;z-index:1}
.doc header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:10px}
.doc header b{font:700 12px/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase}
[dir=rtl] .doc header b{font-family:Tajawal,sans-serif;letter-spacing:0;font-size:14px}
.doc header span{color:var(--muted);font-size:11.5px;direction:ltr}
.f{display:flex;justify-content:space-between;gap:12px;padding-block:3.5px;color:var(--muted);transition:opacity 500ms ease}
/* plaintext: pure amounts stay LTR, an Arabic company name keeps Arabic word order */
.f b{color:var(--ink);font-weight:500;unicode-bidi:plaintext}
.f .ck{display:inline-block;width:12px;height:12px;margin-inline-end:8px;vertical-align:-1px;background:var(--teal);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 24%,86% 10%,38% 70%);opacity:0;transform:scale(.6);transition:opacity 200ms ease,transform 260ms var(--ease-out)}
.f.on .ck{opacity:1;transform:none}
.f.total{border-top:1px solid var(--rule);margin-top:6px;padding-top:8px;color:var(--ink);font-weight:600}
.f.total b{font-weight:600}
.invoice.sent .f:not(.total){opacity:.45}
.stamp{position:absolute;inset-inline-end:16px;bottom:10px;font-size:11px;letter-spacing:.08em;color:var(--teal-ink);border:1.5px solid var(--teal);padding:5px 9px;border-radius:4px;transform:rotate(-6deg) scale(.9);opacity:0;transition:opacity 220ms ease,transform 320ms var(--ease-out);background:rgba(255,255,255,.9);direction:ltr}
.stamp.on{opacity:1;transform:rotate(-6deg)}
.rail{position:relative;height:204px;display:flex;flex-direction:column;justify-content:space-between;padding-block:22px;padding-inline-start:20%}
.node{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);transition:color 300ms ease}
.node i{width:14px;height:14px;flex:none;background:var(--paper);border:2px solid var(--rule);transition:background-color 260ms ease,border-color 260ms ease,transform 300ms var(--ease-out);position:relative;z-index:4}
.node b{font-weight:500;color:var(--teal-ink);margin-inline-end:8px;font-size:11.5px}
.node.on{color:var(--ink)} .node.on i{background:var(--teal);border-color:var(--teal);transform:scale(1.15)}
.node.fta{position:absolute;inset-inline-end:2%;top:50%;translate:0 -50%;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;max-width:120px}
.node.fta b{margin:0}
.bill .tag{display:inline-block;font-size:11px;padding:3px 8px;border-radius:4px;background:var(--surface);color:var(--muted);transition:background-color 300ms ease,color 300ms ease}
.bill .tag.on{background:var(--teal);color:var(--ink)}
.bill .f{opacity:0;transform:translateY(6px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(var(--i)*90ms)}
.bill.show .f{opacity:1;transform:none}
.bill{transition:border-color 400ms ease} .bill.show{border-color:var(--teal)}
.log{list-style:none;padding:0;margin-top:14px;height:118px;overflow:hidden;font-size:11.5px;color:var(--muted);direction:ltr;text-align:left}
.log li{display:flex;gap:12px;padding-block:3px;opacity:0;transform:translateY(6px);transition:opacity 300ms ease,transform 300ms var(--ease-out);white-space:nowrap}
.log li.in{opacity:1;transform:none}
.log li b{color:var(--teal-ink);font-weight:500;width:66px;flex:none}
.log li em{font-style:normal;color:var(--ink);margin-inline-start:auto}

@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.stage{margin-top:12px}}

/* proof */
.proof{border-block:1px solid var(--rule);background:var(--paper)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof div{padding:30px 24px;border-inline-start:1px solid var(--rule)}
.proof div:first-child{border-inline-start:0;padding-inline-start:0}
.proof b{display:block;font:700 16px/1.3 Montserrat,sans-serif;margin-bottom:6px}
[dir=rtl] .proof b{font-family:Tajawal,sans-serif;font-size:18px}
.proof span{font-size:14px;color:var(--muted);display:block}
@media (max-width:900px){.proof .wrap{grid-template-columns:1fr 1fr}.proof div{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--rule)}.proof div:nth-child(-n+2){border-top:0}.proof div:nth-child(even){padding-inline-start:20px;border-inline-start:1px solid var(--rule)}}
@media (max-width:520px){.proof .wrap{grid-template-columns:1fr}.proof div,.proof div:nth-child(even){border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--rule)}.proof div:first-child{border-top:0}}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.js [data-reveal].in{opacity:1;transform:none}
/* failsafe: if site.js never boots, nothing may stay invisible */
.reveal-all [data-reveal]{opacity:1!important;transform:none!important}
.reveal-all .row.new{clip-path:none!important}
.reveal-all .slots i{opacity:1!important;transform:none!important}
.reveal-all .frame{transform:none!important;opacity:1!important}

/* checker */
.checker{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.opts{display:grid;gap:10px;margin-top:32px}
.opt{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--r);cursor:pointer;font-weight:500;transition:border-color 180ms ease,transform 160ms var(--ease-out),background-color 180ms ease}
.opt:active{transform:scale(.985)}
.opt[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
.opt i{width:10px;height:10px;background:var(--rule);flex:none;transition:background-color 180ms ease}
.opt[aria-pressed=true] i{background:var(--teal)}
@media (hover:hover){.opt:hover{border-color:var(--ink)}}
.result{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:clamp(24px,3vw,36px);min-height:340px;box-shadow:var(--shadow)}
.result .wave{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-block:22px;border-block:1px solid var(--rule)}
.dates div{padding-block:20px}
.dates div+div{border-inline-start:1px solid var(--rule);padding-inline-start:24px}
.dates small{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
/* plaintext, not direction:ltr: "30 أكتوبر 2026" must read 30 / أكتوبر / 2026, while "30 Oct 2026" stays LTR */
.dates b{font:800 clamp(22px,2.6vw,30px)/1.1 Montserrat,sans-serif;letter-spacing:-.02em;unicode-bidi:plaintext;display:block}
[dir=rtl] .dates b{font-family:Tajawal,sans-serif;text-align:right}
.result p{color:var(--muted);margin-bottom:22px}
.swap{transition:opacity 220ms ease,filter 220ms ease}
.swap.out{opacity:0;filter:blur(3px)}
@media (max-width:900px){.checker{grid-template-columns:1fr}}

/* directions */
.dir{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:clamp(24px,3vw,36px)}
.card ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:14px}
.card li{display:grid;grid-template-columns:18px 1fr;gap:12px;color:var(--muted);font-size:16px}
.card li::before{content:"";width:8px;height:8px;background:var(--teal);margin-top:9px}
.card li b{color:var(--ink);font-weight:600}
.kicker{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px;display:block}
.inbox{margin-top:28px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;font-size:12.5px}
.steps{display:flex;gap:6px;padding:12px;background:var(--surface);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.steps span{padding:4px 9px;border-radius:4px;background:var(--paper);color:var(--muted);border:1px solid var(--rule);transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease}
.inbox.in .steps span{background:var(--ink);color:#fff;border-color:var(--ink);transition-delay:calc(var(--i)*650ms + 300ms)}
.row{display:grid;grid-template-columns:.9fr 1.25fr .9fr 1.15fr;gap:10px;padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--muted)}
.row:last-child{border-bottom:0}
.row.head{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.row b{color:var(--ink);font-weight:500}
.row .amt{direction:ltr;text-align:end}
.row.new{background:rgba(0,169,182,.09);clip-path:inset(0 0 100% 0);transition:clip-path 600ms var(--ease-io) 1700ms}
.row.new .st{color:var(--teal-ink)}
.inbox.in .row.new{clip-path:inset(0)}
.never{margin-top:28px;display:flex;gap:16px;align-items:center;padding:20px 24px;background:var(--ink);color:#fff;border-radius:14px;font-size:17px}
.never b{font-family:Montserrat,sans-serif;font-weight:700}
[dir=rtl] .never b{font-family:Tajawal,sans-serif}
.never i{width:12px;height:12px;background:var(--teal);flex:none}
@media (max-width:900px){.dir{grid-template-columns:1fr}.row{grid-template-columns:1fr 1.2fr .9fr}.row>:nth-child(1){display:none}}

/* connectors */
.levels{display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;position:relative}
.levels::before{content:"";position:absolute;top:6px;inset-inline:0;height:2px;background:var(--rule)}
.lv{padding:0 20px 0 0;position:relative}
[dir=rtl] .lv{padding:0 0 0 20px}
.lv::before{content:"";display:block;width:14px;height:14px;background:var(--paper);border:2px solid var(--ink);margin-bottom:22px;position:relative;transition:background-color 200ms ease}
.lv.built::before{background:var(--teal);border-color:var(--teal)}
.lv .n{font-size:12px;color:var(--teal-ink);letter-spacing:.08em}
.lv h3{margin-block:6px 10px;font-size:18px}
.lv p{font-size:14.5px;color:var(--muted);min-height:66px}
.lv .price{display:block;margin-top:14px;font-size:13.5px;color:var(--ink);padding-top:12px;border-top:1px solid var(--rule)}
.lv .price small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chip{display:inline-block;font-size:11px;padding:3px 8px;border-radius:4px;margin-top:10px;border:1px solid var(--rule);color:var(--muted);background:var(--paper)}
.chip.ok{border-color:var(--teal);color:var(--teal-ink)}
.one{margin-top:48px;font:700 clamp(20px,2.4vw,28px)/1.25 Montserrat,sans-serif;letter-spacing:-.015em;max-width:26ch}
[dir=rtl] .one{font-family:Tajawal,sans-serif;letter-spacing:0;line-height:1.5}
@media (max-width:980px){.levels{grid-template-columns:1fr;gap:0}.levels::before{inset-inline:auto;inset-inline-start:6px;top:0;bottom:0;width:2px;height:auto}.lv{display:grid;grid-template-columns:14px 1fr;column-gap:20px;padding:0 0 32px}.lv::before{grid-row:1/6;margin:4px 0 0}.lv>*{grid-column:2}.lv p{min-height:0}}

/* pricing */
.pricing{background:var(--paper);border-block:1px solid var(--rule)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,5vw,72px);margin-top:48px;align-items:start}
.field{padding-block:22px;border-bottom:1px solid var(--rule)}
.field:first-child{padding-top:0}
.field label,.field .lab{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:14px}
.field output{font:500 15px "IBM Plex Mono",monospace;color:var(--teal-ink)}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--rule);border-radius:var(--r);overflow:hidden}
.stepper button{all:unset;width:48px;height:48px;text-align:center;font-size:22px;cursor:pointer;transition:background-color 160ms ease,transform 120ms var(--ease-out)}
.stepper button:active{transform:scale(.92)} .stepper button:hover{background:var(--surface)}
.stepper span{width:64px;text-align:center;font:500 18px "IBM Plex Mono",monospace}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--rule);border-radius:2px;outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink);cursor:grab;border-radius:0}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink);cursor:grab;border-radius:0}
select,input[type=text],input[type=email],input[type=tel]{width:100%;height:52px;border:1.5px solid var(--rule);border-radius:var(--r);padding-inline:16px;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);transition:border-color 160ms ease}
select:focus,input:focus{border-color:var(--ink);outline:none}
.hint{font-size:14px;color:var(--muted);margin-top:10px}
.receipt{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:26px 24px 22px;font-size:13.5px;position:sticky;top:96px;
  --z:linear-gradient(135deg,var(--surface) 25%,transparent 25%) -8px 0/16px 8px,linear-gradient(225deg,var(--surface) 25%,transparent 25%) -8px 0/16px 8px}
.receipt::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:8px;background:var(--z);transform:scaleY(-1)}
.receipt h3{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:16px}
[dir=rtl] .receipt h3{font-family:Cairo,sans-serif;letter-spacing:0;font-size:14px}
.ln{display:flex;justify-content:space-between;gap:16px;padding-block:6px;color:var(--muted)}
.ln b{color:var(--ink);font-weight:500;direction:ltr;white-space:nowrap}
.ln.rule{border-top:1px dashed var(--muted);margin-top:10px;padding-top:14px}
.ln.big{color:var(--ink);font-size:15px} .ln.big b{font:800 26px/1 Montserrat,sans-serif;letter-spacing:-.02em}
.ln.zero{margin-top:12px;padding:12px;background:var(--paper);border-inline-start:3px solid var(--amber);color:var(--ink)}
.receipt .btn{width:100%;margin-top:18px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.plan{padding:28px;border-inline-start:1px solid var(--rule);background:var(--paper)}
.plan:first-child{border-inline-start:0}
.plan .p{font:800 34px/1 Montserrat,sans-serif;letter-spacing:-.025em;margin-block:14px 4px;direction:ltr;display:flex;align-items:baseline;gap:8px}
[dir=rtl] .plan .p{direction:rtl;justify-content:flex-start}
[dir=rtl] .plan dd.mono{direction:ltr;text-align:left}
[dir=rtl] h1{font-size:clamp(34px,4.1vw,56px);max-width:17ch}
.plan .p small{font:500 13px "IBM Plex Mono",monospace;color:var(--muted);letter-spacing:0}
.plan .after{font-size:13px;color:var(--muted)}
.plan dl{margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:14.5px;color:var(--muted)}
.plan dd{color:var(--ink);font-weight:500;margin:0;text-align:end}
.same{margin-top:24px;font-size:15px;color:var(--muted);max-width:none}
.same b{color:var(--ink)}
@media (max-width:900px){.calc{grid-template-columns:1fr}.receipt{position:relative;top:0}.plans{grid-template-columns:1fr}.plan{border-inline-start:0;border-top:1px solid var(--rule)}.plan:first-child{border-top:0}}

/* founding */
.founding{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.founding .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,96px);align-items:center}
.founding .eyebrow{color:var(--teal)}
.founding p{color:#B9C3D9;margin-top:20px}
.founding .btn{margin-top:32px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:380px;margin-inline:auto;width:100%}
.slots i{aspect-ratio:1;border:1.5px solid rgba(0,169,182,.55);transition:background-color 240ms ease,transform 300ms var(--ease-out);opacity:0;transform:scale(.9)}
.slots.in i{opacity:1;transform:none;transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out),background-color 240ms ease;transition-delay:calc(var(--i)*45ms),calc(var(--i)*45ms),0ms}
@media (hover:hover){.slots i:hover{background:var(--teal)}}
.slots-cap{margin-top:20px;text-align:center;font-size:13px;color:#B9C3D9;letter-spacing:.04em}
@media (max-width:900px){.founding .wrap{grid-template-columns:1fr}}

/* questions */
.qs{margin-top:48px;border-top:1px solid var(--rule)}
.q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;padding-block:26px;border-bottom:1px solid var(--rule);align-items:baseline}
.q h3{font-size:clamp(18px,1.9vw,22px);line-height:1.3}
.q p{color:var(--muted)}
.q p b{color:var(--ink);font-weight:600}
@media (max-width:800px){.q{grid-template-columns:1fr;gap:8px}}

/* partners */
.partners .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.partners .intro{grid-column:1/-1;margin-bottom:24px}
@media (max-width:800px){.partners .wrap{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--rule)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding-block:22px;font:700 18px/1.35 Montserrat,sans-serif;letter-spacing:-.01em}
[dir=rtl] summary{font-family:Tajawal,sans-serif;letter-spacing:0}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:transform 260ms var(--ease-out)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:24px;color:var(--muted)}
details[open] p{animation:rise 420ms var(--ease-out)}

/* final */
.final{background:var(--paper);border-top:1px solid var(--rule)}
.final .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{font-size:14px;font-weight:600;display:grid;gap:8px}
.form .btn{margin-top:8px}
.note{font-size:13.5px;color:var(--muted)}
.ok{display:none;padding:16px;border:1.5px solid var(--teal);border-radius:var(--r);background:rgba(0,169,182,.07)}
.ok.show{display:block;animation:rise 400ms var(--ease-out)}
.expect{list-style:none;padding:0;margin-top:28px;display:grid;gap:16px}
.expect li{display:grid;grid-template-columns:64px 1fr;gap:16px;color:var(--muted)}
.expect b{font:500 13px "IBM Plex Mono",monospace;color:var(--teal-ink);padding-top:3px}
@media (max-width:900px){.final .wrap{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}}

footer{background:var(--ink);color:#B9C3D9;font-size:14px;padding-block:48px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:#fff;text-decoration:none;margin-inline-end:20px}
.mcta{display:none}
@media (max-width:520px){.mcta{display:flex;position:fixed;inset-inline:12px;bottom:12px;z-index:60;transform:translateY(140%);transition:transform 360ms var(--ease-out)}.mcta.show{transform:none}.mcta .btn{width:100%;box-shadow:0 10px 30px -8px rgba(2,17,58,.5)}body{padding-bottom:84px}}

@media (max-width:520px){.lede{font-size:17px}.doc{font-size:11.5px;padding:12px 14px}.f b{text-align:end}.band{padding-block:64px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .load>*,.stage{animation:none;opacity:1;transform:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .row.new{clip-path:none;transition:none} .slots i{opacity:1;transform:none}
  .btn,.px-arrow{transition:none}
}

/* ===== v4: depth, navy stage, Arabic first, product frames, no price list ===== */
.card,.result,.rule-card{box-shadow:0 1px 1px rgba(2,17,58,.04),0 8px 16px -8px rgba(2,17,58,.10),0 28px 56px -28px rgba(2,17,58,.22)}
.card,.rule-card{transition:transform 320ms var(--ease-out),box-shadow 320ms ease}
@media (hover:hover) and (pointer:fine){.card:hover,.rule-card:hover{transform:translateY(-4px);box-shadow:0 1px 1px rgba(2,17,58,.04),0 14px 24px -10px rgba(2,17,58,.14),0 40px 72px -30px rgba(2,17,58,.30)}}
.hero::after{content:"";position:absolute;z-index:-1;width:min(60vw,760px);aspect-ratio:1;inset-inline-end:-12%;top:-6%;background:radial-gradient(closest-side,rgba(0,169,182,.20),rgba(0,169,182,0) 70%);filter:blur(8px)}
/* deadline line, typographic instead of a box */
.deadline{margin-top:30px;display:flex;align-items:center;gap:20px;max-width:56ch}
.deadline .d{flex:none;display:flex;align-items:baseline;gap:8px;font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;direction:ltr}
[dir=rtl] .deadline .d{font-family:Montserrat,Tajawal,sans-serif}
.deadline .d b{font-size:58px;color:var(--ink)}
.deadline .d span{font:500 12px/1.25 "IBM Plex Mono",Cairo,monospace;letter-spacing:.06em;color:var(--amber);text-transform:uppercase;text-align:start}
.deadline p{font-size:15.5px;color:var(--muted);padding-inline-start:20px;border-inline-start:1px solid var(--rule)}
.deadline p b{color:var(--ink);font-weight:600}
/* navy stage */
.tilt{perspective:1400px}
.stage{max-width:528px;padding:22px 22px 14px;border-radius:24px;background:linear-gradient(158deg,#0A2466 0%,#02113A 52%,#010A24 100%);box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 50px 90px -36px rgba(2,17,58,.70),0 18px 36px -18px rgba(2,17,58,.45);transform-style:preserve-3d;will-change:transform}
.stage::before{content:"";position:absolute;inset:0;border-radius:24px;background-image:linear-gradient(rgba(0,169,182,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,169,182,.13) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(ellipse 85% 60% at 50% 50%,#000,transparent 78%);pointer-events:none}
.stage .doc{border-color:transparent;box-shadow:0 22px 44px -20px rgba(0,0,0,.75),7px 8px 0 -3px rgba(255,255,255,.16)}
/* room under the total so the VALID stamp never covers a figure */
.stage .invoice{transform:rotate(-1.1deg);padding-bottom:38px} [dir=rtl] .stage .invoice{transform:rotate(1.1deg)}
.stage .bill{transform:rotate(.6deg)} [dir=rtl] .stage .bill{transform:rotate(-.6deg)}
.stage .bill.show{border-color:transparent;box-shadow:0 0 0 2px var(--teal),0 22px 44px -20px rgba(0,0,0,.75),0 0 40px -6px rgba(0,169,182,.55)}
.stage .node{color:#9FB0D3}.stage .node.on{color:#fff}
.stage .node b{color:var(--teal)}
.stage .node i{background:#02113A;border-color:rgba(255,255,255,.32)}
.stage .node.on i{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,169,182,.22),0 0 18px rgba(0,169,182,.9)}
.stage .node i::after{content:"";position:absolute;inset:-2px;border:1.5px solid var(--teal);opacity:0}
.stage .node.on i::after{animation:ping 1100ms var(--ease-out) 1}
@keyframes ping{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.stage .log{color:#8EA0C6;height:100px;font-size:11px}.stage .log li{padding-block:1.5px}.stage .log li b{color:var(--teal)}.stage .log li em{color:#fff}
.stt{font-style:normal;font-size:10.5px;font-weight:500;color:#02113A;background:var(--teal);padding:2px 7px;border-radius:3px;margin-inline-start:10px;opacity:0;transform:scale(.9);transition:opacity 260ms ease,transform 320ms var(--ease-out);white-space:nowrap}
.node{position:relative}.node:not(.fta) .stt{position:absolute;top:calc(100% + 3px);inset-inline-start:28px;margin:0}
.node.on .stt{opacity:1;transform:none}.node.fta .stt{margin:0}
.stage .rail{padding-inline-start:40%}.stage .node.fta{inset-inline-end:auto;inset-inline-start:3%;max-width:112px}
@media (max-width:520px){.stage .stt{display:none}.stage .node{font-size:12px;gap:10px}.stage .node.fta{font-size:11px;max-width:96px}.stage{padding:16px 14px 12px;border-radius:18px}.deadline .d b{font-size:46px}}
/* arabic first */
.arabic{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.arabic .eyebrow{color:var(--teal)}
.arabic .lede{color:#B9C3D9}
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);margin-top:56px;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;position:relative}
.ar-grid div{background:rgba(2,17,58,.86);padding:32px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ar-grid h3{color:#fff;margin-bottom:10px;font-size:21px}
.ar-grid p{color:#B9C3D9;font-size:16px}
@media (max-width:800px){.ar-grid{grid-template-columns:1fr}}
/* product frames */
.product{background:linear-gradient(180deg,var(--surface) 0%,#E6ECF2 100%)}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;margin-top:36px;position:relative;flex-wrap:wrap}
.tab{all:unset;cursor:pointer;padding:10px 18px;border-radius:9px;font-weight:600;font-size:15px;color:var(--muted);transition:color 180ms ease,background-color 220ms ease,transform 160ms var(--ease-out)}
.tab:active{transform:scale(.97)}.tab[aria-selected=true]{background:var(--ink);color:#fff}
.frame-wrap{margin-top:40px;perspective:1800px}
.frame{background:var(--paper);border-radius:16px;overflow:hidden;transform:rotateX(13deg) scale(.95);opacity:.55;transition:transform 1300ms var(--ease-out),opacity 900ms ease;box-shadow:0 0 0 1px rgba(2,17,58,.08),0 30px 60px -30px rgba(2,17,58,.35),0 80px 140px -60px rgba(2,17,58,.45);transform-origin:50% 100%}
.frame.up{transform:none;opacity:1}
.chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#EDF1F5;border-bottom:1px solid var(--rule)}
.chrome i{width:10px;height:10px;border-radius:50%;background:#CBD5E0}
.chrome span{margin-inline:auto;font:400 12px "IBM Plex Mono",monospace;color:var(--muted);background:var(--paper);padding:4px 40px;border-radius:6px;direction:ltr}
.app{display:grid;grid-template-columns:200px 1fr;min-height:430px}
.side{background:var(--ink);color:#9FB0D3;padding:20px 14px;font-size:14px;display:grid;gap:4px;align-content:start}
.side b{color:#fff;font:800 17px Montserrat,Tajawal,sans-serif;margin-bottom:14px;padding-inline:10px}
.side span{padding:9px 10px;border-radius:8px}.side span.on{background:rgba(0,169,182,.18);color:#fff}
.view{padding:26px;display:none}.view.on{display:block;animation:viewin 420ms var(--ease-out)}
@keyframes viewin{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.view h4{font:700 19px Montserrat,Tajawal,sans-serif;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--rule);border-radius:10px;padding:14px}
.kpi small{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi b{font:800 22px Montserrat,sans-serif;letter-spacing:-.02em;direction:ltr;display:block;text-align:start}
.kpi.warn b{color:var(--amber)}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:22px;padding:16px;border:1px solid var(--rule);border-radius:10px}
.bars i{flex:1;background:linear-gradient(180deg,var(--teal),var(--deep));border-radius:3px 3px 0 0;height:calc(var(--h)*1%);transform-origin:bottom;transform:scaleY(0);transition:transform 800ms var(--ease-out);transition-delay:calc(var(--i)*40ms)}
.view.on .bars i{transform:none}
.trk{display:grid;gap:0;margin-top:6px}
.trk div{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.trk i{width:14px;height:14px;background:var(--teal);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 24%,86% 10%,38% 70%)}
.trk em{font:400 12px "IBM Plex Mono",monospace;color:var(--muted);font-style:normal;direction:ltr}
.cos{display:grid;gap:10px}
.co{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;font-size:15px}
.co i{width:34px;height:34px;border-radius:8px;background:var(--surface);flex:none;display:grid;place-items:center;font:700 13px Montserrat,sans-serif;font-style:normal;color:var(--deep)}
.co span{margin-inline-start:auto;font-size:12px;padding:3px 9px;border-radius:4px;background:var(--surface);color:var(--muted)}
.co span.o{background:rgba(0,169,182,.14);color:var(--teal-ink)}
.pool{margin-top:16px;font-size:13.5px;color:var(--muted)}
.pool u{display:block;height:8px;border-radius:4px;background:var(--surface);margin-top:8px;overflow:hidden;text-decoration:none}
.pool u::after{content:"";display:block;height:100%;width:38%;background:var(--teal)}
@media (max-width:760px){.app{grid-template-columns:1fr}.side{display:none}.kpis{grid-template-columns:1fr 1fr}.view{padding:18px}}
/* how we price */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.rule-card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:28px}
.rule-card h3{margin-bottom:10px;display:flex;gap:12px;align-items:center}
.rule-card h3::before{content:"";width:10px;height:10px;background:var(--teal);flex:none}
.rule-card p{color:var(--muted);font-size:16px}
.ask{margin-top:32px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:end;padding:24px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 40px 70px -40px rgba(2,17,58,.7)}
.ask label,.ask .lab{display:grid;gap:8px;font-size:14px;font-weight:600}
.ask .stepper{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04)}.ask .stepper button:hover{background:rgba(255,255,255,.1)}
.ask select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}.ask select option{color:var(--ink)}
.freeline{margin-top:20px;font-size:15px;color:var(--muted)}
@media (max-width:900px){.rules{grid-template-columns:1fr}.ask{grid-template-columns:1fr}}
.lv .price{font-family:Inter,Cairo,sans-serif;font-size:14px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.stage .invoice,.stage .bill{transform:none}.bars i{transform:none;transition:none}.view.on{animation:none}.stage .node.on i::after{animation:none}}

/* ===== v5: multi-page site ===== */
.lang{display:inline-flex;align-items:center;text-decoration:none}
.links a[aria-current=page]{color:var(--ink);font-weight:600}
.menu{all:unset;display:none;cursor:pointer;width:40px;height:40px;border:1px solid var(--rule);border-radius:8px;place-items:center}
.menu i,.menu i::before,.menu i::after{content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform 240ms var(--ease-out)}
.menu i::before{position:absolute;top:-6px}.menu i::after{position:absolute;top:6px}
@media (max-width:980px){.menu{display:grid}.links{display:flex;position:absolute;inset-inline:16px;top:72px;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:8px;box-shadow:var(--shadow);margin:0;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity 180ms ease,transform 220ms var(--ease-out);transform-origin:top}
 .links a{padding:14px 12px;border-radius:8px;font-size:16px}.nav.open .links{opacity:1;transform:none;pointer-events:auto}.nav{position:sticky}.nav .wrap{position:relative}.lang{margin-inline-start:auto}}
.phero{position:relative;padding-block:clamp(48px,7vw,104px) clamp(40px,5vw,72px)}
.phero h1{max-width:20ch;font-size:clamp(36px,4.6vw,62px)}
[dir=rtl] .phero h1{max-width:22ch;font-size:clamp(32px,4vw,54px)}
.phero .lede{max-width:64ch}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:32px 32px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 60% 90% at 80% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 90% at 80% 0%,#000,transparent 70%)}
[dir=rtl] .phero::before{transform:scaleX(-1)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid3 .card p,.grid2 .card p{color:var(--muted);margin-top:10px;font-size:16px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.steps4{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:2px solid var(--ink)}
.steps4.three{grid-template-columns:repeat(3,1fr)}
.steps4 li{padding-block:28px 0;padding-inline:0 24px;border-inline-end:1px solid var(--rule)}
.steps4 li+li{padding-inline-start:24px}.steps4 li:last-child{border-inline-end:0}
.steps4 b{font-size:13px;color:var(--teal-ink);display:block;margin-bottom:14px}
.steps4 h3{margin-bottom:10px}.steps4 p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){.steps4,.steps4.three{grid-template-columns:1fr;border-top:0}.steps4 li,.steps4 li+li{padding:24px 0;border-inline-end:0;border-top:1px solid var(--rule)}}
.facts{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule)}
.facts div{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:180px 1fr;gap:16px}
.facts div:nth-child(odd){padding-inline-end:32px}
.facts small{color:var(--muted);font-size:14px}.facts b{font-weight:600}
@media (max-width:800px){.facts{grid-template-columns:1fr}.facts div{grid-template-columns:130px 1fr}}
.prose{max-width:760px}.prose h2{font-size:24px;margin-block:40px 12px;max-width:none}.prose p{color:var(--muted)}
.contact-lines{margin-top:28px;display:grid;gap:8px;font-size:15.5px}.contact-lines a{color:var(--teal-ink);font-weight:600;text-decoration:none;direction:ltr;unicode-bidi:isolate}
/* honeypot: clipped in place. Never move it off-screen with an offset: in RTL that adds document overflow and shifts the whole page.
   The selector must out-specify input[type=text]{width:100%} above, or the field grows to the width of its containing block
   and, once the form reveals (transform:none removes the containing block), stretches the document by a full viewport. */
.hp,input.hp,input[type=text].hp{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;opacity:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.ok.err{border-color:#B42318;background:rgba(180,35,24,.06);color:#7A1A12}
.btn[disabled]{opacity:.6;pointer-events:none}
/* F-mark abstract for navy bands */
.fbg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fbg svg{position:absolute;inset-inline-end:-9%;top:50%;translate:0 -50%;height:92%;width:auto;opacity:.10}
[dir=rtl] .fbg svg{transform:scaleX(-1)}
.fbg svg path{fill:#5FE3EC}
.fbg i{position:absolute;right:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--teal);opacity:.16;animation:drift 16s ease-in-out infinite;animation-delay:var(--d)}
[dir=rtl] .fbg i{right:auto;left:var(--x)}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-22px)}}
.arabic .ar-grid div{background:rgba(2,17,58,.78)}
/* footer */
footer{padding-block:64px 40px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start}
footer h4{color:#fff;font:700 14px Montserrat,Tajawal,sans-serif;margin-bottom:14px}
footer .col a{display:block;margin:0 0 10px;color:#B9C3D9;text-decoration:none}footer .col a:hover{color:#fff}
footer .brand p{margin-top:14px;max-width:38ch;font-size:14px;line-height:1.7}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
footer .legal button{all:unset;cursor:pointer;color:#B9C3D9;text-decoration:underline;text-underline-offset:3px}
@media (max-width:800px){footer .wrap{grid-template-columns:1fr 1fr}footer .brand{grid-column:1/-1}}
/* cookie banner */
.ck-b{position:fixed;inset-inline:16px;bottom:16px;z-index:80;max-width:560px;margin-inline-start:auto;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:18px 20px;box-shadow:0 30px 60px -20px rgba(2,17,58,.45);font-size:14.5px;display:none}
.ck-b.show{display:block;animation:rise 420ms var(--ease-out)}
.ck-b p{color:var(--muted);margin-bottom:14px}.ck-b div{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:520px){.ck-b{bottom:84px}}
.wa{position:fixed;inset-inline-end:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%;background:#1FAF5A;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(2,17,58,.5);transition:transform 200ms var(--ease-out)}
.wa:active{transform:scale(.94)}.wa svg{width:28px;height:28px;fill:#fff}
@media (max-width:520px){.wa{bottom:88px}}
@media (prefers-reduced-motion:reduce){.frame{transform:none;opacity:1;transition:none}.fbg i{animation:none}}

/* ===== v5.1: fifth corner on C2's level, bilingual card, integration tiles, client strip ===== */
.stage .rail{display:grid;grid-template-columns:38% 1fr;grid-template-rows:repeat(4,1fr);padding-inline-start:0;padding-block:16px;height:216px}
.stage .node{grid-column:2;align-self:center}
.stage .node[data-k=c1]{grid-row:1}.stage .node[data-k=c2]{grid-row:2}.stage .node[data-k=c3]{grid-row:3}.stage .node[data-k=c4]{grid-row:4}
.stage .node.fta{grid-column:1;grid-row:2;position:relative;inset:auto;translate:none;display:block;width:14px;height:14px;max-width:none;justify-self:center;align-self:center}
.stage .node.fta>i{display:block}
.stage .node.fta>span{position:absolute;top:24px;left:50%;translate:-50% 0;width:124px;text-align:center;line-height:1.35}
.stage .node.fta .stt{position:absolute;top:84px;left:50%;translate:-50% 0;margin:0}
[dir=rtl] .stage .node.fta .stt{top:90px}
@media (max-width:520px){.stage .node.fta>span{width:100px}}
.arabic{background:radial-gradient(ellipse 60% 70% at 85% 20%,rgba(0,169,182,.20),transparent 65%),linear-gradient(160deg,#071D57 0%,#02113A 60%)}
.arabic::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,169,182,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(0,169,182,.10) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 55% 80% at 85% 25%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 80% at 85% 25%,#000,transparent 75%);pointer-events:none}
[dir=rtl] .arabic,[dir=rtl] .arabic::before{transform:none}
[dir=rtl] .arabic{background:radial-gradient(ellipse 60% 70% at 15% 20%,rgba(0,169,182,.20),transparent 65%),linear-gradient(200deg,#071D57 0%,#02113A 60%)}
[dir=rtl] .arabic::before{-webkit-mask-image:radial-gradient(ellipse 55% 80% at 15% 25%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 80% at 15% 25%,#000,transparent 75%)}
.arabic .wrap{position:relative}
.ar-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center}
.bi{position:relative;height:300px;max-width:420px;width:100%;margin-inline:auto}
.bi-card{position:absolute;top:0;left:0;width:calc(100% - 40px);background:#fff;color:var(--ink);border-radius:14px;padding:20px 22px;font-size:14px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);transition:transform 1000ms var(--ease-io),opacity 700ms ease,filter 700ms ease}
.bi-card.front{transform:translate(0,0) rotate(-1.4deg);z-index:2;opacity:1}
.bi-card.back{transform:translate(40px,44px) rotate(2deg) scale(.96);z-index:1;opacity:.5;filter:blur(.7px)}
.bi-card header{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--rule)}
.bi-card header b{font:700 16px Montserrat,Tajawal,sans-serif}
.bi-card[lang=ar]{font-family:Cairo,sans-serif}.bi-card[lang=en]{font-family:Inter,sans-serif}
.bi-card .pill{font:500 11px "IBM Plex Mono",Cairo,monospace;background:var(--teal);color:var(--ink);padding:3px 9px;border-radius:4px}
.bi-card .f{padding-block:5px;font-size:13.5px}.bi-card .num{font-family:"IBM Plex Mono",monospace;direction:ltr}
.bi-cap{position:absolute;bottom:0;inset-inline:0;text-align:center;font-size:12px;color:#9FB0D3;letter-spacing:.03em}
@media (max-width:900px){.ar-top{grid-template-columns:1fr}.bi{height:280px}}
.intg{margin-top:48px}
.tier{display:grid;grid-template-columns:260px 1fr;gap:32px;padding-block:28px;border-top:1px solid var(--rule);align-items:start}
.tier .th h3{font-size:19px}.tier .th p,.noerp{color:var(--muted);font-size:15px;margin-top:8px}
.noerp{margin-top:0;max-width:70ch}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.tile{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:16px;min-height:104px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:14px;box-shadow:0 1px 1px rgba(2,17,58,.04),0 10px 20px -14px rgba(2,17,58,.18);transition:transform 300ms var(--ease-out),box-shadow 300ms ease}
.tile .lg{height:32px;display:flex;align-items:center;direction:ltr}
.tile img{max-height:32px;max-width:150px;width:auto}
.tile .wm{font:700 15.5px/1.2 Montserrat,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.tile .chip{margin:0}
.tile.st-dev .chip{border-color:var(--amber);color:var(--amber)}
.tile.st-next{background:transparent;border-style:dashed;box-shadow:none}.tile.st-next .wm{color:var(--muted)}.tile.st-next img{filter:grayscale(1);opacity:.6}
@media (hover:hover) and (pointer:fine){.tile.st-ok:hover,.tile.st-dev:hover{transform:translateY(-3px);box-shadow:0 1px 1px rgba(2,17,58,.04),0 18px 30px -16px rgba(2,17,58,.28)}}
@media (max-width:800px){.tier{grid-template-columns:1fr;gap:16px}}
.clients{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:34px}
.cl-h{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:20px;max-width:none}
[dir=rtl] .cl-h{font-family:Cairo,sans-serif;letter-spacing:0;font-size:14px}
.cl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;align-items:center}
.cl{height:64px;min-width:150px;display:grid;place-items:center;padding-inline:18px}
.cl img{max-height:44px;max-width:150px;filter:grayscale(1);opacity:.75;transition:filter 240ms ease,opacity 240ms ease}
.cl img:hover{filter:none;opacity:1}
.cl span{font:700 15px Montserrat,Tajawal,sans-serif;color:var(--muted)}
.cl.ph{border:1.5px dashed #C3CEDA;border-radius:10px}.cl.ph span{font:500 12px "IBM Plex Mono",Cairo,monospace;color:#8C9AB0}
@media (prefers-reduced-motion:reduce){.bi-card{transition:none}.tile{transition:none}}

.chip.live{border-color:var(--teal);color:var(--teal-ink);background:rgba(0,169,182,.08)}

[dir=rtl] .chip,[dir=rtl] .stt,[dir=rtl] .bi-cap{font-family:Cairo,sans-serif;font-size:12px;letter-spacing:0}

/* v5.2: logo tiles, no status labels */
.tile{min-height:112px;justify-content:center;align-items:center;gap:12px;text-align:center}
.tile .lg{height:40px;justify-content:center;width:100%}
.tile img{max-height:40px;max-width:148px;object-fit:contain}
.tile .nm{font-size:13px;color:var(--muted);line-height:1.3;direction:ltr}
@media (hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-3px);box-shadow:0 1px 1px rgba(2,17,58,.04),0 18px 30px -16px rgba(2,17,58,.28)}}
.tile img[src*="xero"]{max-height:60px;margin-block:-10px}.tile img[src*="odoo"]{max-height:96px;margin-block:-28px}.tile img[src*="tally"]{max-height:48px;margin-block:-4px}

/* v5.3: official logos */
.logo img{height:38px;width:auto;display:block}
footer .brand img{height:42px;width:auto}

/* v5.4: QA conversion fixes */
.cta-note{margin-top:14px;font-size:14.5px;color:var(--muted)}
.opt-l{font-style:normal;font-weight:400;color:var(--muted);font-size:12.5px;margin-inline-start:6px}
@media (max-width:520px){.hero .lede .more{display:none}.hero .deadline{margin-top:20px}.hero .cta-row{margin-top:20px}.hero .cta-row .btn{flex:1}}
.tile img[src*="xero"]{max-height:76px;margin-block:-18px}

/* v5.5: ISO strip, Saudi section, client groups */
.iso{background:var(--paper);border-bottom:1px solid var(--rule);padding-block:18px}
.iso .wrap{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap}
.iso-h{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .iso-h{font-family:Cairo,sans-serif;letter-spacing:0;font-size:14px}
.iso-b{display:flex;align-items:baseline;gap:10px;padding-inline-start:16px;border-inline-start:2px solid var(--teal)}
.iso-b b{font:700 15px Montserrat,sans-serif;direction:ltr}.iso-b span{font-size:13.5px;color:var(--muted)}
.ksa-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:center}
.stats{display:grid;gap:0;border-top:2px solid var(--ink)}
.stats.wide{grid-template-columns:repeat(3,1fr)}
.stat{display:grid;grid-template-columns:minmax(150px,auto) 1fr;align-items:baseline;gap:20px;padding-block:22px;border-bottom:1px solid var(--rule)}
.stats.wide .stat{grid-template-columns:1fr;gap:6px;border-bottom:0;border-inline-end:1px solid var(--rule);padding-inline:24px}
.stats.wide .stat:first-child{padding-inline-start:0}.stats.wide .stat:last-child{border-inline-end:0}
.stat b{font:800 clamp(40px,5vw,64px)/1 Montserrat,sans-serif;letter-spacing:-.03em;color:var(--ink);direction:ltr;text-align:start}
[dir=rtl] .stat b{text-align:right}
.stat small{font-size:15.5px;color:var(--muted)}
@media (max-width:900px){.ksa-top{grid-template-columns:1fr}.stats.wide{grid-template-columns:1fr}.stats.wide .stat{border-inline-end:0;border-bottom:1px solid var(--rule);padding-inline:0}}
.cl-g{display:flex;align-items:center;justify-content:center;gap:16px 28px;flex-wrap:wrap;margin-top:14px}
.cl-c{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);min-width:150px;text-align:end}
[dir=rtl] .cl-c{font-family:Cairo,sans-serif;letter-spacing:0;font-size:13.5px}
.cl{background:var(--paper);border:1px solid var(--rule);border-radius:10px;height:72px;min-width:170px}
.cl.dark{background:var(--ink);border-color:var(--ink)}
.cl img{filter:none;opacity:1;max-height:42px;max-width:140px;object-fit:contain}
@media (max-width:700px){.cl-c{min-width:0;width:100%;text-align:center}}
.cl img[src*="/ets."]{max-height:60px}
.cl img[src*="quaed"]{max-height:60px}.cl img[src*="anara"]{max-height:54px}.cl-g+.cl-g{margin-top:18px}
.cl{overflow:hidden}.cl img[src*="quaed"]{transform:scale(2.3)}

/* v5.6: one client strip, Peppol badge, six nav links */
.cl-row{gap:14px 16px}.cl{height:76px;min-width:0;width:172px;padding-inline:18px}
.cl img{max-height:44px;max-width:136px}.cl img[src*="quaed"]{transform:none;max-height:40px}
.cl img[src*="red-palm"],.cl img[src*="artal"],.cl img[src*="amsy"]{max-height:58px}.cl img[src*="fast-net"]{max-height:30px}
.iso .pep{height:56px;width:auto;border-radius:8px}
.links{gap:22px}
@media (max-width:1180px){.links{gap:16px;font-size:14px}.nav .wrap{gap:18px}}
@media (max-width:1060px){.menu{display:grid}.links{display:flex;position:absolute;inset-inline:16px;top:72px;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:8px;box-shadow:var(--shadow);margin:0;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity 180ms ease,transform 220ms var(--ease-out);transform-origin:top}
 .links a{padding:14px 12px;border-radius:8px;font-size:16px}.nav.open .links{opacity:1;transform:none;pointer-events:auto}.nav .wrap{position:relative}.lang{margin-inline-start:auto}}
.cl{width:150px;padding-inline:14px}.cl img{max-width:122px}

/* v5.7: blog, tables, client logo boxes */
.cl img{width:auto;height:auto}
.art-h{max-width:24ch;font-size:clamp(32px,4vw,52px)}[dir=rtl] .art-h{max-width:26ch;font-size:clamp(30px,3.6vw,46px)}
.art-meta{margin-top:20px;font-size:13px;color:var(--muted);letter-spacing:.02em}[dir=rtl] .art-meta{font-family:Cairo,sans-serif;font-size:14px}
.article{max-width:740px;font-size:18px}[dir=rtl] .article{font-size:18.5px}
.article h2{font-size:clamp(22px,2.4vw,28px);margin-block:44px 14px;max-width:none;line-height:1.25}
.article h3{margin-block:28px 10px}.article p{color:#33405A;margin-bottom:16px;max-width:none}
.article ul,.article ol{padding-inline-start:24px;margin-bottom:18px;color:#33405A;display:grid;gap:10px}
.article li::marker{color:var(--teal-ink);font-weight:600}
.article a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px}
.article strong{color:var(--ink)}
.article .tldr{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:22px 24px;color:var(--ink);font-size:17px;box-shadow:var(--shadow);margin-bottom:8px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{display:flex;flex-direction:column;gap:12px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:28px;text-decoration:none;color:var(--ink);box-shadow:0 1px 1px rgba(2,17,58,.04),0 10px 20px -14px rgba(2,17,58,.18);transition:transform 300ms var(--ease-out),box-shadow 300ms ease}
.post span{font-size:12px;color:var(--muted)}[dir=rtl] .post span{font-family:Cairo,sans-serif;font-size:13.5px}
.post h3{font-size:21px;line-height:1.3}.post p{color:var(--muted);font-size:15.5px;flex:1}
.post b{color:var(--teal-ink);font-size:15px}
.post.alt{background:var(--ink);color:#fff;border-color:var(--ink)}.post.alt p,.post.alt span{color:#B9C3D9}.post.alt b{color:var(--teal)}
@media (hover:hover) and (pointer:fine){.post:hover{transform:translateY(-4px);box-shadow:0 1px 1px rgba(2,17,58,.04),0 22px 36px -18px rgba(2,17,58,.3)}}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.tbl{margin-top:36px;overflow-x:auto;border:1px solid var(--rule);border-radius:14px;background:var(--paper)}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.tbl th{font:600 13.5px Inter,Cairo,sans-serif;color:var(--muted);text-align:start;padding:16px 20px;border-bottom:1px solid var(--rule);background:var(--surface)}
.tbl td{padding:18px 20px;border-bottom:1px solid var(--rule)}.tbl tr:last-child td{border-bottom:0}
.tbl td:not(:first-child){font-weight:700;font-family:Montserrat,Tajawal,sans-serif;white-space:nowrap}
article .phero .wrap,article .wrap.article{max-width:808px}article .phero{padding-bottom:36px}

/* v5.8: log in */
.nav .login{border-color:var(--rule)}.login-m{display:none}
.nav .wrap{gap:16px}.links{gap:20px}
@media (max-width:1240px){.links{gap:15px;font-size:14px}.nav .btn-sm{padding-inline:14px;font-size:14px}}
@media (max-width:1060px){.login-m{display:block;border-top:1px solid var(--rule);margin-top:4px;color:var(--ink)!important;font-weight:600}}
@media (max-width:640px){.nav .login{display:none}}

/* v5.9: header utilities are quiet text; only the booking call is a button */
.nav .lang{border:0;background:none;height:auto;padding:6px 2px;gap:7px;font:500 14.5px Inter,Cairo,sans-serif;color:var(--muted);margin-inline-start:6px;position:relative;padding-inline-start:20px}
.nav .lang::before{content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:1px;height:18px;background:var(--rule)}
[lang=ar].lang,.nav .lang[lang=ar]{font-family:Cairo,sans-serif;font-size:15px}
.nav .lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.nav .login{all:unset;cursor:pointer;font:600 14.5px Inter,Cairo,sans-serif;color:var(--ink);padding:6px 2px;white-space:nowrap}
[dir=rtl] .nav .login{font-family:Cairo,sans-serif;font-size:15px}
.nav .lang,.nav .login{transition:color 160ms ease}
.nav .lang:hover{color:var(--ink);border:0}.nav .login:hover{color:var(--teal-ink)}
.nav .lang:active{transform:none}
.nav .wrap{gap:18px}.nav .btn-primary{margin-inline-start:4px}
@media (max-width:1060px){.nav .lang{margin-inline-start:auto}.nav .lang::before{display:none}.nav .lang{padding-inline-start:2px}}
@media (max-width:640px){.nav .login{display:none}}
.tile img[src*="erpnext"]{max-height:44px}
.tile img[src*="xero"]{max-height:46px;margin-block:0}.tile img[src*="odoo"]{max-height:40px;margin-block:0;transform:scale(2.4)}.tile .lg{overflow:visible}

/* landing pages (campaign traffic): no menu, the form sits in the hero */
.lp .nav .links,.lp .nav .login,.lp .nav .menu{display:none}
.lp-hero{border-top:0;padding-top:clamp(36px,5vw,72px)}
.lp-hero h1{font-size:clamp(32px,4vw,52px)}
.lp-hero .expect li{grid-template-columns:28px 1fr}
.lp-hero .expect b{font-size:15px}
/* instant booking on the thank-you page */
.bookbox{margin-top:32px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;padding:24px 28px;background:var(--ink);color:#fff;border-radius:14px}
.bookbox b{display:block;font:700 20px Montserrat,Tajawal,sans-serif}
.bookbox span{opacity:.8;font-size:15.5px}
/* sales video, click to load */
.vid .vplay,.vid .vframe{margin-top:40px;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block}
.vid .vplay{cursor:pointer;background:var(--ink) center/cover no-repeat;color:#fff;display:grid;place-content:center;justify-items:center;gap:14px;font:600 15px Inter,Cairo,sans-serif}
.vid .vplay i{width:76px;height:76px;border-radius:50%;background:var(--teal);position:relative;transition:transform 240ms var(--ease-out)}
.vid .vplay i::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff;transform:translateX(3px)}
.vid .vplay:hover i{transform:scale(1.06)}
/* industries hub */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:48px}
.ind-grid a.card{text-decoration:none;color:inherit;display:block}
.ind-grid a.card b{display:inline-block;margin-top:16px;color:var(--teal-ink);font-weight:600}
@media(max-width:820px){.bookbox{flex-direction:column;align-items:flex-start}}

/* landing hero as three areas: on a phone the form comes right after the headline, the bullet points follow it */
.lp-hero .wrap{grid-template-areas:"head form" "points form";grid-template-rows:auto 1fr;row-gap:0}
.lp-head{grid-area:head}.lp-points{grid-area:points}.lp-hero .form{grid-area:form}
#form{scroll-margin-top:96px}
.lp .bar a{display:none}
.btn[aria-busy=true]{cursor:progress}
@media (max-width:900px){.lp-hero .wrap{grid-template-areas:"head" "form" "points";grid-template-rows:none;row-gap:32px}
 .mcta{display:flex;position:fixed;inset-inline:12px;bottom:12px;z-index:60;transform:translateY(140%);transition:transform 360ms var(--ease-out)}.mcta.show{transform:none}.mcta .btn{width:100%;box-shadow:0 10px 30px -8px rgba(2,17,58,.5)}body{padding-bottom:84px}}
/* phone: the cookie notice is a slim strip, so it never sits on top of a form the visitor is filling in; it also steps aside while a field has focus */
@media (max-width:900px){.ck-b{inset-inline:8px;bottom:8px;padding:10px 12px;font-size:12.5px;border-radius:12px;display:none;grid-template-columns:1fr auto;gap:10px;align-items:center}
 .ck-b.show{display:grid}.ck-b p{margin:0;line-height:1.4}.ck-b div{flex-wrap:nowrap;gap:6px}.ck-b .btn{padding:8px 12px;font-size:12.5px;min-height:0}
 .mcta.show~.ck-b.show{bottom:76px}
 body:has(.form :focus) .ck-b,body:has(.form :focus) .mcta{display:none}}