.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24) var(--space-24);
  background: linear-gradient(180deg, var(--color-accent-lavender-light) 0%, var(--color-bg-page) 100%);
}

.hero__badge {
  display: inline-block;
  background: var(--color-brand-primary);
  color: var(--color-white);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}

.hero__headline {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-6);
}

.hero__body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  margin-bottom: var(--space-8);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
}

.hero__button--primary {
  background: var(--color-brand-primary);
  color: var(--color-white);
  border: none;
  padding: var(--space-4) var(--space-6);
  border-radius: 8px;
  font-weight: 600;
}

.hero__button--secondary {
  color: var(--color-text-heading);
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  text-decoration: none;
}

.hero__image-wrap {
  position: relative;
}

.hero__image-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 33%;
  background: linear-gradient(to top, rgba(0, 18, 71, 0.65), transparent 60%);
  border-radius: 0 0 16px 16px;
  z-index: 1;
  pointer-events: none;
}

.hero__card {
  position: absolute;
  top: var(--space-8);
  left: calc(-1 * var(--space-8));
  width: 220px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 18, 71, 0.15);
  padding: var(--space-4);
  z-index: 2;
}

.hero__card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hero__card-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-brand-primary);
  color: var(--color-white);
}

.hero__card-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.hero__card-amount {
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-text-heading);
}

.hero__progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-muted);
  overflow: hidden;
}

.hero__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-brand-primary);
}

.hero__testimonial {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  right: var(--space-6);
  color: var(--color-white);
  font-style: italic;
  font-size: var(--font-size-small);
  z-index: 2;
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    padding: var(--space-12) var(--space-6);
  }
  .hero__headline {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
  .hero__card {
    left: var(--space-4);
  }
}

.carousel {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 452 / 565;
}

/*
 * These three numbers are derived from the slide counts in
 * app/Modules/Site/Views/sections/hero.php's $slides / $loop arrays, not
 * chosen independently here:
 *   width             = loopSlides.length * 100%   (400% = 4 loop slides)
 *   .carousel__slide's width = 100 / loopSlides.length %   (25% = 1/4)
 *   animation-duration = slides.length * 6s         (12s = 2 real slides)
 * Adding or removing a slide in hero.php and not updating these three
 * values here breaks the loop visibly with no error and no failing test.
 * See the matching comment in hero.php.
 */
.carousel__track {
  display: flex;
  height: 100%;
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  width: 400%;
  animation-duration: 12s;
}

.carousel__slide {
  flex: none;
  height: 100%;
  object-fit: cover;
  width: 25%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    animation-play-state: paused;
  }
}