// ============================================================
//   Hero
//   ============================================================

.hero {
  position: relative;
  padding-block: var(--space-12);
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 60% at 85% 15%, rgb(217 108 63 / 0.16), transparent 70%),
      radial-gradient(50% 50% at 10% 90%, rgb(46 107 79 / 0.18), transparent 70%);
    z-index: -1;
  }

  h1 {
    margin-bottom: var(--space-4);
  }

  p {
    font-size: 1.15rem;
    color: var(--text);
    max-width: 60ch;
  }
}

.hero__inner {
  max-width: 720px;
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}