/*==============================
GLOBAL
===============================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#081426;
color:#fff;
overflow-x:hidden;
line-height:1.6;

}

a{
text-decoration:none;
}

img{
max-width:100%;
display:block;
}

.container{

width:min(1180px,92%);
margin:auto;

}

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

.bg1,
.bg2{

position:fixed;
border-radius:50%;
filter:blur(120px);
z-index:-2;

}

.bg1{

width:650px;
height:650px;

background:#00d4ff;

top:-250px;
left:-180px;

opacity:.18;

animation:float1 18s ease-in-out infinite;

}

.bg2{

width:700px;
height:700px;

background:#6f42ff;

right:-220px;
bottom:-260px;

opacity:.16;

animation:float2 22s ease-in-out infinite;

}

@keyframes float1{

0%{transform:translateY(0);}
50%{transform:translateY(80px);}
100%{transform:translateY(0);}

}

@keyframes float2{

0%{transform:translateX(0);}
50%{transform:translateX(-80px);}
100%{transform:translateX(0);}

}

/*==============================
HEADER
===============================*/

header{

position:sticky;
top:0;

z-index:1000;

background:rgba(8,20,38,.65);

backdrop-filter:blur(18px);

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

}

nav{

display:flex;
align-items:center;
justify-content:space-between;

padding:18px 0;

}

.logo{

font-size:28px;
font-weight:700;
color:#fff;

}

.btn-nav{

background:#16d67b;
color:#081426;

padding:12px 26px;

border-radius:50px;

font-weight:700;

transition:.3s;

}

.btn-nav:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(22,214,123,.45);

}

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

.hero{

padding:90px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:center;

}

.badge{

display:inline-block;

padding:10px 20px;

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

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

border-radius:999px;

font-size:14px;

margin-bottom:25px;

}

.hero h1{

font-size:64px;

line-height:1.1;

font-weight:800;

margin-bottom:20px;

}

.hero h1 span{

background:linear-gradient(90deg,#00d4ff,#16d67b,#ffe34c);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:#d5dbe7;

margin-bottom:28px;

max-width:620px;

}

.hero-points{

display:grid;

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

gap:15px;

margin-bottom:35px;

}

.hero-points div{

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

padding:15px;

border-radius:14px;

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

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary{

background:#16d67b;

color:#081426;

padding:18px 42px;

border-radius:60px;

font-weight:700;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(22,214,123,.40);

}

.btn-secondary{

padding:18px 42px;

border-radius:60px;

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

color:#fff;

transition:.3s;

}

.btn-secondary:hover{

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

}

.glass-card{

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

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

backdrop-filter:blur(20px);

border-radius:28px;

padding:35px;

box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.glass-card h3{

margin-bottom:25px;

font-size:28px;

}

.earning{

padding:18px;

margin-top:16px;

border-radius:16px;

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

}

.earning h2{

margin-top:10px;

font-size:34px;

color:#16d67b;

}
/*====================================
STATS SECTION
====================================*/

.stats{
padding:70px 0;
}

.stats .container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.stat-box{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.10);
border-radius:20px;
padding:35px 20px;
text-align:center;
transition:.35s;
}

.stat-box:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.stat-box h2{
font-size:42px;
color:#16d67b;
margin-bottom:10px;
font-weight:700;
}

.stat-box p{
color:#d8d8d8;
font-size:17px;
}

/*====================================
SECTION TITLES
====================================*/

.features,
.testimonials,
.faq,
.final-cta{
padding:90px 0;
}

.features h2,
.testimonials h2,
.faq h2,
.final-cta h2{
text-align:center;
font-size:42px;
margin-bottom:55px;
font-weight:700;
}

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

.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.feature-card{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(20px);
padding:35px;
border-radius:24px;
transition:.35s;
}

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.icon{
font-size:48px;
margin-bottom:20px;
}

.feature-card h3{
font-size:24px;
margin-bottom:15px;
}

.feature-card p{
color:#d5d5d5;
font-size:16px;
}

/*====================================
TESTIMONIALS
====================================*/

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.testimonial{
background:white;
color:#222;
padding:35px;
border-radius:22px;
transition:.35s;
}

.testimonial:hover{
transform:translateY(-8px);
}

.testimonial p{
margin:20px 0;
line-height:1.7;
}

.testimonial strong{
font-size:17px;
}

/*====================================
FINAL CTA
====================================*/

.final-cta{
text-align:center;
}

.final-cta p{
font-size:20px;
max-width:700px;
margin:20px auto 40px;
color:#d8d8d8;
}

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

footer{
padding:35px;
text-align:center;
color:#bdbdbd;
border-top:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
}

/*====================================
STICKY BUTTON
====================================*/

.sticky-btn{
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:20px;
background:#16d67b;
color:#081426;
padding:18px 38px;
border-radius:50px;
font-weight:700;
font-size:18px;
box-shadow:0 15px 35px rgba(22,214,123,.35);
z-index:999;
transition:.3s;
}

.sticky-btn:hover{
transform:translateX(-50%) translateY(-4px);
}

/*====================================
LIVE NOTIFICATION
====================================*/

#notification{
position:fixed;
left:25px;
bottom:25px;
background:#ffffff;
color:#222;
padding:18px 22px;
border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,.25);
display:none;
z-index:9999;
max-width:320px;
animation:slideIn .5s ease;
}

@keyframes slideIn{
from{
opacity:0;
transform:translateX(-40px);
}
to{
opacity:1;
transform:translateX(0);
}
}

/*====================================
EXIT POPUP
====================================*/

#popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:none;
align-items:center;
justify-content:center;
padding:20px;
z-index:99999;
}

.popup-box{
background:#fff;
color:#222;
padding:40px;
border-radius:25px;
max-width:520px;
width:100%;
text-align:center;
}

.popup-box h2{
margin-bottom:15px;
}

.popup-box p{
margin-bottom:25px;
}

#closePopup{
margin-top:20px;
background:#ddd;
border:none;
padding:12px 28px;
border-radius:40px;
cursor:pointer;
font-size:16px;
}

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

@media(max-width:992px){

.hero-grid,
.feature-grid,
.testimonial-grid,
.stats .container{
grid-template-columns:1fr;
}

.hero{
text-align:center;
}

.hero-points{
grid-template-columns:1fr;
}

.hero h1{
font-size:48px;
}

.hero p{
margin:auto auto 30px;
}

}

@media(max-width:576px){

.hero{
padding:60px 0;
}

.hero h1{
font-size:36px;
}

.features h2,
.testimonials h2,
.faq h2,
.final-cta h2{
font-size:30px;
}

.btn-primary,
.btn-secondary,
.btn-nav{
width:100%;
text-align:center;
}

.sticky-btn{
width:92%;
text-align:center;
}

}