body {
margin: 0;
font-family: 'Poppins', sans-serif;
background: black;
color: white;
overflow-x: hidden;
}

#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}

#main { position: relative; z-index: 2; }
.hidden { display: none; }

/* INTRO */
#intro {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: black;
z-index: 10;
animation: fadeOut 1.5s 3s forwards;
}

.logo { width: 120px; }

/* HERO */
.hero {
text-align: center;
padding: 100px 20px;
}

.neon-text {
font-size: 50px;
text-shadow: 0 0 10px red, 0 0 30px cyan;
}

/* BUTTON */
.neon-btn {
padding: 12px 25px;
border: none;
border-radius: 30px;
background: linear-gradient(45deg, red, blue);
color: white;
cursor: pointer;
}

/* RUNS */
.runs {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
padding: 30px;
}

.card {
background: rgba(255,255,255,0.05);
padding: 20px;
border-radius: 15px;
}

/* REGISTER */
.register {
text-align: center;
padding: 50px;
}

input, select {
width: 80%;
padding: 10px;
margin: 10px;
background: #111;
color: white;
border: 1px solid #333;
}

/* ADMIN */
.admin {
text-align: center;
padding: 50px;
}

.card {
margin: 10px;
padding: 10px;
border: 1px solid #222;
border-radius: 10px;
}

/* MODAL */
#modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
}

.box {
background: #111;
padding: 20px;
border-radius: 10px;
}

/* ANIMATIONS */
@keyframes fadeOut {
to { opacity: 0; visibility: hidden; }
}