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

body{
font-family:'Vazirmatn',sans-serif;
background:#070707;
color:#fff;
overflow-x:hidden;
direction:rtl;
}

body::before{
content:'';
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:
radial-gradient(circle at 20% 20%,rgba(255,184,0,.12),transparent 25%),
radial-gradient(circle at 80% 70%,rgba(255,184,0,.08),transparent 25%);
pointer-events:none;
z-index:-1;
}

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#070707;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:.5s;
}
.loader-logo{
font-size:50px;
font-weight:900;
color:#ffb800;
text-shadow:0 0 25px #ffb800;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{opacity:.5;}
50%{opacity:1;}
100%{opacity:.5;}
}

header{
position:fixed;
top:0;
width:100%;
z-index:1000;
background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 25px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:28px;
font-weight:900;
color:#ffb800;
}

.logo img{
width:38px;
height:38px;
object-fit:contain;
}

.nav-links{
display:flex;
list-style:none;
gap:25px;
}

.nav-links a{
text-decoration:none;
color:#fff;
font-weight:700;
transition:.3s;
}

.nav-links a:hover{
color:#ffb800;
}

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px 50px;
}


.btn{
display:inline-block;
padding:15px 35px;
background:#ffb800;
color:#000;
font-weight:700;
border-radius:50px;
text-decoration:none;
margin-top:30px;
transition:.3s;
}

.btn:hover{
transform:translateY(-5px);
box-shadow:0 0 20px #ffb800;
}

.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:25px;
padding:80px 5%;
text-align:center;
}

.stat-box{
background:#111;
padding:30px;
border-radius:20px;
border:1px solid #222;
}

.stat-box h3{
font-size:45px;
color:#ffb800;
margin-bottom:10px;
}


.section-title{
text-align:center;
font-size:50px;
margin-bottom:60px;
color:#ffb800;
}


.products{
padding:100px 5%;
background:#0d0d0d;
}

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


footer{
padding:80px 5%;
text-align:center;
background:#080808;
}

.socials{
display:flex;
justify-content:center;
gap:20px;
margin:30px 0;
flex-wrap:wrap;
}

.socials a{
color:#fff;
text-decoration:none;
font-size:22px;
transition:.3s;
}

.socials a:hover{
color:#229ED9;
}

.copyright{
opacity:.7;
margin-top:30px;
}

.menu-btn{
display:none;
font-size:28px;
color:#ffb800;
cursor:pointer;
}

@media(max-width:768px){

.nav-links{
position:fixed;
top:70px;
right:-100%;
width:250px;
height:100vh;
background:#111;
flex-direction:column;
padding-top:50px;
transition:.4s;
}

.nav-links.active{
right:0;
}

.menu-btn{
display:block;
}

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

.section-title{
font-size:34px;
}
}
.product-img{
width:100%;
height:220px;
object-fit:cover;
border-radius:15px;
margin-bottom:15px;
border:2px solid #d4af37;
}


.product-card:hover{
transform:translateY(-10px);

box-shadow:
0 0 20px rgba(212,175,55,.45),
0 0 40px rgba(34,158,217,.25);

border-color:#d4af37;
}

.product-card button{
width:100%;
padding:12px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#d4af37,#ffd700);
color:#000;
font-weight:700;
font-size:16px;
cursor:pointer;
transition:.3s;
}

.product-card button:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(255,215,0,.6);
}

.telegram-float{
position:fixed;
bottom:20px;
left:20px;
width:60px;
height:60px;
background:#229ED9;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:white;
text-decoration:none;
z-index:9999;
box-shadow:0 0 20px rgba(34,158,217,.6);
transition:.3s;
}

.telegram-float:hover{
transform:scale(1.1);
}

.rules-btn{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:linear-gradient(135deg,#d4af37,#ffd700);
color:#000;
font-weight:700;
text-decoration:none;
border-radius:12px;
transition:.3s;
}

.rules-btn:hover{
transform:translateY(-3px);
box-shadow:0 0 20px rgba(255,215,0,.5);
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.product-card::before{
content:'';
display:block;
height:3px;
background:linear-gradient(
90deg,
transparent,
#ffb800,
transparent
);
opacity:.7;
}

.energy-line{
position:fixed;
width:250px;
height:2px;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
rgba(34,158,217,.9),
transparent
);
pointer-events:none;
z-index:1;
opacity:0;
transform:rotate(-35deg);
filter:blur(1px);
animation:energyMove 2.2s linear forwards;
}

@keyframes energyMove{

0%{
opacity:0;
transform:
translate(-200px,-200px)
rotate(-35deg);
}

15%{
opacity:.7;
}

85%{
opacity:.7;
}

100%{
opacity:0;
transform:
translate(1600px,900px)
rotate(-35deg);
}

}

body::after{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-2;

background:
radial-gradient(
circle at 20% 30%,
rgba(34,158,217,.12),
transparent 25%
),
radial-gradient(
circle at 80% 70%,
rgba(34,158,217,.10),
transparent 30%
);

animation:moveGlow 12s ease-in-out infinite;
}

@keyframes moveGlow{

0%{
transform:translate(0,0);
}

25%{
transform:translate(30px,-20px);
}

50%{
transform:translate(-20px,20px);
}

75%{
transform:translate(20px,10px);
}

100%{
transform:translate(0,0);
}

}

header::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
#229ED9,
#ffb800,
#229ED9,
transparent
);

background-size:300% 100%;

animation:headerGlow 3s linear infinite;
}

@keyframes headerGlow{

0%{
background-position:0% 50%;
}

100%{
background-position:300% 50%;
}

}
.particle{
position:fixed;
width:4px;
height:4px;
border-radius:50%;
background:rgba(34,158,217,.8);
box-shadow:
0 0 10px rgba(34,158,217,.8),
0 0 20px rgba(255,255,255,.4);
pointer-events:none;
z-index:-1;
animation:floatParticle linear forwards;
}

@keyframes floatParticle{

0%{
opacity:0;
transform:
translateY(50px)
scale(.5);
}

10%{
opacity:1;
}

90%{
opacity:1;
}

100%{
opacity:0;
transform:
translateY(-120px)
scale(1.2);
}

}

.footer-links{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:25px;
}

.footer-btn{
background:#111;
border:1px solid #333;
padding:10px 18px;
border-radius:12px;
text-decoration:none;
color:#fff;
font-size:14px;
transition:.3s;
}

.footer-btn:hover{
border-color:#ffb800;
color:#ffb800;
}

.hero-banner{
width:100%;
max-width:1100px;
display:block;
margin:0 auto 30px;
border-radius:25px;
}

.offer-links{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
width:95%;
max-width:620px;
margin:15px auto 25px;
direction:ltr;
}

.offer-btn{
padding:10px 5px;
border-radius:12px;
font-weight:700;
text-decoration:none;
color:#fff;
transition:.3s;
text-align:center;
font-size:13px;
}

.offer-btn:hover{
transform:translateY(-3px);
}

.uc660-btn{
background:#ff9900;
}

.uc325-btn{
background:#00a2ff;
}

.cp-btn{
background:#a020f0;
}

.mlbb-btn{
background:#00c8ff;
}

.premium-btn{
background:#ff4fc3;
}

.product-card{
position:relative;
overflow:hidden;
border-radius:22px;
background:linear-gradient(145deg,#0f0f0f,#070707);
border:1px solid rgba(255,184,0,.15);
transition:.4s;
box-shadow:0 10px 30px rgba(0,0,0,.6);
}

.product-card:hover{
transform:translateY(-12px) scale(1.02);
box-shadow:0 0 25px rgba(255,184,0,.35);
}

.product-card img{
width:100%;
height:240px;
object-fit:cover;
transition:.5s;
}

.product-card:hover img{
transform:scale(1.08);
filter:brightness(1.1);
}

.product-card h3{
font-size:20px;
margin:15px 0 8px;
color:#ffcc66;
}

.product-card p{
font-size:14px;
opacity:.8;
line-height:1.7;
padding:0 10px;
}

.product-card button{
margin:15px auto 20px;
display:block;
width:85%;
padding:12px;
border:none;
border-radius:14px;
font-weight:800;
cursor:pointer;
background:linear-gradient(135deg,#ffb800,#ff8c00);
color:#000;
transition:.3s;
}

.product-card button:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(255,184,0,.5);
}

@media(max-width:768px){

.offer-links{
grid-template-columns:repeat(5,minmax(55px,1fr));
gap:5px;
width:100%;
}

.hero-banner{
width:100%;
max-width:100%;
}

.logo{
font-size:20px;
}

.logo img{
width:32px;
height:32px;
}

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

}

html,
body{
overflow-x:hidden !important;
max-width:100%;
}