:root{--bg:#0A0A0A;--b1:#6D28D9;--b2:#5B21B6;--b3:#8B5CF6;--bo:.55;--ac:#A78BFA;--ac2:#8B5CF6;--sol:#6D28D9;--t:#F5F5F5;--t2:#cfcfd8;--t3:#A3A3A3;--g:rgba(255,255,255,.07);--gs:rgba(255,255,255,.12);--gb:rgba(255,255,255,.16);--hi:rgba(255,255,255,.35);--lo:rgba(255,255,255,.05);--sh:rgba(0,0,0,.45);--gl:rgba(167,139,250,.3);--ok:#4ade80;color-scheme:dark;--pt:env(safe-area-inset-top,0px)}
:root[data-theme=light]{--bg:#F3F0FA;--b1:#8B5CF6;--b2:#C4B5FD;--b3:#A78BFA;--bo:.6;--ac:#5B21B6;--ac2:#6D28D9;--sol:#6D28D9;--t:#171717;--t2:#3d3d4d;--t3:#66667a;--g:rgba(255,255,255,.5);--gs:rgba(255,255,255,.7);--gb:rgba(255,255,255,.75);--hi:rgba(255,255,255,.95);--lo:rgba(60,40,140,.08);--sh:rgba(60,40,120,.18);--gl:rgba(255,255,255,.9);--ok:#16a34a;color-scheme:light}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--t);font:400 16px/1.65 Roboto,Cairo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s;overflow-x:hidden}
html[lang=ar] body,html[lang=ar] input,html[lang=ar] select,html[lang=ar] textarea,.ar{font-family:Cairo,Roboto,system-ui,sans-serif}
a{color:inherit;text-decoration:none;-webkit-user-drag:none}img{-webkit-user-drag:none;max-width:100%;display:block}
p{margin:0 0 12px;color:var(--t2)}h1,h2,h3{margin:0}
.wrap{width:min(1120px,92%);margin:0 auto}
section{padding:96px 0 0}
.grad{background:linear-gradient(120deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
/* stage */
.stage{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--bo)}
.b1{width:46vmax;height:46vmax;background:var(--b1);top:-14vmax;left:-12vmax;animation:d1 26s ease-in-out infinite alternate}
.b2{width:40vmax;height:40vmax;background:var(--b2);top:30%;right:-12vmax;animation:d2 32s ease-in-out infinite alternate}
.b3{width:34vmax;height:34vmax;background:var(--b3);bottom:-14vmax;left:34%;animation:d3 30s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(9vmax,7vmax) scale(1.12)}}@keyframes d2{to{transform:translate(-8vmax,-6vmax) scale(.9)}}@keyframes d3{to{transform:translate(-7vmax,-8vmax) scale(1.1)}}
/* glass */
.glass{--mx:50%;--my:50%;position:relative;overflow:hidden;isolation:isolate;background:var(--g);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--gb);box-shadow:inset 0 1.5px 0 var(--hi),inset 0 -1px 0 var(--lo),inset 1px 0 0 var(--lo),0 14px 40px -12px var(--sh);transition:background .3s,border-color .3s,box-shadow .3s}
.glass::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 38%,transparent 70%,rgba(255,255,255,.05))}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),var(--gl),transparent 65%)}
.glass:hover{background:var(--gs)}.glass:hover::before{opacity:1}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--gs)}}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}.lift:hover{transform:translateY(-6px)}
/* nav */
#nav{position:fixed;z-index:50;top:calc(16px + var(--pt));left:50%;translate:-50% 0;width:min(94%,880px);border-radius:30px;transition:width .4s,background .3s}
#nav.sc{width:min(94%,820px);background:var(--gs)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;padding-inline-start:18px}
.logo img{height:34px;width:auto;border-radius:10px;background:#000;display:block}
#links{display:none;position:relative;list-style:none;margin:0;padding:0;gap:2px;touch-action:none;user-select:none;cursor:grab}
#links li a{display:block;position:relative;z-index:1;padding:9px 14px;font-size:.92rem;font-weight:500;color:var(--t2);transition:color .2s}
#links li a.on{color:var(--t)}
#ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;pointer-events:none;background:var(--gs)}
.tools{display:flex;align-items:center;gap:8px}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;color:var(--t);font:inherit;touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
.ib i{pointer-events:none}.soc{display:none}.ib.lg{width:54px;height:54px;font-size:1.25rem;display:grid}
.ib.glass{border:1px solid var(--gb)}
.sw{direction:ltr;--p:1;position:relative;width:68px;height:38px;border-radius:999px;border:1px solid var(--gb);padding:0;cursor:pointer;touch-action:none;color:var(--t3);font-size:.8rem;display:flex;align-items:center;justify-content:space-between;padding:0 11px;background:color-mix(in srgb,var(--sol) calc(var(--p)*55%),var(--g));box-shadow:inset 0 2px 5px var(--sh)}
.knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:linear-gradient(#fff,#e9e6f7);box-shadow:0 2px 8px var(--sh),inset 0 1px 0 #fff;will-change:transform}
.burger{display:grid}
#mm{height:0;overflow:hidden}#mm ul{list-style:none;margin:0;padding:6px 14px 16px}
#mm a{display:block;padding:13px 16px;border-radius:16px;font-weight:500}#mm a.on{background:var(--gs)}
/* type */
.head{text-align:center;margin-bottom:44px}
h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
.head p{color:var(--t2);font-size:1.1rem;margin:0 auto}
.sub{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;text-align:center;margin:56px 0 24px}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
/* hero */
.hero{display:grid;gap:40px;align-items:center;min-height:100vh;padding-top:130px}
.hero-pic{position:relative;order:-1}
.frame{border-radius:44px;padding:10px;background:#000}.frame img{border-radius:34px;width:100%;transition:transform .8s}.frame:hover img{transform:scale(1.05)}
.tile{position:absolute;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--ac);font-size:1.3rem;animation:bob 5s ease-in-out infinite}
.t1{top:-18px;left:-10px}.t2{top:20%;right:-14px;animation-delay:-1.6s}.t3{bottom:-16px;left:14%;animation-delay:-3.2s}
@keyframes bob{50%{translate:0 -10px}}
.chip{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--t2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ok)}100%{box-shadow:0 0 0 10px transparent}}
.hero h1{font-size:clamp(2.6rem,7vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:18px 0 14px}
.type{font-size:1.35rem;font-weight:600;color:var(--t);min-height:2rem;margin-bottom:12px}
.cur{display:inline-block;width:2px;height:1.2em;background:var(--ac);margin-inline-start:3px;vertical-align:-3px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.lead{font-size:1.05rem;max-width:56ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;border:1px solid var(--gb);cursor:pointer;touch-action:pan-y;user-select:none;will-change:transform;color:var(--t)}
.btn.pri{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--ac2),var(--sol));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.25),0 10px 30px -6px var(--sol)}
.techrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.techrow small{width:100%;color:var(--t3)}
/* cards */
.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{border-radius:28px;padding:28px;container-type:inline-size}
.card small{display:block;color:var(--t3);font-size:.82rem}.card b{display:block;font-size:1.02rem}
.card b[dir]{unicode-bidi:plaintext}
.orb{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;color:var(--ac);font-size:1.2rem;background:var(--gs);box-shadow:inset 0 1.5px 0 var(--hi),inset 0 -1px 0 var(--lo),0 6px 16px -6px var(--sh)}
.big-i{font-size:2.2rem;color:var(--ac);margin-bottom:14px;display:block}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tags.center{justify-content:center}
.tag{padding:5px 14px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--t2);box-shadow:inset 0 1px 0 var(--hi),0 4px 12px -6px var(--sh)}.tag.lg{font-size:1rem;padding:10px 22px}
.about{border-radius:36px;padding:14px;display:grid;gap:28px;align-items:center}
.about>div:last-child{padding:12px 20px 12px}
.about-art{border-radius:26px;display:grid;place-items:center;min-height:240px;background:#000;color:var(--ac)}.about-art svg{width:42%;filter:drop-shadow(0 0 28px var(--sol))}
p.big{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.socials{display:flex;justify-content:center;gap:14px;margin:36px 0 28px}.center{text-align:center}
footer{padding:96px 0 40px}.foot{border-radius:999px;padding:14px 24px;text-align:center;color:var(--t3);font-size:.9rem}
/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
@media(min-width:900px){#links{display:flex}.soc{display:grid}.burger{display:none}#mm{display:none}}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr}.hero-pic{order:0}.about{grid-template-columns:.8fr 1.2fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
html[lang=ar] *{letter-spacing:0!important}
.form{display:grid;gap:14px;padding:28px;border-radius:28px}
input,select,textarea{width:100%;padding:13px 16px;border-radius:16px;border:1px solid var(--gb);background:var(--g);color:var(--t);font:inherit}
input::placeholder,textarea::placeholder{color:var(--t3)}option{color:#171717}
.case dl{margin:0}.case dt{color:var(--ac);font-weight:600;font-size:.85rem;margin-top:10px}.case dd{margin:0;color:var(--t2)}
.orb{font-weight:700}.priv ul{margin:0;padding-inline-start:20px;color:var(--t2)}.priv li{margin:8px 0}
.foot a{color:var(--ac)}
.pp .knob{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.doc{padding-top:130px;display:grid;gap:20px}.doc .head{margin-bottom:24px}
.doc h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.back{padding:9px 16px;font-size:.9rem}.flip{display:inline-block}html[lang=en] .flip{transform:scaleX(-1)}
.lnk{color:var(--ac);font-weight:600}
textarea{resize:none}
button{font-family:inherit;font-size:1rem}
.info{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:24px}
.info .orb{margin:0;flex:none;transition:background .3s,color .3s}.info>div{min-width:0}.info b{overflow-wrap:anywhere}
.info b.ph{display:inline-block;direction:ltr;unicode-bidi:isolate;letter-spacing:.02em}
.info .go{margin-inline-start:auto;color:var(--ac);opacity:.75;font-size:.9rem;transition:transform .3s,opacity .3s}
a.info:hover .go{opacity:1;transform:translateY(-2px)}
a.info:hover .orb{background:var(--sol);color:#fff}