:root {
  --primary: #2E7D32;
  --accent: #D4A017;
  --bg: #FAFAF5;
  --text: #183126;
  --muted: #5f6e66;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background: #f4f5f0;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1140px, calc(100% - 2rem)); margin: 0 auto; }
.section { padding: 5.5rem 0; position: relative; }
#overview, #gallery, #contact { background: #fff; }
#pricing, #location, #amenities, #faq { background: #f7f8f2; }
.section-title { font-size: clamp(1.95rem, 2.5vw, 2.4rem); margin-bottom: .75rem; color: var(--primary); letter-spacing: .02em; position: relative; }
.section-title::after { content: ''; display: block; width: 70px; height: 4px; background: var(--accent); border-radius: 999px; margin: 1rem 0 0.9rem; }
.section-subtitle { color: var(--muted); max-width: 720px; margin-bottom: 2rem; }
.btn { display: inline-block; padding: 0.85rem 1.25rem; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.navbar { position: sticky; top: 0; z-index: 1000; padding: 1rem 0; background: #2e2e32; color: #fff; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: inline-flex; align-items: center; gap: 0.85rem; font-size: 1rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .03em; }
.logo-img { height: 40px; width: auto; display: block; }
.logo span { font-size: 0.92rem; letter-spacing: .04em; opacity: 0.9; }
.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a { color: #fff; font-weight: 600; transition: color 0.2s ease; }
.nav-links a:hover { color: #f5f5f3; }
.nav-links .btn { margin-left: .3rem; }
.hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.4rem; }
.hero { position: relative; min-height: 92vh; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.4)); color: #fff; display: grid; align-items: center; overflow: hidden; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.3)); z-index: -1; }
.hero-content { max-width: 700px; padding: 6rem 0; }
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); margin: 0 0 1rem; line-height: 1.13; }
.hero .subtitle { font-size: 1.1rem; max-width: 620px; margin: 0 0 1.5rem; }
.badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 2rem; }
.badge-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: .65rem .95rem; border-radius: 999px; backdrop-filter: blur(6px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.spec-card, .pricing-card, .facility-card, .amenity-card, .gallery-card, .contact-card { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 1.2rem; }
.spec-card h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--primary); }
.spec-card p { margin: 0; color: var(--muted); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 0; }
.pricing-grid div { background: #f8f8ef; padding: .8rem; border-radius: 12px; border: 1px solid #ececd8; }
.pricing-grid span { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .04em; }
.pricing-card { background: linear-gradient(135deg, #ffffff 0%, #faf9ef 100%); border: 1px solid #ececd8; padding: 1.3rem; position: relative; overflow: hidden; }
.pricing-card h3 { margin: 0 0 .6rem; color: var(--primary); font-size: 1.2rem; }
.pricing-card p { margin: .7rem 0 0; color: var(--muted); }
.pricing-card::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 90px; height: 90px; background: radial-gradient(circle, rgba(212,160,23,0.16) 0%, rgba(212,160,23,0)); pointer-events: none; }
.facility-grid, .amenity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gallery-carousel { position: relative; max-width: 860px; margin: 0 auto; height: 320px; }
.gallery-track { display: flex; transition: transform 0.35s ease; height: 100%; }
.gallery-card { position: relative; overflow: hidden; border-radius: 18px; height: 100%; box-shadow: var(--shadow); flex: 0 0 100%; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); color: #fff; font-weight: 600; }
.gallery-controls { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.gallery-btn { border: none; background: var(--primary); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); }
.gallery-btn:hover { transform: scale(1.03); }
.gallery-dots { display: flex; gap: 0.4rem; }
.gallery-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(24,49,38,0.25); cursor: pointer; padding: 0; }
.gallery-dot.active { background: var(--primary); }
.faq-list { display: grid; gap: .75rem; }
.faq-item { background: var(--white); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.faq-question { width: 100%; border: none; background: none; text-align: left; padding: 1rem 1.1rem; font-size: 1rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-answer { display: none; padding: 0 1.1rem 1rem; color: var(--muted); }
.faq-item.active .faq-answer { display: block; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.2rem; }
form { display: grid; gap: .8rem; }
input, textarea, select { width: 100%; border: 1px solid #d9ded8; padding: .85rem 1rem; border-radius: 10px; font: inherit; }
textarea { min-height: 120px; resize: vertical; }
.footer { background: #14271b; color: #e7f1e8; padding: 3.2rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.footer a { color: #f7f4d8; }
.whatsapp-float { position: fixed; right: 1rem; bottom: 1rem; background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--shadow); z-index: 1500; }
/* Side CTA groups: vertical stacking and show-on-scroll */
.side-cta-group { position: fixed; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .6rem; z-index: 1600; transition: transform .28s ease, opacity .28s ease; pointer-events: auto; }
.side-cta-group.side-cta-left { left: 0; align-items: flex-start; }
.side-cta-group.side-cta-right { right: 0; align-items: flex-end; }
.side-cta-group.side-cta-left .side-cta { writing-mode: vertical-rl; transform: rotate(180deg); border-right: none; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.side-cta { padding: .7rem .95rem; border-radius: 999px; box-shadow: var(--shadow); border: none; color: #fff; background: var(--primary); cursor: pointer; font-weight: 700; white-space: nowrap; }
.side-cta:hover { transform: scale(1.02); }
.side-cta-group.side-cta-right .side-cta { background: var(--accent); color: #111; writing-mode: vertical-rl; transform: rotate(180deg); border-left: none; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.side-cta-group.hidden { opacity: 0; pointer-events: none; }
.side-cta-group.side-cta-left.hidden { transform: translateY(-50%) translateX(-18px); }
.side-cta-group.side-cta-right.hidden { transform: translateY(-50%) translateX(18px); }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2000; place-items: center; padding: 1rem; }
.modal.open { display: grid; }
.modal-card { background: #fff; width: min(920px, 96%); border-radius: 14px; padding: 0; position: relative; overflow: hidden; display: flex; align-items: stretch; }
.modal-left { flex: 1 1 45%; min-height: 340px; background: #000; }
.modal-left img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-right { flex: 1 1 55%; padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.modal-right h3 { margin: 0 0 .6rem; }
.modal-right .muted { color: var(--muted); margin-bottom: .8rem; }
.modal-right form { display: grid; gap: .65rem; }
.modal-right input, .modal-right textarea { border: 1px solid #e4e8e2; padding: .85rem 1rem; border-radius: 10px; }
.modal-right textarea { min-height: 100px; }
.modal-close { position: absolute; top: .6rem; right: .6rem; border: none; background: rgba(0,0,0,0.06); font-size: 1.4rem; cursor: pointer; width: 36px; height: 36px; border-radius: 8px; }
@media (max-width: 900px) {
  .spec-grid, .facility-grid, .amenity-grid, .gallery-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .hamburger { display: block; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; right: 1rem; background: #2e2e32; padding: 1rem; border-radius: 16px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-links a { color: #fff; }
  .spec-grid, .facility-grid, .amenity-grid, .gallery-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-content { padding: 4.5rem 0; }
  .modal-card { flex-direction: column; }
  .modal-left { min-height: 200px; }
  /* hide side CTAs on small screens */
  .side-cta-group { display: none; }
}

/* Lightbox styles */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 3000; align-items: center; justify-content: center; padding: 1.2rem; }
.lightbox.open { display: flex; }
.lightbox-inner { max-width: 1100px; width: 100%; max-height: 90vh; position: relative; }
.lightbox-inner img { width: 100%; height: auto; display: block; border-radius: 8px; }
.lightbox-close { position: absolute; top: -16px; right: -16px; background: #fff; color: #222; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; box-shadow: var(--shadow); }
.lightbox-caption { margin-top: .6rem; color: #fff; font-weight: 600; text-align: center; }

/* Form success */
.form-success { background: #e6f6ea; border: 1px solid #c6ecd0; color: #1f6f3a; padding: .8rem 1rem; border-radius: 8px; margin-top: .6rem; font-weight: 600; }