/* ============================================
   gs-wgs-hero — page hero used by the "Why Giant Swarm" template
   family and any future page that wants a dark, centered hero
   with H1 + lede + 2 CTAs.

   Bg illustration is set via inline `style` per page (different
   pages use different illustrations); the file defaults to the
   Smarter Platform Engineering illustration. Page-level inline
   overrides take precedence.
   ============================================ */

.gs-wgs-hero {
  background-color: var(--color-bg-dark);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-lp-bg-3.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 9rem 1.5rem 5rem;
  text-align: center;
}

.gs-wgs-hero__inner {
  max-width: var(--content-header);
  margin: 0 auto;
}

.gs-wgs-hero__title {
  font-size: var(--text-h1);
  color: #fff;
  line-height: var(--leading-tight);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.gs-wgs-hero__description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  max-width: 38rem;
  margin: 0 auto 2.5rem;
  text-wrap: balance;
}

.gs-wgs-hero__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .gs-wgs-hero { padding: 7rem 1.5rem 4rem; }
}