body{margin:0;font-family:Inter;background:#0a0f1c;color:#e6ecff}
.nav{position:fixed;width:100%;display:flex;justify-content:space-between;padding:20px;background:rgba(0,0,0,0.7);backdrop-filter:blur(12px);z-index:10}
.logo{display:flex;align-items:center;gap:10px;font-family:Orbitron;color:#4da6ff;font-weight:700}
.logo-mark{width:12px;height:12px;background:linear-gradient(45deg,#4da6ff,#00ff88);border-radius:50%}
nav a{margin-left:25px;color:#ccc;text-decoration:none}

.hero{
height:100vh;
background:url('hero.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.overlay{position:absolute;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(10,15,28,1))}

.hero-content{position:relative}

h1{font-family:Orbitron;font-size:60px;color:#4da6ff;margin:0}

.fade{opacity:0;transform:translateY(30px);animation:fadeUp 1s ease forwards}
.delay{animation-delay:0.5s}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.section{padding:100px 20px;text-align:center;max-width:1100px;margin:auto}
.dark{background:#0d1426}

.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:25px}

.card{
background:rgba(17,26,51,0.7);
padding:25px;
border-radius:14px;
min-width:220px;
backdrop-filter:blur(8px);
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
background:rgba(20,34,68,0.9);
}

.contact .btn{
display:inline-block;
padding:15px 30px;
background:#4da6ff;
color:#fff;
text-decoration:none;
border-radius:8px;
margin-top:20px;
}

footer{background:#0d1426;padding:30px;text-align:center}