@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    background:#050505;
    color:white;
    font-family:'Orbitron', sans-serif;
    overflow-x:hidden;
}


/* Cyber grid background */
body::before {
    content:"";
    position:fixed;
    width:100%;
    height:100%;
    background:
    linear-gradient(rgba(0,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,.05) 1px, transparent 1px);
    background-size:40px 40px;
    z-index:-1;
}


header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px 8%;
}


.logo {
    font-size:40px;
    font-weight:900;
    color:#00ffff;
    text-shadow:
    0 0 10px #00ffff,
    0 0 30px #8a2be2;
}

.logo span {
    display:block;
    font-size:15px;
    letter-spacing:10px;
    color:#b000ff;
}


nav a {
    color:white;
    text-decoration:none;
    margin-left:25px;
}


.hero {
    text-align:center;
    padding:120px 20px;
}


.hero h1 {
    font-size:60px;
    text-shadow:0 0 20px #b000ff;
}


.hero p {
    margin:25px;
    color:#00ffff;
}


.buttons {
    margin-top:40px;
}


.btn {
    display:inline-block;
    margin:10px;
    padding:15px 30px;
    border:2px solid #00ffff;
    color:white;
    text-decoration:none;
    transition:.3s;
}


.btn:hover {
    background:#00ffff;
    color:black;
    box-shadow:0 0 30px #00ffff;
}


section {
    padding:70px 10%;
    text-align:center;
}


h2 {
    color:#b000ff;
    margin-bottom:25px;
}


.cards {
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}


.card {
    background:#111;
    border:1px solid #333;
    padding:30px;
    width:300px;
    box-shadow:0 0 20px rgba(0,255,255,.2);
}


.card h3 {
    color:#00ffff;
}


footer {
    text-align:center;
    padding:30px;
    color:#777;
}


/* Mobile */

@media(max-width:700px){

header {
    flex-direction:column;
}

nav {
    margin-top:20px;
}

.hero h1 {
    font-size:35px;
}
