/* SellerHub — public website & auth screens (v1 premium).
   Palette: ink #05070d · navy #0a1428 · panel #0f1b33 · gold #c9a24a · amber #e9952f · cash green #2fd08a.
   One loud element per screen: the live ledger (hero) / the showcase (auth). Everything else stays quiet.
   Logical properties throughout so Arabic mirrors cleanly. */

:root[lang=ar] body{font-family:"IBM Plex Sans Arabic","Plus Jakarta Sans",Tahoma,system-ui,sans-serif}
:root[lang=ar] h1,:root[lang=ar] h2,:root[lang=ar] h3{letter-spacing:0!important}

.pub{--ink0:#05070d;--navy:#0a1428;position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;isolation:isolate}
:root:not([data-theme=light]) .pub{background:var(--ink0)}
.pw{width:100%;max-width:1200px;margin-inline:auto;padding-inline:28px}
.pub :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.pub .num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.btn.lg{padding:14px 24px;font-size:15px;border-radius:13px;font-weight:700}
.btn.block{width:100%;justify-content:center}
.btn.ghost:hover{background:var(--panel)}
.btn.glow{position:relative;box-shadow:0 10px 30px -8px rgba(201,162,74,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.glow:hover{transform:translateY(-1px);box-shadow:0 16px 40px -10px rgba(201,162,74,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.busy{opacity:.85;cursor:progress}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;display:inline-block;animation:spin .7s linear infinite;margin-inline-end:8px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ambient background: two slow gold/navy glows over a faint ledger grid */
.pbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pbg i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.pbg .o1{width:620px;height:620px;top:-220px;inset-inline-start:-160px;background:radial-gradient(circle,rgba(201,162,74,.22),transparent 65%);animation:drift 22s ease-in-out infinite alternate}
.pbg .o2{width:760px;height:760px;bottom:-320px;inset-inline-end:-220px;background:radial-gradient(circle,rgba(40,74,160,.45),transparent 65%);animation:drift 28s ease-in-out infinite alternate-reverse}
.pbg .o3{width:420px;height:420px;top:38%;inset-inline-start:46%;background:radial-gradient(circle,rgba(233,149,47,.12),transparent 65%);animation:drift 30s ease-in-out infinite alternate}
.pbg .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%)}
@keyframes drift{to{transform:translate3d(60px,40px,0) scale(1.08)}}
:root[data-theme=light] .pbg i{opacity:.25}

/* reveal: one orchestrated hero load; sections only fade */
.rv{opacity:0;transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.hero .rv{transform:translateY(14px)}
.rv.in{opacity:1;transform:none}

/* header */
.ph{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.ph.scrolled,.auth .ph{background:color-mix(in srgb,var(--ink0) 82%,transparent);border-color:var(--line);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
.ph .pw{display:flex;align-items:center;gap:18px;height:72px}
.pbrand{display:inline-flex;align-items:center;gap:11px;min-width:0}
.pbrand .mark{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 16px rgba(201,162,74,.35))}
.pbrand .bn{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.pbrand .bn b{font-weight:800;font-size:19px;letter-spacing:-.025em;color:var(--ink)}
.pbrand .bn small{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.pnav{display:flex;gap:2px;margin-inline-start:18px}
.pnav button{border:0;background:none;color:var(--ink2);font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:9px;cursor:pointer;font-family:inherit}
.pnav button:hover{color:var(--ink);background:var(--panel)}
.pact{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.ph .sp{flex:1}
.pmenu{display:none}
.langsw{display:inline-flex;border:1px solid var(--line2);border-radius:10px;padding:2px;gap:2px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.langsw button{border:0;background:none;color:var(--muted);font-weight:700;font-size:12px;min-width:32px;padding:6px 8px;border-radius:7px;cursor:pointer;font-family:inherit}
.langsw button[lang=ar]{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-size:13px}
.langsw button[aria-pressed=true]{background:var(--panel3);color:var(--gold)}
.langsw button:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:60px;align-items:center;padding-block:76px 72px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:6px 14px 6px 10px;border:1px solid rgba(201,162,74,.28);background:rgba(201,162,74,.07);color:#f8d98a;border-radius:999px;font-size:13px;font-weight:600}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px rgba(47,208,138,.18);animation:beat 2s ease-in-out infinite}
.hero h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:800;margin:0;text-wrap:balance}
.hero h1 .gold{display:block;background:linear-gradient(100deg,#ffe3a1 0%,#c9a24a 40%,#e9952f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
:root[lang=ar] .hero h1{line-height:1.32;font-weight:700}
.hero .lead{font-size:17.5px;line-height:1.7;color:var(--ink2);margin:24px 0 0;max-width:54ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0;color:var(--muted);font-size:13px;font-weight:600}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--gold);flex:none}
.hero-vis{position:relative}

/* the live ledger (hero's loud element) */
.demo{position:relative;background:linear-gradient(180deg,rgba(18,30,56,.92),rgba(9,15,30,.96));border:1px solid rgba(201,162,74,.18);border-radius:24px;padding:22px;box-shadow:0 40px 100px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 rgba(255,255,255,.06) inset}
.demo::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(201,162,74,.6),transparent 35%,transparent 70%,rgba(76,195,255,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.demo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--good)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--good);animation:beat 1.6s ease-in-out infinite}
.demo-top em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:3px 10px}
@keyframes beat{50%{box-shadow:0 0 0 6px rgba(47,208,138,0)}0%{box-shadow:0 0 0 0 rgba(47,208,138,.5)}}
.demo-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:end}
.dm-v small{display:block;font-size:12.5px;color:var(--ink2);font-weight:600}
.dm-v strong{display:block;font-size:44px;font-weight:800;letter-spacing:-.045em;line-height:1.1;margin-top:4px;color:#fff;text-shadow:0 0 30px rgba(201,162,74,.25)}
.dm-v .up{display:inline-flex;gap:5px;font-size:12px;color:var(--muted);margin-top:6px}
.dm-v .up b{color:var(--good);font-weight:700}
.spark{width:100%;height:88px;overflow:visible}
.sp-l{fill:none;stroke:#c9a24a;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.4,0,.2,1) .4s forwards;filter:drop-shadow(0 4px 10px rgba(201,162,74,.45))}
.sp-a{opacity:0;animation:fade 1s ease 1.4s forwards}
.sp-d{fill:#c9a24a;opacity:0;animation:fade .4s ease 2.5s forwards,ping 2.4s ease-out 2.9s infinite;transform-box:fill-box;transform-origin:center}
[dir=rtl] .spark{direction:ltr}
@keyframes draw{to{stroke-dashoffset:0}} @keyframes fade{to{opacity:1}}
@keyframes ping{0%{filter:drop-shadow(0 0 0 rgba(201,162,74,.9))}100%{filter:drop-shadow(0 0 12px rgba(201,162,74,0))}}
.demo-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.demo-k div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 11px;min-width:0}
.demo-k small{display:block;font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-k b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.feed{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.feed-h{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:8px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:beat 1.4s infinite}
.feed ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:200px}
.fi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid transparent}
.fi.new{animation:slidein .55s cubic-bezier(.2,.8,.2,1)}
.fi.new.delivered{animation:slidein .55s cubic-bezier(.2,.8,.2,1),flash 1.6s ease}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}}
@keyframes flash{0%,30%{border-color:rgba(47,208,138,.45);background:rgba(47,208,138,.08)}}
.fi-t{display:flex;flex-direction:column;min-width:0}
.fi-t b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-t small{font-size:11.5px;color:var(--muted)}
.fi-v{font-weight:800;font-size:13.5px;color:var(--good)}
.fi:not(.delivered) .fi-v{color:var(--muted)}
.chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
.chip.delivered{background:var(--good-soft);color:var(--good)}
.chip.confirmed{background:var(--gold-soft);color:var(--gold)}
.chip.shipped{background:var(--info-soft);color:var(--info)}
.badge-top{position:absolute;inset-inline-start:-26px;bottom:-24px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,#1c2a4a,#121d36);border:1px solid rgba(201,162,74,.35);box-shadow:0 18px 40px -10px rgba(0,0,0,.6);animation:float 5s ease-in-out infinite}
.badge-top>svg{width:22px;height:22px;color:var(--gold)}
.badge-top small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.badge-top b{font-size:13px;font-weight:800}
@keyframes float{50%{transform:translateY(-6px)}}

/* integrations strip */
.strip{padding-block:22px 30px;border-block:1px solid var(--line);background:color-mix(in srgb,var(--navy) 55%,transparent)}
.strip p{margin:0 auto 14px;font-size:13px;color:var(--muted);font-weight:600;text-align:center}
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-t{display:flex;gap:48px;width:max-content;animation:marq 38s linear infinite}
.marq{direction:ltr}
.mq-t span{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink2);opacity:.75;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
.marq:hover .mq-t{animation-play-state:paused}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:52px}
.stats>div{padding:6px 24px;border-inline-start:1px solid var(--line)}
.stats>div:first-child{border-inline-start:0;padding-inline-start:0}
.stats strong{display:block;font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.04em;color:var(--gold);line-height:1}
.stats>div>span{display:block;margin-top:10px;color:var(--ink2);font-size:14px;line-height:1.5;max-width:22ch}

/* top sellers board */
.lbsec{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.lb-t h2{margin:0}
.lb-t>p{color:var(--ink2);line-height:1.7;margin:18px 0 0;max-width:48ch}
.board{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 40%,var(--ink0)));border:1px solid var(--line2);border-radius:22px;padding:20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.board-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.board-h span{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.board-h span svg{width:20px;height:20px;color:var(--gold)}
.board-h em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600;border:1px solid var(--line2);border-radius:999px;padding:3px 10px}
.br{display:grid;grid-template-columns:30px minmax(0,1.3fr) minmax(0,1.5fr) 58px minmax(0,1fr);gap:12px;align-items:center;padding:12px 8px;border-top:1px solid var(--line)}
.br.hd{border-top:0;padding-block:6px;font-size:11.5px;color:var(--muted);font-weight:700}
.br.hd span:last-child,.br .pf{text-align:end}
.rk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:12.5px;background:var(--panel3);color:var(--ink2)}
.rk.m1{background:linear-gradient(135deg,#ffe08a,#e9952f);color:#1b1205}
.rk.m2{background:linear-gradient(135deg,#e6ebf5,#9aa6bd);color:#141b2b}
.rk.m3{background:linear-gradient(135deg,#f0b48a,#a8623a);color:#22130a}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11.5px;background:var(--panel3);color:var(--gold);border:1px solid rgba(201,162,74,.25)}
.who b{display:block;font-size:13.5px} .who small{display:block;font-size:11.5px;color:var(--muted)}
.del{display:flex;flex-direction:column;gap:6px;min-width:0}
.del b{font-size:13.5px}
.bar{height:6px;border-radius:4px;background:var(--panel3);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
[dir=rtl] .bar i{transform-origin:right}
.br.in .bar i{transform:none}
.roas{font-weight:700;font-size:13.5px;color:var(--ink2)}
.pf{font-weight:800;font-size:15px;color:var(--good)}
.board-n{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--line2);color:var(--muted);font-size:12.5px;line-height:1.55}
.board-n svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--good)}

/* why + equation */
.why{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;padding-block:64px;border-top:1px solid var(--line)}
.why h2,.blk h2,.final h2,.lb-t h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.035em;line-height:1.12;margin:0;font-weight:800;text-wrap:balance}
:root[lang=ar] .why h2,:root[lang=ar] .blk h2,:root[lang=ar] .final h2,:root[lang=ar] .lb-t h2{line-height:1.4;font-weight:700}
.why p{color:var(--ink2);line-height:1.7;margin:16px 0 0;max-width:52ch}
.eq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.eq li{display:flex;flex-direction:column;justify-content:center;position:relative;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:96px;flex:1 1 auto}
.eq .op{position:absolute;inset-inline-start:-8px;top:50%;transform:translate(-50%,-50%);color:var(--muted);font-weight:800;font-size:15px;background:var(--ink0);padding:0 2px;line-height:1}
[dir=rtl] .eq .op{transform:translate(50%,-50%)}
.eq-v{font-size:18px;font-weight:800;letter-spacing:-.02em}
.eq-l{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:3px}
.eq li.res{background:var(--gold-soft);border-color:rgba(201,162,74,.4)}
.eq li.res .eq-v{color:var(--gold)}

/* blocks */
.blk{padding-block:64px;border-top:1px solid var(--line)}
.blk>h2{margin-bottom:34px;max-width:22ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.steps li{position:relative;padding-top:56px}
.steps li::before{content:"";position:absolute;top:19px;inset-inline:48px -22px;height:1px;background:linear-gradient(90deg,rgba(201,162,74,.5),var(--line2))}
[dir=rtl] .steps li::before{background:linear-gradient(-90deg,rgba(201,162,74,.5),var(--line2))}
.steps li:last-child::before{display:none}
.sn{position:absolute;top:0;inset-inline-start:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;border:1px solid rgba(201,162,74,.5);color:var(--gold);background:var(--ink0);box-shadow:0 0 0 6px rgba(201,162,74,.06)}
.steps h3,.feats h3,.ws h3,.priv h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.steps p,.feats p,.ws p,.priv p{margin:8px 0 0;color:var(--ink2);line-height:1.65;font-size:14.5px}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.feats li{display:flex;gap:16px;padding-block:22px;border-top:1px solid var(--line)}
.feats li:nth-child(-n+2){border-top:0;padding-top:4px}
.fic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--gold-soft);border:1px solid rgba(201,162,74,.22)}
.fic svg{width:20px;height:20px;color:var(--gold)}
.ws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ws article{border-radius:20px;padding:28px;border:1px solid var(--line)}
.ws article svg{width:26px;height:26px;margin-bottom:16px}
.ws-b{background:linear-gradient(160deg,rgba(201,162,74,.1),transparent 70%)} .ws-b svg{color:var(--gold)}
.ws-s{background:linear-gradient(160deg,rgba(76,195,255,.09),transparent 70%)} .ws-s svg{color:var(--info)}
.priv{display:flex;gap:16px;margin-top:30px;max-width:720px}
.priv svg{width:22px;height:22px;color:var(--good);flex:none;margin-top:2px}
.faq details{border-bottom:1px solid var(--line);max-width:800px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:800;font-size:20px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--ink2);line-height:1.7;max-width:68ch}
.final{padding-block:40px 96px}
.final-in{text-align:center;padding:64px 28px;border-radius:28px;border:1px solid rgba(201,162,74,.25);background:radial-gradient(600px 260px at 50% 0%,rgba(201,162,74,.16),transparent 70%),linear-gradient(180deg,var(--panel),var(--ink0))}
.final h2{max-width:22ch;margin-inline:auto}
.final p{max-width:56ch;margin:16px auto 0;color:var(--ink2);line-height:1.7}
.final .ctas{justify-content:center}
.pf{border-top:1px solid var(--line);margin-top:auto}
.pf .pw{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:24px;color:var(--muted);font-size:13px}
.pf .sp{flex:1}

/* ---------- auth: split screen ---------- */
.auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:1200px;margin-inline:auto;gap:40px;padding:40px 28px 64px;align-items:center}
.auth-main.reg{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.auth-form{display:flex;justify-content:center}
.auth-card{width:100%;max-width:460px;background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid var(--line2);border-radius:24px;padding:34px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset}
.reg .auth-card{max-width:640px}
.auth-card.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-card h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.035em;outline:none}
.auth-card .sub{margin:10px 0 0;color:var(--ink2);font-size:14.5px;line-height:1.6}
.auth-card form{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.auth-card label.f{font-size:12.5px}
.auth-card input,.auth-card textarea{padding:12px 14px;font-size:14.5px;border-radius:12px;transition:border-color .15s,box-shadow .15s}
.auth-card input:focus,.auth-card textarea:focus{border-color:rgba(201,162,74,.6);box-shadow:0 0 0 4px rgba(201,162,74,.12);outline:none}
.auth-card textarea{resize:vertical;min-height:80px}
.iw{position:relative;display:block}
.iw input{width:100%;padding-inline-start:42px}
.fi-ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:grid;pointer-events:none}
.fi-ic svg{width:17px;height:17px}
.pwf{position:relative}
.pwf input{width:100%;padding-inline-end:48px}
.pwf .pwt{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;padding:7px;border-radius:8px;display:grid}
.pwf .pwt svg{width:18px;height:18px}
.pwf .pwt.on{color:var(--gold)}
.pwf .pwt:hover{color:var(--ink);background:var(--panel3)}
.pwm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:5px;align-items:center;margin-top:8px}
.pwm i{height:4px;border-radius:3px;background:var(--panel3);transition:background .25s}
.pwm em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);min-width:56px;text-align:end}
.pwm[data-s="0"] i:nth-child(1),.pwm[data-s="1"] i:nth-child(1){background:var(--bad)}
.pwm[data-s="1"] em,.pwm[data-s="0"] em{color:var(--bad)}
.pwm[data-s="2"] i:nth-child(-n+2){background:var(--warn)} .pwm[data-s="2"] em{color:var(--warn)}
.pwm[data-s="3"] i{background:var(--good)} .pwm[data-s="3"] em{color:var(--good)}
.ferr{margin:0;background:var(--bad-soft);border:1px solid rgba(255,90,118,.35);color:var(--ink);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;font-weight:600;outline:none}
input[aria-invalid=true]{border-color:var(--bad)!important}
.alink{align-self:flex-end;color:var(--gold);font-size:13px;font-weight:600;margin-top:-8px}
.or{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.alt{text-align:center;color:var(--muted);font-size:13.5px;margin:20px 0 0}
.alt a{color:var(--gold);font-weight:700}
.hintline{color:var(--muted);font-size:12.5px;line-height:1.6;margin:16px 0 0}
.muted{color:var(--muted)}
.done{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.done>svg{width:44px;height:44px;color:var(--good);border:1px solid rgba(47,208,138,.35);background:var(--good-soft);border-radius:50%;padding:10px}
.done p{margin:0;line-height:1.65;color:var(--ink2)}
.tl{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:2px}
.tl li{position:relative;display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px;font-weight:600;color:var(--muted)}
.tl li>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--panel2)}
.tl li>span svg{width:15px;height:15px}
.tl li.ok{color:var(--ink)} .tl li.ok>span{background:var(--good-soft);border-color:rgba(47,208,138,.4);color:var(--good)}
.tl li.now{color:var(--ink)} .tl li.now>span{border-color:rgba(201,162,74,.5)}
.tl li.now>span i{width:10px;height:10px;border-radius:50%;background:var(--gold);animation:beat 1.6s infinite}
.tl em{font-style:normal;margin-inline-start:auto;font-size:11.5px;color:var(--gold);background:var(--gold-soft);padding:3px 9px;border-radius:999px}
.fst{display:flex;align-items:center;gap:10px;margin:6px 0 -4px;font-size:14px;font-weight:800;letter-spacing:-.01em}
.fst span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--gold-soft);color:var(--gold);border:1px solid rgba(201,162,74,.35)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.g2 small{color:var(--muted);font-weight:500;line-height:1.45}
.g2 .span2{grid-column:1/-1}
.lt small{font-weight:500;color:var(--muted)}
.types{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.types legend{font-size:12.5px;font-weight:700;color:var(--ink2);padding:0;margin-bottom:8px}
.tcard{position:relative;cursor:pointer}
.tcard input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tcard span{display:flex;flex-direction:column;gap:4px;height:100%;border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--panel2);transition:border-color .15s,background .15s,transform .15s}
.tcard span svg{width:22px;height:22px;color:var(--muted);margin-bottom:6px;transition:color .15s}
.tcard:hover span{border-color:rgba(201,162,74,.35)}
.tcard b{font-size:14px} .tcard small{color:var(--muted);font-size:12px;line-height:1.45}
.tcard input:checked+span{border-color:var(--gold);background:var(--gold-soft);box-shadow:0 0 0 3px var(--gold-soft)}
.tcard input:checked+span svg{color:var(--gold)}
.tcard input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.terms{align-items:flex-start;font-weight:500;color:var(--ink2);line-height:1.55;font-size:13px}
.terms input{margin-top:2px;flex:none}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* showcase side */
.auth-side{position:relative}
.reg .auth-side{position:sticky;top:104px}
.as-in{max-width:480px}
.auth-side h2{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
:root[lang=ar] .auth-side h2{line-height:1.4;font-weight:700}
.auth-side>.as-in>p{color:var(--ink2);line-height:1.7;margin:14px 0 26px;max-width:46ch}
.demo.compact .demo-k{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo.compact .dm-v strong{font-size:36px}
.ins{margin:18px 0 0;padding:18px 20px;border-radius:18px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.ins figcaption{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--gold)}
.ins figcaption svg{width:15px;height:15px}
.ins blockquote{margin:10px 0 0;font-size:16px;line-height:1.55;font-weight:600;min-height:3.1em}
.ins blockquote.sw{animation:fadeup .5s ease}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}}
.ins-dots{display:flex;gap:6px;margin-top:12px}
.ins-dots i{width:18px;height:4px;border-radius:3px;background:var(--panel3);transition:background .3s,width .3s}
.ins-dots i.on{background:var(--gold);width:28px}
.nx{margin-top:18px;padding:18px 20px;border-radius:18px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.nx h3{margin:0 0 10px;font-size:14px;font-weight:800}
.nx ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nx li{display:flex;gap:12px;align-items:center;color:var(--ink2);font-size:14px;font-weight:600}
.nx li span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--gold);border:1px solid rgba(201,162,74,.4)}


/* ---------- section heads ---------- */
.sh{max-width:640px;margin-bottom:34px}
.sh h2{margin:0}
.sh p{margin:14px 0 0;color:var(--ink2);line-height:1.7;font-size:15.5px}
.blk>.sh h2{margin-bottom:0}

/* solutions: one row of four roles */
.sols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sol{padding:24px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,transparent),transparent)}
.sol .fic{margin-bottom:18px}
.sol h3{margin:0;font-size:16.5px;font-weight:700}
.sol p{margin:8px 0 0;color:var(--ink2);line-height:1.65;font-size:14.5px}

/* platform preview: a quiet replica of the real app */
.pv{border-radius:22px;border:1px solid var(--line2);background:var(--panel);overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.pv-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,var(--ink0))}
.pv-bar i{width:10px;height:10px;border-radius:50%;background:var(--panel3)}
.pv-bar span{margin-inline-start:10px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.pv-bar em{margin-inline-start:auto;font-style:normal;font-size:11.5px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:2px 9px}
.pv-in{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:380px}
.pv-side{display:flex;flex-direction:column;gap:4px;padding:16px 12px;border-inline-end:1px solid var(--line);background:color-mix(in srgb,var(--ink0) 50%,var(--panel))}
.pv-side .mark{width:30px;height:30px;margin:0 8px 14px}
.pv-side span{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:13px}
.pv-side span svg{width:16px;height:16px}
.pv-side span b{font-weight:600}
.pv-side span.on{background:var(--gold-soft);color:var(--gold)}
.pv-main{padding:18px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:14px}
.pv-k{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pv-k div{position:relative;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);overflow:hidden}
.pv-k small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.pv-k b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.pv-k i{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:46%}
.pv-k i.good{background:var(--good)} .pv-k i.gold{background:var(--gold)} .pv-k i.violet{background:var(--violet)} .pv-k i.info{background:var(--info)}
.pv-c,.pv-t{border-radius:14px;border:1px solid var(--line);background:var(--panel2);padding:14px;display:flex;flex-direction:column;min-width:0}
.pv-ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.pv-ch b{font-size:13px} .pv-ch small{font-size:11.5px;color:var(--muted)}
.pv-bars{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:150px;direction:ltr}
.pv-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#c9a24a,rgba(233,149,47,.35));transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d)}
.pv.in .pv-bars i{transform:none}
.pv-r{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:12.5px}
.pv-r span:first-child{display:flex;flex-direction:column;min-width:0}
.pv-r b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-r small{color:var(--muted);font-size:11px}
.pv-r .num{text-align:end;color:var(--ink2)} .pv-r .g{color:var(--good);font-weight:800}

/* modules */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mod{padding:20px;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 75%,transparent)}
.mod-h{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:16px}
.mod h3{margin:0;font-size:15.5px;font-weight:700}
.mod p{margin:7px 0 0;color:var(--ink2);line-height:1.6;font-size:13.5px}
.mod.soon{background:transparent;border-style:dashed}
.mod.soon .fic{background:var(--panel2);border-color:var(--line2)} .mod.soon .fic svg{color:var(--muted)}

/* integrations */
.ints{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ints li{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent);min-width:0}
.mono{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--gold);background:var(--ink0);border:1px solid rgba(201,162,74,.3)}
.ints li>span:last-child{min-width:0}
.ints b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ints small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* security */
.secsec{position:relative}
.secs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.secs article{display:flex;gap:16px;padding:26px;border-top:1px solid var(--line)}
.secs article:nth-child(-n+2){border-top:0}
.secs article:nth-child(even){border-inline-start:1px solid var(--line)}
.secs svg{width:22px;height:22px;color:var(--good);flex:none;margin-top:2px}
.secs h3{margin:0;font-size:16px;font-weight:700}
.secs p{margin:7px 0 0;color:var(--ink2);line-height:1.65;font-size:14px}

/* footer */
.pf .pf-g{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:44px 28px;align-items:start}
.pf-b p{margin:14px 0 0;max-width:38ch;line-height:1.65;color:var(--muted)}
.pf nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pf h4{margin:0 0 4px;font-size:13px;font-weight:800;color:var(--ink)}
.pf nav a,.pf nav button{color:var(--muted);font-size:13.5px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-align:start}
.pf nav a:hover,.pf nav button:hover{color:var(--gold)}
.pf .pf-bot{border-top:1px solid var(--line);padding-block:18px 24px}

/* legal pages */
.lg-main{flex:1;padding-block:56px 72px}
.lg-doc{max-width:720px}
.lg-doc h1{margin:0;font-size:clamp(30px,4vw,42px);letter-spacing:-.035em;font-weight:800}
.lg-doc .sub{color:var(--muted);margin:10px 0 0}
.lg-doc section{margin-top:34px}
.lg-doc h2{margin:0;font-size:19px;font-weight:700}
.lg-doc section p{margin:10px 0 0;color:var(--ink2);line-height:1.75;font-size:15px}
.lg-note{display:flex;gap:10px;margin-top:40px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line2);color:var(--muted);font-size:13px;line-height:1.6}
.lg-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--warn)}

/* login extras */
.lrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:-4px}
.lrow .alink{margin:0}
.rem{font-size:13px;color:var(--ink2);font-weight:500}
.terms a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:2px}

@media (max-width:1060px){
  .sols,.mods,.ints{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-in{grid-template-columns:minmax(0,1fr)} .pv-side{display:none}
  .pf .pf-g{grid-template-columns:repeat(3,minmax(0,1fr))} .pf-b{grid-column:1/-1}
}
@media (max-width:640px){
  .sols,.mods,.ints,.secs{grid-template-columns:minmax(0,1fr)}
  .secs article{border-inline-start:0!important;border-top:1px solid var(--line)!important}
  .secs article:first-child{border-top:0!important}
  .pv-main{grid-template-columns:minmax(0,1fr);padding:12px}
  .pv-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf .pf-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (prefers-reduced-motion:reduce){.pv-bars i{transform:none;transition:none}}

/* responsive */
@media (max-width:1060px){
  .hero{grid-template-columns:minmax(0,1fr);gap:48px;padding-block:52px}
  .hero-vis{max-width:620px}
  .lbsec{grid-template-columns:minmax(0,1fr);gap:32px}
  .why{grid-template-columns:minmax(0,1fr);gap:28px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .steps li:nth-child(2)::before{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .stats>div:nth-child(3){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:960px){
  .auth-main,.auth-main.reg{grid-template-columns:minmax(0,1fr);padding-top:28px}
  .auth-side{display:none}
}
@media (max-width:860px){
  .pnav{display:none;position:absolute;top:72px;inset-inline:0;flex-direction:column;background:var(--ink0);border-bottom:1px solid var(--line);padding:8px 16px 14px;margin:0}
  .pnav.open{display:flex} .pnav button{text-align:start;padding:12px}
  .pmenu{display:inline-grid} .hide-s{display:none}
  .pbrand .bn small{max-width:200px}
}
@media (max-width:640px){
  .pw{padding-inline:16px}
  .ph .pw{gap:10px;height:64px}
  .pnav{top:64px}
  .pact{gap:4px} .pact .btn.ghost{padding:8px 10px}
  .pbrand .bn small{display:none}
  .hero .lead{font-size:15.5px}
  .demo{padding:16px;border-radius:20px}
  .dm-v strong{font-size:34px}
  .demo-main{grid-template-columns:minmax(0,1fr)}
  .spark{height:64px}
  .demo-k{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badge-top{inset-inline-start:10px;bottom:-26px;padding:8px 11px}
  .br{grid-template-columns:26px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
  .br .roas,.br.hd span:nth-child(4){display:none}
  .board{padding:14px}
  .eq{flex-direction:column;gap:6px}
  .eq li{flex-direction:row;align-items:baseline;gap:10px;padding:10px 14px}
  .eq .op{position:static;transform:none!important;background:none;padding:0;width:12px;flex:none;text-align:center}
  .eq li:first-child{padding-inline-start:36px}
  .eq-v{min-width:74px;text-align:end} .eq-l{margin:0}
  .steps,.feats,.ws,.g2,.types{grid-template-columns:minmax(0,1fr)}
  .steps li::before{display:none} .feats li:nth-child(2){border-top:1px solid var(--line);padding-top:22px}
  .stats>div{padding-inline:14px}
  .auth-main{padding:20px 12px 48px}
  .auth-card{padding:24px 18px;border-radius:20px}
  .final-in{padding:44px 18px}
  .pf .pw{gap:10px}
}
@media (max-width:400px){.pact .btn.ghost{display:none}}
@media (prefers-reduced-motion:reduce){
  .pbg i,.mq-t,.badge-top,.eyebrow i,.live i,.pulse,.tl li.now>span i{animation:none}
  .sp-l{animation:none;stroke-dashoffset:0} .sp-a,.sp-d{animation:none;opacity:1}
  .rv{opacity:1;transform:none;transition:none} .bar i{transform:none;transition:none}
}

/* ===== Landing v2 (editorial) =====
   One gold (#c9a24a) used for the primary button, small labels and the journey line. No gradients, no glow, no counters.
   Headings in Newsreader (serif); body keeps Plus Jakarta Sans. Arabic falls back to IBM Plex Sans Arabic. */
.land2{--l-gold:#c9a24a;--l-bg:#0b0b0c;--l-s:#121214;--l-line:rgba(255,255,255,.09);--l-ink:#ecebe6;--l-mute:#9a9892;background:var(--l-bg)!important;color:var(--l-ink)}
:root[data-theme=light] .land2{--l-bg:#faf9f6;--l-s:#f1efe9;--l-line:rgba(0,0,0,.1);--l-ink:#17160f;--l-mute:#6b6a63}
.land2 .ph{background:transparent;border-bottom:1px solid transparent}.land2 .ph.scrolled{background:color-mix(in srgb,var(--l-bg) 92%,transparent);border-color:var(--l-line);backdrop-filter:blur(8px)}
.land2 .btn.pri{background:var(--l-gold);color:#14110a;border:1px solid var(--l-gold);box-shadow:none;font-weight:700}
.land2 .btn.pri:hover{background:#d6b25c;transform:none}
.land2 h1,.land2 h2{font-family:"Newsreader",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.01em;color:var(--l-ink)}
:root[lang=ar] .land2 h1,:root[lang=ar] .land2 h2{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-weight:600}
.land2 h3{font-weight:700;letter-spacing:0}
.l2-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--l-gold);margin:0 0 18px}
:root[lang=ar] .l2-eyebrow{letter-spacing:0;text-transform:none;font-size:13px}
.l2-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center;padding-block:88px 96px}
.l2-hero h1{font-size:clamp(40px,5.2vw,64px);line-height:1.06;margin:0 0 24px;max-width:15ch}
:root[lang=ar] .l2-hero h1{line-height:1.3;max-width:none}
.l2-lead{font-size:18px;line-height:1.65;color:var(--l-mute);max-width:54ch;margin:0 0 32px}
.l2-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.l2-link{color:var(--l-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--l-line);padding-bottom:2px}.l2-link:hover{border-color:var(--l-gold);color:var(--l-gold)}
.l2-note{margin:22px 0 0;font-size:13px;color:var(--l-mute)}
.l2-fig{margin:0;border:1px solid var(--l-line);background:var(--l-s);border-radius:6px;padding:30px 30px 22px}
.l2-fig figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--l-line);font-size:12.5px;color:var(--l-mute)}
.jr{list-style:none;margin:0;padding:0;position:relative}
.jr::before{content:"";position:absolute;inset-block:14px;inset-inline-start:13px;width:1px;background:var(--l-gold);opacity:.55}
.jr li{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:16px;align-items:start;padding-block:13px}
.jr-n{width:27px;height:27px;border-radius:50%;background:var(--l-bg);border:1px solid var(--l-gold);color:var(--l-gold);font-size:12px;font-weight:700;display:grid;place-items:center;position:relative;z-index:1}
.jr b{display:block;font-size:15px;color:var(--l-ink)}.jr small{display:block;margin-top:3px;font-size:13px;color:var(--l-mute);line-height:1.5}
.jr em{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--l-gold);padding-top:5px;text-align:end;max-width:130px}
:root[lang=ar] .jr em{letter-spacing:0;text-transform:none}
.jr-c li{padding-block:9px}.jr-c b{font-size:14px;color:inherit}
.l2-sec{padding-block:84px;border-top:1px solid var(--l-line)}
.l2-h{max-width:720px;margin-bottom:44px}
.l2-h h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15;margin:0}
.l2-sub{color:var(--l-mute);font-size:16px;line-height:1.6;margin:16px 0 0}
.l2-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.l2-cols article{padding-inline:0 36px;padding-block:4px}
.l2-cols article+article{padding-inline-start:36px;border-inline-start:1px solid var(--l-line)}
.l2-cols h3{font-size:18px;margin:0 0 12px}.l2-cols p{color:var(--l-mute);line-height:1.7;margin:0;font-size:15px}
.l2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 72px}
.l2-steps li{display:grid;grid-template-columns:54px 1fr;gap:18px}
.l2-num{font-family:"Newsreader",Georgia,serif;font-size:44px;line-height:1;color:var(--l-gold);font-weight:400}
.l2-steps h3{font-size:18px;margin:4px 0 8px}.l2-steps p{color:var(--l-mute);line-height:1.7;margin:0;font-size:15px}
.l2-tw{overflow-x:auto;border:1px solid var(--l-line);border-radius:6px}
.l2-t{width:100%;border-collapse:collapse;font-size:15px}
.l2-t th{text-align:start;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--l-mute);font-weight:700;padding:14px 20px;background:var(--l-s)}
.l2-t td{padding:18px 20px;border-top:1px solid var(--l-line);color:var(--l-mute);line-height:1.55;vertical-align:top}.l2-t td:first-child{color:var(--l-ink);font-weight:600;white-space:nowrap}.l2-t td:nth-child(2){color:var(--l-gold);font-weight:700}
:root[lang=ar] .l2-t th{letter-spacing:0;text-transform:none}
.l2-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 72px}
.l2-list li{display:grid;grid-template-columns:22px 1fr;gap:16px}.l2-list svg{width:20px;height:20px;color:var(--l-gold);margin-top:3px}
.l2-list h3{font-size:17px;margin:0 0 6px}.l2-list p{color:var(--l-mute);margin:0;line-height:1.65;font-size:15px}
.land2 .faq details{border-top:1px solid var(--l-line);background:none;border-inline:0;border-bottom:0;border-radius:0}.land2 .faq details:last-child{border-bottom:1px solid var(--l-line)}
.land2 .faq summary{color:var(--l-ink)}.land2 .faq p{color:var(--l-mute)}
.l2-final{padding-block:96px 112px;text-align:start;border-top:1px solid var(--l-line)}
.l2-final h2{font-size:clamp(30px,4vw,46px);margin:0 0 14px}.l2-final p{color:var(--l-mute);font-size:17px;margin:0 0 30px}
.land2 .pf{border-top:1px solid var(--l-line);background:var(--l-bg)}
@media(max-width:900px){.l2-hero{grid-template-columns:1fr;gap:44px;padding-block:56px 64px}.l2-cols{grid-template-columns:1fr;gap:34px}.l2-cols article,.l2-cols article+article{padding-inline:0;border-inline-start:0}.l2-steps,.l2-list{grid-template-columns:1fr;gap:30px}.l2-sec{padding-block:60px}.jr em{display:none}.jr li{grid-template-columns:28px 1fr}}
@media(max-width:560px){.pw{padding-inline:20px}.l2-fig{padding:20px 18px 16px}.l2-lead{font-size:16.5px}}
.pub.auth .jr-c::before{opacity:.4}

/* ===== Auth screens + brand, aligned with Landing v2 (flat surfaces, one gold, no glow) ===== */
.land2,.pub.auth,.pub.legal{--l-gold:#c9a24a;--l-bg:#0b0b0c;--l-s:#121214;--l-line:rgba(255,255,255,.09);--l-ink:#ecebe6;--l-mute:#9a9892}
:root[data-theme=light] .pub.auth,:root[data-theme=light] .pub.legal{--l-bg:#faf9f6;--l-s:#f1efe9;--l-line:rgba(0,0,0,.1);--l-ink:#17160f;--l-mute:#6b6a63}
.pub.auth,.pub.legal{background:var(--l-bg)!important;color:var(--l-ink)}
.pub.auth .pbg,.pub.legal .pbg,.land2 .pbg{display:none}
.pub.auth .ph,.pub.legal .ph{background:transparent;border-bottom:1px solid var(--l-line)}
.pub .brand .logo,.pub .brand svg,.pub .logo{box-shadow:none!important;filter:none!important}
.pub.auth .auth-card{background:var(--l-s);border:1px solid var(--l-line);border-radius:6px;box-shadow:none}
.pub.auth .auth-card h1,.pub.auth .as-in h2{font-family:"Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.01em}
:root[lang=ar] .pub.auth .auth-card h1,:root[lang=ar] .pub.auth .as-in h2{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;font-weight:600}
.pub.auth .btn.pri,.pub.legal .btn.pri{background:var(--l-gold);color:#14110a;border:1px solid var(--l-gold);box-shadow:none;font-weight:700}
.pub.auth .btn.pri:hover{background:#d6b25c;transform:none}
.pub.auth .as-in p{color:var(--l-mute)}
.pub.auth .jr-c{margin:22px 0 28px}
.pub.auth .jr-c li{grid-template-columns:28px 1fr;padding-block:9px}.pub.auth .jr-c b{font-weight:600;color:var(--l-ink)}
.pub.auth .ins{background:none;border:0;border-top:1px solid var(--l-line);border-radius:0;box-shadow:none;padding:18px 0 0}
.pub.auth .ins figcaption{color:var(--l-gold)}
.pub.auth a,.pub.auth .link{color:var(--l-gold)}
.faq summary::after,.land2 .faq summary::after{color:var(--l-gold)}
.l2-hero h1{max-width:17ch}
.pub .pbrand .mark{filter:none!important}.land2 .pbrand .bn small{color:var(--l-mute)}

.pbrand .bn .bt{display:flex;align-items:center;gap:0}

/* ===== Landing v3 (SaaS) =====
   One gold (#c9a24a). Light follows the pointer (hero, cards, buttons); the product window tilts a few degrees.
   Everything animated is decorative and switched off for prefers-reduced-motion and on touch screens. */
.land3{--g:#c9a24a;--g2:#c9a24a;--bg:#07080b;--s1:rgba(255,255,255,.035);--s2:rgba(255,255,255,.06);--ln:rgba(255,255,255,.09);--ink:#f2f0ea;--mu:#a3a099;background:var(--bg)!important;color:var(--ink);overflow-x:clip}
:root[data-theme=light] .land3{--bg:#faf9f6;--s1:rgba(0,0,0,.03);--s2:rgba(0,0,0,.05);--ln:rgba(0,0,0,.1);--ink:#16150f;--mu:#6b6a63;--g:#b98a1c;--g2:#9a7012}
.land3 .pw{max-width:1180px;margin-inline:auto;padding-inline:24px}
.land3 .ph{background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.land3 .ph.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);border-color:var(--ln);backdrop-filter:blur(14px) saturate(1.4)}
.land3 .pnav button{color:var(--mu)}.land3 .pnav button:hover{color:var(--ink)}

/* buttons: glow follows the pointer */
.l3-btn{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding-inline:20px;border-radius:12px;border:1px solid var(--ln);background:var(--s1);color:var(--ink);font:700 14px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .3s,background .2s}
.l3-btn.lg{height:54px;padding-inline:28px;font-size:15.5px;border-radius:14px}.l3-btn.sm{height:38px;padding-inline:16px;font-size:13px;border-radius:10px}
.l3-btn svg{width:18px;height:18px;flex:none;transition:transform .2s}.l3-btn:hover svg{transform:translateX(3px)}
:root[lang=ar] .l3-btn svg{transform:scaleX(-1)}:root[lang=ar] .l3-btn:hover svg{transform:scaleX(-1) translateX(3px)}
.l3-btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;background:radial-gradient(120px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 70%)}
.l3-btn:hover::before{opacity:1}
.l3-btn.pri{border-color:rgba(255,255,255,.22);background:var(--g);color:#1a1204;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.45) inset,0 10px 34px -6px rgba(201,162,74,.45)}
.l3-btn.pri:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.5) inset,0 14px 48px -4px rgba(201,162,74,.7)}
.l3-btn.ghost:hover{border-color:color-mix(in srgb,var(--g) 55%,transparent);background:var(--s2)}
.l3-btn.ghost::before{background:radial-gradient(140px circle at var(--mx) var(--my),color-mix(in srgb,var(--g) 22%,transparent),transparent 70%)}
.l3-btn:focus-visible{outline:2px solid var(--g);outline-offset:3px}

/* hero */
.l3-hero{--mx:50%;--my:22%;position:relative;overflow:hidden;padding-top:44px;isolation:isolate}
.l3-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(640px circle at var(--mx) var(--my),color-mix(in srgb,var(--g) 13%,transparent),transparent 62%)}
.l3-aurora{position:absolute;z-index:-2;inset-inline:0;top:-260px;height:620px;pointer-events:none;background:radial-gradient(520px 300px at 50% 40%,color-mix(in srgb,var(--g) 30%,transparent),transparent 70%),radial-gradient(380px 240px at 22% 60%,rgba(255,255,255,.05),transparent 70%);filter:blur(30px);animation:l3d 18s ease-in-out infinite alternate}
@keyframes l3d{from{transform:translateX(-3%) scale(1)}to{transform:translateX(3%) scale(1.07)}}
.l3-grid{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:64px 64px;opacity:.5;-webkit-mask:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 75%);mask:radial-gradient(ellipse 70% 55% at 50% 0%,#000,transparent 75%)}
.l3-hin{text-align:center;display:flex;flex-direction:column;align-items:center}
.l3-pill{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:7px 15px 7px 11px;border:1px solid var(--ln);border-radius:999px;background:var(--s1);backdrop-filter:blur(8px);font-size:13px;font-weight:600;color:var(--mu)}
.l3-pill i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 60%,transparent);animation:l3p 2s infinite}
@keyframes l3p{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.l3-hero h1{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:clamp(38px,6vw,72px);line-height:1.04;letter-spacing:-.045em;color:var(--ink);text-wrap:balance;max-width:20ch}
.l3-hero h1 span{display:block}
.l3-hero h1 span:first-child{background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 58%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.l3-hero h1 em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.02em;color:var(--g)}
:root[lang=ar] .l3-hero h1,:root[lang=ar] .land3 h2{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;letter-spacing:0;line-height:1.28;font-weight:700}
:root[lang=ar] .l3-hero h1 em{font-style:normal}
.l3-lead{max-width:62ch;margin:26px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:var(--mu);text-wrap:pretty}
.l3-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.l3-trust{list-style:none;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0;font-size:13px;color:var(--mu)}
.l3-trust li{display:inline-flex;align-items:center;gap:7px}.l3-trust svg{width:15px;height:15px;color:var(--g)}
.l3-stage{width:100%;max-width:1020px;margin-top:52px;perspective:1600px;position:relative}
.l3-stage::after{content:"";position:absolute;inset-inline:0;bottom:0;height:38%;background:linear-gradient(transparent,var(--bg));pointer-events:none}

/* product window */
.l3-win{--rx:0deg;--ry:0deg;position:relative;text-align:start;border:1px solid var(--ln);border-radius:18px 18px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#1a1b20),var(--bg));box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset,0 -1px 90px -30px color-mix(in srgb,var(--g) 40%,transparent);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.l3-wbar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--ln)}
.l3-wbar i{width:10px;height:10px;border-radius:50%;background:var(--s2);border:1px solid var(--ln)}
.l3-wbar span{margin-inline-start:12px;font-size:12px;font-weight:700;color:var(--mu)}.l3-wbar em{margin-inline-start:auto;font-style:normal;font-size:11px;color:var(--mu);opacity:.8}
.l3-wbody{display:grid;grid-template-columns:62px minmax(0,1fr);min-height:380px}
.l3-wbody aside{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;border-inline-end:1px solid var(--ln)}
.l3-wbody aside .mark{width:28px;height:28px;margin-bottom:10px}
.l3-wbody aside span{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--mu)}.l3-wbody aside span svg{width:17px;height:17px}
.l3-wbody aside span.on{background:color-mix(in srgb,var(--g) 14%,transparent);color:var(--g)}
.l3-wmain{padding:18px;display:grid;gap:14px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.l3-kpis{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px}
.l3-kpis>div{padding:14px 16px;border:1px solid var(--ln);border-radius:12px;background:var(--s1)}
.l3-kpis small,.l3-ch small{display:block;font-size:11.5px;color:var(--mu);font-weight:600}
.l3-kpis b,.l3-kpis strong{display:block;margin-top:6px;font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.l3-kpis .big strong{font-size:30px;color:var(--g)}.l3-kpis .up{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;color:#37d391}
.l3-chart,.l3-feed{border:1px solid var(--ln);border-radius:12px;background:var(--s1);padding:14px 16px}
.l3-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.l3-ch b{font-size:13px}
.l3-chart svg{width:100%;height:150px;display:block}
.l3-chart .l{fill:none;stroke:var(--g);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:l3draw 2.2s .5s cubic-bezier(.4,0,.2,1) forwards;vector-effect:non-scaling-stroke}
.l3-chart .a{opacity:0;animation:l3fade 1.2s 1.6s forwards}.l3-chart .d{fill:var(--g);opacity:0;animation:l3fade .4s 2.5s forwards}
@keyframes l3draw{to{stroke-dashoffset:0}}@keyframes l3fade{to{opacity:1}}
.l3-feed ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.l3-feed li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--ln);border-radius:10px;background:var(--s1);font-size:12px}
.l3-feed li.new{animation:l3in .5s cubic-bezier(.2,.8,.2,1)}@keyframes l3in{from{opacity:0;transform:translateY(-10px)}}
.l3-feed .t{display:flex;flex-direction:column;min-width:0;flex:1}.l3-feed .t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.l3-feed .t small{color:var(--mu);font-size:11px}
.l3-feed .v{font-weight:800;color:#37d391;font-variant-numeric:tabular-nums}
.l3-feed .chip{font-size:10.5px;padding:3px 8px;border-radius:999px;font-weight:700}
.l3-feed .chip.delivered{background:rgba(55,211,145,.14);color:#37d391}.l3-feed .chip.confirmed{background:color-mix(in srgb,var(--g) 15%,transparent);color:var(--g)}.l3-feed .chip.shipped{background:rgba(76,195,255,.14);color:#4cc3ff}
.l3-feed .pulse{width:7px;height:7px;border-radius:50%;background:#37d391;animation:l3p 1.6s infinite}
.l3-float{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:11px 15px 11px 11px;border:1px solid var(--ln);border-radius:14px;background:color-mix(in srgb,var(--bg) 72%,#202128);backdrop-filter:blur(12px);box-shadow:0 18px 50px -12px rgba(0,0,0,.7);transform:translateZ(60px);animation:l3f 6s ease-in-out infinite}
.l3-float.f1{top:-30px;inset-inline-start:-26px}.l3-float.f2{top:-30px;inset-inline-end:-26px;animation-delay:-3s}
@keyframes l3f{50%{transform:translateZ(60px) translateY(-9px)}}
.l3-float .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--g) 16%,transparent);color:var(--g)}.l3-float .ic.good{background:rgba(55,211,145,.15);color:#37d391}.l3-float .ic svg{width:17px;height:17px}
.l3-float small{display:block;font-size:11px;color:var(--mu)}.l3-float b{font-size:13.5px}

/* logos marquee */
.l3-logos{padding-block:46px 8px;text-align:center}.l3-logos p{margin:0 0 22px;font-size:13px;color:var(--mu);font-weight:600}
.l3-mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.l3-mt{display:flex;gap:56px;width:max-content;animation:l3m 34s linear infinite;padding-inline-end:56px}
.l3-mq:hover .l3-mt{animation-play-state:paused}
@keyframes l3m{to{transform:translateX(-50%)}}:root[lang=ar] .l3-mt{animation-name:l3mr}@keyframes l3mr{to{transform:translateX(50%)}}
.l3-mt .lg{display:inline-flex;align-items:center;gap:11px;opacity:.55;filter:grayscale(1);transition:opacity .2s,filter .2s}.l3-mt .lg:hover{opacity:1;filter:none}
.l3-mt .lg img{border-radius:7px}.l3-mt .lg b{font-size:16px;font-weight:700;letter-spacing:-.01em}

/* sections */
.l3-sec{padding-block:104px 0}
.l3-h{max-width:760px;margin:0 auto 52px;text-align:center}
.l3-eb{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
.l3-eb::before,.l3-eb::after{content:"";width:22px;height:1px;background:color-mix(in srgb,var(--g) 55%,transparent)}
:root[lang=ar] .l3-eb{letter-spacing:0;text-transform:none;font-size:13.5px}
.land3 h2{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.l3-sub{margin:18px auto 0;max-width:60ch;font-size:17px;line-height:1.7;color:var(--mu)}
.land3 h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* shared card surface with pointer-follow border */
.l3-card,.l3-cmp article,.l3-steps li,.l3-pl,.l3-final{--mx:50%;--my:50%;position:relative;border:1px solid var(--ln);border-radius:20px;background:linear-gradient(180deg,var(--s2),var(--s1));overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.l3-card::before,.l3-cmp article::before,.l3-steps li::before,.l3-pl::before,.l3-final::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx) var(--my),color-mix(in srgb,var(--g) 11%,transparent),transparent 60%)}
.l3-card::after,.l3-cmp article::after,.l3-steps li::after,.l3-pl::after,.l3-final::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--g) 90%,transparent),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.l3-spot:hover::before,.l3-spot:hover::after{opacity:1}
.l3-card:hover,.l3-pl:hover{transform:translateY(-3px)}

/* compare */
.l3-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:980px;margin-inline:auto}
.l3-cmp article{padding:34px}.l3-cmp h3{margin-bottom:22px;font-size:15px;letter-spacing:.02em;color:var(--mu);text-transform:uppercase}
.l3-cmp .pos h3{color:var(--g)}
.l3-cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}.l3-cmp li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.l3-cmp li svg{flex:none;width:20px;height:20px;margin-top:1px;padding:3px;border-radius:50%}
.l3-cmp .neg li{color:var(--mu)}.l3-cmp .neg li svg{background:rgba(255,90,118,.12);color:#ff6b86}
.l3-cmp .pos{border-color:color-mix(in srgb,var(--g) 38%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--g) 9%,transparent),var(--s1));box-shadow:0 30px 80px -40px color-mix(in srgb,var(--g) 60%,transparent)}
.l3-cmp .pos li svg{background:color-mix(in srgb,var(--g) 18%,transparent);color:var(--g)}

/* bento */
.l3-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.l3-card{padding:30px;display:flex;flex-direction:column;gap:26px;grid-column:span 3}
.l3-card:nth-child(1){grid-column:span 4}.l3-card:nth-child(2){grid-column:span 2}
.l3-card .tx p{margin:10px 0 0;font-size:15px;line-height:1.65;color:var(--mu)}
.l3-card .vz{margin-top:auto;position:relative;z-index:1}
.vz-steps{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.vz-steps li{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--s1);font-size:13.5px;font-weight:600}
.vz-steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--s2)}.vz-steps b svg{width:13px;height:13px}
.vz-steps li.ok{border-color:color-mix(in srgb,#37d391 45%,transparent);color:#37d391;background:rgba(55,211,145,.08)}.vz-steps li.ok b{background:#37d391;color:#06140d}
.vz-flow{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700}
.vz-flow span{padding:9px 12px;border:1px solid var(--ln);border-radius:10px;background:var(--s1);white-space:nowrap}.vz-flow .hub{border-color:color-mix(in srgb,var(--g) 50%,transparent);color:var(--g);background:color-mix(in srgb,var(--g) 9%,transparent)}
.vz-flow i{flex:1;min-width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);background-size:200% 100%;animation:l3s 2.2s linear infinite}
@keyframes l3s{to{background-position:-200% 0}}
.vz-tbl{border:1px solid var(--ln);border-radius:12px;overflow:hidden;font-size:12.5px}
.vz-tbl>div{display:grid;grid-template-columns:1.6fr .7fr .8fr .8fr;gap:8px;padding:10px 14px;border-top:1px solid var(--ln)}.vz-tbl .hd{border-top:0;background:var(--s1);color:var(--mu);font-weight:700;font-size:11.5px}
.vz-tbl .g{color:var(--g);font-weight:800}.vz-tbl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz-eq{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.vz-eq>div{padding:12px 16px;border:1px solid var(--ln);border-radius:12px;background:var(--s1)}.vz-eq small{display:block;font-size:11px;color:var(--mu);font-weight:600}.vz-eq b{font-size:20px;font-weight:800;letter-spacing:-.03em}
.vz-eq i{font-style:normal;font-size:20px;color:var(--mu)}.vz-eq .res{border-color:color-mix(in srgb,var(--g) 45%,transparent);background:color-mix(in srgb,var(--g) 10%,transparent)}.vz-eq .res b{color:var(--g)}
.vz-fees{list-style:none;margin:0;padding:0;display:grid;gap:8px}.vz-fees li{display:flex;justify-content:space-between;padding:11px 14px;border:1px solid var(--ln);border-radius:10px;background:var(--s1);font-size:13.5px}.vz-fees b{font-weight:800}
.vz-sec{display:flex;align-items:center;gap:16px}.vz-sec .sh{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--g) 14%,transparent);color:var(--g)}.vz-sec .sh svg{width:22px;height:22px}
.vz-sec .code{display:flex;gap:6px;align-items:center}.vz-sec .code b{width:30px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--ln);background:var(--s1);font-size:16px;font-variant-numeric:tabular-nums}.vz-sec .code i{width:8px}

/* steps */
.l3-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.l3-steps li{padding:34px 30px 32px}.l3-steps .n{display:block;margin-bottom:46px;font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:64px;line-height:1;color:color-mix(in srgb,var(--g) 85%,transparent)}
:root[lang=ar] .l3-steps .n{font-style:normal;font-family:inherit;font-weight:800}
.l3-steps p{margin:12px 0 0;font-size:15px;line-height:1.65;color:var(--mu)}

/* platforms + facts */
.l3-plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.l3-pl{display:flex;align-items:center;gap:15px;padding:20px 22px;border-radius:16px}.l3-pl img{border-radius:10px;flex:none}
.l3-pl b{display:block;font-size:16px;letter-spacing:-.01em}.l3-pl small{color:var(--mu);font-size:12.5px}
.l3-pl .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--g) 14%,transparent);color:var(--g);flex:none}.l3-pl .ic svg{width:19px;height:19px}
.l3-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:56px 0 0;border-block:1px solid var(--ln)}
.l3-facts>div{padding:34px 24px;text-align:center}.l3-facts>div+div{border-inline-start:1px solid var(--ln)}
.l3-facts dt{font-size:clamp(34px,4.5vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--g);font-variant-numeric:tabular-nums}.l3-facts dd{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--mu)}

/* faq */
.faq3{max-width:820px;margin-inline:auto}.faq3 .l3-h{margin-bottom:34px}
.faq3 details{border-bottom:1px solid var(--ln)}.faq3 summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;font-size:17px;font-weight:700;letter-spacing:-.01em}
.faq3 summary::-webkit-details-marker{display:none}.faq3 summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ln);color:var(--g);font-size:19px;line-height:1;transition:transform .25s,background .2s}
.faq3 details[open] summary::after{transform:rotate(45deg);background:color-mix(in srgb,var(--g) 14%,transparent)}.faq3 summary:hover{color:var(--g)}
.faq3 details p{margin:0 0 24px;padding-inline:4px 52px;font-size:15.5px;line-height:1.75;color:var(--mu)}
.faq3 summary:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:8px}

/* final cta */
.l3-final{margin-top:104px;padding:84px 28px;text-align:center;border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 8%,transparent),var(--s1));border-color:color-mix(in srgb,var(--g) 28%,transparent)}
.l3-final .l3-aurora{top:-380px;height:560px;opacity:.7}
.l3-final h2{position:relative;max-width:18ch;margin-inline:auto}.l3-final p{position:relative;margin:18px 0 0;font-size:17px;color:var(--mu)}.l3-final .l3-cta{position:relative}
.land3 .pf{margin-top:104px}

@media(max-width:980px){
  .l3-wmain{grid-template-columns:1fr}.l3-kpis{grid-template-columns:1fr 1fr}.l3-kpis .big{grid-column:1/-1}.l3-float{display:none}
  .l3-bento{grid-template-columns:1fr}.l3-card,.l3-card:nth-child(n){grid-column:auto}
  .l3-cmp,.l3-steps{grid-template-columns:1fr}.l3-facts{grid-template-columns:1fr 1fr}.l3-facts>div:nth-child(3){border-inline-start:0}.l3-facts>div:nth-child(n+3){border-top:1px solid var(--ln)}
}
@media(max-width:640px){
  .land3 .pw{padding-inline:18px}.l3-hero{padding-top:36px}.l3-sec{padding-block:72px 0}.l3-h{margin-bottom:36px}
  .l3-wbody{grid-template-columns:1fr}.l3-wbody aside{display:none}.l3-stage{margin-top:44px}.l3-win{border-radius:14px 14px 0 0}
  .l3-cta .l3-btn.lg{width:100%}.l3-card,.l3-cmp article{padding:24px}.l3-final{padding:56px 20px;margin-top:72px}.faq3 details p{padding-inline-end:4px}
  .l3-hero h1{max-width:none}
  .l3-kpis{grid-template-columns:repeat(3,1fr);gap:8px}.l3-kpis>div{padding:12px}.l3-kpis b{font-size:17px}.l3-kpis small{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .l3-aurora,.l3-mt,.l3-float,.vz-flow i,.l3-pill i,.l3-feed .pulse{animation:none!important}
  .l3-chart .l{animation:none;stroke-dashoffset:0}.l3-chart .a,.l3-chart .d{animation:none;opacity:1}
  .l3-win{transition:none;transform:none}.l3-btn,.l3-card{transition:none}
}

/* ---- v3.1: spend manager in the dashboard, soft cloud light, markets, sourcing, imagery ---- */
.l3-wbody{position:relative;overflow:hidden;border-radius:0}
.l3-wbody aside,.l3-wmain{position:relative;z-index:1}
.l3-cloud{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.l3-cloud i{position:absolute;left:0;top:0;border-radius:50%;filter:blur(48px);mix-blend-mode:screen;will-change:transform}
.l3-cloud i:nth-child(1){width:460px;height:340px;background:radial-gradient(closest-side,rgba(201,162,74,.5),rgba(201,162,74,.12) 60%,transparent)}
.l3-cloud i:nth-child(2){width:300px;height:260px;background:radial-gradient(closest-side,rgba(255,238,200,.34),transparent)}
:root[data-theme=light] .l3-cloud i{mix-blend-mode:multiply;opacity:.6}
.l3-kpis>div,.l3-spend,.l3-feed{backdrop-filter:blur(10px)}
.l3-wmain{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
.l3-kpis .big{position:relative;overflow:hidden}
.l3-kpis .spk{position:absolute;inset-inline-end:10px;bottom:10px;width:46%;height:34px;opacity:.9}
.l3-kpis .spk path{fill:none;stroke:var(--g);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.l3-spend{border:1px solid var(--ln);border-radius:12px;background:var(--s1);padding:14px 16px}
.l3-spend .tabs{display:inline-flex;padding:3px;border:1px solid var(--ln);border-radius:9px;background:var(--s1);font-size:11px;font-weight:700}
.l3-spend .tabs span{padding:4px 10px;border-radius:6px;color:var(--mu)}.l3-spend .tabs .on{background:color-mix(in srgb,var(--g) 16%,transparent);color:var(--g)}
.l3-st{display:grid;gap:6px;font-size:12.5px}
.l3-st>div{display:grid;grid-template-columns:1.5fr .9fr .7fr .9fr .8fr;gap:8px;align-items:center}
.l3-st .hd{color:var(--mu);font-size:11px;font-weight:700;padding:0 8px 2px}
.l3-st .r{padding:6px 8px;border:1px solid var(--ln);border-radius:9px;background:color-mix(in srgb,var(--s1) 70%,transparent)}
.l3-st .p{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.l3-st .m{color:var(--mu);font-size:11.5px}
.l3-st .c{display:inline-block;padding:4px 8px;border:1px solid var(--ln);border-radius:7px;background:var(--s2);font-weight:700;justify-self:start}
.l3-st .c.edit{border-color:color-mix(in srgb,var(--g) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 14%,transparent);position:relative}
.l3-st .c.edit::after{content:"";display:inline-block;width:1.5px;height:12px;margin-inline-start:2px;vertical-align:-2px;background:var(--g);animation:l3caret 1s steps(2) infinite}
@keyframes l3caret{50%{opacity:0}}
.l3-st .g{font-weight:800;color:var(--g)}
.l3-st .tick{animation:l3tick .6s ease}@keyframes l3tick{0%{color:#fff;text-shadow:0 0 14px var(--g)}}
.l3-st .tt{padding:8px 8px 2px;border-top:1px dashed var(--ln);margin-top:2px;font-weight:800}.l3-st .tt .g{font-size:14px}
.l3-sv{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:11.5px;color:var(--mu)}
.l3-sv b{padding:7px 14px;border-radius:8px;background:linear-gradient(180deg,#c9a24a,var(--g));color:#1a1204;font-size:12px}
.l3-win .l3-feed li:nth-child(3){opacity:.6}

/* fees */
.vz-fees li{align-items:center;gap:10px}.vz-fees em{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--ln);color:var(--mu)}
.vz-fees li.best{justify-content:flex-start;border-color:color-mix(in srgb,var(--g) 50%,transparent);background:color-mix(in srgb,var(--g) 10%,transparent);color:var(--g);font-weight:800}
.vz-fees li.best svg{width:16px;height:16px;flex:none}

/* markets */
.l3-mk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.l3-mc{min-height:500px;display:flex;align-items:flex-end;padding:0;background:linear-gradient(160deg,#10131a,#0a0b0e)}
.l3-mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .4s}.l3-mc:hover img{transform:scale(1.045)}
.l3-mc::before{opacity:1!important;z-index:1;background:linear-gradient(180deg,transparent 12%,rgba(7,8,11,.62) 48%,rgba(7,8,11,.97) 86%)!important}
.l3-mc .in{position:relative;z-index:2;padding:34px}.l3-mc h3{font-size:30px;letter-spacing:-.03em;margin:12px 0 10px}
.l3-mc p{margin:0 0 18px;max-width:42ch;font-size:15.5px;line-height:1.6;color:rgba(242,240,234,.78)}
.l3-mc .cur{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--g) 55%,transparent);background:rgba(7,8,11,.5);backdrop-filter:blur(6px);color:var(--g);font-size:12.5px;font-weight:800;letter-spacing:.08em}
.l3-mc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.l3-mc li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(242,240,234,.88)}.l3-mc li svg{width:15px;height:15px;color:var(--g);flex:none}
.land3 img.miss{display:none}

/* sourcing */
.l3-so{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.l3-sofig{position:relative;margin:0;aspect-ratio:4/3.3;border-radius:24px;overflow:hidden;border:1px solid var(--ln);background:linear-gradient(160deg,#171a22,#0c0d11);box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.l3-sofig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.l3-sofig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,8,11,.65));pointer-events:none}
.l3-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--ln);border-radius:12px;background:color-mix(in srgb,var(--bg) 70%,#22232a);backdrop-filter:blur(12px);font-size:13px;font-weight:700;box-shadow:0 14px 40px -12px rgba(0,0,0,.7);animation:l3f2 6s ease-in-out infinite}
.l3-chip svg{width:16px;height:16px;padding:3px;border-radius:50%;background:#37d391;color:#06140d;flex:none}
.l3-chip.c1{top:9%;inset-inline-start:7%}.l3-chip.c2{top:38%;inset-inline-end:6%;animation-delay:-2s}.l3-chip.c3{bottom:10%;inset-inline-start:12%;animation-delay:-4s}
@keyframes l3f2{50%{transform:translateY(-8px)}}
.l3-eb.l::before{display:none}.l3-sub.l{margin-inline:0}.l3-so h2{text-align:start}
.l3-sol{list-style:none;margin:28px 0 30px;padding:0;display:grid;gap:14px}.l3-sol li{display:flex;align-items:center;gap:14px;font-size:16px;line-height:1.5}
.l3-sol b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;border:1px solid color-mix(in srgb,var(--g) 55%,transparent);color:var(--g)}

/* final cta image */
.l3-final .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;pointer-events:none;-webkit-mask:radial-gradient(ellipse 80% 90% at 50% 50%,#000,transparent);mask:radial-gradient(ellipse 80% 90% at 50% 50%,#000,transparent)}

@media(max-width:980px){.l3-wmain{grid-template-columns:1fr}.l3-mk,.l3-so{grid-template-columns:1fr}.l3-so{gap:36px}.l3-mc{min-height:380px}}
@media(max-width:640px){.l3-st>div{grid-template-columns:1.3fr .8fr .6fr .8fr .7fr;gap:5px}.l3-st{font-size:11px}.l3-st .m{display:none}.l3-st>div{grid-template-columns:1.6fr .6fr .9fr .8fr}.l3-st .hd span:nth-child(2){display:none}.l3-mc .in{padding:24px}.l3-mc h3{font-size:25px}.l3-chip{font-size:12px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.l3-chip,.l3-st .c.edit::after{animation:none!important}.l3-mc img{transition:none}}

.l3-mc:nth-child(1) img{object-position:76% 50%}.l3-mc:nth-child(2) img{object-position:32% 50%}
.l3-mc{--mx:50%;--my:50%;position:relative;overflow:hidden;border:1px solid var(--ln);border-radius:22px;isolation:isolate}
.l3-mc::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--g) 90%,transparent),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.l3-mc:hover::after{opacity:1}
.l3-mc{min-height:520px}
.l3-mc .in{margin:14px;padding:26px 28px;border-radius:16px;background:rgba(8,9,12,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.09);width:calc(100% - 28px)}
.l3-mc h3{margin:10px 0 8px}.l3-mc p{margin-bottom:14px}
@media(max-width:640px){.l3-mc{min-height:480px}.l3-mc .in{padding:20px}}
.l3-mc{min-height:620px}.l3-mc img{object-position:76% 30%}.l3-mc:nth-child(2) img{object-position:32% 30%}
@media(max-width:640px){.l3-mc{min-height:560px}}

/* v3.2: hero backdrop photo, fulfilment band, morning image */
.l3-bgp{position:absolute;inset-inline:0;top:0;width:100%;height:760px;object-fit:cover;object-position:50% 40%;z-index:-3;opacity:.26;pointer-events:none;-webkit-mask:linear-gradient(180deg,#000 10%,transparent 92%);mask:linear-gradient(180deg,#000 10%,transparent 92%)}
.l3-dl{--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;min-height:460px;display:flex;align-items:center;border:1px solid var(--ln);border-radius:26px;background:linear-gradient(160deg,#10131a,#0a0b0e)}
.l3-dl>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.l3-dl::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,8,11,.94) 8%,rgba(7,8,11,.66) 46%,rgba(7,8,11,.06) 85%)}
:root[lang=ar] .l3-dl::before{background:linear-gradient(270deg,rgba(7,8,11,.94) 8%,rgba(7,8,11,.66) 46%,rgba(7,8,11,.06) 85%)}
:root[lang=ar] .l3-dl>img{transform:scaleX(-1)}
.l3-dl .in{padding:56px;max-width:600px}.l3-dl h2{text-align:start}
.l3-tl{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.l3-tl li{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--ln);border-radius:999px;background:rgba(8,9,12,.6);backdrop-filter:blur(10px);font-size:13.5px;font-weight:700}
.l3-tl i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;border:1px solid color-mix(in srgb,var(--g) 55%,transparent);color:var(--g)}
.l3-tl li:last-child{border-color:color-mix(in srgb,#37d391 45%,transparent);color:#37d391}.l3-tl li:last-child i{background:#37d391;color:#06140d;border-color:transparent}.l3-tl i svg{width:12px;height:12px}
.l3-steps li{isolation:isolate}
@media(max-width:640px){.l3-dl .in{padding:30px 22px}.l3-dl{min-height:520px;align-items:flex-end}.l3-dl::before{background:linear-gradient(180deg,rgba(7,8,11,.2),rgba(7,8,11,.92) 60%)}}

/* ===== Landing v4: night photo + real product screens. Log in and Sign up are always in the header and the hero. ===== */
.p4{--panel4:#0d1322;--ln4:rgba(255,255,255,.1)}
.p4 .p4-login{white-space:nowrap}
.p4 .pact .l3-btn.sm{height:40px;font-weight:700}
.p4-hero{position:relative;margin-top:-72px;padding:150px 0 30px;overflow:clip;text-align:center}
.p4-aur{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(60% 46% at 50% 0%,rgba(40,58,110,.5),transparent 70%)}
.p4-aur::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%);mask:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%)}
.p4-aur i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:p4drift 16s ease-in-out infinite alternate}
.p4-aur i:nth-child(1){width:720px;height:420px;left:50%;top:44%;margin-left:-360px;background:radial-gradient(closest-side,rgba(201,162,74,.55),transparent)}
.p4-aur i:nth-child(2){width:520px;height:380px;left:8%;top:52%;background:radial-gradient(closest-side,rgba(233,149,47,.34),transparent);animation-duration:21s}
.p4-aur i:nth-child(3){width:560px;height:400px;right:6%;top:36%;background:radial-gradient(closest-side,rgba(90,120,255,.3),transparent);animation-duration:25s;animation-direction:alternate-reverse}
@keyframes p4drift{from{transform:translate3d(-28px,-12px,0) scale(1)}to{transform:translate3d(30px,18px,0) scale(1.12)}}
.p4-htext{max-width:900px}
.p4-kick{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:7px 14px;border-radius:999px;border:1px solid var(--ln4);background:rgba(255,255,255,.04);font-size:13.5px;font-weight:600;color:#e6e2d8}
.p4-kick i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 0 4px rgba(201,162,74,.18)}
.p4 h1{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;font-size:clamp(34px,5.4vw,68px);line-height:1.04;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
:root[lang=ar] .p4 h1,:root[lang=ar] .p4 h2,:root[lang=ar] .p4 h3{font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif;letter-spacing:0;line-height:1.3}
.p4-lead{margin:22px auto 0;font-size:18px;line-height:1.65;color:#c9c6bd;max-width:62ch}
.p4-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}
.p4-final .p4-cta{justify-content:flex-start}
.p4-cta .l3-btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24)}
.p4-new{margin:14px 0 0;font-size:13.5px;color:var(--mu)}
.p4-stage{position:relative;max-width:1180px;margin-top:54px;perspective:1800px}
.p4-frame{--tilt:0deg;--lift:0px;position:relative;border-radius:18px;overflow:hidden;background:#0b1220;transform:translateY(var(--lift)) rotateX(var(--tilt));transform-origin:50% 0;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 7px rgba(255,255,255,.035),0 60px 120px -40px rgba(0,0,0,.95),0 0 140px -30px rgba(201,162,74,.4)}
.p4-fbar{display:flex;align-items:center;gap:8px;height:38px;padding-inline:16px;background:linear-gradient(180deg,#1b202b,#131721);border-bottom:1px solid var(--ln4)}
.p4-fbar i{width:10px;height:10px;border-radius:50%;background:#3b4150}
.p4-fbar span{margin-inline:auto;width:38%;height:22px;border-radius:7px;background:#0c1019;border:1px solid rgba(255,255,255,.07);font-size:11.5px;line-height:20px;color:#7e8798}
.p4-fscr{position:relative}.p4-fscr img{display:block;width:100%;height:auto}
.p4-cloud{--cx:60%;--cy:38%;position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.p4-cloud i{position:absolute;left:var(--cx);top:var(--cy);border-radius:50%;transform:translate(-50%,-50%);will-change:left,top}
.p4-cloud i:nth-child(1){width:46%;aspect-ratio:1.25;background:radial-gradient(closest-side,rgba(246,205,110,.40),rgba(201,162,74,.13) 55%,transparent);filter:blur(26px);opacity:.75;transition:opacity .5s}
.p4-cloud i:nth-child(2){width:16%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,240,205,.30),transparent);filter:blur(12px);opacity:.5;transition:opacity .5s}
.p4-cloud.on i:nth-child(1){opacity:1}.p4-cloud.on i:nth-child(2){opacity:.9}
.p4-phone{position:absolute;inset-inline-end:-26px;bottom:-34px;width:17.5%;min-width:96px;border-radius:26px;padding:6px;background:linear-gradient(160deg,#4a4e58,#17191e 40%,#0a0b0e);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 40px 70px -24px rgba(0,0,0,.95),0 0 60px -20px rgba(201,162,74,.35);animation:p4bob 7s ease-in-out infinite alternate}
.p4-phone>div{position:relative;border-radius:21px;overflow:hidden;aspect-ratio:390/760}
.p4-phone>div::before{content:"";position:absolute;top:6px;left:50%;width:30%;height:3.2%;transform:translateX(-50%);border-radius:10px;background:#000;z-index:1}
.p4-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@keyframes p4bob{from{transform:translateY(0)}to{transform:translateY(-12px)}}
.p4-chip{position:absolute;display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:15px;background:rgba(13,16,24,.9);border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 46px -18px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;text-align:start;animation:p4bob 6s ease-in-out infinite alternate}
.p4-chip small{display:block;color:var(--mu);font-size:11.5px}.p4-chip b{font-weight:700;white-space:nowrap}
.p4-chip .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--g) 16%,transparent);color:var(--g);flex:none}.p4-chip .ic svg{width:17px;height:17px}
.p4-chip .ic.good{background:rgba(52,211,153,.14);color:#34d399}
.p4-chip.c1{top:-22px;inset-inline-start:-34px}.p4-chip.c2{bottom:20%;inset-inline-start:-52px;animation-duration:8s;animation-direction:alternate-reverse}.p4-chip.c3{top:16%;inset-inline-end:-44px;animation-duration:9s}
.p4-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:64px;padding-block:0;font-size:13.5px;color:#c9c6bd}
.p4-trust li{display:flex;align-items:center;gap:7px}.p4-trust svg{width:16px;height:16px;color:var(--g);flex:none}.p4-trust .p4-dm{color:#8a877f}
.p4 img.miss{visibility:hidden}
/* first paint: the hero pieces rise once, in order */
.p4-hero .hv{opacity:0;transform:translateY(22px);transition:opacity .8s ease var(--d,0ms),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.p4-hero.go .hv{opacity:1;transform:none}
/* on scroll: what is below rises into place; the tour rows slide in from their own side */
.p4 .rv{transform:translateY(46px);transition:opacity .8s ease var(--d,0ms),transform .9s cubic-bezier(.16,.84,.24,1) var(--d,0ms)}
.p4 .rv.in{transform:none}
.p4 .rvx .tx,.p4 .rvx>figure{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.24,1)}
.p4 .rvx .tx{transform:translateX(-56px)}.p4 .rvx>figure{transform:translateX(72px) scale(.97);transition-delay:.12s}
.p4 .rvx.rev .tx{transform:translateX(56px)}.p4 .rvx.rev>figure{transform:translateX(-72px) scale(.97)}
[dir=rtl] .p4 .rvx .tx{transform:translateX(56px)}[dir=rtl] .p4 .rvx>figure{transform:translateX(-72px) scale(.97)}
[dir=rtl] .p4 .rvx.rev .tx{transform:translateX(-56px)}[dir=rtl] .p4 .rvx.rev>figure{transform:translateX(72px) scale(.97)}
.p4 .rvx.in .tx,.p4 .rvx.in>figure{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.p4-hero .hv,.p4 .rv,.p4 .rvx .tx,.p4 .rvx>figure{opacity:1!important;transform:none!important;transition:none!important}.p4-aur i,.p4-phone,.p4-chip{animation:none}.p4-cloud{display:none}}

.p4-sec{padding-block:96px 0}
.p4-band{margin-top:96px;padding-block:84px;background:linear-gradient(180deg,var(--panel4),#0a0e18);border-block:1px solid var(--ln4)}
.p4-h{max-width:720px;margin:0 0 40px}.p4-h h2{font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.03em}
.p4-h p{margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--mu)}
.p4 h3{font-size:20px;line-height:1.3}

.p4-svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.p4-card{border-radius:18px;overflow:hidden;background:var(--panel4);border:1px solid var(--ln4);display:flex;flex-direction:column}
.p4-pic{aspect-ratio:4/3;overflow:hidden;background:#0b1220}
.p4-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}

.p4-card.photo:hover .p4-pic img{transform:scale(1.04)}
.p4-ct{padding:20px 20px 24px}.p4-ct p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--mu)}

.p4-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:none}
.p4-steps li{position:relative}
.p4-spic{aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--ln4);background:#0b1220;margin-bottom:22px;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.p4-spic img{width:100%;height:100%;object-fit:cover;display:block}

.p4-spic.form{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,rgba(201,162,74,.16),transparent 60%),#0b1220}
.p4-form{width:62%;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:#111827;border:1px solid var(--ln4)}
.p4-form b{font-size:14px}.p4-form span{display:block;padding:7px 10px;border-radius:8px;border:1px solid var(--ln4);font-size:11.5px;color:var(--mu)}
.p4-form em{font-style:normal;text-align:center;padding:8px;border-radius:9px;font-size:12px;font-weight:800;color:#1a1204;background:var(--g)}
.p4-steps .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:800;font-size:14px;color:#1a1204;background:var(--g);margin-bottom:10px}
.p4-steps p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--mu)}
.p4-mid{margin-top:40px}

.p4-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:center}
.p4-row+.p4-row{margin-top:84px}
.p4-row.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.p4-row.rev .tx{order:2}
.p4-row .tx{min-width:0}.p4-row .tx h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.p4-row .tx>p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--mu)}
.p4-row ul,.p4-row ol{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px;font-size:15px;color:#d5d3cc}
.p4-row li{display:flex;gap:10px;align-items:flex-start}.p4-row li svg{width:18px;height:18px;color:var(--g);flex:none;margin-top:3px}
.p4-row ol b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;color:#1a1204;background:var(--g)}
.p4-row .l3-btn{margin-top:26px}
.p4-win{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--ln4);background:#0b1220;box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 70px -30px rgba(201,162,74,.22)}
.p4-wb{display:flex;gap:6px;padding:10px 12px;background:#141821;border-bottom:1px solid var(--ln4)}.p4-wb i{width:9px;height:9px;border-radius:50%;background:#3a3f4b}
.p4-win img{display:block;width:100%;height:auto}
.p4-photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--ln4)}.p4-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

.p4-mk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.p4-mc{position:relative;border-radius:20px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;border:1px solid var(--ln4)}
.p4-mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p4-mc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,8,11,.9))}
.p4-mc .in{position:relative;z-index:1;padding:26px}.p4-mc .cur{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#1a1204;background:var(--g);margin-bottom:10px}
.p4-mc p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#d5d3cc;max-width:46ch}

.p4 .l3-pl{background:var(--panel4);border:1px solid var(--ln4)}
.p4 .faq3 .p4-h{margin-bottom:26px}
.p4-final{position:relative;margin-block:96px 80px;border-radius:24px;overflow:hidden;border:1px solid var(--ln4)}
.p4-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p4-final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,11,.88),rgba(7,8,11,.35))}
[dir=rtl] .p4-final::after{background:linear-gradient(270deg,rgba(7,8,11,.88),rgba(7,8,11,.35))}
.p4-final .in{position:relative;z-index:1;padding:64px 48px;max-width:640px}
.p4-final h2{font-size:clamp(28px,3.6vw,44px);line-height:1.12}.p4-final p{margin:14px 0 0;font-size:16.5px;color:#d5d3cc}

@media (max-width:1060px){
  .p4-chip.c1{inset-inline-start:6px}.p4-chip.c2{inset-inline-start:-6px}.p4-chip.c3{inset-inline-end:6px}.p4-phone{inset-inline-end:-6px}
  .p4-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p4-row,.p4-row.rev{grid-template-columns:1fr;gap:28px}.p4-row.rev .tx{order:0}
}
@media (max-width:860px){
  .p4 .pnav{display:none}.p4 .pnav.open{display:flex}
  .p4-steps{grid-template-columns:1fr;gap:34px}.p4-mk{grid-template-columns:1fr}
}
@media (max-width:640px){
  .p4-hero{padding:112px 0 20px}.p4-kick{font-size:12.5px}.p4-lead{font-size:16px}.p4-stage{margin-top:38px}.p4-trust{margin-top:44px}
  .p4-cta .l3-btn{flex:1 1 100%}
  .p4-chip{display:none}.p4-phone{width:24%;bottom:-22px;border-radius:16px;padding:4px}.p4-phone>div{border-radius:12px}.p4-frame{border-radius:12px}.p4-fbar{height:26px}.p4-fbar span{display:none}
  .p4-svc{grid-template-columns:1fr}.p4-sec{padding-block:64px 0}.p4-band{margin-top:64px;padding-block:56px}
  .p4-final .in{padding:40px 24px}.p4-final{margin-block:64px 56px}
  .p4 .ph .pw{gap:8px}.p4 .pact{gap:6px}.p4 .pact .l3-btn.sm{padding-inline:11px;font-size:12.5px;height:36px}
  .p4 .pbrand .bn{display:none}.p4 .ph .pw{padding-inline:14px}
  .p4 .langsw button{min-width:26px;padding:5px 5px;font-size:11.5px}.p4 .pmenu{width:34px;height:34px;flex:none}
}
@media (max-width:400px){.p4 .pact .p4-login{display:inline-flex}.p4 .pact .l3-btn.sm{padding-inline:9px;font-size:12px}.p4 .pact{gap:5px}}
@media (prefers-reduced-motion:reduce){.p4-pic img{transition:none}}

/* Store logos: real marks, in colour, on a white tile */
.p4 .l3-mt .lg{opacity:1;filter:none;gap:12px}.p4 .l3-mt .lg img{width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.p4 .l3-mt .lg b{color:#e9e6de}.p4 .l3-pl img{width:44px;height:44px;border-radius:11px;background:#fff}

/* Sign-up in three short steps */
.wz-bar{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 0;padding:0}
.wz-bar li{display:flex;align-items:center;gap:9px;padding-top:12px;border-top:3px solid var(--l-line,rgba(255,255,255,.14));font-size:13px;font-weight:600;color:var(--l-mute,#8a877f);transition:border-color .3s,color .3s}
.wz-bar i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:800;border:1.5px solid currentColor;flex:none}
.wz-bar li.on{border-color:var(--l-gold,#c9a24a);color:var(--l-ink,#f2f0ea)}.wz-bar li.on i{background:var(--l-gold,#c9a24a);border-color:var(--l-gold,#c9a24a);color:#14110a}
.wz-bar li.done{border-color:var(--l-gold,#c9a24a);color:var(--l-gold,#c9a24a)}
.wz-st{display:flex;flex-direction:column;gap:18px;animation:wzin .35s ease both}.wz-st[hidden]{display:none}
@keyframes wzin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wz-q b{display:block;margin-bottom:10px;font-size:15.5px;font-weight:700}
.wz-ch{display:flex;flex-wrap:wrap;gap:8px}
.wz-ch label{position:relative;cursor:pointer}
.wz-ch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wz-ch span{display:block;padding:10px 16px;border-radius:999px;border:1.5px solid var(--l-line,rgba(255,255,255,.16));font-size:14px;font-weight:600;transition:border-color .15s,background .15s,color .15s}
.wz-ch label:hover span{border-color:var(--l-gold,#c9a24a)}
.wz-ch input:checked+span{border-color:var(--l-gold,#c9a24a);background:var(--l-gold,#c9a24a);color:#14110a}
.wz-ch input:focus-visible+span{outline:2px solid var(--l-gold,#c9a24a);outline-offset:2px}
.wz-nav{display:flex;gap:10px;margin-top:6px}.wz-nav .btn{justify-content:center;text-align:center}.wz-nav .btn.pri{flex:1}
@media (max-width:560px){.wz-bar span{display:none}.wz-bar li{justify-content:center}}
@media (prefers-reduced-motion:reduce){.wz-st{animation:none}}

/* v5: sellers' problems first, photos instead of extra dashboard screens */
.p5-pain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.p5-pain h2{font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.03em}
.p5-pain .lead{margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--mu)}
.p5-x,.p5-ok{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.p5-x li,.p5-ok li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:#d5d3cc}
.p5-x li b{color:var(--ink);font-weight:700}
.p5-x svg,.p5-ok svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;margin-top:1px}
.p5-x svg{color:#ff8a9c;background:rgba(255,107,134,.14)}.p5-ok svg{color:#34d399;background:rgba(52,211,153,.14)}
.p5-turn{margin:64px auto 0;max-width:820px;text-align:center;font-size:clamp(22px,2.8vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--g);text-wrap:balance}
:root[lang=ar] .p5-turn{letter-spacing:0;line-height:1.5;font-family:"IBM Plex Sans Arabic",Tahoma,sans-serif}
.p4-card.photo .p4-pic{aspect-ratio:3/2}
.p5-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.p5-cmp article{padding:30px;border-radius:20px;background:var(--panel4);border:1px solid var(--ln4)}
.p5-cmp article.yes{border-color:color-mix(in srgb,var(--g) 50%,transparent);background:linear-gradient(180deg,rgba(201,162,74,.10),var(--panel4) 60%);box-shadow:0 30px 70px -40px rgba(201,162,74,.5)}
.p5-cmp h3{font-size:19px}.p5-cmp ul{margin-top:20px}
.p5-prom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.p5-prom article{padding:26px;border-radius:20px;border:1px solid var(--ln4);background:var(--panel4)}
.p5-prom .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--g) 15%,transparent);color:var(--g);margin-bottom:16px}.p5-prom .ic svg{width:20px;height:20px}
.p5-prom p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--mu)}
.p4 .rvx.p5-pain>figure{transform:translateX(-72px) scale(.97)}.p4 .rvx.p5-pain .tx{transform:translateX(56px)}
[dir=rtl] .p4 .rvx.p5-pain>figure{transform:translateX(72px) scale(.97)}[dir=rtl] .p4 .rvx.p5-pain .tx{transform:translateX(-56px)}
.p4 .rvx.p5-pain.in>figure,.p4 .rvx.p5-pain.in .tx{transform:none}
@media (max-width:1060px){.p5-pain{grid-template-columns:1fr;gap:28px}.p5-prom{grid-template-columns:1fr}}
@media (max-width:860px){.p5-cmp{grid-template-columns:1fr}}
@media (max-width:640px){.p5-turn{margin-top:44px}.p5-cmp article,.p5-prom article{padding:22px}}

/* PR-12: mobile header = logo + name, Log in, Sign up, menu. The language switch moves into the menu (<=520px) so nothing is squeezed. */
.pnav-lang{display:none}
@media (max-width:520px){
  .p4 .pact > .langsw{display:none}
  .pnav .pnav-lang{display:flex;padding:10px 12px 4px}
  .p4 .pbrand .bn{display:flex}.p4 .pbrand .bn small,.p4 .pbrand .bt .beta{display:none}.p4 .pbrand .bn b{font-size:16px}.p4 .pbrand{gap:8px;flex:0 1 auto}.p4 .pbrand .mark{width:32px;height:32px}.p4 .ph .pw{gap:6px}.p4 .pact{gap:4px;flex:none}
  .p4 .pmenu{width:44px;height:44px}
  .p4 .pact .l3-btn.sm{padding-inline:10px;font-size:12.5px;height:38px}.p4 .pmenu{width:40px;height:40px}
}
@media (min-width:521px){.pnav-lang{display:none!important}}