body {
    margin:0;
    font-family: 'Segoe UI', Arial;
    background:#020b20;
    color:white;
}
.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 30px;
    background:rgba(0,0,0,0.4);
    position:fixed;
    width:100%;
    top:0;
    z-index:20;
    backdrop-filter:blur(10px);
}
.header a {
    color:white;
    text-decoration:none;
    margin-left:20px;
    font-weight:bold;
}
.logo { height:50px; }

.hero {
    height:85vh;
    background:linear-gradient(135deg,#001a3c,#003a80,#0050d0);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}
.hero-content h1 {
    font-size:52px;
    margin-bottom:10px;
}
.hero-content p {
    font-size:20px;
    opacity:0.9;
}
.cta {
    display:inline-block;
    background:#1e88e5;
    padding:12px 26px;
    margin-top:20px;
    border-radius:6px;
    color:white;
    text-decoration:none;
}

.cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding:60px 20px;
    gap:25px;
}
.card {
    width:260px;
    padding:25px;
    background:#06162f;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,0.4);
    transition:0.3s;
}
.card:hover {
    transform:translateY(-6px);
    box-shadow:0 6px 20px rgba(0,0,0,0.5);
}

.page { padding:150px 40px; }

.fade-in { animation:fadein 1.2s ease forwards; opacity:0; }
.fade-in-up { animation:fadeup 1.2s ease forwards; opacity:0; }

@keyframes fadein { from{opacity:0;} to{opacity:1;} }
@keyframes fadeup { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

footer {
    background:#001a3c;
    padding:20px;
    text-align:center;
    margin-top:50px;
}