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

body{
font-family:Poppins, sans-serif;
background:#000;
color:white;
}

.hero{
height:100vh;
background:url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=2000") 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,.6),rgba(0,0,0,.9));
pointer-events:none; /* IMPORTANT FIX so buttons are clickable */
}

.content{
position:relative;
z-index:2;
max-width:900px;
}

h1{
font-family:Orbitron;
font-size:70px;
letter-spacing:6px;
margin-bottom:10px;
}

.content p{
opacity:.8;
margin-bottom:40px;
}

.buttons{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

.btn{
padding:16px 40px;
border-radius:40px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.primary{
background:linear-gradient(90deg,#ff00cc,#ff4dff);
color:white;
box-shadow:0 0 30px #ff00cc;
}

.primary:hover{
transform:scale(1.08);
}

.outline{
border:2px solid #ff00cc;
color:white;
}

.outline:hover{
background:#ff00cc;
}

.social{
margin-top:40px;
display:flex;
gap:25px;
justify-content:center;
opacity:.9;
}

.social a{
color:white;
text-decoration:none;
}

.prizes{
padding:120px 20px;
text-align:center;
background:#050505;
}

.prizes h2{
font-family:Orbitron;
margin-bottom:50px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

.card{
background:#111;
padding:50px;
border-radius:14px;
transition:.3s;
}

.card:hover{
transform:translateY(-12px);
box-shadow:0 0 30px rgba(255,0,200,0.4);
}

footer{
text-align:center;
padding:40px;
border-top:1px solid #222;
font-size:14px;
opacity:.7;
}