html{scroll-behavior:smooth}body{font-family:Inter,system-ui,sans-serif;background:#07080d;color:#f8fafc}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:
radial-gradient(circle at 15% 15%,rgba(139,92,246,.17),transparent 34%),
radial-gradient(circle at 85% 10%,rgba(236,72,153,.12),transparent 29%),
radial-gradient(circle at 50% 80%,rgba(59,130,246,.09),transparent 34%);z-index:-2}
.grid-bg{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.32);backdrop-filter:blur(18px)}
.gradient-text{background:linear-gradient(90deg,#c4b5fd,#f9a8d4,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
.phone-shot{transition:.45s ease;box-shadow:0 30px 70px rgba(0,0,0,.42)}.phone-shot:hover{transform:translateY(-10px) rotate(.4deg);box-shadow:0 36px 90px rgba(124,58,237,.22)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}.faq-item.open .faq-answer{max-height:220px}.faq-item.open .faq-icon{transform:rotate(45deg)}
.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{scrollbar-width:none}


.gallery-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(139,92,246,.85) rgba(255,255,255,.08);
  overscroll-behavior-x: contain;
  scroll-padding-inline: 1rem;
}
.gallery-scroll::-webkit-scrollbar{
  height: 10px;
}
.gallery-scroll::-webkit-scrollbar-track{
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.gallery-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg,#7c3aed,#ec4899);
  border-radius: 999px;
}
.gallery-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(90deg,#8b5cf6,#f472b6);
}


.carousel-item{
  flex: 0 0 210px;
  width: 210px;
  max-width: 210px;
}
.carousel-item .phone-shot{
  width: 210px;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
}
@media (min-width: 640px){
  .carousel-item{
    flex-basis: 220px;
    width: 220px;
    max-width: 220px;
  }
  .carousel-item .phone-shot{
    width: 220px;
  }
}
@media (min-width: 1024px){
  .carousel-item{
    flex-basis: 230px;
    width: 230px;
    max-width: 230px;
  }
  .carousel-item .phone-shot{
    width: 230px;
  }
}
@media (max-width: 639px){
  .gallery-scroll{
    padding-left: .25rem;
    padding-right: .25rem;
    gap: 1rem;
  }
  .carousel-item{
    flex-basis: 68vw;
    width: 68vw;
    max-width: 220px;
  }
  .carousel-item .phone-shot{
    width: 100%;
  }
}