@layer components {
  .landing-hero {
    align-items: center;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(184, 134, 11, 0.07), transparent),
      radial-gradient(ellipse 60% 50% at 30% 60%, rgba(92, 61, 46, 0.05), transparent),
      radial-gradient(ellipse 50% 40% at 70% 30%, rgba(139, 119, 101, 0.06), transparent);
    display: flex;
    justify-content: center;
    min-block-size: 100dvh;
    padding: var(--space-8xl) var(--space-3xl) var(--space-6xl);
    text-align: center;
  }

  @media (width <= 640px) {
    .landing-hero {
      padding: var(--space-7xl) var(--space-xl) var(--space-5xl);
    }
  }

  .landing-hero-content {
    max-inline-size: 800px;
  }

  .landing-title {
    margin-block-end: var(--space-2xl);
  }

  .landing-title-text {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
  }

  .landing-tagline {
    color: var(--color-bark-60);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-block-end: var(--space-5xl);
  }

  @media (width <= 640px) {
    .landing-tagline {
      margin-block-end: var(--space-3xl);
    }
  }
}