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

body {
font-family: "Inter", sans-serif;
background: #050505;
color: white;
}

/* INTRO */
#intro {
position: fixed;
width: 100%;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
animation: fadeOut 2s ease forwards;
animation-delay: 2.5s;
}

.intro-content {
text-align: center;
animation: fadeIn 2s ease;
}

.intro-content h1 {
font-size: 3rem;
letter-spacing: 5px;
}

.intro-content p {
color: #aaa;
}

/* HERO */
.hero {
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* VIDEO BACKGROUND */
.bg-video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: 100%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;

/* cinematic fade-in */
opacity: 0;
animation: fadeVideo 2s ease forwards;
}

/* DARK OVERLAY */
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.5),
rgba(0,0,0,0.9)
);
z-index: 1;
}

/* CONTENT ABOVE VIDEO */
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 700px;
}


/* CTA */
.cta-buttons {
margin-top: 30px;
}

.cta-buttons a {
margin: 10px;
padding: 12px 26px;
background: #ff3c00;
color: white;
text-decoration: none;
border-radius: 6px;
}

.cta-buttons .outline {
background: transparent;
border: 1px solid #555;
}

/* SECTIONS */
.section {
padding: 100px 20px;
max-width: 1000px;
margin: auto;
}

/* GRID */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}

.card {
background: #111;
padding: 25px;
border-radius: 10px;
border: 1px solid #222;
transition: 0.3s;
}

.card:hover {
transform: translateY(-8px);
}

/* SOCIAL */
.social-grid a {
display: inline-block;
margin: 10px;
padding: 12px 24px;
border: 1px solid #333;
text-decoration: none;
color: white;
}

/* SPONSOR */
.sponsor {
text-align: center;
}

.btn {
display: inline-block;
margin-top: 20px;
padding: 14px 28px;
background: #ff3c00;
color: white;
text-decoration: none;
}

/* FOOTER */
footer {
text-align: center;
padding: 40px;
color: #666;
}

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

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes zoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@keyframes fadeVideo {
to { opacity: 1; }
}