/* Homepage hero — full-bleed dark band, per DESIGN-REFERENCE.md §3.3/§9.
   Display heading is sans-serif, weight 300 (NetSuite's "large = light" rule, §1). */

.hero {
  background: var(--surface-dark);
  color: #FFFFFF;
  padding: 96px 0;
}

.hero__inner {
  max-width: 760px;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  margin: 0 0 16px;
}

.hero__heading {
  font-family: var(--font-sans);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-leading);
  margin: 0 0 24px;
}

.hero__lede {
  font-size: 20px;
  line-height: 1.5;
  color: #CBD5E1;
  margin: 0 0 40px;
  max-width: 620px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 599px) {
  .hero {
    padding: 56px 0;
  }

  .hero__heading {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero__lede {
    font-size: 17px;
  }
}