:root {
  --pool: #00a5b5;
  --pool-dark: #007d88;
  --green: #2ecc71;
  --red: #e74c3c;
  --yellow: #f1c40f;
  --gold: #f8b72b;
  --ink: #062033;
  --muted: #607381;
  --soft: #eafaf7;
  --line: #dbe8ed;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(5, 61, 74, 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f7fcfd; color: var(--ink); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 6vw, 110px); background: rgba(248, 253, 253, 0.9); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
}
.site-header.compact { height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 25px rgba(0, 165, 181, 0.22); }
.brand strong { display: block; font-family: Georgia, serif; font-size: 1.2rem; }
.brand small { display: block; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; }
.site-header nav { display: flex; align-items: center; gap: 28px; font-weight: 700; }
.nav-toggle { display: none; border: 0; background: var(--pool); color: white; width: 42px; height: 42px; border-radius: 8px; font-size: 1.2rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.12); }
.btn-gold { background: linear-gradient(135deg, #ffd66b, var(--gold)); color: #3e2b00; }
.btn-primary { background: linear-gradient(135deg, var(--pool), #008aae); color: white; }
.btn-glass { color: white; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42); }
.btn-outline { border: 1px solid var(--line); background: white; color: var(--pool-dark); }
.btn.full { width: 100%; }

.hero { position: relative; min-height: calc(100vh - 76px); overflow: hidden; display: flex; align-items: center; padding: clamp(40px, 8vw, 120px); }
.hero-carousel, .hero-carousel img, .hero-overlay { position: absolute; inset: 0; }
.hero-carousel img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 5s ease; }
.hero-carousel img.active { opacity: 1; transform: scale(1); }
.hero-overlay { background: linear-gradient(90deg, rgba(4,25,34,.78), rgba(0,95,107,.48), rgba(0,0,0,.12)); }
.hero-content { position: relative; z-index: 2; width: min(100%, 860px); color: white; }
.eyebrow { color: #00a6c8; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; }
.hero .eyebrow { color: #ffd66b; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: .98; margin: 0 0 18px; letter-spacing: 0; }
h1 { font-size: clamp(3rem, 8vw, 6.8rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
h3 { font-size: 1.6rem; }
.hero h1 { max-width: 13ch; font-size: clamp(2.8rem, 5.9vw, 5.35rem); line-height: 1.02; text-wrap: balance; }
.hero p { max-width: 640px; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.section { padding: clamp(70px, 9vw, 120px) clamp(18px, 6vw, 110px); }
.soft { background: linear-gradient(180deg, #eafbf8, #f8fefe); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); align-items: center; gap: clamp(34px, 7vw, 90px); }
.section-copy p, .section-title p { color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
.section-title { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.image-stack { display: grid; grid-template-columns: 1fr 0.72fr; gap: 16px; align-items: end; }
.image-stack img, .rounded-media, .media-showcase video { border-radius: 8px; box-shadow: var(--shadow); object-fit: cover; width: 100%; }
.image-stack img:first-child { aspect-ratio: 4/3; }
.image-stack img:last-child { aspect-ratio: 3/4; }

.feature-grid, .package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feature-card, .package-card, .booking-card, .alert {
  background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.feature-card { min-height: 112px; padding: 24px; display: flex; align-items: center; gap: 18px; }
.feature-card span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--pool); color: white; font-size: 1.3rem; flex: 0 0 auto; }
.feature-card strong { font-size: 1.05rem; }

.package-card { position: relative; padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; }
.package-card.highlight { border-color: #fac241; }
.package-card small, .step { color: var(--muted); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; }
.package-card strong { color: var(--pool); font-family: Georgia, serif; font-size: clamp(2rem, 3vw, 2.7rem); }
.package-card p { color: #49606e; line-height: 1.45; flex: 1; }
.badge { position: absolute; top: -18px; right: 26px; background: var(--gold); color: #3e2b00; padding: 9px 18px; border-radius: 999px; font-weight: 900; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }

.media-showcase { display: grid; grid-template-columns: 1.5fr .8fr; gap: 18px; align-items: stretch; }
.media-showcase video { aspect-ratio: 16/9; background: #000; }
.thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.thumb-grid img { height: 100%; min-height: 160px; object-fit: cover; border-radius: 8px; }

.agenda-preview .mini-calendar { max-width: 720px; margin: 0 auto; }
.calendar { background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.calendar-head button { border: 0; background: transparent; color: var(--pool-dark); font-size: 1.5rem; cursor: pointer; width: 40px; height: 40px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week { text-transform: uppercase; color: var(--muted); font-size: .68rem; text-align: center; font-weight: 900; }
.day { aspect-ratio: 1; border: 0; border-radius: 8px; color: var(--ink); font-weight: 800; cursor: pointer; transition: transform .15s, outline .15s; }
.day:hover:not(:disabled), .day.selected { transform: translateY(-2px); outline: 3px solid rgba(0,180,216,.25); }
.booking-page .calendar {
  border-color: rgba(0, 165, 181, .28);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,252,255,.94));
}
.booking-page .day { box-shadow: inset 0 0 0 1px rgba(6,32,51,.05); }
.day.available { background: #2ecc71; color: #06321b; }
.booking-page .day.available { background: #2ecc71; color: #06321b; }
.day.reserved { background: #f1c40f; color: #493700; }
.booking-page .day.reserved { background: #f1c40f; color: #493700; }
.day.booked { background: #e74c3c; color: white; }
.booking-page .day.booked { background: #e74c3c; color: white; }
.day.disabled { background: #eef3f5; color: #a9b9c1; cursor: not-allowed; }
.booking-page .day.disabled { background: #e3ebef; color: #8096a1; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: .85rem; color: var(--muted); }
.legend.center { justify-content: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.available { background: var(--green); } .reserved { background: var(--yellow); } .booked { background: var(--red); } .disabled { background: #a9b9c1; }

.cta { margin: 0 auto 90px; max-width: 1040px; border-radius: 8px; padding: 60px 22px; text-align: center; color: white; background: linear-gradient(135deg, #09b4c5, #07866f); box-shadow: var(--shadow); }
.footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; background: #092846; color: white; padding: 70px clamp(18px, 6vw, 110px); }
.footer p { color: #bed1dc; }
.floating-actions { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: grid; gap: 14px; }
.floating-actions a { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 1.7rem; background: #20d466; box-shadow: var(--shadow); }
.floating-actions svg { width: 31px; height: 31px; fill: currentColor; }
.floating-actions a:last-child { background: var(--pool); }

.booking-page { background: radial-gradient(circle at top, #e9fffb, #f7fcfd 52%, #eef8fa); }
.booking-shell { padding: 44px clamp(14px, 5vw, 90px) 90px; }
.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; max-width: 1260px; margin: 0 auto; }
.booking-card { padding: 24px; }
.booking-card.customer { grid-row: span 2; }
.select-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.select-card { border: 1px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; display: grid; gap: 6px; }
.select-card:has(input:checked) { border-color: var(--pool); box-shadow: 0 0 0 3px rgba(0,180,216,.14); }
.select-card input { position: absolute; opacity: 0; }
.select-card b { color: var(--pool); }
.select-card small { color: var(--muted); line-height: 1.35; }
label, .label { display: grid; gap: 7px; font-weight: 800; font-size: .88rem; color: #173241; margin-top: 14px; }
input, select, textarea { width: 100%; border: 1px solid #c9e0e7; background: #f9feff; border-radius: 8px; min-height: 46px; padding: 10px 13px; font: inherit; }
textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.address { grid-template-columns: 1fr 120px; }
.field-row.thirds { grid-template-columns: 1fr 1fr 1fr; }
.payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-row label { display: flex; align-items: center; justify-content: center; margin: 0; border: 1px solid #c9e0e7; border-radius: 999px; min-height: 42px; }
.payment-row input { width: auto; min-height: 0; }
.price-strip { margin: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 8px; background: #eefbf8; color: var(--pool-dark); }
.helper { color: var(--muted); font-size: .78rem; text-align: center; }
.alert { max-width: 980px; margin: 0 auto 24px; padding: 18px 20px; }
.alert.success { border-color: rgba(46,204,113,.4); background: #effcf4; }
.alert.error { border-color: rgba(231,76,60,.4); background: #fff1ef; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .site-header { padding: 0 18px; }
  .nav-toggle { display: block; }
  .site-header nav[data-menu] { position: absolute; top: 76px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; padding: 18px; background: white; border-bottom: 1px solid var(--line); }
  .site-header nav.open { display: flex; }
  .split, .media-showcase, .booking-layout, .footer { grid-template-columns: 1fr; }
  .feature-grid, .package-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 760px; padding: 44px 22px; }
}

@media (max-width: 640px) {
  h1 { font-size: 3rem; }
  .hero h1 { max-width: 11ch; font-size: clamp(2.35rem, 10vw, 3.2rem); }
  .brand strong { font-size: 1rem; }
  .brand small { font-size: .62rem; }
  .site-header nav:not([data-menu]) { display: none; }
  .actions, .field-row, .field-row.address, .field-row.thirds, .select-card-grid, .payment-row, .feature-grid, .package-grid { grid-template-columns: 1fr; display: grid; }
  .section, .booking-shell { padding-left: 14px; padding-right: 14px; }
  .booking-card { padding: 16px; }
  .floating-actions a { width: 54px; height: 54px; }
}