*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif;}

html,body{
height:100%;
background:#000;
color:#fff;
overflow:hidden;
}

/* ===== Layers ===== */
.bg-video{
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.overlay{
position:fixed;
inset:0;
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75));
z-index:1;
}

#goldCanvas{
position:fixed;
inset:0;
z-index:2;
pointer-events:none;
}

.container{
position:relative;
z-index:3;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
animation:fadeIn 1.5s ease;
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(25px);}
to{opacity:1;transform:translateY(0);}
}

.logo{
width:150px;
margin-bottom:20px;
}

h1{
font-size:40px;
color:#d4af37;
font-weight:900;
margin-bottom:15px;
}

p{
font-size:18px;
max-width:700px;
line-height:1.9;
margin-bottom:30px;
color:#eee;
}

.enter-btn{
display:inline-block;
padding:16px 50px;
background:linear-gradient(45deg,#d4af37,#f5d77a);
color:#000;
font-size:18px;
font-weight:900;
border-radius:12px;
text-decoration:none;
transition:.3s;
box-shadow:0 0 25px rgba(212,175,55,.6);
}

.enter-btn:hover{
transform:scale(1.05);
box-shadow:0 0 45px rgba(212,175,55,1);
}

.stats{
display:flex;
gap:40px;
margin-top:40px;
flex-wrap:wrap;
justify-content:center;
}

.stat h2{
color:#d4af37;
font-size:26px;
}

.stat span{
font-size:14px;
color:#ccc;
}

.footer{
position:absolute;
bottom:20px;
font-size:13px;
color:#aaa;
}

@media(max-width:768px){
h1{font-size:26px;}
p{font-size:15px;}
.stats{gap:20px;}
}