:root{
  --bg-dark:#0b1220;
  --bg-light:#101a2e;
  --primary:#2dd4ff;
  --accent:#6366f1;
  --text:#e5e7eb;
  --muted:#9ca3af;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Segoe UI, Inter, Arial, sans-serif;
  background:radial-gradient(circle at top,var(--bg-light),var(--bg-dark));
  color:var(--text);
}
a{text-decoration:none;color:var(--primary)}
header{
  background:rgba(11,18,32,.9);
  backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:100;
}
.container{width:90%;max-width:1200px;margin:auto}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.nav img{height:56px}
.nav a{margin-left:20px;color:var(--text)}
.hero{min-height:90vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{font-size:3rem}
.tagline{color:var(--primary);font-size:1.2rem;margin:1rem 0}
.hero p{color:var(--muted);font-size:1.05rem}
.section{padding:5rem 0}
.section h2{font-size:2.3rem;margin-bottom:1.5rem}
.section p{font-size:1.05rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:2.2rem;
  transition:.25s;
}
.card:hover{transform:translateY(-6px);border-color:var(--primary)}
.card h3{color:var(--primary)}
footer{
  background:#060b16;
  border-top:1px solid rgba(255,255,255,.05);
  padding:3rem 0;
  text-align:center;
  color:var(--muted);
}