.hero {
  display: flex;
  align-items: center;
  height: calc(100svh - var(--header-height));
  padding: clamp(1.5rem, 6vh, 5rem) 0 clamp(1.5rem, 5vh, 4rem);
  overflow: hidden;
  color: var(--color-hero-text);
  background:
    linear-gradient(
      0deg,
      rgba(var(--hero-overlay), 1) 0%,
      rgba(var(--hero-overlay), 0.88) 8%,
      rgba(var(--hero-overlay), 0.65) 18%,
      rgba(var(--hero-overlay), 0.38) 30%,
      rgba(var(--hero-overlay), 0.15) 42%,
      rgba(var(--hero-overlay), 0) 55%
    ),
    linear-gradient(
      90deg,
      rgba(var(--hero-overlay), 0.96) 0%,
      rgba(var(--hero-overlay), 0.85) 30%,
      rgba(var(--hero-overlay), 0.3) 60%,
      rgba(var(--hero-overlay), 0) 80%
    ),
    var(--hero-image) right center / cover no-repeat,
    var(--color-hero-bg);
}

.hero_container {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 6vh, 4rem);
}

.hero_content {
  max-width: 620px;
}

.hero_eyebrow {
  margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-hero-muted);
}

.hero_title .text_accent {
  color: var(--color-hero-accent);
}

.hero_title {
  margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
  font-size: clamp(2.5rem, min(7vw, 9vh), 5.5rem);
  line-height: 118%;
}

.hero_text {
  max-width: 470px;
  margin-bottom: clamp(1.25rem, 4vh, 2.5rem);
  font-size: 1.125rem;
  color: var(--color-hero-muted);
}

.hero_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.hero_features {
  max-width: 680px;
}

.hero_content > *,
.hero_features {
  animation: hero_appear 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero_title {
  animation-delay: 0.1s; 
}

.hero_text {
  animation-delay: 0.2s; 
}

.hero_btns {
  animation-delay: 0.3s; 
}

.hero_features {
  animation-delay: 0.45s; 
}

@keyframes hero_appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (max-width: 768px) {
  .hero {
    align-items: flex-end;
    background:
      linear-gradient(
        180deg,
        rgba(var(--hero-overlay), 0.35) 0%,
        rgba(var(--hero-overlay), 0.8) 45%,
        rgba(var(--hero-overlay), 0.96) 100%
      ),
      var(--hero-image) 70% center / cover no-repeat,
      var(--color-hero-bg);
  }
}

@media (max-width: 450px) {
  .hero_text {
    font-size: 0.9375rem;
  }

  .hero_btns {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero_btns .btn {
    justify-content: center;
    padding: 0.875em 1.25em;
  }
}

@media (max-height: 560px) {
  .hero {
    height: auto;
    min-height: calc(100svh - var(--header-height));
    overflow: visible;
  }
}