:root{--ink:#13233F;--ink2:#1B3053;--gold:#C9A25A;--bg:#F5F6F8;--fg:#14203A;--muted:#5B6579;--line:#D9DDE5;--panel:#FFFFFF;
--disp:"IBM Plex Sans Arabic",Tahoma,sans-serif;--body:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0C1424;--fg:#E8ECF4;--muted:#9AA5BA;--line:#25324B;--panel:#111C31}}
:root[data-theme="dark"]{--bg:#0C1424;--fg:#E8ECF4;--muted:#9AA5BA;--line:#25324B;--panel:#111C31}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--ink);scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:4px}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}

/* hero */
.hero{background:var(--ink);color:#EEF1F7;position:relative;overflow:hidden}
.hero::after{content:"إنجاز";position:absolute;inset-inline:0;bottom:-.32em;text-align:center;font-family:var(--disp);font-weight:700;font-size:clamp(9rem,34vw,30rem);line-height:1;color:#fff;opacity:.035;pointer-events:none;white-space:nowrap}
nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.logo{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1;display:flex;align-items:center;gap:10px}
.logo svg{width:42px;height:42px;flex:none;display:block}
.hero .wrap{position:relative;z-index:1}
.hero::after{display:none}
.sky{position:absolute;left:0;bottom:0;width:100%;height:clamp(190px,25vw,360px);pointer-events:none;animation:rise 1.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.w1{animation:tw 7s ease-in-out infinite}
.w2{animation:tw 9s ease-in-out -4s infinite}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.85}}
.hero::before{content:"";position:absolute;width:640px;height:640px;inset-inline-end:-120px;top:-160px;background:radial-gradient(circle,#C9A25A33,transparent 65%);pointer-events:none}
nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;font-size:16px;color:#C3CBDA}
nav ul a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 17px/1 var(--body);padding:17px 30px;border-radius:999px;background:var(--gold);color:#13233F;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#D8B572}
.btn.ghost{background:transparent;color:#EEF1F7;box-shadow:inset 0 0 0 1.5px #3D4F72}
.btn.ghost:hover{background:#ffffff12}
.heroGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding:72px 0 150px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.25;margin:0 0 28px;letter-spacing:-.01em}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:#B8C2D6;max-width:34em;margin:0 0 40px;font-weight:300}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* browser that builds itself */
.win{background:#F7F8FA;border-radius:18px;box-shadow:0 40px 80px -30px #000A,0 0 0 1px #ffffff1a;overflow:hidden;position:relative;direction:ltr;max-width:460px;margin-inline:auto;width:100%}
.bar{display:flex;gap:7px;padding:14px 16px;background:#E6E9EF}
.bar b{width:11px;height:11px;border-radius:50%;background:#C2C8D3}
.pg{padding:26px 24px 30px;display:grid;gap:14px;direction:rtl;height:340px;align-content:start}
.pg span{display:block;border-radius:8px;transform-origin:right;transform:scaleX(0)}
.go .pg span{animation:grow .7s cubic-bezier(.2,.8,.2,1) forwards}
.s1{height:20px;width:62%;background:#13233F}
.s2{height:10px;width:92%;background:#CBD1DC}
.s3{height:10px;width:74%;background:#CBD1DC}
.s4{height:150px;background:linear-gradient(135deg,#1B3053,#2C4B80);border-radius:12px!important}
.s5{height:38px;width:34%;background:#C9A25A;border-radius:999px!important}
.go .pg .s1{animation-delay:4.9s}
.go .pg .s2{animation-delay:5.2s}
.go .pg .s3{animation-delay:5.4s}
.go .pg .s4{animation-delay:5.8s}
.go .pg .s5{animation-delay:6.4s}
.chat{position:absolute;inset:39px 0 0;padding:22px 20px;display:flex;flex-direction:column;gap:12px;background:#F7F8FA;z-index:2;direction:rtl}
.chat .m{margin:0;max-width:84%;padding:11px 16px;border-radius:18px;font-size:15px;line-height:1.7;opacity:0;transform:translateY(12px)}
.m.c{align-self:flex-start;background:#fff;color:#13233F;box-shadow:0 0 0 1px #E1E5EC;border-bottom-right-radius:6px}
.m.me{align-self:flex-end;background:#13233F;color:#fff;border-bottom-left-radius:6px}
.go .m{animation:msg .5s cubic-bezier(.2,.8,.2,1) forwards}
.go .m:nth-child(1){animation-delay:.3s}
.go .m:nth-child(2){animation-delay:1.3s}
.go .m:nth-child(3){animation-delay:2.3s}
.go .m:nth-child(4){animation-delay:3.3s}
.go .chat{animation:chatout .5s 4.4s forwards}
@keyframes msg{to{opacity:1;transform:none}}
@keyframes chatout{to{opacity:0;visibility:hidden}}
.done{position:absolute;inset-inline-start:18px;bottom:18px;background:#13233F;color:#fff;font-size:15px;padding:10px 18px 10px 14px;border-radius:999px;display:flex;gap:9px;align-items:center;opacity:0;transform:scale(.8);direction:rtl}
.go .done{animation:pop .5s 5.6s cubic-bezier(.3,1.5,.5,1) forwards}
.done svg{width:20px;height:20px;background:var(--gold);border-radius:50%;padding:4px;stroke:#13233F;fill:none;stroke-width:3}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}

/* statement */
section{padding:clamp(80px,12vw,150px) 0}
.statement p{font-family:var(--disp);font-weight:500;font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.7;margin:0;max-width:22em;letter-spacing:-.005em}
.statement p em{font-style:normal;color:var(--muted)}

/* services */
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:48px;flex-wrap:wrap}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.3;margin:0}
.head p{margin:0;color:var(--muted);max-width:26em}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .35s}
.row::before{content:"";position:absolute;inset-inline-start:0;top:-1px;height:1px;width:0;background:var(--gold);transition:width .5s}
.row:hover::before{width:100%}
.row:hover{padding-inline-start:14px}
.row h3{font-family:var(--disp);font-weight:700;font-size:1.65rem;margin:0;line-height:1.5}
.row p{margin:0;color:var(--muted);max-width:32em}
.row.last h3::after{content:" (لو قررت نكمل)";font:300 15px var(--body);color:var(--gold)}

/* process */
.alt{background:var(--panel);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;counter-reset:s;position:relative}
.step{padding-inline-end:32px;position:relative;padding-top:42px}
.step::before{content:"";position:absolute;top:9px;inset-inline:0;height:2px;background:var(--line)}
.step::after{content:"";position:absolute;top:0;inset-inline-start:0;width:20px;height:20px;border-radius:50%;background:var(--panel);border:2px solid var(--gold)}
.step:last-child::after{background:var(--gold)}
.step small{font:500 15px var(--body);color:var(--gold);display:block;margin-bottom:6px}
.step h3{font-family:var(--disp);font-size:1.5rem;margin:0 0 10px;font-weight:700}
.step p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.85}

.why{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.why div{padding:30px 0;border-top:1px solid var(--line)}
.why h3{font-family:var(--disp);font-size:1.5rem;margin:0 0 8px;font-weight:700}
.why p{margin:0;color:var(--muted);max-width:28em}
.faq{max-width:860px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font:600 1.2rem/1.6 var(--body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--gold),var(--gold)) center/100% 2px no-repeat,linear-gradient(var(--gold),var(--gold)) center/2px 100% no-repeat;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 26px;color:var(--muted);max-width:36em}
.navr{display:flex;align-items:center;gap:12px}
.tgl{width:46px;height:46px;border-radius:50%;border:1.5px solid #3D4F72;background:transparent;color:#EEF1F7;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s}
.tgl:hover{background:#ffffff12}
.tgl svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tgl .sun{display:none}
.tgl[data-m="dark"] .sun{display:block}
.tgl[data-m="dark"] .moon{display:none}
.care{margin:46px auto 0;padding-top:30px;border-top:1px solid #243659;max-width:420px;font-size:15.5px;color:#8995AD}
.care a{display:block;font:600 clamp(1.8rem,4vw,2.4rem)/1.4 var(--body);color:#EEF1F7;margin-top:4px;letter-spacing:.02em;direction:ltr}
.care a:hover{color:var(--gold)}
footer a{color:#C3CBDA}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.who{display:flex;gap:28px;align-items:center}
.av{flex:none;width:132px;height:132px;border-radius:50%;background:var(--ink);color:var(--gold);font:700 3.4rem/1 var(--disp);display:grid;place-items:center;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--gold)}
.who h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:0 0 10px}
.who p{margin:0;color:var(--muted);max-width:26em}
.work{display:block;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .3s,border-color .3s}
.work:hover{transform:translateY(-4px);border-color:var(--gold)}
.wv{height:120px;border-radius:12px;margin-bottom:18px;background:linear-gradient(135deg,#13233F,#2C4B80);position:relative;overflow:hidden}
.wv::before{content:"";position:absolute;top:18px;inset-inline-start:18px;height:10px;width:46%;border-radius:5px;background:#fff;opacity:.85}
.wv::after{content:"";position:absolute;inset:44px 18px 18px;border-radius:8px;background:repeating-linear-gradient(90deg,#ffffff1f 0 28%,transparent 28% 33%)}
.work small{display:block;color:var(--gold);font-size:14px;font-weight:500}
.work h3{font-family:var(--disp);font-size:1.7rem;margin:2px 0 4px;direction:ltr;text-align:right}
.work p{margin:0 0 14px;color:var(--muted)}
.work em{font-style:normal;font-weight:600;border-bottom:2px solid var(--gold)}
.fab{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px -6px #0007;z-index:50;transition:opacity .3s,transform .3s}
.fab svg{width:30px;height:30px;fill:#fff}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #25D366;animation:fp 2.8s ease-out infinite}
.fab.off{opacity:0;pointer-events:none;transform:scale(.8)}
@keyframes fp{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.6)}}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:36px}.who{flex-direction:column;align-items:flex-start;gap:20px}.av{width:110px;height:110px;font-size:2.8rem}}
.pg{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 18px;overflow:hidden}
.u-nav{height:26px;display:flex;align-items:center;gap:10px;flex:none;opacity:0}
.u-nav b{width:22px;height:22px;border-radius:8px;background:#13233F;position:relative;display:block}
.u-nav b::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#C9A25A}
.u-nav i{display:block;width:34px;height:7px;border-radius:4px;background:#CBD1DC}
.u-nav u{margin-inline-start:auto;width:54px;height:20px;border-radius:999px;background:#C9A25A;display:block;text-decoration:none}
.u-hero{position:relative;flex:none;height:138px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#13233F,#2C4B80);opacity:0}
.u-hero svg{position:absolute;inset:0;width:100%;height:100%}
.bx{fill:#fff;fill-opacity:.16;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.bx.hi{fill:#C9A25A;fill-opacity:.9}
.ln{fill:none;stroke:#E2BE78;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.dot{position:absolute;left:97.3%;top:9.2%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#E2BE78;opacity:0}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #E2BE78;opacity:0}
.toast{position:absolute;top:10px;inset-inline-end:10px;background:#fff;color:#13233F;font-size:12.5px;font-weight:600;padding:6px 12px 6px 10px;border-radius:999px;display:flex;align-items:center;gap:7px;opacity:0;direction:rtl;box-shadow:0 8px 20px -8px #0008}
.toast em{width:8px;height:8px;border-radius:50%;background:#2DBE6C;display:block}
.u-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:none}
.u-tiles div{height:54px;background:#fff;border:1px solid #E3E7EE;border-radius:12px;padding:10px;display:grid;align-content:center;gap:6px;opacity:0;transform:scale(.85)}
.u-tiles b{width:16px;height:16px;border-radius:50%;background:#C9A25A;display:block}
.u-tiles div:nth-child(2) b{background:#13233F}
.u-tiles div:nth-child(3) b{background:#2C4B80}
.u-tiles i{display:block;height:6px;border-radius:3px;background:#D3D8E2;width:80%}
.u-row{height:38px;display:flex;flex:none}
.pill{margin-inline-start:auto;width:38%;height:38px;border-radius:999px;background:#C9A25A;position:relative;display:block;opacity:0;text-decoration:none}
.pill::after{content:"";position:absolute;inset:0;border-radius:inherit;border:3px solid #C9A25A;opacity:0}
.cur{position:absolute;left:62%;top:46%;width:24px;height:24px;opacity:0;filter:drop-shadow(0 4px 6px #0005);z-index:3}
.go .u-nav{animation:dn .6s .1s cubic-bezier(.2,.8,.2,1) forwards}
.go .u-hero{animation:up .7s .35s cubic-bezier(.2,.8,.2,1) forwards}
.go .bx{animation:barg .8s cubic-bezier(.2,.9,.3,1) forwards}
.go .b1{animation-delay:.9s}
.go .b2{animation-delay:1.05s}
.go .b3{animation-delay:1.2s}
.go .b4{animation-delay:1.35s}
.go .b5{animation-delay:1.5s}
.go .b6{animation-delay:1.65s}
.go .ln{animation:draw 1.5s 1.3s ease-in-out forwards}
.go .dot{animation:dotin .4s 2.7s forwards}
.go .dot::after{animation:pulse 1.6s 3s ease-out infinite}
.go .u-tiles div{animation:tile .5s cubic-bezier(.3,1.5,.5,1) forwards}
.go .u-tiles div:nth-child(1){animation-delay:2.4s}
.go .u-tiles div:nth-child(2){animation-delay:2.6s}
.go .u-tiles div:nth-child(3){animation-delay:2.8s}
.go .pill{animation:tile .5s 3s cubic-bezier(.3,1.5,.5,1) forwards,press .35s 4.55s}
.go .pill::after{animation:rip .7s 4.55s ease-out}
.go .cur{animation:curm 1.4s 3.1s cubic-bezier(.5,0,.2,1) forwards,curo .4s 5s forwards}
.go .toast{animation:tp .5s 4.8s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes dn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes barg{to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dotin{to{opacity:1}}
@keyframes pulse{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
@keyframes tile{to{opacity:1;transform:none}}
@keyframes press{50%{transform:scale(.93)}}
@keyframes rip{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.9)}}
@keyframes curm{0%{opacity:0;left:62%;top:46%}15%{opacity:1}100%{opacity:1;left:23%;top:88%}}
@keyframes curo{to{opacity:0}}
@keyframes tp{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}
.step::after{background:var(--bg);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .15s}
.js .step{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .step.in{opacity:1;transform:none}
.js .step:nth-child(2){transition-delay:.18s}
.js .step:nth-child(3){transition-delay:.36s}
.js .step:nth-child(4){transition-delay:.54s}
.js .step::after{transform:scale(0)}
.js .step.in::after{transform:scale(1)}
.js .step::before{transform:scaleX(0);transform-origin:right;transition:transform .8s ease .3s}
.js .step.in::before{transform:scaleX(1)}
@media (max-width:900px){.js .step::before{transform:scaleY(0);transform-origin:top}.js .step.in::before{transform:scaleY(1)}}
.lead-form{max-width:560px;margin:0 auto;text-align:right;display:grid;gap:18px}
.lead-form label,.lead-form legend{display:grid;gap:8px;font-size:15px;color:#C3CBDA;padding:0}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form textarea{width:100%;font:400 17px/1.6 var(--body);color:#13233F;background:#fff;border:2px solid transparent;border-radius:14px;padding:15px 18px;direction:rtl}
.lead-form input[type=tel]{direction:ltr;text-align:right}
.lead-form textarea{resize:vertical;min-height:120px}
.lead-form ::placeholder{color:#8A93A6}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px #C9A25A44}
.lead-form fieldset{border:0;margin:0;padding:0;min-width:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.lead-form .opt{display:block;position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.opt span{display:block;text-align:center;padding:15px;border-radius:14px;background:#fff;color:#13233F;font-weight:500;transition:background .2s}
.opt input:checked+span{background:var(--gold)}
.opt input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.lead-form .btn{width:100%;font-size:19px;padding:20px;border:0;cursor:pointer}
.lead-form .hint{margin:0;max-width:none;min-height:1.6em;font-size:15px;color:#FFB4A8;text-align:center}
.lead-form .hint.ok{color:#9BE3B5}
@media (max-width:900px){.why{grid-template-columns:1fr}}
@media (max-width:480px){.chat{padding:16px 14px;gap:10px;overflow:hidden}.chat .m{font-size:14px;padding:9px 14px}.cta .btn{flex:1 1 100%}}

/* closing */
.close{background:var(--ink);color:#EEF1F7;text-align:center;position:relative;overflow:hidden}
.close h2{font-size:clamp(2.4rem,7vw,5.6rem);line-height:1.25;margin-bottom:26px}
.close p{color:#B8C2D6;max-width:30em;margin:0 auto 42px;font-weight:300}
footer{background:var(--ink);color:#8995AD;font-size:15px;padding:30px 0 calc(34px + env(safe-area-inset-bottom,0px));border-top:1px solid #243659}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (max-width:900px){
 .heroGrid{grid-template-columns:1fr;gap:56px;padding:40px 0 120px}
 nav ul{display:none}
 .row{grid-template-columns:1fr;gap:10px;padding:28px 0}
 .steps{grid-template-columns:1fr;gap:34px}
 .step{padding:0 44px 0 0}
 .step::before{top:0;bottom:-34px;inset-inline:auto;inset-inline-start:9px;width:2px;height:auto}
 .step::after{top:4px}
 .step:last-child::before{display:none}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .sky,.w1,.w2{animation:none}
 .go .pg span,.pg span{animation:none;transform:none}
 .go .done,.done{animation:none;opacity:1;transform:none}
 .pg *{opacity:1!important;transform:none!important;animation:none!important;stroke-dashoffset:0!important}
 .cur,.fab::after{display:none}
 .btn,.row,.row::before{transition:none}
}