html {
  scroll-behavior: smooth;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer.open {
  max-height: 500px;
  transition: max-height 0.5s ease-in-out;
}

.text-gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.phone-mockup {
  border: 8px solid #111827;
  border-radius: 32px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45);
  background-color: #020617;
  position: relative;
  overflow: hidden;
}

.phone-mockup::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 8px;
  background: #020617;
  border-radius: 999px;
  z-index: 10;
}

#carousel-track {
  display: flex;
  width: 400%;
  transition: transform 0.5s ease-in-out;
}

#carousel-track img {
  width: 25%;
  flex-shrink: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  padding: 16px;
  padding-top: 40px;
}