/* ==========================================================================
   Hero section (Figma node 26:52)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 96px;
  padding-bottom: 128px;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  background-image: linear-gradient(
    152.23deg,
    #ffffff 0%,
    #f7f9fb 50%,
    rgba(219, 229, 224, 0.3) 100%
  );
  /* Transform is driven by the scroll-parallax listener in animations.js */
  will-change: transform;
}

.hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 18px 48px;
  margin-bottom: 32px;
  background-color: var(--color-badge-bg);
  border-radius: 9999px;
  color: var(--color-brand);
  font-size: 56px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.14px;
  opacity: 0;
  animation: bounce-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0s both;
}

.hero__logo-wrap {
  margin: 24px 0;
  opacity: 0;
  animation: bounce-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.hero__logo {
  width: 90px;
  height: 90px;
}

.hero__title {
  max-width: 896px;
  margin-bottom: 24px;
  color: var(--color-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.96px;
}

/* Each word animates in on its own beat — nth-child delay avoids any
   inline styles while still giving a genuine per-word stagger. */
.hero__title-word {
  display: inline-block;
  opacity: 0;
  animation: word-fade-up 0.5s ease-out both;
}

.hero__title-word:nth-child(1) { animation-delay: 0.25s; }
.hero__title-word:nth-child(2) { animation-delay: 0.31s; }
.hero__title-word:nth-child(3) { animation-delay: 0.37s; }
.hero__title-word:nth-child(4) { animation-delay: 0.43s; }
.hero__title-word:nth-child(5) { animation-delay: 0.49s; }

.hero__subtitle {
  max-width: 672px;
  margin-bottom: 40px;
  color: var(--color-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  opacity: 0;
  animation: hero-fade-slide-up 0.7s ease-out 0.6s both;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14px;
  text-align: center;
  border: none;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  animation:
    hero-fade-slide-up 0.6s ease-out 0.8s both,
    cta-pulse 2.6s ease-in-out 1.8s infinite;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__cta:hover {
  background-color: var(--color-brand-hover);
  transform: translateY(-2px) scale(1.03);
}

.hero__cta:active {
  transform: translateY(0) scale(1);
}

.hero__cta-icon {
  width: 16.96px;
  height: 16.96px;
}

.hero__cta:hover .hero__cta-icon {
  animation: arrow-bounce-x 0.6s ease-in-out infinite;
}

@keyframes hero-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}