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

body{
font-family:Poppins;
background:#0a0f1f;
color:#e6f1ff;
overflow-x:hidden;
}

.bg{
position:fixed;
inset:0;
background:radial-gradient(circle at top,#111a33,#05070f);
z-index:-1;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 50px;
backdrop-filter:blur(10px);
background:rgba(10,15,31,.6);
position:sticky;
top:0;
}

header h1{font-family:Orbitron;color:#00e5ff;}

nav a{
margin-left:20px;
text-decoration:none;
color:#e6f1ff;
transition:.3s;
}

nav a:hover{color:#00ffc3;}

.hero{
height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.hero h2{font-size:3em;margin-bottom:15px;}

.hero button{
margin-top:20px;
padding:15px 40px;
border:none;
border-radius:30px;
background:linear-gradient(45deg,#00e5ff,#7c4dff);
color:white;
cursor:pointer;
font-size:1em;
box-shadow:0 0 15px #00e5ff;
transition:.3s;
}

.hero button:hover{transform:scale(1.05);}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:80px 10%;
}

.card{
background:#111a33;
padding:40px;
border-radius:15px;
text-align:center;
font-size:1.3em;
box-shadow:0 0 15px rgba(0,229,255,.2);
transition:.4s;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 0 25px #00e5ff;
}

.timeline{
display:flex;
justify-content:space-around;
padding:60px 10%;
}

.timeline div{
padding:20px;
border:1px solid #00e5ff;
border-radius:10px;
box-shadow:0 0 10px #00e5ff;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:80px 10%;
}

.gallery img{
width:100%;
border-radius:15px;
transition:.5s;
}

.gallery img:hover{transform:scale(1.05);}

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