:root{
  --bg:#0F172A; --bg-2:#080D18; --muted:#201A32;
  --pink:#EC4899; --pink-2:#DB2777; --blue:#2563EB;
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.62);
  --border:rgba(255,255,255,.08);
  --font:'Tajawal','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:var(--font); color:var(--fg); background:var(--bg);
  background-image:radial-gradient(1200px 600px at 50% -10%, #1b2440 0%, transparent 60%),
                   linear-gradient(180deg,#0F172A,#080D18 70%);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.aurora{
  position:fixed; inset:-20% -10% auto -10%; height:70vh; pointer-events:none;
  background:radial-gradient(closest-side,rgba(236,72,153,.22),transparent 70%),
             radial-gradient(closest-side,rgba(37,99,235,.18),transparent 70%);
  background-position:20% 0,80% 10%; background-size:60% 100%,55% 100%;
  background-repeat:no-repeat; filter:blur(20px); z-index:0;
}
.nav{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,5vw,48px); gap:12px;
  background:rgba(15,23,42,.55); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;letter-spacing:.01em;font-size:15px;direction:ltr}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
main{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:clamp(28px,6vw,64px) 16px}
.hero{width:100%;max-width:760px;text-align:center}
.eyebrow{color:var(--fg-2);font-size:13px;letter-spacing:.04em}
h1{margin:10px 0 0;font-size:clamp(28px,6vw,46px);line-height:1.25;font-weight:700}
h1 span{background:linear-gradient(90deg,var(--pink),#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:12px auto 0;max-width:460px;color:var(--fg-2);font-size:15px;line-height:1.8}
.player{
  position:relative; margin:26px auto 0; width:min(360px,86vw);
  border-radius:22px; overflow:hidden; background:#000;
  border:1px solid var(--border);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(236,72,153,.12);
  transition:transform .35s ease, box-shadow .35s ease;
}
.player:hover{transform:translateY(-3px);box-shadow:0 40px 90px -30px rgba(236,72,153,.35)}
.player video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.glow{
  position:absolute;inset:auto 0 -40px 0;height:80px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(236,72,153,.45),transparent);
  filter:blur(24px);opacity:.5;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;
  border-radius:12px;padding:12px 18px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-2));border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px -12px rgba(236,72,153,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(236,72,153,.9)}
.btn-ghost{color:var(--fg);background:rgba(255,255,255,.05);border:1px solid var(--border);backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.09)}
.btn-primary:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.facts{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:30px auto 0;max-width:560px;
}
.facts li{
  display:flex;flex-direction:column;gap:4px;padding:12px 8px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);backdrop-filter:blur(12px);
  transition:transform .25s ease,background .25s ease;
}
.facts li:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}
.facts strong{font-size:15px;font-weight:600;direction:ltr;font-family:Inter,var(--font)}
.facts span{font-size:11.5px;color:var(--fg-2)}
footer{
  position:relative;z-index:1;text-align:center;padding:18px 16px 26px;
  font-size:12px;color:rgba(255,255,255,.38);direction:ltr;font-family:Inter,var(--font);
}
@media (max-width:520px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .actions{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-ghost{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero>*{animation:fadeUp .7s ease both}
.hero>*:nth-child(2){animation-delay:.06s}
.hero>*:nth-child(3){animation-delay:.12s}
.hero>*:nth-child(4){animation-delay:.18s}
.hero>*:nth-child(5){animation-delay:.24s}
.hero>*:nth-child(6){animation-delay:.3s}