:root{
  --bg:#0b0b0b;--bg2:#121212;--card:#1c1c1c;--text:#eaeaea;--muted:#9ca3af;
  --accent:#ff2ea6;--accent-2:#67e8f9;--ring:rgba(255,46,166,.35);
  --radius:18px;
  --container:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Safe area support for iOS notches */
body{padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg); color:var(--text); line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* Header */
header{position:sticky;top:0;z-index:30;background:rgba(11,11,11,.7);backdrop-filter:blur(10px);border-bottom:1px solid #1f2937}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.logo{font-weight:900;font-size:1.125rem;letter-spacing:.4px}
.logo span{background: linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hamburger{display:inline-flex;gap:6px;flex-direction:column;padding:10px;border-radius:12px;border:1px solid #2b2b2b;background:transparent;cursor:pointer}
.hamburger span{width:20px;height:2px;background:#e5e7eb;border-radius:2px}
.desktop{display:none}
.desktop ul{display:flex;gap:10px;align-items:center;list-style:none;margin:0;padding:0}
.desktop a{display:inline-block;padding:10px 12px;border-radius:12px}
.btn.small{padding:10px 14px;font-size:.9rem}

/* Mobile nav */
#mobileMenu{display:none;padding:10px 0}
#mobileMenu.open{display:block}
#mobileMenu a{display:block;padding:14px;border:1px solid #262626;border-radius:14px;margin-bottom:10px}

/* Hero */
.hero{display:block;min-height:70dvh;text-align:center;padding:56px 0}
.hero-inner{display:grid;gap:24px;align-items:center}
.hero-copy{max-width:800px;margin:0 auto}
.title{font-size:clamp(36px,9vw,80px);font-weight:900;line-height:1.05;margin:0}
.title .grad{background: linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--muted);font-size:clamp(15px,3.5vw,20px);margin-top:12px;padding:0 4px}
.btns{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.btn{padding:14px 18px;border-radius:16px;font-weight:800;border:1px solid #2b2b2b;min-width:44px;min-height:44px;background:transparent;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px var(--ring)}
.btn.secondary{color:var(--accent);border-color:var(--accent)}

.hero-media{display:none}
.hero-thumb{height:260px;border-radius:22px;background:radial-gradient(120px 90px at 20% 20%, rgba(255,46,166,.35), transparent 60%), radial-gradient(140px 100px at 80% 60%, rgba(103,232,249,.28), transparent 60%), linear-gradient(135deg,#222,#161616)}

/* Sections */
section{padding:56px 0}
h2{font-size:clamp(24px,5vw,40px);margin:0 0 16px}
.lead{color:var(--muted);max-width:720px}

/* Cards grid */
.grid{display:grid;gap:14px}
.rooms-grid{margin-top:18px;grid-template-columns:1fr}
@media(min-width:540px){.rooms-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.rooms-grid{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--card);border:1px solid #262626;border-radius:22px;padding:16px;display:flex;flex-direction:column}
.thumb{height:160px;border-radius:16px;background:radial-gradient(120px 90px at 20% 20%, rgba(255,46,166,.35), transparent 60%),
        radial-gradient(140px 100px at 80% 60%, rgba(103,232,249,.28), transparent 60%),
        linear-gradient(135deg,#222,#161616)}
.card h3{margin:12px 0 6px;font-size:18px}
.price{font-weight:800}
.pill{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:#0f172a;color:#cbd5e1;border:1px solid #243149;font-size:12px}
.card .btn{width:100%;margin-top:10px}

/* Features */
.features{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{background:var(--card);border:1px solid #262626;border-radius:22px;padding:18px;text-align:center}

/* Contact */
form{margin-top:16px;display:grid;gap:10px;max-width:520px}
input{padding:14px 16px;border-radius:14px;border:1px solid #2b2b2b;background:#0f0f10;color:var(--text);min-height:44px}
input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sticky mobile bar */
.sticky-bar{position:sticky;bottom:0;z-index:40;background:rgba(12,12,12,.9);backdrop-filter:blur(8px);border-top:1px solid #1f2937}
.sticky-inner{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px}
.sticky-inner .btn{flex:1;text-align:center}

/* Footer */
footer{background:var(--bg2);border-top:1px solid #1f2937;color:var(--muted);padding:28px 0;text-align:center}

/* Responsive breakpoints */
@media(min-width:768px){
  .desktop{display:block}
  .hamburger{display:none}
  .hero{text-align:left;padding:72px 0}
  .hero-inner{grid-template-columns:1.2fr .8fr}
  .hero-copy{margin:0}
  .hero-media{display:block}
  .hero-thumb{height:320px}
}
@media(min-width:1200px){
  .hero-thumb{height:400px}
  .container{padding:0 24px}
}

/* Hide mobile sticky bar on larger screens */
@media(min-width:768px){
  .sticky-bar{display:none}
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* --- Refinements (cards, pills, buttons) --- */
.muted{color:var(--muted)}
.card{position:relative;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion: no-preference){
  .card{transition:transform .2s ease, box-shadow .2s ease}
  .btn.primary{transition:transform .2s ease, box-shadow .2s ease}
}
.card .thumb{margin-bottom:10px}
.card p{margin:8px 0 10px}
/* Make price pill look like a status bar and stretch full width */
.pill{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#0a0f1e, #0a0f1e 60%, #0a0f1e);
  border:1px solid #0f1a33;
  color:#cbd5e1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.pill .price{color:#e5edf7;font-weight:900}
/* Push CTA to bottom and give it a chunkier look */
.card .btn{
  margin-top:auto;
  font-size:1rem;
  padding:16px 18px;
  border-radius:18px;
}
/* Improve button focus visibility */
.btn:focus-visible{
  outline:3px solid var(--accent-2);
  outline-offset:2px;
}
/* Tweak grid gaps on large screens */
@media(min-width:1200px){
  .rooms-grid{gap:20px}
}

/* Subtle rounded corners for the whole section background contrast */
#rooms .container{padding-top:6px}