:root{
--primary:#00E0A4;
--secondary:#6C63FF;
--bg-dark:#0B0E1D;
--bg-light:#151A3D;
--glass:rgba(255,255,255,.08);
--border:rgba(255,255,255,.15);
--text:#fff;
--muted:#c5c8ff;
}

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

body{
font-family:'Plus Jakarta Sans',sans-serif;
background:#2C3E50;
color:var(--text);
line-height:1.75;
letter-spacing:.2px;
overflow-x:hidden;
}

h1,h2,h3,h4{
font-family:'Sora',sans-serif;
letter-spacing:-.5px;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:linear-gradient(135deg,rgba(0,224,164,.18),rgba(108,99,255,.18));
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:1000;
font-family: 'Sora';
}

.logo{
font-size:1.9rem;
font-weight:800;
color:var(--primary);
}

nav ul{
display:flex;
gap:35px;
list-style:none;
}

nav ul a{
color:var(--muted);
font-weight:500;
}

.nav-btn{
background:var(--primary);
color:#000;
padding:10px 26px;
border-radius:30px;
font-weight:800;
}

@media(max-width:900px){nav{display:none}}

.mobile-header{
display:none;
text-align:center;
padding:18px;
font-size:1.7rem;
font-weight:800;
color:var(--primary);
background:linear-gradient(135deg,rgba(0,224,164,.18),rgba(108,99,255,.18));
border-bottom:1px solid var(--border);
font-family: 'Sora';
}

@media(max-width:900px){.mobile-header{display:block}}

.hero{
max-width:1200px;
margin:auto;
padding:30px 25px 80px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:center;
}

.hero h1{
font-size:3.5rem;
line-height:1.12;
}

.hero h1 span{color:var(--primary)}

.hero p{
margin:25px 0;
font-size:1.2rem;
color:var(--muted);
max-width:520px;
}

.badges span{
display:inline-block;
margin:6px 10px 0 0;
background:var(--glass);
padding:6px 14px;
border-radius:20px;
font-size:13px;
}

.hero-actions{
display:flex;
gap:20px;
margin-top:30px;
flex-wrap:wrap;
}

.btn-main{
background:var(--primary);
color:#000;
padding:16px 44px;
border-radius:40px;
font-weight:800;
font-size:1.05rem;
box-shadow:0 15px 40px rgba(0,224,164,.35);
}

.btn-outline{
border:1px solid var(--border);
padding:16px 40px;
border-radius:40px;
}

section{
max-width:1200px;
margin:50px auto;
padding:0 25px;
}

.section-head{
text-align:center;
margin-bottom:70px;
}

.section-head h2{
font-size:2.7rem;
font-weight:800;
}

.section-head span{color:var(--primary)}

.section-head p{
color:var(--muted);
max-width:620px;
margin:auto;
}

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

.card{
background:var(--glass);
border:1px solid var(--border);
border-radius:24px;
padding:42px 32px;
text-align:center;
transition:.35s;
}

.card:hover{
transform:translateY(-12px) scale(1.02);
border-color:var(--primary);
}

.card i{
font-size:48px;
color:var(--primary);
margin-bottom:20px;
}

.card h3{font-size:1.4rem;margin-bottom:10px}
.card p{font-size:1.05rem;color:#cfd2ff}

.stats h3{
font-size:2.4rem;
color:var(--primary);
}

.cta{
background:linear-gradient(135deg,var(--secondary),#8E88FF);
padding:90px 25px;
border-radius:36px;
text-align:center;
}

.cta h2{font-size:2.7rem;margin-bottom:10px}
.cta p{max-width:600px;margin:0 auto 30px}

footer{
margin-top:140px;
padding:70px 25px;
background:var(--glass);
border-top:1px solid var(--border);
}

.footer-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:40px;
}

footer h4{color:var(--primary);margin-bottom:15px}
footer p,a{color:#9aa0ff;font-size:.95rem}
.copy{text-align:center;margin-top:50px;color:#666}

@media(max-width:900px){
.hero{
grid-template-columns:1fr;
text-align:center;
padding-top:30px;
}
.hero-actions{justify-content:center}
.hero h1{font-size:2.45rem}
.section-head h2{font-size:2.1rem}
}

.offers-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

.offer-box{
position:relative;
display:flex;
gap:20px;
background:var(--glass);
padding:20px;
border-radius:16px;
align-items:center;
border:1px solid var(--border);
}

.offer-box img{
width:80px;
height:80px;
border-radius:16px;
}

.offer-info h3{margin-bottom:5px}

.reward{
background:#01d676;
color:#000;
padding:6px 14px;
border-radius:18px;
font-weight:800;
display:inline-block;
margin-top:6px;
margin-bottom: 6px;
}

.offer-btn{
display:inline-block;
background:var(--primary);
color:#000;
padding:8px 22px;
border-radius:20px;
font-weight:700;
}

.payments-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:25px;
text-align:center;
}

.pay-box{
background:var(--glass);
padding:20px;
border-radius:14px;
border:1px solid var(--border);
}

.pay-box img{margin-bottom:10px}

.simple-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
text-align:center;
}

.simple-box span{
font-size:2rem;
color:var(--primary);
font-weight:800;
}

.faq-box{
background:var(--glass);
padding:25px;
border-radius:16px;
margin-bottom:15px;
border:1px solid var(--border);
}

.faq-box h4{margin-bottom:8px;color:var(--primary)}

.offer-rating{
display:flex;
align-items:center;
gap:6px;
margin:6px 0;
}

.offer-rating i{
color:#FFD700;
font-size:15px;
}

.offer-rating span{
font-size:.85rem;
color:#cfd2ff;
}

.offer-badge{
position:absolute;
top:-10px;
left:-10px;
background:#ff3d3d;
color:#fff;
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:800;
box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.offer-badge.new{
background:#01d676;
color:#000;
}

.live-popup{
position:fixed;
bottom:25px;
left:25px;
background:linear-gradient(135deg,rgba(0,224,164,.18),rgba(108,99,255,.18));
border:1px solid rgba(255,255,255,.15);
padding:14px 18px;
border-radius:14px;
display:flex;
gap:12px;
align-items:center;
box-shadow:0 15px 40px rgba(0,0,0,.45);
z-index:9999;
animation:slideUp .6s ease;
}

.live-popup img{
width:42px;
height:42px;
border-radius:10px;
}

.live-popup p{
font-size:.9rem;
color:#cfd2ff;
}

@keyframes slideUp{
from{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}

@media(max-width:600px){
.live-popup{
left:15px;
right:15px;
}
}