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

body{
font-family:'Orbitron',sans-serif;
background:#050510;
color:white;
overflow-x:hidden;
}

.bg{
position:fixed;
inset:0;
background:
linear-gradient(rgba(5,0,20,.88),rgba(0,0,0,.94)),
url('hero.png');
background-size:cover;
background-position:center;
z-index:-3;
filter:saturate(1.3);
}

.particles{
position:fixed;
inset:0;
background-image:
radial-gradient(#ff00ff 1px, transparent 1px),
radial-gradient(#00ffff 1px, transparent 1px);
background-size:80px 80px;
opacity:.15;
z-index:-2;
animation:float 25s linear infinite;
}

@keyframes float{
from{transform:translateY(0px);}
to{transform:translateY(-120px);}
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
backdrop-filter:blur(14px);
position:sticky;
top:0;
z-index:100;
background:rgba(0,0,0,.35);
border-bottom:1px solid rgba(255,0,255,.25);
}

.logo{
font-size:2rem;
font-weight:900;
color:#ff00ff;
text-shadow:0 0 20px #ff00ff;
}

.nav-links{
display:flex;
gap:30px;
}

.nav-links a{
color:white;
text-decoration:none;
transition:.3s;
}

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

.hero{
min-height:100vh;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
padding:60px 8%;
gap:40px;
}

.hero-left h1{
font-size:5rem;
line-height:1;
margin-bottom:25px;
text-shadow:0 0 25px #ff00ff;
}

.hero-left p{
font-size:1.2rem;
line-height:1.8;
color:#d4d4d4;
max-width:650px;
margin-bottom:35px;
}

.hero-right img{
width:100%;
max-width:600px;
border-radius:30px;
border:2px solid rgba(255,0,255,.3);
box-shadow:0 0 40px rgba(255,0,255,.4);
}

.cta-buttons{
display:flex;
gap:20px;
margin-bottom:30px;
flex-wrap:wrap;
}

.btn{
padding:16px 28px;
border-radius:14px;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.neon{
background:#ff00ff;
color:white;
box-shadow:0 0 25px #ff00ff;
}

.ghost{
border:2px solid #00ffff;
color:#00ffff;
}

.btn:hover{
transform:translateY(-4px) scale(1.03);
}

.socials{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.socials a{
color:#00ffff;
text-decoration:none;
font-size:.9rem;
}

.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
padding:80px 8%;
}

.stat-card,.road-card{
background:rgba(0,0,0,.45);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.1);
padding:35px;
border-radius:24px;
box-shadow:0 0 20px rgba(255,0,255,.12);
}

.stat-card h2,.road-card h3{
margin-bottom:15px;
color:#00ffff;
}

.roadmap,.whitepaper{
padding:80px 8%;
}

.roadmap h2,.whitepaper h2{
text-align:center;
font-size:3rem;
margin-bottom:50px;
color:#ff00ff;
}

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

.paper-box{
height:850px;
overflow:hidden;
border-radius:24px;
border:2px solid rgba(255,0,255,.3);
box-shadow:0 0 35px rgba(255,0,255,.2);
}

.paper-box iframe{
width:100%;
height:100%;
border:none;
background:white;
}

footer{
padding:50px;
text-align:center;
color:#888;
}

@media(max-width:900px){

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

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

.hero-right{
display:flex;
justify-content:center;
}

.nav-links{
display:none;
}
}