:root{--bg:#05050b;--ink:#f4f2ff;--mut:#a09eba;--ln:rgba(255,255,255,.09);--g:linear-gradient(120deg,#8a2cff,#2f7bff 52%,#00cfff);--card:rgba(255,255,255,.035);--r:22px;--nav:76px;--dock:72px;--disp:"Sora","Noto Sans Arabic",system-ui,sans-serif;--body:"Inter","Noto Sans Arabic",system-ui,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid #00cfff;outline-offset:3px;border-radius:10px}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.03em;line-height:1.05}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px}.skip:focus{inset-inline-start:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 14px;border-radius:10px}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#120a24,transparent 60%)}
.bg i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.34;animation:drift 24s ease-in-out infinite alternate}
.bg i:nth-child(1){background:#8a2cff;left:-18vmax;top:-22vmax}.bg i:nth-child(2){background:#00a8ff;right:-22vmax;bottom:-26vmax;animation-delay:-9s;opacity:.26}
.bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 70%);opacity:.5}
@keyframes drift{to{transform:translate(12vmax,8vmax) scale(1.15)}}

.top{position:sticky;top:0;z-index:30;height:var(--nav);backdrop-filter:blur(18px) saturate(1.4);background:rgba(5,5,11,.62);border-bottom:1px solid var(--ln)}
.top .wrap{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font:800 1.05rem var(--disp);letter-spacing:.14em;margin-inline-end:auto}
.brand img{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 1px var(--ln),0 0 24px rgba(138,44,255,.5)}
.menu{display:flex;gap:6px}.menu a{padding:9px 16px;border-radius:999px;font-size:.93rem;color:var(--mut);transition:color .25s,background .25s}
.menu a:hover{color:var(--ink)}.menu a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.07)}
.tools{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.lang{display:flex;border:1px solid var(--ln);border-radius:999px;padding:3px}
.lang button{border:0;background:none;padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--mut)}
.lang button[aria-pressed="true"]{background:#fff;color:#000}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;border:1px solid var(--ln);font:600 .95rem var(--disp);background:rgba(255,255,255,.04);transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.09)}
.btn.p{background:var(--g);border-color:transparent;color:#fff;box-shadow:0 10px 34px -8px rgba(80,90,255,.7)}.btn.p:hover{box-shadow:0 16px 44px -8px rgba(0,200,255,.6)}
.btn img{width:22px;height:22px}

section{padding:clamp(48px,8vw,104px) 0}
.hero{padding-top:clamp(36px,6vw,84px);padding-bottom:clamp(40px,6vw,80px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.kick{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border:1px solid var(--ln);border-radius:999px;font-size:.85rem;color:var(--mut);background:var(--card)}
.kick b{width:8px;height:8px;border-radius:50%;background:#3dff9a;box-shadow:0 0 12px #3dff9a;animation:pl 2s infinite}
@keyframes pl{50%{opacity:.4;transform:scale(.7)}}
h1{font-size:clamp(3.6rem,10vw,7.6rem);font-weight:800;margin:22px 0 20px;letter-spacing:-.05em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.lede{color:var(--mut);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:46ch}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.facts{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}.facts b{display:block;font:700 1.5rem var(--disp)}.facts span{font-size:.85rem;color:var(--mut)}
.art{position:relative;aspect-ratio:1;width:min(480px,100%);margin-inline:auto;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.art::before{content:"";position:absolute;inset:-3px;border-radius:34%;background:conic-gradient(from var(--a),#8a2cff,#00cfff,#8a2cff);animation:rot 8s linear infinite}
.art::after{content:"";position:absolute;inset:-14%;z-index:-1;background:radial-gradient(circle,rgba(138,44,255,.5),transparent 65%);filter:blur(30px)}
.art img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:33%;box-shadow:inset 0 0 0 3px var(--bg)}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rot{to{--a:360deg}}

.sh{max-width:min(100%,760px);margin-bottom:40px}.sh h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700}.sh p{color:var(--mut);margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{position:relative;border:1px solid var(--ln);border-radius:var(--r);padding:30px;background:radial-gradient(380px circle at var(--mx,50%) var(--my,-20%),rgba(138,44,255,.2),transparent 60%),var(--card);backdrop-filter:blur(10px);transition:border-color .3s,transform .3s}
.card:hover{border-color:rgba(138,44,255,.5)}
.card h3{font-size:1.25rem;margin:18px 0 8px}.card p{color:var(--mut);font-size:.98rem}
.ico{width:34px;height:34px;background:var(--g);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.step{font:800 2.6rem var(--disp);background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{text-align:center;padding:clamp(40px,7vw,80px) 24px;border-radius:32px;border:1px solid var(--ln);background:radial-gradient(600px circle at 50% 0,rgba(138,44,255,.3),transparent 70%),var(--card)}
.cta h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:12px}.cta p{color:var(--mut);margin:0 auto 28px;max-width:44ch}
.soc{display:flex;align-items:center;gap:16px}.soc img{width:48px;height:48px;border-radius:14px}.soc b{font:700 1.1rem var(--disp);display:block}.soc span{color:var(--mut);font-size:.88rem}
.pg{padding-top:clamp(36px,6vw,72px)}.pg h1{font-size:clamp(2.6rem,7vw,5rem);margin:0 0 14px}
.srch{width:100%;max-width:460px;margin:26px 0 22px;padding:14px 20px;border-radius:999px;border:1px solid var(--ln);background:var(--card);color:var(--ink);font:inherit}
.faq{display:grid;gap:12px;max-width:820px}.faq details{padding:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:22px 26px;font:600 1.05rem var(--disp)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .3s;color:#00cfff}
.faq details[open] summary::after{transform:rotate(45deg)}.faq details>div{padding:0 26px 24px;color:var(--mut);animation:op .45s ease}
@keyframes op{from{opacity:0;translate:0 -6px}}
.av{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font:800 1.7rem var(--disp);background:var(--g);box-shadow:0 0 34px rgba(80,90,255,.5)}
.made{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:center}.made img{border-radius:26px;box-shadow:0 0 70px -10px rgba(80,90,255,.7)}
.made h2{font-size:2.4rem;margin-bottom:10px}.made p{color:var(--mut)}
footer{border-top:1px solid var(--ln);padding:28px 0;color:var(--mut);font-size:.88rem}footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer a{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}footer img{width:22px;height:22px;border-radius:6px}

.dock{display:none}
.pl{position:fixed;inset-inline-start:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--ln);border-radius:999px;background:rgba(10,10,20,.8);backdrop-filter:blur(18px);max-width:calc(100vw - 40px)}
.pl .t{display:none;min-width:0;padding-inline-end:6px}.pl.open .t{display:block;width:210px}
.pl .t b{display:block;font:600 .82rem var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .bar{height:3px;border-radius:3px;background:var(--ln);margin-top:7px;cursor:pointer}.pl .bar i{display:block;height:100%;width:0;background:var(--g);border-radius:3px}
.pb{width:42px;height:42px;border-radius:50%;border:0;background:var(--g);display:grid;place-items:center;flex:none}.pb.s{background:rgba(255,255,255,.08);width:34px;height:34px;display:none}.pl.open .pb.s{display:grid}
.pb svg{width:18px;height:18px;fill:#fff}
.intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;text-align:center;transition:opacity .7s,visibility .7s}
.intro[hidden]{display:none}.intro.out{opacity:0;visibility:hidden}
.intro img{width:110px;height:110px;border-radius:50%;margin:0 auto 22px;box-shadow:0 0 70px rgba(138,44,255,.8);animation:pop 1.2s cubic-bezier(.2,.9,.3,1) both}
.intro b{display:block;font:800 clamp(1.6rem,6vw,3rem) var(--disp);letter-spacing:.3em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop 1.2s .2s cubic-bezier(.2,.9,.3,1) both}
.intro small{color:var(--mut);letter-spacing:.2em;animation:pop 1.2s .5s both}.intro button{position:absolute;top:18px;inset-inline-start:18px;border:1px solid var(--ln);background:none;padding:8px 16px;border-radius:999px;color:var(--mut)}
@keyframes pop{from{opacity:0;transform:scale(.7) translateY(10px);filter:blur(10px)}}

.js [data-r]{opacity:0;translate:0 26px;transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js [data-r].in{opacity:1;translate:none}
::view-transition-old(root){animation:.32s ease both vo}::view-transition-new(root){animation:.55s cubic-bezier(.2,.8,.2,1) both vn}
@keyframes vo{to{opacity:0;scale:.985;filter:blur(8px)}}@keyframes vn{from{opacity:0;scale:1.012;filter:blur(10px)}}

@media(max-width:860px){
 :root{--nav:64px}
 .menu,.tools .btn{display:none}.brand{margin:0}.top .wrap{justify-content:space-between}
 .hero .wrap{grid-template-columns:1fr}.art{width:min(300px,78%);order:-1}.hero{text-align:center}.hero h1,.lede{margin-inline:auto}.acts,.facts{justify-content:center}
 .made{grid-template-columns:1fr;text-align:center;justify-items:center}.made img{width:200px}
 body{padding-bottom:calc(var(--dock) + 22px + env(safe-area-inset-bottom))}
 .dock{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;height:var(--dock);border:1px solid var(--ln);border-radius:28px;background:rgba(10,10,20,.82);backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 20px 50px rgba(0,0,0,.6)}
 .dock a{display:grid;justify-items:center;gap:3px;font-size:.68rem;color:var(--mut);padding:8px 0}.dock a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .dock a[aria-current="page"]{color:#fff}.dock a[aria-current="page"] svg{stroke:#00cfff}
 .dock .j{transform:translateY(-22px);width:64px;height:64px;border-radius:50%;margin-inline:auto;background:var(--g);box-shadow:0 12px 30px -4px rgba(80,90,255,.8);padding:0;display:grid;place-items:center}.dock .j img{width:30px;height:30px}
 .pl{bottom:calc(var(--dock) + 26px + env(safe-area-inset-bottom));inset-inline-start:12px}.pl.open{inset-inline-end:12px}.pl.open .t{width:auto;flex:1}
 .tools .lang{transform:scale(.92)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js [data-r]{opacity:1;translate:none}}
.pb .b{display:none}.pb.on .a{display:none}.pb.on .b{display:block}
.g3{grid-template-columns:repeat(3,1fr)}@media(max-width:980px){.g3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.g3{grid-template-columns:1fr}}