body{font-size:15px}
:lang(ar) body{font-size:16px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9;border-radius:6px}.skip:focus{top:8px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo__mark{width:28px;height:28px;border-radius:7px;background:var(--brand);display:grid;place-items:center}
.logo__name{font-weight:600;font-size:18px}
.hd{position:sticky;top:0;z-index:10;background:var(--top-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:32px;height:64px}
.hd__nav{display:flex;gap:26px;font-size:14px}
.hd__nav a{text-decoration:none;color:var(--ink-2)} .hd__nav a:hover{color:var(--ink)}
.hd__act{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.lang{font-size:13.5px;color:var(--ink-2);text-decoration:none;padding-inline:8px}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:72px 88px}
.eyebrow,.kick{font-size:13px;font-weight:500;color:var(--brand-ink);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--sand)}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;max-width:15ch}
:lang(ar) .hero h1{line-height:1.35;font-weight:600;max-width:14ch}
.lede{margin-top:22px;font-size:1.0625rem;color:var(--ink-2);max-width:52ch}
:lang(ar) .lede{line-height:1.85}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-size:13px;color:var(--ink-2)}
.trust li{display:flex;align-items:center;gap:6px} .trust svg{color:var(--brand)}
/* hero UI composition */
.hero__ui{position:relative;min-height:540px}
.ui{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:16px;font-size:13px}
.ui__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ui__h b{font-weight:600;font-size:13.5px} .ui__h small{color:var(--ink-3);font-size:11.5px}
.ui__s{color:var(--ink-3);font-size:12px;margin:-6px 0 10px}
.ui--cal{position:absolute;inset-inline-end:0;top:0;width:76%}
.mc{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mc .dw{font-size:11px;color:var(--ink-3);text-align:center}
.mc .d{border:1px solid var(--line);border-radius:6px;padding:4px 0 3px;text-align:center;line-height:1.2;font-variant-numeric:tabular-nums}
.mc .d b{display:block;font-weight:500;font-size:12.5px} .mc .d small{font-size:9.5px;color:var(--ink-3)}
.mc .d.b{background:repeating-linear-gradient(135deg,var(--sunk) 0 4px,var(--hatch) 4px 8px);color:var(--ink-3)}
.mc .d.t b{color:var(--brand)} .mc .d.t{border-color:var(--brand)}
.mc .d.sel{background:var(--brand);border-color:var(--brand);color:#fff} .mc .d.sel small{color:var(--on-brand-mute)}
.mc .d.o{border:0}
.ui--bk{position:absolute;inset-inline-start:0;top:200px;width:56%;z-index:2}
.ln div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-variant-numeric:tabular-nums}
.ln div:first-child{border-top:0}
.ln .tot{font-weight:600;border-top:1px solid var(--ink)}
.ln .dep{color:var(--brand-ink);font-weight:500}
.ui--wa{position:absolute;inset-inline-end:0;bottom:6px;width:46%;background:var(--wa);border-color:var(--wa-line);z-index:3;font-size:13px;border-start-start-radius:3px}
.ui--wa small{display:block;text-align:end;color:var(--ink-3);font-size:11px;margin-top:4px}
/* flow */
.sec-h{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:600;letter-spacing:-.015em;line-height:1.25;max-width:24ch}
:lang(ar) .sec-h{line-height:1.5}
.flow{padding-block:72px;border-top:1px solid var(--line)}
.flow__l{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;counter-reset:f}
.flow__l li{padding-inline-end:28px;position:relative;padding-top:22px;border-top:2px solid var(--line)}
.flow__l li:first-child{border-top-color:var(--brand)}
.flow__n{font-family:var(--mono);font-size:12px;color:var(--sand)}
.flow__l h3{font-size:17px;font-weight:600;margin:8px 0 8px}
.flow__l p{color:var(--ink-2);font-size:14.5px}
/* feature rows */
.feat{display:grid;gap:96px;padding-block:72px 96px}
.fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.fr:nth-child(even) .fr__t{order:2}
.fr h2{font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:600;line-height:1.3;margin-bottom:14px;letter-spacing:-.01em}
:lang(ar) .fr h2{line-height:1.55}
.fr__t>p{color:var(--ink-2);max-width:50ch}
.ticks{margin-top:22px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.ticks svg{color:var(--brand);flex:none;margin-top:4px}
.fr__v{background:var(--sunk);border-radius:16px;padding:clamp(24px,4vw,48px);border:1px solid var(--line)}
.fr__v .ui{box-shadow:var(--shadow)}
.wkr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk{border:1px solid var(--line);border-radius:8px;padding:10px 0;text-align:center;display:flex;flex-direction:column;gap:2px}
.wk span{font-size:11.5px;color:var(--ink-3)} .wk b{font-weight:600;font-variant-numeric:tabular-nums}
.wk.hi{background:var(--sand-tint);border-color:var(--sand-line)} .wk.hi b{color:var(--sand-ink)}
.hijri{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;background:var(--bg);border-radius:8px;font-size:12.5px}
.hijri span:nth-child(2){color:var(--ink-3)}
.inv-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.inv-h b{display:block;font-size:15px;font-weight:600} .inv-h small{color:var(--ink-3);font-size:11.5px}
.qr{width:72px;height:72px} .qr svg{width:100%;height:100%}
.zt{display:inline-flex;gap:6px;align-items:center;margin-top:12px;font-size:12px;color:var(--ok);background:var(--ok-tint);padding:3px 10px;border-radius:999px}
.split{display:flex;gap:3px;height:10px;margin-bottom:14px}
.split span{border-radius:3px} .s1{background:var(--ok)} .s2{background:var(--sand)} .s3{background:var(--line-2)}
.pays li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pays li div{flex:1} .pays p{font-weight:500} .pays small{color:var(--ink-3);font-size:12px}
.dot{width:8px;height:8px;border-radius:50%} .dot--ok{background:var(--ok)} .dot--warn{background:var(--sand)} .dot--mute{background:var(--line-2)}
/* for */
.for{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:28px;border-block:1px solid var(--line)}
.for p{font-size:13px;color:var(--ink-3)}
.for ul{display:flex;flex-wrap:wrap;gap:10px 32px;font-weight:500;color:var(--ink-2)}
/* pricing */
.pricing{padding-block:96px 72px}
.pr__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.pr__head p{color:var(--ink-2);margin-top:10px}
.seg{display:inline-flex;background:var(--sunk);border-radius:8px;padding:3px}
.seg button{border:0;background:transparent;height:34px;padding-inline:14px;border-radius:6px;cursor:pointer;color:var(--ink-2);font-size:13.5px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:500}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column}
.plan--pop{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-lg)}
.plan__tag{position:absolute;top:-11px;inset-inline-start:24px;background:var(--brand);color:#fff;font-size:12px;padding:2px 10px;border-radius:999px}
.plan h3{font-size:17px;font-weight:600} .plan__s{color:var(--ink-3);font-size:13.5px}
.plan__p{margin:20px 0;display:flex;align-items:baseline;gap:6px} .plan__p b{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1} .plan__p span{color:var(--ink-3);font-size:13.5px}
.plan .ticks{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.faq{padding-block:56px 96px;display:grid;grid-template-columns:1fr 2fr;gap:48px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink-2);margin-top:10px;max-width:62ch}
.end{background:var(--end-bg);color:#fff}
.end__in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:56px;flex-wrap:wrap}
.end h2{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600}
.end p{color:var(--on-brand-mute);margin-top:6px}
.end__btn{background:#fff;color:var(--end-bg);border-color:#fff}
.ft{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-block:28px;font-size:13px;color:var(--ink-3)}
.ft__c{margin-inline-start:auto} .ft__c span{color:var(--ink-2)}
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-block:48px 64px}.hero__ui{min-height:440px;max-width:560px}.fr{grid-template-columns:1fr;gap:28px}.fr:nth-child(even) .fr__t{order:0}.flow__l{grid-template-columns:1fr 1fr;row-gap:32px}.plans{grid-template-columns:1fr}.faq{grid-template-columns:1fr;gap:20px}.hd__nav{display:none}}
@media (max-width:560px){.hide-s{display:none}.hd__in{gap:12px}.hd .btn--primary{padding-inline:10px;font-size:13px}.flow__l{grid-template-columns:1fr}.ui--cal{width:94%}.ui--bk{width:80%;top:250px}.ui--wa{width:64%}.hero__ui{min-height:600px}.feat{gap:64px}.wkr{gap:3px}.wk{padding:8px 0}.ft__c{margin-inline-start:0}}

.ft__th a{color:var(--ink-2)}