:root{
  --bg:#0f1115; --surface:#171923; --muted:#8b95a7; --fg:#e9eef6; --brand:#5cc8ff; --brand2:#b0f; --ok:#28c76f; --warn:#ffb200;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; color:var(--fg); background:linear-gradient(180deg,#0b0d12 0%, #121420 60%, #0f1115 100%);} 
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto; border-radius:12px}
.container{width:min(1200px,92%); margin-inline:auto}
.btn{display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#071018; padding:.85rem 1.2rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow); border:0; cursor:pointer}
.btn.secondary{background:#ffffff14; color:var(--fg); border:1px solid #ffffff22}
.chip{display:inline-block; padding:.35rem .7rem; background:#ffffff12; border:1px solid #ffffff22; border-radius:999px; font-size:.85rem; color:var(--muted)}
/* NAV */
header{position:fixed; inset:0 0 auto 0; backdrop-filter:saturate(140%) blur(10px); background:#0b0d12b3; border-bottom:1px solid #ffffff12; z-index:40}
nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:800}
.logo-emoji{font-size:1.3rem}
.navlinks{display:flex; gap:1rem}
.navlinks a{padding:.5rem .8rem; color:#cdd6e6}
.hamb{display:none}
@media (max-width:900px){
  .navlinks{display:none}
  .hamb{display:block}
  #mobileMenu{display:none; position:absolute; top:64px; left:0; right:0; background:#0b0d12f2; border-bottom:1px solid #ffffff1a}
  #mobileMenu a{display:block; padding:1rem 1.2rem; border-top:1px solid #ffffff12}
}
/* HERO */
.hero{position:relative; padding-top:88px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-family:"Playfair Display",serif; font-size:clamp(2rem,3.8vw,3.3rem); line-height:1.1; margin:.2rem 0 1rem}
.lead{color:#c7d1e2; font-size:1.05rem}
.hero-media{position:relative}
.hero-img{aspect-ratio: 4/3; object-fit:cover}
.badge{position:absolute; left:1rem; bottom:1rem; background:#0b0d12d8; padding:.6rem .8rem; border:1px solid #ffffff1e; border-radius:12px}
.kpis{margin-top:1.2rem; display:flex; gap:1.2rem; flex-wrap:wrap}
.kpi{background:#ffffff0f; border:1px solid #ffffff14; padding:.9rem 1rem; border-radius:12px; min-width:140px}
/* SECTIONS */
section{padding:72px 0}
h2{font-family:"Playfair Display",serif; font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 1rem}
p{color:#c8d2e4}
.card{background:#0d0f17; border:1px solid #ffffff12; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.grid{display:grid; gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr} .grid-3,.grid-2{grid-template-columns:1fr}}
/* ROOMS */
.room .meta{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.6rem}
.room .meta small{color:var(--muted)}
.pill{padding:.35rem .6rem; border-radius:999px; background:#ffffff12; border:1px solid #ffffff22; font-size:.8rem}
/* AMENITIES */
.amen{display:flex; align-items:flex-start; gap:.8rem}
.amen svg{flex:0 0 28px}
/* REVIEWS */
.quote{font-size:1.05rem; color:#e9eef6}
/* CTA band */
.band{background:linear-gradient(90deg,#101423,#0f1115); border:1px solid #ffffff14; padding:1.2rem; border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
/* FOOTER */
footer{padding:48px 0; border-top:1px solid #ffffff12; color:#a9b5c9}
.footgrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
@media (max-width:900px){.footgrid{grid-template-columns:1fr}}
/* BOOKING BAR */
.booking{display:grid; grid-template-columns:repeat(5, 1fr); gap:.6rem; background:#0c0f17; border:1px solid #ffffff18; padding:.6rem; border-radius:999px; align-items:center}
.booking input, .booking select{width:100%; background:#0a0d14; color:var(--fg); border:1px solid #ffffff20; padding:.7rem .9rem; border-radius:999px}
.booking .btn{height:44px; justify-content:center}
@media (max-width:900px){.booking{grid-template-columns:1fr; border-radius:16px}}
/* MAP */
.mapwrap{border-radius:16px; overflow:hidden; border:1px solid #ffffff18}