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

body{
font-family:'Poppins',sans-serif;
background:#000;
overflow-x:hidden;
}

/* OFFER STRIP */

.offer{
background:#ffd700;
color:#000;
text-align:center;
font-size:0.9rem;
letter-spacing:.08em;
padding:.7em 1em;
font-weight:600;
}

/* HERO */

.hero{
position:relative;
width:100%;
height:100vh;
}



/* DESKTOP IMAGE */

.hero-desktop{
width:100%;
height:100%;
    object-fit: fill;
display:block;
}

/* MOBILE IMAGE */

.hero-mobile{
display:none;
width:100%;
height:100%;
    object-fit: fill;
}



/* AGE GATE */

.age-gate{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.85);
padding:3rem 2rem;
text-align:center;
border-radius:.4rem;
max-width:40rem;
width:80%;
}

.age-gate p{
color:#fff;
font-size:1.3rem;
margin-bottom:2rem;
}

.buttons{
display:flex;
justify-content:center;
gap:2rem;
}

.btn{
padding:.9rem 2.4rem;
font-size:1rem;
font-weight:600;
border:none;
cursor:pointer;
}

.yes{
background:#ffd700;
color:#000;
}

.no{
background:#40b17a;
color:#fff;
}

/* FOOTER */

footer{
background:#000;
padding:1rem;
text-align:center;
}

footer a{
color:#fff;
text-decoration:none;
font-size:.9rem;
}

footer a:hover{
text-decoration:underline;
}

/* MOBILE */

@media (max-width:768px){

.hero{
height:94vh;
}

.hero-desktop{
display:none;
}

.hero-mobile{
display:block;
}

.age-gate{
width:90%;
padding:2rem;
}

.age-gate p{
font-size:1rem;
}

.buttons{
gap:1rem;
}

.btn{
padding:.8rem 1.8rem;
font-size:.9rem;
}

.offer{
font-size:.75rem;
}

}