.hero {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(216, 159, 19, 0.17),
      transparent 32%
    ),
    linear-gradient(180deg, #ffffff, var(--color-background));
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.7fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}

.hero h1 {
  max-width: 14ch;
  margin-block: var(--space-2) var(--space-4);
  font-size: clamp(2.7rem, 6.5vw, 5.6rem);
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.hero__lead {
  max-width: 46rem;
  color: var(--color-slate);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.hero__diagnostic {
  margin-top: var(--space-4);
  color: var(--color-slate);
}

.hero__panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
}

.hero__panel-label {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__panel h2 {
  margin-block: var(--space-2);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.15;
}

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

  .hero h1 {
    max-width: none;
  }
}