*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:#070b14;
  color:white;
  overflow-x:hidden;
}

/* ======================
   GLOW BACKGROUND
====================== */

.bg-glow{
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  filter:blur(120px);
  opacity:.35;
  z-index:-1;
}

.glow1{
  background:#ff0050;
  top:-150px;
  left:-150px;
}

.glow2{
  background:#00f2ea;
  bottom:-150px;
  right:-150px;
}

/* ======================
   NAVBAR
====================== */

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 8%;
}

.logo{
  font-size:28px;
  font-weight:700;
  background:linear-gradient(90deg,#00f2ea,#ff0050);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav-btn{
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(90deg,#ff0050,#00f2ea);
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.nav-btn:hover{
  transform:scale(1.05);
}

/* ======================
   HERO
====================== */

.hero{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px 20px;
}

.hero h1{
  font-size:52px;
  max-width:800px;
}

.hero span{
  color:#00f2ea;
}

.hero p{
  opacity:.7;
  margin-top:15px;
  margin-bottom:30px;
  max-width:600px;
}

/* ======================
   INPUT BOX
====================== */

.download-box{
  display:flex;
  gap:10px;
  width:100%;
  max-width:600px;
  margin-bottom:20px;
}

input{
  flex:1;
  padding:15px;
  border-radius:12px;
  border:none;
  outline:none;
  background:rgba(255,255,255,.08);
  color:white;
  font-size:14px;
}

button{
  padding:15px 20px;
  border:none;
  border-radius:12px;
  background:linear-gradient(90deg,#ff0050,#00f2ea);
  color:white;
  font-weight:bold;
  cursor:pointer;
  transition:.2s;
}

button:hover{
  transform:scale(1.05);
}

.download-box button{
  flex:1;
}

/* ======================
   SECTIONS TITLE
====================== */

.section-title{
  text-align:center;
  font-size:32px;
  margin-bottom:40px;
}

/* ======================
   FEATURES
====================== */

.features{
  padding:80px 8%;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.card{
  background:rgba(255,255,255,.06);
  padding:25px;
  border-radius:16px;
  transition:.3s;
  border:1px solid rgba(255,255,255,.08);
}

.card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.1);
}

.icon{
  font-size:28px;
  margin-bottom:10px;
}

.card h3{
  margin-bottom:10px;
}

.card p{
  opacity:.7;
  font-size:14px;
}

/* ======================
   HOW IT WORKS
====================== */

.how{
  padding:80px 8%;
}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.step{
  background:rgba(255,255,255,.06);
  padding:25px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  transition:.3s;
}

.step:hover{
  transform:translateY(-6px);
}

.step-number{
  width:40px;
  height:40px;
  margin:0 auto 15px;
  border-radius:50%;
  background:linear-gradient(90deg,#ff0050,#00f2ea);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

/* ======================
   STATS
====================== */

.stats{
  padding:80px 8%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
  text-align:center;
}

.stat h2{
  font-size:28px;
  color:#00f2ea;
}

.stat p{
  opacity:.7;
}

/* ======================
   FOOTER
====================== */

footer{
  text-align:center;
  padding:30px;
  opacity:.6;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:50px;
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:768px){
  .hero h1{
    font-size:34px;
  }

  nav{
    padding:15px 5%;
  }

  .download-box{
    flex-direction:column;
  }
}


/* GALLERY */

.galleryWrapper {
  overflow: hidden;
  border-radius: 22px;
}

.gallery {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.slideItem {

  min-width: 100%;

  scroll-snap-align: center;

  background: rgba(255,255,255,0.05);

  overflow: hidden;
}

.slideImage {

  width: 100%;

  height: 430px;

  object-fit: cover;

  display: block;
}

/* BUTTON */

.downloadImageBtn {

  width: 100%;

  padding: 16px;

  border: none;

  background: linear-gradient(90deg,#ff0050,#ff4d6d);

  color: white;

  font-weight: bold;

  font-size: 15px;

  cursor: pointer;
}

/* DOTS */

.dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 15px;
}

.dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255,255,255,0.3);

  transition: .3s;
}

.activeDot {

  width: 24px;

  border-radius: 20px;

  background: #ff0050;
}

/* TEXT */

.slideHint {
  opacity: .7;
  margin-top: 10px;
}

.slideHeader {
  text-align: left;
  margin-bottom: 12px;
}