:root{--bg:#050816;--ink:#f6f2ea;--mut:#a8b0d2;--gold:#ffd27a;--amber:#ff9a3c;--vio:#6c4bff;--line:rgba(255,255,255,.11);
--ar:'IBM Plex Sans Arabic','Noto Sans Arabic','Geeza Pro',system-ui,sans-serif;--kufi:'Noto Kufi Arabic','IBM Plex Sans Arabic','Geeza Pro',sans-serif;--lat:'Sora','IBM Plex Sans Arabic',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{min-height:100vh;color:var(--ink);font:400 16px/1.65 var(--ar);background:linear-gradient(#03050f,#080d28 55%,#150f38 100%) fixed;overflow-x:clip;-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:var(--lat);font-size:15.5px;line-height:1.6}
html[lang=ar] .en,html[lang=en] .ar{display:none!important}
.defs{position:absolute;width:0;height:0}
#sky{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
.neb{position:fixed;inset:-10%;z-index:0;pointer-events:none;will-change:transform}
.neb i{position:absolute;border-radius:50%;opacity:.55}
.n1{width:80vmax;height:80vmax;left:-15vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(108,75,255,.34),transparent);animation:br 14s ease-in-out infinite alternate}
.n2{width:70vmax;height:70vmax;right:-25vmax;top:22%;background:radial-gradient(closest-side,rgba(20,190,215,.16),transparent);animation:br 18s ease-in-out -6s infinite alternate}
.n3{width:90vmax;height:50vmax;left:5%;bottom:-28vmax;background:radial-gradient(closest-side,rgba(255,140,60,.2),transparent);animation:br 16s ease-in-out -3s infinite alternate}
@keyframes br{to{opacity:.85;transform:scale(1.08)}}
.page{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 16px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0 6px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font:700 17px var(--kufi)}
html[lang=en] .brand{font:600 17px var(--lat)}
.brand b{font:600 10px var(--lat);letter-spacing:.14em;color:var(--gold);border:1px solid rgba(255,210,122,.5);border-radius:99px;padding:2px 7px}
.lang{font:600 13px var(--lat);color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:99px;min-width:64px;min-height:40px;padding:0 16px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.lang:hover{background:rgba(255,255,255,.12);border-color:rgba(255,210,122,.5)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.hero>*{min-width:0}.hero{display:grid;gap:28px;align-items:center;padding:clamp(20px,6vh,60px) 0 36px}
.hero-txt{display:flex;flex-direction:column;align-items:flex-start}
.mark{width:clamp(44px,9vw,64px);height:auto;aspect-ratio:1;margin-bottom:6px;opacity:0;filter:drop-shadow(0 0 14px rgba(255,190,90,.7));transform-origin:50% 50%}
.mark.lit{opacity:1;animation:pop 1.1s cubic-bezier(.2,1.4,.4,1) both,tw 4.5s 1.1s ease-in-out infinite}
@keyframes pop{0%{transform:scale(.2) rotate(-40deg);filter:drop-shadow(0 0 40px #fff)}60%{transform:scale(1.25)}100%{transform:none}}
@keyframes tw{50%{transform:scale(.9) rotate(6deg);filter:drop-shadow(0 0 22px rgba(255,190,90,.9))}}
.wm{display:inline-flex;align-items:center;font-size:clamp(52px,14vw,104px);line-height:1.1;padding:0 .04em;clip-path:inset(-50% 100% -50% 0);filter:drop-shadow(0 0 26px rgba(255,160,60,.28))}
html[dir=rtl] .wm{clip-path:inset(-50% 0 -50% 100%)}
.wt{font:800 1em/1.15 var(--kufi);background:linear-gradient(180deg,#fff 20%,#ffe3a6 65%,#ffb04d);-webkit-background-clip:text;background-clip:text;color:transparent}
.wt.en{font:600 .78em/1.15 var(--lat);letter-spacing:-.04em}
.ai{font:600 .15em var(--lat);letter-spacing:.14em;color:var(--gold);border:1px solid rgba(255,210,122,.55);border-radius:99px;padding:.3em .8em;margin-inline-start:.4em;align-self:flex-start;margin-top:.9em}
.lede{margin-top:18px;max-width:34em;font-size:clamp(17px,4.6vw,21px);line-height:1.75;color:#d9dcf0}
.demo{justify-self:center;width:100%;max-width:440px}
.chat{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(108,75,255,.5);overflow:hidden;transition:transform .2s ease-out}
.chat-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-h div{flex:1;line-height:1.3}.chat-h b{font:700 15px var(--kufi);display:block}.chat-h small{color:var(--mut);font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;background:#3ddc97;box-shadow:0 0 10px #3ddc97}
.chat-b{height:318px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;overflow:hidden}
.b{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.6;animation:in .35s cubic-bezier(.2,.9,.3,1) both;font-family:var(--ar)}
.b small{display:none;margin-top:4px;font:400 12px/1.45 var(--lat);color:var(--mut);direction:ltr;text-align:left}
html[lang=en] .b small{display:block}
.b.u{align-self:flex-start;background:rgba(255,255,255,.1);border-end-start-radius:4px}
.b.s{align-self:flex-end;background:linear-gradient(135deg,rgba(255,210,122,.2),rgba(108,75,255,.22));border:1px solid rgba(255,210,122,.28);border-end-end-radius:4px}
.b em{font-style:normal;color:var(--gold);font-weight:600}
.typing{display:flex;gap:5px;padding:14px 16px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.35;animation:dt 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dt{40%{opacity:1;transform:translateY(-4px)}}
@keyframes in{from{opacity:0;transform:translateY(10px) scale(.96)}}
.cap{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}
footer{padding:18px 0 max(28px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--mut);font-size:14px}
.contact a{color:var(--gold);font:600 15px var(--lat);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,210,122,.4);margin-inline-start:6px;padding:6px 0;display:inline-block}
.contact a:hover{text-decoration-color:var(--gold)}
.copy{font-family:var(--lat);font-size:12.5px}
.fx,.fx2{animation:up .9s cubic-bezier(.2,.8,.2,1) both}
.fx{animation-delay:2.9s}.h-title.fx{animation-delay:2.9s}.lede.fx{animation-delay:3.1s}.hero-cta.fx{animation-delay:3.3s}.fx2{animation-delay:1.4s}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
@media(min-width:760px){.top{padding-top:26px}}
@media(min-width:960px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;min-height:calc(100vh - 150px)}.demo{max-width:460px;justify-self:end}html[dir=ltr] .demo{justify-self:end}}
@media(prefers-reduced-motion:reduce){.wm,html[dir=rtl] .wm{clip-path:none}.mark{opacity:1;animation:none}.fx,.fx2,.n1,.n2,.n3,.b{animation:none}.lang,.chat{transition:none}}