:root{
  --brand:#1f2d3d;
  --accent:#18BC9C;
  --bg:#0b1220;
  --bg2:#0f1b33;
  --card:#ffffff;
  --muted:#6c757d;
  --border:rgba(0,0,0,.08);
  --shadow:0 14px 40px rgba(0,0,0,.08);
  --radius:18px;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hero{
  background: radial-gradient(1200px 600px at 20% 10%, var(--bg2), var(--bg));
  color:#fff;
  padding: 4.25rem 0 3.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero h1{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: .75rem;
}

.hero p.lead{
  max-width: 68ch;
  color: rgba(255,255,255,.78);
  font-size: 1.1rem;
}

.pills{
  margin-top: 1rem;
}

.pill{
  display:inline-block;
  padding:.35rem .75rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  margin:.25rem .4rem .25rem 0;
  font-size:.9rem;
  color: rgba(255,255,255,.86);
}

.btnx{
  display:inline-block;
  padding:.7rem 1.05rem;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  border:1px solid transparent;
}

.btnx-primary{
  background: var(--accent);
  border-color: var(--accent);
  color:#062f2a;
}

.btnx-ghost{
  border-color: rgba(255,255,255,.22);
  color:#fff;
}

.btnx + .btnx{ margin-left: .6rem; }

.section{
  padding: 2.4rem 0;
}

.cardx{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem;
  height: 100%;
}

.cardx h3{
  font-size: 1.05rem;
  margin: 0 0 .5rem 0;
  font-weight: 900;
}

.cardx p{
  color: var(--muted);
  margin: 0 0 .5rem 0;
}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 992px){
  .grid-3{ grid-template-columns: 1fr; }
}

.quicklinks a{
  text-decoration:none;
}

.kicker{
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.70);
}