.hero { min-height: 560px; }
.hero__content { max-width: 60ch; text-align: left; }
.hero__lead {
  font-size: 1.15rem;
  max-width: 46ch;
  margin-bottom: var(--space-3);
  color: rgba(255, 255, 255, 0.88);
}
.hero__badge-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.hero .badge:not(.badge-accent) {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
  .hero { min-height: 480px; }
}