.hero {
  text-align: center;
  padding: 56px 16px 28px;
}
.hero h2 { font-size: 2.1rem; margin-bottom: 10px; color: var(--color-primary); }
.hero p { color: var(--color-text-muted); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 26px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--color-accent);
}
.card h3 { margin-bottom: 8px; font-size: 1.05rem; color: var(--color-primary); }
.card p { font-size: 0.88rem; color: var(--color-text-muted); }