.why {
  padding: 6rem clamp(1.25rem, 6vw, 5rem) 6.5rem;
  background: var(--text);
}

.why__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  margin: 0 auto 3rem;
  max-width: 34rem;
}

.why__head .eyebrow {
  color: var(--accent-soft);
}

.why__head h2 {
  color: var(--surface);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 0;
}

.why__status {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
}

.why__status-caption {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: var(--fw-semibold);
  color: var(--surface);
  margin-bottom: 0.9rem;
  min-height: 1.6em;
}

.why__status-track {
  position: relative;
  height: 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.why__status-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 16px rgba(255, 61, 143, 0.55);
}

@keyframes why-fill-in {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes why-fill-out {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.why__status.is-filling .why__status-fill {
  width: 100%;
  animation: why-fill-in 7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.why__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 2.25rem;
  margin-top: 2rem;
}

.why__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 8rem;
  opacity: 0;
  transform: translateY(10px) scale(0.85);
}

@keyframes why-badge-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes why-badge-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
  }
}

.why__badge-icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: 0 12px 28px -10px rgba(255, 61, 143, 0.6);
  font-size: 2.2rem;
  color: var(--surface);
}

.why__badge-label {
  font-size: 0.88rem;
  font-weight: var(--fw-semibold);
  color: var(--surface);
  text-align: center;
  line-height: 1.3;
}

.why__status.is-filling .why__badge {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: why-badge-in 0.6s ease both;
}

.why__status.is-filling .why__badge:nth-child(1) {
  animation-delay: 1.75s;
}
.why__status.is-filling .why__badge:nth-child(2) {
  animation-delay: 3.5s;
}
.why__status.is-filling .why__badge:nth-child(3) {
  animation-delay: 5.25s;
}
.why__status.is-filling .why__badge:nth-child(4) {
  animation-delay: 7s;
}

.why__status.is-hiding .why__status-fill {
  width: 0%;
  animation: why-fill-out 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.why__status.is-hiding .why__badge {
  opacity: 0;
  transform: translateY(-8px) scale(0.85);
  animation: why-badge-out 0.5s ease forwards;
  animation-delay: 0s;
}

.why__status.is-resetting .why__status-fill,
.why__status.is-resetting .why__badge {
  animation: none !important;
}

.why__status.is-paused .why__status-fill,
.why__status.is-paused .why__badge {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .why__status-fill,
  .why__badge {
    animation: none !important;
  }
}

@media (max-width: 480px) {
  .why {
    padding: 4rem 1.25rem 4.5rem;
  }

  .why__status {
    margin-bottom: 2.5rem;
  }

  .why__badges {
    gap: 1.25rem 1.5rem;
  }

  .why__badge {
    width: 6.25rem;
  }

  .why__badge-icon {
    font-size: 1.8rem;
  }
}

@media (max-width: 320px) {
  .why__badge {
    width: 5.5rem;
  }

  .why__badge-icon {
    font-size: 1.6rem;
  }
}