body{
margin:0;
font-family:Poppins,sans-serif;
background:url(images/background.jpg);
background-size:cover;
background-attachment:fixed;
color:white;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 25px;
background:rgba(0,0,0,0.85);
position:sticky;
top:0;
z-index:100;
}

.logo{
font-weight:600;
color:#ff7a18;
}

nav a{
margin-left:20px;
color:white;
text-decoration:none;
font-size:14px;
}

nav a:hover{
color:#ff7a18;
}

.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 40px;
background:rgba(0,0,0,0.6);
}

.hero-text{
max-width:500px;
}

.hero-text h1{
font-size:40px;
margin-bottom:15px;
}

.hero-image img{
width:300px;
position:relative;
z-index:2;
}

.voltfox-glow{
position:relative;
display:inline-block;
}

.voltfox-glow::before{
content:'';
position:absolute;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
background:radial-gradient(circle,rgba(255,120,30,0.6),transparent 70%);
animation:pulse 2s infinite;
z-index:1;
}

@keyframes pulse{
0%{transform:scale(0.9);opacity:0.6}
50%{transform:scale(1.1);opacity:1}
100%{transform:scale(0.9);opacity:0.6}
}

.carousel-section{
padding:70px 40px;
background:rgba(0,0,0,0.7);
text-align:center;
}

.carousel{
display:flex;
overflow-x:auto;
gap:20px;
padding:20px;
scroll-snap-type:x mandatory;
}

.carousel img{
width:320px;
border-radius:10px;
scroll-snap-align:center;
}

.why{
padding:70px 40px;
background:rgba(0,0,0,0.7);
text-align:center;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.why-grid div{
background:#1a1a22;
padding:25px;
border-radius:10px;
}

.features{
padding:70px 40px;
background:rgba(0,0,0,0.7);
text-align:center;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:40px;
}

.grid div{
background:#1a1a22;
padding:20px;
border-radius:8px;
}

.roadmap{
padding:70px 40px;
background:rgba(0,0,0,0.7);
text-align:center;
}

.support{
padding:70px 40px;
text-align:center;
background:rgba(0,0,0,0.7);
}

.donate{
display:inline-block;
background:#ff7a18;
padding:15px 30px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:500;
}

footer{
text-align:center;
padding:40px;
background:#111;
}

#counter{
font-family:monospace;
font-size:26px;
letter-spacing:6px;
color:#ff7a18;
margin:10px 0;
}

@media(max-width:768px){

.hero{
flex-direction:column;
text-align:center;
}

.hero-image img{
width:220px;
margin-top:20px;
}

.hero-text h1{
font-size:30px;
}

.carousel img{
width:260px;
}
.share-buttons{
display:flex;
gap:15px;
justify-content:center;
margin:15px 0;
flex-wrap:wrap;
}

.share-buttons a{
background:#ff7a18;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.share-buttons a:hover{
background:#ff5400;
}

.section{
padding:70px 40px;
background:rgba(0,0,0,0.7);
text-align:center;
}

.assistant-box{
background:#1a1a22;
padding:25px;
border-radius:10px;
max-width:500px;
margin:auto;
}

.overlay-example{
background:#1a1a22;
padding:20px;
border-radius:10px;
font-family:monospace;
color:#ff7a18;
max-width:200px;
margin:20px auto;
}

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

.share-buttons a{
background:#ff7a18;
color:white;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-size:14px;
}

.share-buttons a:hover{
background:#ff5400;
}

.section h3{
color:#ff7a18;
margin-bottom:10px;
}

.section-image{
width:100%;
max-width:1100px;
display:block;
margin:40px auto;
border-radius:10px;
}