/* Safer full-width hero layout: background full width, content centred */
body {
  overflow-x: hidden;
}

main {
  width: 100% !important;
  max-width: none !important;
}

main > .hero.clean-hero:first-of-type {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 5rem) !important;
  background:
    radial-gradient(circle at 72% 8%, rgba(96,165,250,.22), transparent 34rem),
    radial-gradient(circle at 18% 88%, rgba(139,92,246,.18), transparent 28rem),
    linear-gradient(180deg, rgba(7,18,37,.98), rgba(8,17,33,.98)) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: grid !important;
  grid-template-columns:
    minmax(24px, 1fr)
    minmax(0, 650px)
    minmax(320px, 460px)
    minmax(24px, 1fr) !important;
  gap: clamp(2rem, 5vw, 4rem) !important;
  align-items: center !important;
}

main > .hero.clean-hero:first-of-type > .hero-content {
  grid-column: 2 !important;
  max-width: 650px !important;
  width: 100% !important;
  min-width: 0 !important;
}

main > .hero.clean-hero:first-of-type > .hero-card {
  grid-column: 3 !important;
  width: 100% !important;
  max-width: 460px !important;
  justify-self: end !important;
  min-width: 0 !important;
}

main > .hero.clean-hero:first-of-type .hero-orb {
  position: absolute !important;
}

main > .hero.clean-hero:first-of-type h1 {
  font-size: clamp(3rem, 5.4vw, 5.2rem) !important;
  line-height: .95 !important;
  max-width: 650px !important;
  text-wrap: balance;
}

main > .hero.clean-hero:first-of-type .hero-text {
  max-width: 620px !important;
}

main > section:not(.hero),
main > .stats-strip,
main > .cta-section {
  width: min(1180px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main > .hero.clean-hero:first-of-type + section,
main > .hero.clean-hero:first-of-type + .stats-strip {
  margin-top: 3rem !important;
}

@media (max-width: 980px) {
  main > .hero.clean-hero:first-of-type {
    grid-template-columns: minmax(16px, 1fr) minmax(0, 680px) minmax(16px, 1fr) !important;
  }

  main > .hero.clean-hero:first-of-type > .hero-content,
  main > .hero.clean-hero:first-of-type > .hero-card {
    grid-column: 2 !important;
    max-width: 680px !important;
    justify-self: start !important;
  }
}

@media (max-width: 680px) {
  main > .hero.clean-hero:first-of-type {
    grid-template-columns: 16px minmax(0, 1fr) 16px !important;
  }

  main > .hero.clean-hero:first-of-type h1 {
    font-size: clamp(2.55rem, 13vw, 4rem) !important;
  }
}