:root {
  --recommendation-gradient: radial-gradient(circle at top, rgba(56,189,248,0.3), rgba(59,130,246,0.18) 35%, #020617 85%);
}

.hero--recommendation {
  background: var(--recommendation-gradient);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-image {
  width: 100%;
  border-radius: var(--radius-lg);
}

.section-image--rounded {
  border-radius: var(--radius-xl);
}

.section-image--padded {
  padding: 0.35rem;
  background: radial-gradient(circle at top left, rgba(59,130,246,0.4), rgba(15,23,42,1));
  border-radius: var(--radius-xl);
}

.section-image--shadow {
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(148,163,184,0.5);
}

.cta__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .hero__subtitle {
    max-width: 34rem;
  }
}