
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;}

/* HEADER */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
}
.logo{font-size:24px;font-weight:600;}
.logo span{color:#38bdf8;}
nav a{margin:0 12px;text-decoration:none;color:#cbd5f5;}
.btn{background:#38bdf8;padding:8px 16px;border-radius:6px;color:#000;}

/* HERO */
.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 60px;
}
.hero-text{max-width:550px;}
.hero-text h1{font-size:48px;}
.hero-text span{
background:linear-gradient(90deg,#38bdf8,#22c55e);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-text p{margin:20px 0;color:#94a3b8;}

.buttons a{
padding:12px 25px;
border-radius:6px;
text-decoration:none;
margin-right:10px;
}
.primary{background:#38bdf8;color:#000;}
.paybtn{background:#22c55e;color:#000;}

/* GLASS */
.glass{
backdrop-filter:blur(10px);
background:rgba(255,255,255,0.05);
padding:25px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

/* FEATURES */
.features{padding:80px 60px;text-align:center;}
.feature-box{
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
flex-wrap:wrap;
}
.card{width:280px;transition:.3s;}
.card:hover{transform:translateY(-10px) scale(1.03);}

/* STATS */
.stats{
display:flex;
justify-content:center;
gap:50px;
padding:50px;
}
.stat{text-align:center;}
.stat h2{color:#38bdf8;}

/* CTA */
.cta{text-align:center;padding:80px;}
.cta a{
background:#22c55e;
padding:15px 30px;
border-radius:8px;
color:#000;
text-decoration:none;
}

/* FOOTER */
footer{text-align:center;padding:20px;color:#94a3b8;}

/* FLOAT BUTTON */
.float-pay{
position:fixed;
bottom:30px;
right:30px;
background:#22c55e;
padding:14px 20px;
border-radius:50px;
text-decoration:none;
color:#000;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

/* MOBILE */
@media(max-width:768px){
.hero{flex-direction:column;text-align:center;}
}