:root{--ink:#fff;--slate:#94A3B8;--ice:#93C5FD;--gold:#F59E0B;--glass:rgba(15,23,42,.6);--rim:rgba(255,255,255,.1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#050814;color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ice);text-decoration:none}a:hover{color:var(--gold)}
.page{position:relative;min-height:100vh;overflow:hidden;background:linear-gradient(to bottom,#050814,#0B132B 50%,#1C2541)}
#stars{position:absolute;left:0;right:0;top:0;height:2400px;pointer-events:none}
#stars i{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d) ease-in-out var(--delay) infinite}
.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 24px}
nav.top{display:flex;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:28px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand:hover{color:#fff}
.brand img{width:40px;height:40px;object-fit:contain}.brand span{font-size:18px;font-weight:500;letter-spacing:.08em}
.navlinks{display:flex;align-items:center;gap:22px;font-size:14px}
.navlinks a{color:var(--slate)}.navlinks a:hover{color:#fff}
.ar{font-family:Amiri,serif;color:var(--ice);font-size:26px}
.hero{text-align:center;padding-top:72px}
h1{font-size:clamp(40px,7vw,76px);font-weight:300;letter-spacing:.06em;line-height:1.08;margin:0 0 24px}
.lede{max-width:672px;margin:0 auto 40px;font-size:18px;line-height:1.65;color:var(--slate);text-wrap:pretty}
.ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{cursor:pointer;display:inline-block;font:500 15px Inter,sans-serif;color:#fff;padding:16px 32px;border-radius:999px;border:1px solid rgba(245,158,11,.45);background:linear-gradient(to bottom,rgba(147,197,253,.18),rgba(245,158,11,.14));box-shadow:inset 0 0 22px rgba(245,158,11,.22),0 0 36px rgba(245,158,11,.18);transition:box-shadow .3s}
.btn:hover{color:#fff;box-shadow:inset 0 0 28px rgba(245,158,11,.38),0 0 52px rgba(245,158,11,.32)}
.btn.ghost{font-weight:400;color:var(--slate);border:1px solid var(--rim);background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:none}
.btn.ghost:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.stage{position:relative;height:640px;margin-top:72px;perspective:1400px}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stage svg g.pt{animation:breathe var(--d) ease-in-out var(--delay) infinite}
.phone-wrap{position:absolute;left:50%;top:0;margin-left:-160px;width:320px;height:640px;animation:drift 8s ease-in-out infinite}
.phone{width:320px;height:640px;border-radius:52px;padding:10px;background:var(--glass);border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 120px rgba(59,92,255,.35),0 0 80px rgba(147,197,253,.12);transform:rotateY(-14deg) rotateX(6deg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.screen{width:100%;height:100%;border-radius:42px;background:linear-gradient(to bottom,#050814,#0B132B 60%,#1C2541);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:56px 24px 0}
.notch{position:absolute;top:12px;left:50%;margin-left:-44px;width:88px;height:24px;border-radius:12px;background:#000}
.screen .cap{font-size:11px;letter-spacing:.2em;color:var(--slate)}
.screen .verse{font-family:Amiri,serif;font-size:34px;line-height:2.1;direction:rtl;margin-top:48px;text-align:center}
.screen .tr{margin-top:20px;font-size:13px;color:var(--slate);line-height:1.6;text-align:center}
.screen .pill{position:absolute;bottom:36px;left:24px;right:24px;height:56px;border-radius:28px;background:var(--glass);border:1px solid var(--rim);display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--slate)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;margin-top:80px}
.card{min-width:0;padding:36px;border-radius:28px;background:var(--glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--rim);transition:all .4s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25);box-shadow:0 20px 80px rgba(245,158,11,.18)}
.card.indigo:hover{box-shadow:0 20px 80px rgba(99,102,241,.25)}
.tall{min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.wide{grid-column:span 2}.full{grid-column:1/-1}
.card h3{margin:0 0 8px;font-size:22px;font-weight:500}.card.wide h3{font-size:26px}
.card p{margin:0;color:var(--slate);line-height:1.6;max-width:460px}
.card .big{font-family:Amiri,serif;font-size:44px;direction:rtl;text-align:center;line-height:1.6}
.audio{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.audio .txt{flex:1 1 280px}.bars{flex:2 1 320px;display:flex;align-items:center;gap:4px;height:80px}
.bars i{flex:1;border-radius:3px;transform-origin:center;animation:wave var(--d) ease-in-out var(--delay) infinite}
.cta{margin-top:96px;padding-bottom:40px}
.banner{padding:56px 40px;border-radius:32px;background:var(--glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--rim);text-align:center;box-shadow:0 0 120px rgba(245,158,11,.08)}
.banner h2{margin:0 0 12px;font-size:clamp(28px,4vw,42px);font-weight:300;letter-spacing:.04em}
.banner p{margin:0 auto 28px;color:var(--slate);max-width:520px;line-height:1.6}
.form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.form input{width:320px;max-width:100%;padding:16px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font:400 15px Inter,sans-serif;outline:none}
.form input:focus{border-color:var(--ice)}.form .btn{padding:16px 28px}
.note{margin-top:14px!important;font-size:12.5px;color:#64748B!important}
footer{position:relative;z-index:2;border-top:1px solid var(--rim);padding:28px 0 44px;color:#64748B;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--slate);margin-left:18px}footer a:first-child{margin-left:0}footer a:hover{color:#fff}
/* document pages */
.doc{max-width:760px;padding-top:40px;padding-bottom:80px}
.doc h1{font-size:clamp(34px,5vw,52px);letter-spacing:.03em;margin-bottom:10px}
.doc .meta{color:#64748B;font-size:13px;margin-bottom:36px}
.doc .panel{padding:36px 40px;border-radius:28px;background:var(--glass);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--rim)}
.doc h2{font-size:20px;font-weight:500;margin:34px 0 10px;letter-spacing:.01em}.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:#B6C2D4;line-height:1.75;font-size:15.5px}
.doc ul{padding-left:20px}.doc li{margin:6px 0}
.doc strong{color:#fff;font-weight:500}
.draft{margin:0 0 22px;padding:12px 16px;border-radius:14px;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);color:#F5D9A6;font-size:13.5px;line-height:1.6}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.9}}
@keyframes wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media(max-width:720px){
  .navlinks a{display:none}.wide{grid-column:auto}.card{padding:28px}.stage svg{display:none}
  .banner{padding:40px 22px}.doc .panel{padding:26px 22px}.hero{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}