:root{
  --ink:#070B14; --ink2:#0C1220;
  --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.09);
  --cyan:#22D3EE; --indigo:#4F46E5; --violet:#A855F7;
  --tx:#E9EDF8; --mut:#8D97B0;
  --grad:linear-gradient(115deg,#22D3EE 0%,#4F46E5 52%,#A855F7 100%);
  --sans:"Noto Sans Arabic","Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --latin:"Space Grotesk","Noto Sans Arabic",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--tx); font-family:var(--sans);
  line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 520px at 12% -8%, rgba(34,211,238,.18), transparent 65%),
    radial-gradient(680px 520px at 88% 4%, rgba(168,85,247,.16), transparent 62%),
    radial-gradient(900px 600px at 50% 100%, rgba(79,70,229,.14), transparent 70%);
}
.wrap{width:min(1160px,92vw); margin-inline:auto; position:relative; z-index:1}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(16px);
  background:rgba(7,11,20,.66); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0}
.nav-logo{height:38px; width:auto; display:block}
.nav-tag{font-size:12.5px; color:var(--mut); letter-spacing:.02em;
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; white-space:nowrap}

.hero{padding:78px 0 40px}
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px}
h1{font-size:clamp(34px,5.2vw,62px); line-height:1.24; font-weight:700; letter-spacing:-.01em}
.lede{margin-top:22px; max-width:62ch; color:var(--mut); font-size:16.5px}
.lede b{color:#E9EDF8; font-weight:600}

.hero-card{margin-top:44px; border:1px solid var(--line); border-radius:26px; padding:46px 40px;
  background:#fff; box-shadow:0 40px 90px -50px rgba(34,211,238,.55);
  display:flex; justify-content:center; animation:fadeUp .8s ease both}
.hero-card img{width:min(620px,100%); height:auto; display:block}

section{padding:56px 0}
h2{font-size:clamp(22px,3vw,30px); font-weight:700; margin-bottom:26px; letter-spacing:-.01em}
h2::after{content:""; display:block; width:52px; height:3px; border-radius:3px; background:var(--grad); margin-top:14px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px}
.card{border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s}
.card:hover{transform:translateY(-4px); border-color:rgba(34,211,238,.34);
  box-shadow:0 24px 50px -30px rgba(79,70,229,.6)}
.stage{display:flex; align-items:center; justify-content:center; padding:30px 24px; min-height:170px}
.stage img{max-width:100%; height:auto; max-height:96px; display:block}
.stage.light{background:#fff}
.stage.light img{max-height:84px}
.stage.dark{background:var(--ink2)}
.stage.check{background:
  linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.05) 75%) 0 0/22px 22px,
  linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.05) 75%) 11px 11px/22px 22px,
  var(--ink2)}
.stage.check img{max-height:120px}
.card h3{font-size:15.5px; font-weight:600; padding:16px 20px 0}
.card p{font-size:13.5px; color:var(--mut); padding:4px 20px 20px; line-height:1.6}

.palette{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px}
.sw{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card)}
.sw i{display:block; height:86px}
.sw div{padding:12px 14px}
.sw strong{display:block; font-size:13.5px; font-family:var(--latin)}
.sw span{font-size:12px; color:var(--mut); font-family:var(--latin); letter-spacing:.04em}

.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.rule{border:1px solid var(--line); border-radius:18px; padding:22px 22px; background:var(--card)}
.rule h4{font-size:14.5px; font-weight:600; margin-bottom:8px}
.rule p{font-size:13.5px; color:var(--mut); line-height:1.7}
.rule .num{font-family:var(--latin); font-size:12px; color:var(--cyan); letter-spacing:.16em; display:block; margin-bottom:10px}

.files{display:flex; flex-wrap:wrap; gap:10px}
.files a{font-family:var(--latin); font-size:12.5px; color:var(--tx); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  transition:border-color .25s, background .25s, transform .25s}
.files a:hover{border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.08); transform:translateY(-2px)}

footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 0 46px;
  color:var(--mut); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}

@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}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}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
@media (max-width:640px){
  .nav-in{padding:12px 0} .nav-logo{height:30px} .nav-tag{display:none}
  .hero{padding:46px 0 24px} .hero-card{padding:26px 18px; border-radius:18px}
  .stage{min-height:140px; padding:22px 16px}
}