@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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


body{

background:#050505;
color:white;
min-height:100vh;
display:flex;
justify-content:center;
padding:20px;
overflow-x:hidden;

}



.card{

width:100%;
max-width:400px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:35px;

overflow:hidden;

box-shadow:
0 0 30px rgba(0,255,153,.12);

animation:fade .8s ease;

}



@keyframes fade{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}




.banner{

width:100%;
height:230px;
object-fit:cover;

}



.content{

padding:25px;

}




/* TYPING */


.typing-text{

color:#00ff99;

font-size:14px;

font-weight:600;

line-height:1.7;

min-height:75px;

margin-bottom:20px;

}




.top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}



.badge{

background:linear-gradient(45deg,#00ff99,#00c3ff);

color:black;

padding:7px 15px;

border-radius:30px;

font-size:12px;

font-weight:700;

}



.stock{

color:#00ff99;

font-size:12px;

}





.title{

font-size:30px;

font-weight:700;

margin-bottom:15px;

}



.desc{

font-size:13px;

color:#aaa;

line-height:1.8;

margin-bottom:20px;

}





/* OWNER */


.owner-status{

display:flex;

align-items:center;

gap:10px;

color:#00ff99;

font-size:13px;

margin-bottom:20px;

}



.dot{

width:10px;

height:10px;

background:#00ff99;

border-radius:50%;

box-shadow:0 0 15px #00ff99;

animation:pulse 1.5s infinite;

}



@keyframes pulse{

50%{

transform:scale(1.4);

opacity:.5;

}

}




.owner-card{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

padding:20px;

margin-bottom:25px;

}



.owner-card h3{

color:#00ff99;

margin-bottom:15px;

}



.owner-item{

font-size:13px;

color:#bbb;

padding:8px 0;

}



.owner-item a{

color:#00ff99;

text-decoration:none;

}





/* PREVIEW */


.preview-title{

font-size:14px;

margin-bottom:12px;

}



.preview-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

margin-bottom:25px;

}



.preview-item{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:14px;

border-radius:18px;

font-size:12px;

color:#ddd;

transition:.3s;

}



.preview-item:hover{

transform:translateY(-4px);

border-color:#00ff99;

}





.section-title{

font-size:15px;

margin:25px 0 15px;

color:#fff;

font-weight:600;

}




/* PACKAGE */


.package{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

padding:20px;

margin-bottom:15px;

transition:.3s;

}



.package:hover{

transform:translateY(-5px);

border-color:#00ff99;

box-shadow:0 0 20px rgba(0,255,153,.15);

}



.package h3{

color:#00ff99;

font-size:16px;

margin-bottom:10px;

}



.package p{

font-size:13px;

color:#aaa;

line-height:1.8;

}



.package-price{

font-size:28px;

font-weight:700;

color:#00ff99;

margin-bottom:10px;

}




/* PAYMENT */


.payment-box{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

padding:20px;

text-align:center;

margin-bottom:20px;

}



.payment-box h3{

color:#00ff99;

}



.payment-box img{

width:200px;

border-radius:20px;

margin-top:15px;

}



.name{

font-size:13px;

color:#aaa;

margin-top:10px;

}




.check-btn{

width:100%;

height:60px;

border:none;

border-radius:22px;

background:linear-gradient(45deg,#00ff99,#00c3ff);

color:black;

font-size:15px;

font-weight:700;

cursor:pointer;

}




/* SERVICES */


.service-card{

display:grid;

gap:12px;

}



.service{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:18px;

}



.service h3{

color:#00ff99;

margin-bottom:10px;

}



.service p{

font-size:13px;

color:#aaa;

line-height:1.7;

}




/* FEATURES */


.features{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

margin-top:25px;

}



.feature{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:12px;

border-radius:16px;

font-size:11px;

text-align:center;

}




/* BUTTON */


.channel-btn,
.youtube-btn{

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:22px;

text-decoration:none;

margin-top:15px;

font-weight:700;

}



.channel-btn{

background:rgba(255,255,255,.05);

color:white;

border:1px solid rgba(255,255,255,.08);

}



.youtube-btn{

background:#ff0000;

color:white;

}




/* FAQ */


.faq{

margin-top:30px;

}



.faq-title{

margin-bottom:15px;

font-weight:600;

}



.faq-question{

width:100%;

padding:16px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

color:white;

border-radius:18px;

text-align:left;

cursor:pointer;

font-weight:600;

}



.faq-answer{

display:none;

padding:15px;

font-size:13px;

color:#aaa;

line-height:1.6;

}




/* FLOAT ORDER */


.order-float{

position:fixed;

right:20px;

bottom:20px;

width:60px;

height:60px;

border-radius:50%;

background:linear-gradient(45deg,#00ff99,#00c3ff);

display:flex;

justify-content:center;

align-items:center;

font-size:25px;

text-decoration:none;

color:black;

box-shadow:0 0 25px rgba(0,255,153,.5);

z-index:99;

}





@media(max-width:420px){


.content{

padding:20px;

}


.title{

font-size:26px;

}


.features{

grid-template-columns:1fr;

}


}  font-weight:700;
}

.stock{
  font-size:12px;
  color:#00ff99;
}

.title{
  font-size:30px;
  font-weight:700;
  margin-bottom:10px;
}

.desc{
  font-size:13px;
  color:#a9a9a9;
  line-height:1.7;
  margin-bottom:20px;
}

/* OWNER STATUS */

.owner-status{
  display:flex;
  align-items:center;
  gap:8px;
  color:#00ff99;
  font-size:13px;
  margin-bottom:20px;
}

.dot{
  width:10px;
  height:10px;
  background:#00ff99;
  border-radius:50%;
  box-shadow:0 0 15px #00ff99;
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.3);
    opacity:.6;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* PREVIEW */

.preview-box{
  margin-bottom:25px;
}

.preview-title{
  font-size:14px;
  color:#ddd;
  margin-bottom:12px;
}

.preview-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.preview-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:14px;
  border-radius:18px;
  font-size:12px;
  color:#ddd;
  transition:.3s;
}

.preview-item:hover{
  transform:translateY(-3px);
  border-color:#00ff99;
  box-shadow:0 0 20px rgba(0,255,153,.15);
}

.price-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:25px;
  padding:18px;
  margin-bottom:25px;
}

.price-text{
  color:#888;
  font-size:13px;
}

.price{
  margin-top:5px;
  font-size:32px;
  color:#00ff99;
  font-weight:700;
}

.section-title{
  font-size:14px;
  color:#ddd;
  margin-bottom:15px;
}

.payments{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.pay-btn{
  height:58px;
  border:none;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.pay-btn:hover{
  transform:translateY(-3px);
  background:linear-gradient(45deg,#00ff99,#00c3ff);
  color:black;
}

.payment-box{
  display:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:25px;
  padding:20px;
  text-align:center;
  margin-bottom:20px;
  animation:fade .5s ease;
}

.payment-box img{
  width:190px;
  border-radius:18px;
  margin-top:15px;
}

.number{
  font-size:22px;
  color:#00ff99;
  font-weight:700;
  margin-top:12px;
}

.name{
  margin-top:5px;
  color:#999;
  font-size:13px;
}

.check-btn{
  width:100%;
  height:60px;
  border:none;
  border-radius:22px;
  background:linear-gradient(45deg,#00ff99,#00c3ff);
  color:black;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
  box-shadow:0 10px 25px rgba(0,255,153,.25);
}

.check-btn:hover{
  transform:scale(1.02);
}

/* CHANNEL */

.channel-btn{
  width:100%;
  height:58px;
  border-radius:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  margin-top:15px;
  margin-bottom:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:white;
  font-weight:700;
  transition:.3s;
}

.channel-btn:hover{
  transform:translateY(-3px);
  background:linear-gradient(45deg,#00ff99,#00c3ff);
  color:black;
}

.features{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.feature{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:13px;
  text-align:center;
  font-size:12px;
  color:#ccc;
}

/* FAQ */

.faq{
  margin-top:30px;
}

.faq-title{
  font-size:15px;
  margin-bottom:15px;
  color:#fff;
}

.faq-item{
  margin-bottom:12px;
}

.faq-question{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:white;
  padding:16px;
  border-radius:18px;
  cursor:pointer;
  text-align:left;
  font-weight:600;
}

.faq-answer{
  display:none;
  padding:15px;
  color:#aaa;
  font-size:13px;
  line-height:1.6;
    }
/* YOUTUBE BUTTON */

.youtube-btn{
  width:100%;
  height:58px;
  border-radius:22px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  text-decoration:none;
  margin-top:15px;
  background:#ff0000;
  color:white;
  font-weight:700;
  transition:.3s;
  box-shadow:0 10px 25px rgba(255,0,0,.25);
}

.youtube-btn:hover{
  transform:translateY(-3px);
  background:#ff1f1f;
}
html,body{
  overflow-x:hidden;
  max-width:100%;
  }