/* Lucky Spa Massage — styles.css */
:root{
  --bg:#ffffff;
  --ink:#1b1d1c;
  --sub:#4f5d53;
  --brand:#80c79a;
  --brand-2:#dff3e3;
  --card:#f7faf8;
  --ring: 0 0 0 3px rgba(128,199,154,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-family:"Playfair Display", serif;font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.5rem}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 92%); margin-inline:auto}
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--ink);
  font-weight:600; text-decoration:none; transition:.2s;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.call{border-color:var(--brand); background:var(--brand-2)}
.small{font-size:.9rem; color:var(--sub)}
.section{padding:4rem 0}
.section.alt{background:linear-gradient(180deg, #fff, var(--brand-2))}
.section-lead{color:var(--sub); margin-bottom:1rem}

.site-header{
  position:sticky; top:0; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(8px);
  z-index:20; border-bottom:1px solid #eee;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:700}
.logo{filter: drop-shadow(0 1px 0 #fff)}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{padding:.4rem .2rem}
.lang-toggle{
  border:1px solid #ddd; background:#fff; padding:.4rem .6rem; border-radius:.4rem; cursor:pointer;
}
.lang-toggle:focus{outline:none; box-shadow:var(--ring)}

.hero{position:relative; background:linear-gradient(180deg, var(--brand-2), #fff)}
.hero-inner{display:grid; grid-template-columns: 1.05fr .95fr; gap:2rem; align-items:center; padding:2rem 0}
.hero-copy .lead{font-size:1.2rem; color:var(--sub)}
.hero-cta{display:flex; gap:.8rem; margin:1rem 0 1rem}
.quick-facts{list-style:none; padding:0; margin:1rem 0 0; color:var(--sub)}
.quick-facts li{margin:.25rem 0}
.hero-figure img{width:100%; height:auto; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.07)}
.wave{position:absolute; left:0; right:0; bottom:-1px; height:16px; background:radial-gradient(50% 200% at 50% 150%, transparent 50%, #fff 52%);}

.cards{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1rem}
.card{background:var(--card); border:1px solid #e8eee9; padding:1rem; border-radius:.8rem; min-height:150px}
.card p{color:var(--sub)}

.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0}
.price-card{background:#fff; border:1px solid #e8eee9; border-radius:.8rem; padding:1rem; text-align:center}
.price-card .price{font-size:2rem; font-weight:700; margin:.3rem 0}
.price-card.featured{border-color:var(--brand); box-shadow:0 10px 25px rgba(128,199,154,.15)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.about-figure img{width:100%; height:auto; border-radius:1rem; box-shadow:0 10px 30px rgba(0,0,0,.07)}

.contact-grid{display:grid; grid-template-columns: 1fr 1.5fr; gap:1rem; align-items:stretch}
.contact-card{background:#fff; border:1px solid #e8eee9; border-radius:.8rem; padding:1rem}
.map-wrap{border-radius:.8rem; overflow:hidden; border:1px solid #e8eee9}
.map-wrap iframe{width:100%; height:360px; border:0}

.site-footer{border-top:1px solid #eee; padding:2rem 0; background:#fff}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:1rem}
.footer-nav{display:flex; gap:1rem}

.checklist{padding-left:1.4rem}
.checklist li{margin:.4rem 0}
.checklist li::marker{content:"✔ "; color:var(--brand)}

/* Responsive */
@media (max-width: 1000px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 800px){
  .hero-inner{grid-template-columns:1fr; padding:1rem 0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .nav a:not(.btn){display:none}
}