/* ============================================================
   Component: Hero Section (hero.css)
   BEM Notation: block_element--modifier
   Matched to Figma Frame 2147230220 (width: 676px, height: 433px)
   ============================================================ */

.section_hero {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 28px;
  z-index: 2;
}

@media (min-width: 768px) {
  .section_hero {
    padding-block: 40px;
  }
}

.hero_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-inline: 16px;
}

.hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin-inline: auto;
}

/* Eyebrow Tagline */
.hero_eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-eyebrow);
  animation: hero_fade-up var(--duration-slow) var(--ease-out-smooth) 0.1s both;
}

/* Main Heading H1 */
.hero_title {
  margin-bottom: 22px;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-primary);
  animation: hero_fade-up var(--duration-slow) var(--ease-out-smooth) 0.2s both;
}

/* Multi-color Brand Gradient on "behavior" */
.hero_gradient-text {
  display: inline-block;
  background-image: var(--gradient-behavior);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Description / Value Proposition Copy */
.hero_description {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 676px;
  margin-inline: auto;
  margin-bottom: 36px;
  animation: hero_fade-up var(--duration-slow) var(--ease-out-smooth) 0.32s both;
}

.hero_description-text {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
}

.hero_description-text--medium {
  font-weight: 550;
  font-variation-settings: 'wght' 550;
}

/* Action Button Container */
.hero_actions {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero_fade-up var(--duration-slow) var(--ease-out-smooth) 0.44s both;
}

/* Primary CTA Button (width: 289px, height: 60px per Figma node 0:5819) */
.hero_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 289px;
  height: 60px;
  padding: 16px 25px;
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-medium);
  color: var(--color-surface);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth);
}

.hero_btn:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.hero_btn:active {
  transform: translateY(0);
}

/* Mobile Viewport Refinements (Figma Node 1:7325 - 390px) */
@media (max-width: 767px) {
  .hero_eyebrow {
    font-size: 12px;
    letter-spacing: 0.48px;
    margin-bottom: 8px;
  }

  .hero_title {
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.82px;
    max-width: 322px;
    margin-bottom: 24px;
  }

  .hero_description {
    gap: 12px;
    margin-bottom: 32px;
  }

  .hero_description-text {
    font-size: 16px;
    line-height: 1.4;
  }

  .hero_btn {
    width: 242px;
    height: 48px;
    padding: 12px 24px;
    font-size: 16px;
  }
}

/* Subtle Staggered Reveal Animation */
@keyframes hero_fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Accessibility: Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {

  .hero_eyebrow,
  .hero_title,
  .hero_description,
  .hero_actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}