:root{--navy:#071426;--navy-2:#0a1b30;--gold:#d9b76e;--gold-light:#f0d794;--pearl:#f4f1e8;--muted:#aeb7c4;--line:rgba(217,183,110,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:var(--navy);color:var(--pearl);font-family:"Noto Sans Arabic",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(circle at 78% 48%,rgba(32,66,96,.35),transparent 33%),linear-gradient(135deg,#061221 0%,#08182b 50%,#061321 100%)}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.3}.orb-one{width:340px;height:340px;left:-130px;top:25%;border:1px solid var(--line)}.orb-two{width:12px;height:12px;background:var(--gold);left:12%;top:20%;box-shadow:0 0 30px var(--gold);animation:drift 7s ease-in-out infinite}.orb-three{width:6px;height:6px;background:var(--pearl);right:42%;top:16%;animation:drift 5s 1s ease-in-out infinite}
.site-header,main,footer{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.site-header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;align-items:center;gap:12px}.brand-name{font:600 1.3rem "Noto Kufi Arabic";letter-spacing:2px}.brand-mark{position:relative;width:32px;height:32px;display:flex;gap:3px;align-items:flex-end}.brand-mark i{display:block;width:7px;background:var(--gold);transform:skew(-14deg);border-radius:1px}.brand-mark i:nth-child(1){height:16px}.brand-mark i:nth-child(2){height:25px}.brand-mark i:nth-child(3){height:11px}
.status-pill{font-size:.78rem;color:#c7ced8;border:1px solid rgba(255,255,255,.1);padding:8px 13px;border-radius:40px;background:rgba(255,255,255,.025);display:flex;align-items:center;gap:8px}.status-pill span{width:7px;height:7px;border-radius:50%;background:#70d6a0;box-shadow:0 0 0 5px rgba(112,214,160,.1);animation:pulse 2s infinite}
.hero{min-height:calc(100vh - 108px);display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:60px;padding:70px 0 85px}.eyebrow{color:var(--gold);display:flex;align-items:center;gap:14px;font-size:.78rem;letter-spacing:.7px;margin-bottom:26px}.eyebrow i{height:1px;width:58px;background:linear-gradient(to left,var(--gold),transparent)}
h1{font:600 clamp(2.7rem,5vw,5.2rem)/1.42 "Noto Kufi Arabic";letter-spacing:-3px;max-width:740px}h1 em{font-style:normal;color:var(--gold-light);font-weight:500}
.lead{color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);line-height:2.05;max-width:610px;margin-top:25px}
.progress-wrap{max-width:570px;margin-top:42px}.progress-label,.progress-notes{display:flex;justify-content:space-between}.progress-label{align-items:center;font-size:.82rem;margin-bottom:12px}.progress-label strong{font:500 1rem sans-serif;color:var(--gold)}.progress-track{height:3px;background:rgba(255,255,255,.09);position:relative;overflow:visible}.progress-track span{display:block;width:0;height:100%;background:linear-gradient(to left,var(--gold-light),#a17a31);box-shadow:0 0 14px rgba(217,183,110,.5);transition:width 1.6s cubic-bezier(.2,.75,.2,1)}.progress-track span:after{content:"";position:absolute;left:22%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--gold-light);transform:translate(-50%,-50%);box-shadow:0 0 0 5px rgba(217,183,110,.12)}.progress-notes{margin-top:12px;color:#687789;font-size:.69rem}
.actions{display:flex;align-items:center;gap:32px;margin-top:35px}.primary-btn{display:flex;align-items:center;justify-content:space-between;gap:38px;color:#0b1826;background:var(--gold-light);padding:14px 20px;border:1px solid var(--gold-light);min-width:170px;font-weight:600;font-size:.85rem;transition:.3s}.primary-btn:hover{background:transparent;color:var(--gold-light);transform:translateY(-3px)}.primary-btn b{font:400 1.2rem sans-serif}.text-link{font-size:.82rem;color:#c9d0d8;transition:.3s}.text-link span{color:var(--gold);padding-right:8px}.text-link:hover{color:var(--gold)}
.visual{position:relative;aspect-ratio:1;display:grid;place-items:center;max-width:540px;margin-inline:auto;perspective:1100px}.visual:before{content:"";position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,rgba(217,183,110,.13),rgba(24,58,89,.08) 43%,transparent 70%);animation:pulseGlow 4s infinite}.halo{position:absolute;border-radius:50%;border:1px solid rgba(217,183,110,.14)}.halo-one{width:92%;height:92%;animation:spin 30s linear infinite}.halo-two{width:72%;height:72%;border-style:dashed;animation:spin 22s linear infinite reverse}.halo:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 17px var(--gold);top:16%;left:14%}.halo-two:after{top:auto;left:auto;right:8%;bottom:24%;width:4px;height:4px}.spark{position:absolute;border-radius:50%;background:var(--pearl);box-shadow:0 0 12px var(--pearl);animation:twinkle 2.4s ease-in-out infinite}.spark-one{width:3px;height:3px;top:9%;right:27%}.spark-two{width:5px;height:5px;bottom:10%;left:18%;animation-delay:-.9s}.spark-three{width:3px;height:3px;top:28%;left:2%;animation-delay:-1.6s}
.browser-card{position:relative;width:78%;height:57%;border:1px solid rgba(255,255,255,.17);border-radius:16px;background:linear-gradient(145deg,rgba(16,39,62,.94),rgba(7,22,39,.88));box-shadow:0 35px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08),0 0 50px rgba(217,183,110,.05);backdrop-filter:blur(18px);overflow:hidden;transform:rotateY(-8deg) rotateX(5deg);animation:browserFloat 6s ease-in-out infinite;transition:translate .2s ease}.browser-top{height:17%;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 13px;direction:ltr;gap:12px}.browser-dots{display:flex;gap:5px}.browser-dots i{width:5px;height:5px;border-radius:50%;background:#526276}.browser-dots i:first-child{background:var(--gold)}.browser-address{height:6px;flex:1;border-radius:8px;background:rgba(255,255,255,.055);overflow:hidden}.browser-address span{display:block;height:100%;width:38%;background:linear-gradient(90deg,transparent,rgba(217,183,110,.32),transparent);animation:addressLoad 3s infinite}.browser-menu{color:#637286;font:11px sans-serif;letter-spacing:1px}.browser-body{height:83%;display:flex;direction:ltr}.browser-body aside{width:17%;border-right:1px solid rgba(255,255,255,.07);padding:15px 9px;display:flex;flex-direction:column;align-items:center;gap:12px}.browser-body aside b{width:18px;height:18px;transform:rotate(45deg);border:1px solid var(--gold);margin-bottom:4px}.browser-body aside i{width:45%;height:3px;background:rgba(255,255,255,.09);border-radius:4px}.browser-body aside i:nth-child(3){background:var(--gold);box-shadow:0 0 8px rgba(217,183,110,.5)}.page-preview{position:relative;flex:1;padding:16px 18px;overflow:hidden}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.preview-head span{width:28%;height:4px;background:rgba(244,241,232,.55);border-radius:4px}.preview-head i{width:18%;height:11px;border:1px solid rgba(217,183,110,.4);border-radius:8px}.preview-title b{display:block;height:7px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:4px;margin-bottom:7px}.preview-title b:first-child{width:64%}.preview-title b:nth-child(2){width:43%;opacity:.75}.preview-title span{display:block;width:72%;height:3px;background:rgba(255,255,255,.1);margin-top:11px}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:22px}.preview-grid i{position:relative;height:48px;border:1px solid rgba(255,255,255,.08);border-radius:5px;background:rgba(255,255,255,.025);overflow:hidden}.preview-grid i:before{content:"";position:absolute;inset:7px 7px 17px;background:linear-gradient(135deg,rgba(217,183,110,.16),rgba(42,78,107,.25));border-radius:3px}.preview-grid span{position:absolute;bottom:7px;left:7px;width:48%;height:3px;background:rgba(255,255,255,.16)}.code-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.32}.line-one{width:48%;right:-12%;top:31%;transform:rotate(-45deg)}.line-two{width:38%;left:-7%;bottom:20%;transform:rotate(35deg)}.scan-line{position:absolute;top:17%;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,215,148,.8),transparent);box-shadow:0 0 12px var(--gold);animation:scan 4s ease-in-out infinite}.cursor{position:absolute;left:56%;top:54%;width:12px;height:17px;background:var(--pearl);clip-path:polygon(0 0,100% 73%,57% 72%,39% 100%);filter:drop-shadow(0 0 5px rgba(255,255,255,.7));animation:cursorMove 5s ease-in-out infinite}.cursor span{position:absolute;right:-50px;top:14px;background:var(--gold-light);color:#091728;font:600 7px "Noto Sans Arabic";padding:3px 7px;border-radius:6px;clip-path:none;white-space:nowrap}
.mini-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,.13);background:rgba(9,27,46,.86);backdrop-filter:blur(12px);box-shadow:0 15px 35px rgba(0,0,0,.28);border-radius:10px;animation:float 4s ease-in-out infinite}.mini-card small,.mini-card strong{display:block}.mini-card small{font-size:.57rem;color:#8290a0;margin-bottom:2px}.mini-card strong{font:500 .68rem "Noto Sans Arabic";color:var(--pearl)}.speed-card{top:15%;right:0;direction:ltr}.speed-card strong{color:var(--gold-light);font-family:sans-serif}.mini-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:rgba(217,183,110,.12);color:var(--gold)}.speed-card>i{position:absolute;left:10px;bottom:7px;width:28px;height:10px;border-bottom:1px solid var(--gold);transform:skewY(-18deg);opacity:.45}.design-card{bottom:12%;left:0;animation-delay:-2s}.check{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:rgba(112,214,160,.12);color:#70d6a0;font:12px sans-serif}
.updates{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.updates article{padding:35px;display:flex;gap:20px}.updates article+article{border-right:1px solid rgba(255,255,255,.08)}.updates article>span{font:400 .68rem sans-serif;color:var(--gold);margin-top:7px}.updates h2{font:500 .96rem "Noto Kufi Arabic";margin-bottom:9px}.updates p{color:#7f8d9d;font-size:.78rem}
footer{padding:30px 0 38px;display:flex;justify-content:flex-start;color:#667486;font-size:.7rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{50%{transform:translateY(22px)}}@keyframes float{50%{transform:translateY(-10px)}}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(112,214,160,0)}}@keyframes pulseGlow{50%{transform:scale(1.12);opacity:.55}}@keyframes browserFloat{50%{transform:rotateY(-4deg) rotateX(2deg) translateY(-13px)}}@keyframes scan{0%,12%{top:17%;opacity:0}30%{opacity:1}75%{top:100%;opacity:.7}100%{top:100%;opacity:0}}@keyframes cursorMove{0%,15%{left:72%;top:72%}42%{left:52%;top:38%}65%{left:40%;top:65%}100%{left:72%;top:72%}}@keyframes addressLoad{from{transform:translateX(-120%)}to{transform:translateX(300%)}}@keyframes twinkle{50%{opacity:.2;transform:scale(.5)}}
@media(max-width:850px){.site-header,main,footer{width:min(100% - 30px,680px)}.site-header{height:85px}.hero{grid-template-columns:1fr;padding:60px 0 40px;gap:40px}.hero-copy{text-align:center}.eyebrow,.actions{justify-content:center}.lead,.progress-wrap{margin-inline:auto}.visual{width:min(100%,430px)}.updates{grid-template-columns:1fr}.updates article+article{border-right:0;border-top:1px solid rgba(255,255,255,.08)}h1{letter-spacing:-2px}}
@media(max-width:520px){h1{font-size:2.35rem;letter-spacing:-1.5px}.lead{font-size:.94rem}.actions{flex-direction:column;gap:20px}.visual{width:330px;max-width:100%}.floating-tag{font-size:.58rem}.updates article{padding:25px 12px}footer{align-items:center;gap:18px;flex-direction:column}.status-pill{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
.cursor{background:none;clip-path:none}
.cursor:before{content:"";position:absolute;inset:0;background:var(--pearl);clip-path:polygon(0 0,100% 73%,57% 72%,39% 100%)}
.cursor span{right:-43px;clip-path:none}
.goal-track:before{content:"";position:absolute;inset:-4px 0;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.08) 29px 30px);opacity:.35}
.goal-track>span{position:relative}
.goal-track>span:after{display:none}
.moving-arrow{position:absolute;left:-12px;top:50%;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--gold-light);color:#0a1929;font:700 14px sans-serif;font-style:normal;transform:translateY(-50%);box-shadow:0 0 0 6px rgba(217,183,110,.12),0 0 22px rgba(217,183,110,.55);animation:goalPulse 1.8s ease-in-out infinite}
.moving-arrow:after{content:"";position:absolute;right:22px;width:28px;height:1px;background:linear-gradient(to right,var(--gold),transparent);opacity:.7}
.goal-point{position:absolute;left:-2px;top:50%;width:26px;height:26px;border:1px solid rgba(217,183,110,.45);border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.goal-point:before,.goal-point:after,.goal-point i{content:"";position:absolute;border:1px solid var(--gold);border-radius:50%}
.goal-point:before{inset:5px}.goal-point:after{inset:10px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.goal-point i{inset:-7px;border-color:rgba(217,183,110,.12);animation:targetWave 2.2s ease-out infinite}
.progress-notes{margin-top:15px}.goal-label{color:var(--gold)}
@keyframes goalPulse{50%{box-shadow:0 0 0 10px rgba(217,183,110,0),0 0 30px rgba(217,183,110,.8);transform:translateY(-50%) scale(1.06)}}
@keyframes targetWave{to{inset:-15px;opacity:0}}