:root{
  --bg:#0b1220; --fg:#e2e8f0; --muted:#94a3b8;
  --primary:#22d3ee; --accent:#a78bfa; --line:#1e293b;
  --card:#0f172a; --ring:rgba(34,211,238,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto}
body{background:
  radial-gradient(1200px 600px at 10% -10%, rgba(167,139,250,.15), transparent 60%),
  radial-gradient(1000px 500px at 120% 10%, rgba(34,211,238,.12), transparent 60%),
  var(--bg); color:var(--fg)}
.container{width:min(1150px,92%);margin-inline:auto}
.hero{padding:5rem 0 2rem;text-align:center}
.hero .logo{width:64px;height:64px;margin:0 auto 1rem;border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--accent));display:grid;place-items:center;
  color:#0b1220;font-weight:900;box-shadow:0 10px 24px rgba(167,139,250,.25)}
.hero h1{margin:.2rem 0;font-size:clamp(2rem,3vw,3rem)}
.hero p{color:var(--muted);max-width:820px;margin:.6rem auto 0;line-height:1.9}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin:2rem auto;max-width:900px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:1.1rem;padding:1.2rem;box-shadow:0 8px 18px rgba(2,6,23,.5)}
.card h3{margin:.2rem 0 .5rem}
.card p{color:var(--muted)}
.btn{display:inline-block;margin-top:.9rem;background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#0b1220;text-decoration:none;padding:.85rem 1.2rem;border-radius:1rem;font-weight:800}
.footer{padding:2rem 0;text-align:center;border-top:1px solid var(--line);color:#a1a1aa}