:root{
  --bg-0:#0a0f14; --card:#0e151d; --text:#d7f9ff; --accent:#35f2dc; --muted:#93cdd3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter, sans-serif;
  background:radial-gradient(1200px 800px at 50% 15%, #0e1722 0%, var(--bg-0) 55%, #05080b 100%);
  color:var(--text);
}
.navbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:center;gap:32px;
  padding:14px;
  background:rgba(12,18,25,.8);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(122,252,239,.2);
}
.navbar a{color:#aefdf3;text-decoration:none;font-weight:600;text-shadow:0 0 6px rgba(53,242,220,.3)}
.navbar a:hover,.navbar a.active{color:#fff;text-shadow:0 0 10px rgba(53,242,220,.6)}

.wrapper{max-width:1180px;margin:0 auto;padding:100px 28px 80px}
.section-title{text-align:center;margin:26px 0 18px;color:#86f6ea;font-weight:800;text-shadow:0 0 12px rgba(53,242,220,.35)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.card{
  background:linear-gradient(180deg,var(--card),#0b1219);
  border:1px solid rgba(122,252,239,.18);
  border-radius:14px;padding:20px;
  box-shadow:inset 0 0 0 1px rgba(40,255,230,.05);
}
.card h3{color:#a9fff4;text-shadow:0 0 8px rgba(53,242,220,.28)}
.card p{color:var(--muted)}