:root{--ink:#0A0A0F;--maroon:#B91C4B;--white:#fff;--grey:#D4D4D8;--mute:#A1A1AA;--line:#3F3F46}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ink);color:var(--white);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;min-height:100svh;-webkit-font-smoothing:antialiased}
#field{position:fixed;inset:0;width:100%;height:100%;display:block}
.haze{position:fixed;inset:-20%;pointer-events:none;background:
 radial-gradient(40% 35% at 30% 40%,rgba(185,28,75,.20),transparent 70%),
 radial-gradient(35% 30% at 72% 62%,rgba(138,21,56,.18),transparent 70%);
 animation:drift 28s ease-in-out infinite alternate;filter:blur(20px)}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(75% 65% at 50% 48%,transparent 40%,rgba(10,10,15,.85) 100%)}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}
.stage{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 16px 40px}
.lockup{width:min(440px,78vw);height:auto;animation:rise 1.6s .2s cubic-bezier(.2,.7,.2,1) backwards}
.signal{width:1px;height:64px;margin:28px 0 22px;background:linear-gradient(var(--line),transparent);position:relative;animation:fade 1.2s .9s backwards}
.signal i{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--maroon);box-shadow:0 0 14px 3px rgba(185,28,75,.7);animation:fall 3.6s 1.6s ease-in-out infinite}
@keyframes fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(60px);opacity:0}}
.kicker{font:600 13px/1 'Inter',sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;padding-left:.42em;animation:rise 1.2s 1.1s backwards}
.line-en{font:700 clamp(28px,5.2vw,52px)/1.1 'Space Grotesk','Cairo',sans-serif;letter-spacing:-.02em;max-width:18ch;animation:rise 1.2s 1.3s backwards;text-wrap:balance}
.sub-en{font:400 clamp(16px,2vw,19px)/1.5 'Inter',sans-serif;color:var(--mute);margin-top:14px;animation:rise 1.2s 1.5s backwards}
.ar{margin-top:34px;padding-top:30px;position:relative;width:min(420px,100%);animation:rise 1.2s 1.8s backwards;font-family:'Cairo',sans-serif}
.ar::before{content:"";position:absolute;top:0;left:50%;width:44px;height:2px;margin-left:-22px;background:var(--maroon)}
.kicker-ar{font:600 15px/1.4 'Cairo',sans-serif;letter-spacing:0;color:var(--grey);margin-bottom:6px}
.line-ar{font:700 clamp(22px,3.6vw,34px)/1.4 'Cairo',sans-serif;letter-spacing:0}
.sub-ar{font:400 clamp(16px,2vw,19px)/1.6 'Cairo',sans-serif;color:var(--mute);letter-spacing:0}
.contact{margin-top:40px;font:500 14px/1.4 'Inter',sans-serif;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;animation:rise 1.2s 2.1s backwards}
.contact a{color:var(--grey);text-decoration:none;padding:10px 4px;border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.contact a:hover,.contact a:focus-visible{color:var(--white);border-color:var(--maroon)}
.contact a:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.dot{width:3px;height:3px;border-radius:50%;background:var(--maroon)}
.foot{position:relative;z-index:3;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:2px;border-top:1px solid rgba(63,63,70,.55);background:rgba(10,10,15,.85);font-size:11px;color:var(--mute)}
.name-en{font:500 11px/1.4 'Inter',sans-serif;letter-spacing:.14em}
.name-ar{font:400 12px/1.5 'Cairo',sans-serif;letter-spacing:0}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}}
@media (max-width:520px){.signal{height:44px;margin:22px 0 18px}.kicker{letter-spacing:.34em}.ar{margin-top:26px;padding-top:24px}.contact{margin-top:30px}}
@media (max-height:620px){.signal{height:30px;margin:16px 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.lockup,.signal,.kicker,.line-en,.sub-en,.ar,.contact{opacity:1}.signal i{display:none}}

.apps{width:min(980px,100%);margin-top:44px;animation:rise 1.2s 1.9s backwards}
.grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;height:100%;padding:26px 22px 24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(24,24,30,.78),rgba(12,12,17,.78));text-decoration:none;color:inherit;transition:border-color .3s,transform .3s,box-shadow .3s}
.card:hover{border-color:rgba(185,28,75,.7);box-shadow:0 0 36px -10px rgba(185,28,75,.55)}
a.card:hover{transform:translateY(-3px)}
a.card:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.idx{position:absolute;top:14px;left:18px;font:500 11px/1 'Space Grotesk',sans-serif;letter-spacing:.2em;color:var(--mute)}
.badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 12px;border:1px solid rgba(185,28,75,.65);border-radius:999px;font:600 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.badge [lang=ar]{font:600 12px/1 'Cairo',sans-serif;letter-spacing:0;text-transform:none}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--maroon);box-shadow:0 0 8px var(--maroon);order:-1}
.badge .sep{width:1px;height:10px;background:var(--line)}
.n-en{font:700 22px/1.2 'Space Grotesk','Cairo',sans-serif;letter-spacing:-.01em}
.n-ar{font:700 18px/1.5 'Cairo',sans-serif;letter-spacing:0;color:var(--grey);margin-top:2px}
.d-en{font:400 14.5px/1.5 'Inter',sans-serif;color:var(--mute);margin-top:12px;max-width:30ch}
.d-ar{font:400 15px/1.7 'Cairo',sans-serif;color:var(--mute);margin-top:8px;max-width:30ch;letter-spacing:0}
.slot{border-style:dashed;background:rgba(10,10,15,.35);justify-content:center}
.plus{position:relative;width:30px;height:30px;margin-bottom:16px;border:1px solid var(--line);border-radius:50%}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--maroon);transform:translate(-50%,-50%)}
.plus::before{width:12px;height:1.5px}.plus::after{width:1.5px;height:12px}
@media (max-width:860px){.grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}.apps{margin-top:34px}}
@media (prefers-reduced-motion:reduce){.apps{animation:none}.card{transition:none}}