/* ══════════════════════════════════════════════════════════
   HERO — title centered in the middle of the page.
   Save as css/hero-center.css and load it AFTER landing.css.
   Selectors are written as ".hero .hero-…" so they win over
   landing.css (including its tablet / wide-screen media rules)
   no matter where they appear in that file.
══════════════════════════════════════════════════════════ */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* one centered column instead of the old 2-column grid */
.hero .hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  gap: 0;
}
.hero .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* title: exactly two lines, centered */
.hero .hero-content h1 {
  font-size: clamp(38px, 6.4vw, 80px);
  letter-spacing: -2.5px;
  line-height: 1.06;
  margin: 0 0 26px;
  text-align: center;
}
.hero .hero-content h1 .grad-text {
  display: inline-block;
  white-space: nowrap;
}

.hero .hero-sub {
  max-width: 640px;
  margin: 0 auto 38px;
  text-align: center;
  font-size: 18px;
}
.hero .hero-actions {
  justify-content: center;
}
.hero .hero-trust {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: clamp(30px, 8vw, 48px);
    letter-spacing: -1px;
  }
  .hero .hero-sub {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .hero .hero-content h1 .grad-text {
    white-space: normal;
  }
}