:root {
  --ifm-color-primary: #0b6e4f;
  --ifm-color-primary-dark: #0a6348;
  --ifm-color-primary-darker: #095d44;
  --ifm-color-primary-darkest: #074c37;
  --ifm-color-primary-light: #0c7956;
  --ifm-color-primary-lighter: #0d7f5a;
  --ifm-color-primary-lightest: #0f8f66;
  --ifm-background-color: #f6f8f7;
  --ifm-font-family-base: 'Atkinson Hyperlegible', 'Source Sans 3', system-ui, sans-serif;
  --ifm-heading-font-family: 'IBM Plex Sans', 'Source Sans 3', system-ui, sans-serif;
}

.heroSection {
  min-height: calc(100vh - 60px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(11, 110, 79, 0.2), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(25, 130, 196, 0.2), transparent 35%),
    linear-gradient(160deg, #eef6f3 0%, #f8faf9 100%);
}

.heroSection h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  margin-bottom: 0.75rem;
}

.heroSection p {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  max-width: 680px;
}

.heroButtons {
  margin-top: 1.4rem;
}