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

body{
font-family:Arial,Helvetica,sans-serif;
background:#0b1020;
color:white;
line-height:1.6;
}

section{
max-width:1100px;
margin:auto;
padding:70px 20px;
}

h2{
color:#d8b4fe;
margin-bottom:20px;
}

.hero{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px 80px;
background:linear-gradient(135deg,#0b1020,#3b0764,#7c3aed);
}

.hero-content{
max-width:850px;
}

.hero h1{
font-size:4rem;
margin-bottom:15px;
}

.hero h2{
font-size:2.3rem;
margin-bottom:15px;
}

.hero h3{
font-size:1.4rem;
font-weight:400;
color:#d8b4fe;
margin-bottom:25px;
}

.hero p{
font-size:1.2rem;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:25px;
}

.button{
display:inline-block;
padding:16px 34px;
background:#7c3aed;
color:white;
text-decoration:none;
border-radius:999px;
font-weight:bold;
transition:.3s;
}

.button:hover{
background:#9333ea;
transform:translateY(-3px);
}

.secondary{
background:transparent;
border:2px solid #7c3aed;
}

.secondary:hover{
background:#7c3aed;
}

.scroll{
opacity:.7;
}

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:rgba(11,16,32,.9);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(124,58,237,.3);
z-index:1000;
}

.logo{
font-size:2rem;
font-weight:bold;
}

.menu{
display:flex;
gap:25px;
}

.menu a{
color:#d8b4fe;
text-decoration:none;
}

.wallet-button{
background:#7c3aed;
padding:12px 22px;
border-radius:999px;
color:white;
text-decoration:none;
font-weight:bold;
}

.card,
.feature-card,
.stat-card,
.social-card,
.timeline-item{
background:#18203a;
border:1px solid #7c3aed;
border-radius:18px;
padding:25px;
}

.features-grid,
.social-grid,
#stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.feature-card{
text-align:center;
}

.feature-card h3{
margin-bottom:15px;
color:#d8b4fe;
}

.social-card{
text-align:center;
text-decoration:none;
color:white;
font-size:2rem;
transition:.3s;
}

.social-card:hover{
transform:translateY(-8px);
background:#232b4d;
}

.timeline{
display:flex;
flex-direction:column;
gap:25px;
margin-top:40px;
}

.timeline-item{
border-left:6px solid #555;
}

.timeline-item.done{
border-left-color:#22c55e;
}

.timeline-item.current{
border-left-color:#7c3aed;
}

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

.footer-links a{
color:#d8b4fe;
text-decoration:none;
}

.footer-links a:hover{
color:white;
}
.token-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}
footer{
background:#050814;
padding:50px 20px;
text-align:center;
margin-top:60px;
}

@media(max-width:768px){

.menu{
display:none;
}

.hero h1{
font-size:3rem;
}

.hero h2{
font-size:1.7rem;
}

.wallet-button{
padding:12px 18px;
font-size:.9rem;
}

}

#community{
text-align:center;
}

#community p{
max-width:700px;
margin:20px auto 35px;
}

#contact{
text-align:center;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.card{
margin-bottom:20px;
}

.timeline-item h3{
margin-bottom:10px;
color:#d8b4fe;
}

.timeline-item p{
margin:0;
}

.wallet-button{
cursor:pointer;
transition:.3s;
}

.wallet-button:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(124,58,237,.6);
}