body {
  margin:0;
  font-family: system-ui, sans-serif;
  background:#0b0f14;
  color:#e7ebf2;
}

.hero {
  position:relative;
  padding:4rem 1rem 3rem;
  background: linear-gradient(135deg,#1b2a3a,#0b0f14);
}

.hero-overlay {
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(90,169,255,.25), transparent 60%);
}

.hero-inner {
  position:relative;
  text-align:center;
}

.subhero {
  padding:2.5rem 1rem 2rem;
  background:#121a24;
  text-align:center;
}

.nav {
  margin-top:1rem;
  display:flex;
  justify-content:center;
  gap:1rem;
}

.nav a {
  color:#a7afbd;
  text-decoration:none;
}

.nav a.active {
  color:#5aa9ff;
}

.container {
  max-width:1100px;
  margin:0 auto;
  padding:2rem 1rem;
}

h2 {
  border-left:4px solid #5aa9ff;
  padding-left:.6rem;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
  margin:1.5rem 0 3rem;
}

.card {
  background:#141b25;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1.4rem;
}

.card img {
  width:52px;
  height:52px;
}

.card a {
  display:inline-block;
  margin-top:.6rem;
  color:#5aa9ff;
  text-decoration:none;
}

.callout {
  background:#111926;
  border-left:4px solid #5aa9ff;
  padding:1.2rem;
  border-radius:10px;
}

.table {
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 2rem;
}

.table th, .table td {
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:.6rem;
  text-align:left;
}

.note {
  color:#a7afbd;
  font-size:.9rem;
}

footer {
  text-align:center;
  padding:2rem;
  color:#a7afbd;
  font-size:.85rem;
}