*{
box-sizing:border-box;
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:#f7f2ea;
color:#2f3a2f;
}

.hidden{
display:none;
}

.hero-image{
height:58vh;
background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.4)),
url('cover.jpeg') center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
padding:20px;
}

.hero-overlay h1{
font-size:3.2rem;
line-height:1.05;
margin:0 0 12px;
}

.hero-overlay p{
font-size:1.2rem;
}

.logo{
font-size:1rem;
letter-spacing:5px;
margin-bottom:20px;
}

.unlock-card{
background:#f8f3ec;
max-width:520px;
margin:-45px auto 40px;
padding:35px;
border-radius:35px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
text-align:center;
position:relative;
}

.lock-icon{
font-size:3rem;
margin-bottom:12px;
}

input{
width:100%;
padding:16px;
border-radius:18px;
border:1px solid #ddd;
margin-top:20px;
font-size:1rem;
}

button{
width:100%;
padding:16px;
border:none;
border-radius:18px;
margin-top:18px;
background:#50623a;
color:white;
font-size:1rem;
cursor:pointer;
}

.notice{
margin-top:20px;
padding:18px;
background:white;
border-radius:18px;
}

.main-hero{
height:42vh;
background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.4)),
url('cover.jpeg') center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.menu-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:16px;
padding:24px;
}

.menu-card{
background:white;
padding:22px;
border-radius:24px;
text-decoration:none;
color:#2f3a2f;
text-align:center;
font-weight:bold;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.card{
background:white;
margin:20px;
padding:24px;
border-radius:28px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.wifi-image{
width:100%;
border-radius:24px;
}

.button-grid{
display:grid;
gap:12px;
margin-top:20px;
}

.action-btn{
display:block;
background:#50623a;
color:white;
padding:16px;
text-align:center;
border-radius:18px;
text-decoration:none;
font-weight:bold;
}

.nearby-grid{
display:grid;
gap:16px;
}

.nearby-card{
background:#f3ede4;
padding:22px;
border-radius:22px;
text-decoration:none;
color:#2f3a2f;
}

.nearby-card span{
font-size:2rem;
}

.contact-card{
background:#f2ece2;
padding:20px;
border-radius:22px;
margin-bottom:16px;
}

.contact-buttons{
display:flex;
gap:12px;
margin-top:14px;
}

.contact-btn{
flex:1;
padding:14px;
border-radius:14px;
text-decoration:none;
text-align:center;
background:#50623a;
color:white;
font-weight:bold;
}

.whatsapp{
background:#2f8f5b;
}

.floating-whatsapp{
position:fixed;
bottom:20px;
right:20px;
width:64px;
height:64px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
text-decoration:none;
color:white;
box-shadow:0 10px 24px rgba(0,0,0,.2);
}

footer{
padding:40px 20px;
text-align:center;
color:#666;
}

ul li{
margin-bottom:10px;
}

@media(max-width:768px){
.hero-overlay h1{
font-size:2.4rem;
}

.unlock-card{
margin:-35px 16px 40px;
padding:28px;
}

.contact-buttons{
flex-direction:column;
}
}


.helper-text{
margin-top:18px;
line-height:1.6;
color:#55624f;
background:#f3ede4;
padding:16px;
border-radius:18px;
}