/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI";
}

body{
background:#0b1220;
color:white;
overflow-x:hidden;
}

/* LOADER */
#loader{
position:fixed;
inset:0;
background:#0b1220;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:99999;
opacity:1;
transition:0.5s;
}

.spinner{
width:60px;
height:60px;
border:5px solid #334155;
border-top:5px solid #38bdf8;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

/* PARTICLES (IMPORTANT FIX) */
#particles{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
}

/* TOPBAR */
.topbar{
position:fixed;
top:0;
width:100%;
background:linear-gradient(90deg,#0f172a,#1e3a8a,#0f172a);
text-align:center;
padding:6px;
font-size:13px;
z-index:9999;
}

/* NAVBAR */
header{
position:fixed;
top:32px;
width:100%;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);
z-index:9998;
padding:12px;
}

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

nav a{
color:white;
text-decoration:none;
}

/* DROPDOWN */
.dropdown{
position:relative;
}

.dropdown-content{
display:none;
position:absolute;
background:white;
color:black;
top:25px;
padding:10px;
border-radius:8px;
}

.dropdown:hover .dropdown-content{
display:block;
}

/* HERO (FIXED NO BLACK BUG) */
.hero{
height:100vh;
position:relative;
display:flex;
justify-content:center;
align-items:center;
text-align:center;

/* IMPORTANT FIX */
background:url("image.jpg") center/cover no-repeat;
background-size:cover;
background-position:center;
z-index:1;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.35); /* reduced black */
}

.hero-content{
position:relative;
z-index:2;
}

.hero h1{
font-size:45px;
text-shadow:0 0 20px #38bdf8;
}

.hero button{
margin-top:20px;
padding:12px 25px;
background:#38bdf8;
border:none;
border-radius:10px;
cursor:pointer;
}

/* SECTIONS */
.section{
padding:80px 20px;
text-align:center;
position:relative;
z-index:2;
}

/* ABOUT */
.about-box{
max-width:900px;
margin:auto;
background:rgba(255,255,255,0.08);
padding:30px;
border-radius:20px;
backdrop-filter:blur(10px);
}

.highlight{
color:#38bdf8;
font-weight:bold;
}

/* PRINCIPAL */
.principal-box{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
background:rgba(255,255,255,0.08);
padding:40px;
border-radius:20px;
}

/* STREAMS */
.cards{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.stream-card{
background:rgba(255,255,255,0.08);
padding:25px;
border-radius:15px;
width:250px;
transition:0.4s;
cursor:pointer;
}

.stream-card:hover{
transform:translateY(-12px) scale(1.05);
background:linear-gradient(135deg,#38bdf8,#6366f1);
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
background:#020617;
}

/* MOBILE */
@media(max-width:768px){
.hero h1{font-size:24px;}
}