.hero {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  background: radial-gradient(1200px 600px at 20% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent),
              var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 52px);
}

.hero h1 {
  margin: 0 0 var(--s-3) 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.03em;
}

.hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
}

.cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.card {
  grid-column: span 4;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: var(--s-5);
}

.card h3 { margin: 0 0 var(--s-2) 0; }
.card p { margin: 0; color: var(--muted); line-height: 1.65; }

@media (max-width: 1024px) { .card { grid-column: span 6; } }
@media (max-width: 700px) { .card { grid-column: span 12; } }