/* =====================================
RESET + PREMIUM ROOT
===================================== */

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

:root{

--bg:#050816;
--card:#0f172a;

--primary:#3b82f6;
--secondary:#8b5cf6;

--success:#22c55e;

--text:#ffffff;
--muted:#94a3b8;

--border:rgba(255,255,255,.08);

}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:
linear-gradient(
180deg,
#050816,
#08111f
);

color:#fff;

overflow-x:hidden;

}

a{
text-decoration:none;
color:inherit;
}

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

.container{

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

margin:auto;

padding:0 16px;

}

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

.v5-header{

position:sticky;

top:0;

z-index:9999;

height:60px;

background:
rgba(5,8,22,.92);

backdrop-filter:
blur(20px);

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

}

.v5-nav{

height:60px;

display:flex;

align-items:center;

justify-content:space-between;

}

.v5-logo{

display:flex;

align-items:center;

gap:10px;

font-size:18px;

font-weight:800;

}

.v5-logo img{

width:42px;
height:42px;

border-radius:50%;

object-fit:cover;

border:
2px solid rgba(255,255,255,.12);

}

.v5-menu{

display:flex;

align-items:center;

gap:14px;

}

.v5-menu a{

font-size:14px;

font-weight:600;

}

.start-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 22px;

border-radius:14px;

font-weight:700;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

box-shadow:
0 10px 30px
rgba(59,130,246,.25);

}

.view-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 22px;

border-radius:14px;

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

border:
1px solid var(--border);

}

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

.v5-hero{

padding:25px 0 35px;

}

.hero-center{

max-width:850px;

margin:auto;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:8px 14px;

font-size:12px;

border-radius:999px;

margin-bottom:14px;

background:
rgba(34,197,94,.12);

border:
1px solid rgba(34,197,94,.25);

}

.hero-center h1{

font-size:52px;

line-height:1.08;

font-weight:800;

margin-bottom:12px;

}

.hero-center p{

max-width:720px;

margin:auto;

font-size:16px;

line-height:1.7;

color:var(--muted);

margin-bottom:20px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

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

.block-title,
.section-header h2{

font-size:28px;

font-weight:800;

text-align:center;

margin-bottom:8px;

}

.section-header{

text-align:center;

margin-bottom:25px;

}

.section-header p{

font-size:14px;

color:var(--muted);

}

/* =====================================
TRENDING
===================================== */

.trending-wrapper{

margin-top:30px;

}

.trending-grid{

display:grid;

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

gap:14px;

}

.trend-card{

padding:18px;

border-radius:18px;

text-align:center;

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

border:
1px solid var(--border);

}

.trend-reward{

font-size:28px;

font-weight:800;

color:var(--success);

margin-bottom:8px;

}

.trend-name{

font-size:15px;

font-weight:600;

margin-bottom:6px;

}

.trend-payment{

font-size:12px;

color:#fbbf24;

}

/* =====================================
LIVE WITHDRAW FEED
===================================== */

.recent-wrapper{

margin-top:30px;

}

.recent-feed{

max-width:850px;

margin:auto;

}

.feed-item{

padding:12px 16px;

margin-bottom:10px;

border-radius:14px;

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

border:
1px solid var(--border);

font-size:14px;

font-weight:500;

backdrop-filter:
blur(10px);

transition:.3s;

}

.feed-item:hover{

transform:
translateY(-2px);

}

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

.stats-wrapper{

display:grid;

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

gap:14px;

margin-top:30px;

}

.stat-box{

padding:18px;

text-align:center;

border-radius:18px;

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

border:
1px solid var(--border);

transition:.3s;

}

.stat-box:hover{

transform:
translateY(-4px);

}

.stat-number{

font-size:28px;

font-weight:800;

color:var(--success);

margin-bottom:6px;

}

.stat-label{

font-size:13px;

color:var(--muted);

}

/* =====================================
FEATURED OFFERS
===================================== */

.offers-v5{

padding:45px 0;

}

.offers-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:16px;

}

.offer-card-v5{

border-radius:22px;

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

border:
1px solid var(--border);

overflow:hidden;

transition:.3s;

}

.offer-card-v5:hover{

transform:
translateY(-6px);

}

.offer-image-v5{

width:85px !important;
height:85px !important;

border-radius:50% !important;

object-fit:cover;

margin:auto;

margin-bottom:15px;

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

}

.offer-content-v5{

padding:18px;

text-align:center;

}

.offer-content-v5 h3{

font-size:18px;

margin-bottom:10px;

min-height:44px;

}

.offer-reward-v5{

display:inline-block;

padding:8px 12px;

border-radius:999px;

font-size:13px;

font-weight:700;

margin-bottom:12px;

background:
rgba(34,197,94,.15);

color:#22c55e;

}

.offer-time-v5{

font-size:12px;

margin-bottom:14px;

color:#fbbf24;

}

.offer-btn-v5{

display:block;

width:100%;

padding:12px;

border-radius:14px;

font-size:14px;

font-weight:700;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

/* =====================================
TOP EARNERS
===================================== */

.earners-v5{

padding:45px 0;

}

.earners-box{

max-width:850px;

margin:auto;

}

.earner-v5{

display:grid;

grid-template-columns:
70px 1fr 130px;

align-items:center;

gap:15px;

padding:15px;

margin-bottom:10px;

border-radius:16px;

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

border:
1px solid var(--border);

}

.earner-rank-v5{

font-size:22px;

font-weight:800;

color:#fbbf24;

}

.earner-user-v5{

font-size:15px;

font-weight:600;

}

.earner-amount-v5{

font-size:18px;

font-weight:800;

text-align:right;

color:#22c55e;

}

/* =====================================
WHY CHOOSE US
===================================== */

.why-v5{

padding:45px 0;

}

.why-grid-v5{

display:grid;

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

gap:16px;

max-width:850px;

margin:auto;

}

.why-card-v5{

padding:22px;

text-align:center;

border-radius:18px;

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

border:
1px solid var(--border);

}

.why-icon-v5{

font-size:34px;

margin-bottom:10px;

}

.why-card-v5 h3{

font-size:18px;

margin-bottom:8px;

}

.why-card-v5 p{

font-size:14px;

color:var(--muted);

line-height:1.6;

}

/* =====================================
FAQ
===================================== */

.faq-v5{

padding:45px 0;

}

.faq-wrap-v5{

max-width:850px;

margin:auto;

}

.faq-item-v5{

margin-bottom:10px;

border-radius:16px;

overflow:hidden;

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

border:
1px solid var(--border);

}

.faq-btn-v5{

width:100%;

padding:16px 18px;

border:none;

background:none;

color:#fff;

font-size:15px;

font-weight:600;

cursor:pointer;

text-align:left;

}

.faq-content-v5{

display:none;

padding:0 18px 18px;

font-size:14px;

line-height:1.7;

color:var(--muted);

}

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

.footer-v5{

margin-top:30px;

background:#08101f;

border-top:
1px solid var(--border);

}

.footer-grid-v5{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:25px;

padding:35px 0;

}

.footer-grid-v5 h3,
.footer-grid-v5 h4{

margin-bottom:10px;

}

.footer-grid-v5 p,
.footer-grid-v5 a{

font-size:14px;

line-height:1.8;

color:var(--muted);

}

.footer-bottom-v5{

padding:16px 0;

font-size:13px;

text-align:center;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* =====================================
FLOATING BUTTONS
===================================== */

.floating-buttons{

position:fixed;

right:15px;

bottom:15px;

display:flex;

flex-direction:column;

gap:10px;

z-index:9999;

}

.floating-btn{

width:52px;
height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

color:#fff;

box-shadow:
0 8px 25px
rgba(0,0,0,.30);

transition:.3s;

}

.floating-btn:hover{

transform:
scale(1.08);

}

.telegram-btn{
background:#229ED9;
}

.whatsapp-btn{
background:#25D366;
}

.support-btn{
background:#7c3aed;
}

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

@media(max-width:992px){

.trending-grid{
grid-template-columns:1fr;
}

.stats-wrapper{
grid-template-columns:
repeat(2,1fr);
}

.why-grid-v5{
grid-template-columns:1fr;
}

.footer-grid-v5{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.hero-center h1{
font-size:34px;
}

.hero-center p{
font-size:14px;
}

.hero-buttons{
flex-direction:column;
}

.start-btn,
.view-btn{
width:100%;
}

.stats-wrapper{
grid-template-columns:1fr;
}

.earner-v5{
grid-template-columns:1fr;
text-align:center;
}

.earner-amount-v5{
text-align:center;
}

.block-title,
.section-header h2{
font-size:24px;
}

.offer-card-v5{
padding-bottom:10px;
}

}

@media(max-width:480px){

.container{
padding:0 12px;
}

.v5-menu{
gap:10px;
}

.v5-menu a{
font-size:13px;
}

.hero-center h1{
font-size:28px;
}

.hero-badge{
font-size:11px;
}

}

/* =====================================
PREMIUM EFFECTS
===================================== */

.trend-card,
.offer-card-v5,
.why-card-v5,
.stat-box,
.earner-v5{

backdrop-filter:
blur(12px);

transition:
all .25s ease;

}

.trend-card:hover,
.offer-card-v5:hover,
.why-card-v5:hover,
.stat-box:hover,
.earner-v5:hover{

transform:
translateY(-4px);

}