/* ─── Stats carousel (Figma 4759:1275) ─── */
.section-stats {
  position: relative;
  background: linear-gradient(59.6deg, var(--cream) 24.59%, var(--cream-mid) 84.6%);
  padding: 0;
  overflow: hidden;
}

.section--figma + .section-stats {
  padding-top: 0;
  margin-bottom: 20px
}

.section-stats + .section-news {
  margin-top: 0;
}

.stats-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 80px;
  padding: 0 80px;
}

.stats-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.stats-carousel__track {
  display: flex;
  gap: 30px;
  width: max-content;
  padding-right: 80px;
}

.stats-carousel__card {
  flex: 0 0 610px;
  width: 610px;
  height: 570px;
  scroll-snap-align: start;
}

.stats-carousel__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fallback: single wide strip image */
.stats-carousel__strip {
  display: block;
  height: 570px;
  width: auto;
  max-width: none;
  scroll-snap-align: start;
}

.stats-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  padding: 0 16px;
}

.stats-carousel__dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: #e8e8e8;
  transition: width 0.2s, background 0.2s;
  cursor: pointer;
}

.stats-carousel__dots span.is-active {
  width: 16px;
  background: var(--red);
}

@media (max-width: 768px) {
  .section-stats,
  .section--figma + .section-stats {
    padding: 0;
  }

  .stats-carousel__viewport {
    padding: 0 16px;
    scroll-padding-inline: 16px;
  }

  .stats-carousel__track {
    gap: 17px;
    padding-right: 16px;
  }

  .stats-carousel__card {
    flex: 0 0 338px;
    width: 338px;
    height: 312px;
  }

  .stats-carousel__strip {
    height: 312px;
  }

  .stats-carousel__dots {
    margin-top: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .stats-carousel__card {
    flex: 0 0 min(610px, calc(100vw - 160px));
    width: min(610px, calc(100vw - 160px));
    height: auto;
    aspect-ratio: 610 / 570;
  }
}