:root {
  color-scheme: dark;
  --blue: #d6f4ff;
  --blue-dark: #ffffff;
  --navy: #f2f8ff;
  --sky: rgba(125, 211, 252, .07);
  --aqua: rgba(56, 189, 248, .14);
  --surface: rgba(255, 255, 255, .05);
  --ink: #f4f9ff;
  --muted: #f4f9ff;
  --line: rgba(214, 236, 255, .24);
  --field: rgba(191, 225, 253, .32);
  --glass: rgba(2, 40, 120, .28);
  --glass-strong: rgba(3, 50, 138, .8);
  --deep: #0b4fa8;
  --wa: #0f7a40;
  --wa-dark: #0b5f32;
  --accent: #f2b630;
  --radius: 16px;
  --shadow: 0 12px 40px rgba(1, 10, 24, .35);
  --head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; }
h1, h2, h3, .h3 { font-family: var(--head); line-height: 1.15; margin: 0 0 .5em; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.02em; font-weight: 800; }
h3, .h3 { font-size: 1.125rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: .92rem; color: var(--muted); }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .7em 1.3em; border-radius: 12px; border: 2px solid var(--blue);
  background: var(--blue); color: #fff; font-weight: 700; font-size: 1rem; font-family: inherit;
  text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(12, 74, 140, .25); }
.btn:active { transform: translateY(0); }
.btn-lg { min-height: 54px; padding: .8em 1.5em; font-size: 1.05rem; }
.btn-small { min-height: 40px; padding: .45em 1em; font-size: .95rem; }
.btn-ghost { background: #fff; color: var(--blue); border-color: #a8dde6; }
.btn-ghost:hover { background: var(--aqua); border-color: var(--blue); color: var(--blue-dark); }
.btn-wa { background: var(--wa); border-color: var(--wa); }
.btn-wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); box-shadow: 0 6px 16px rgba(15, 122, 64, .28); }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover { background: var(--sky); border-color: var(--sky); color: var(--navy); }

/* Header */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); transition: box-shadow .2s; }
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(6, 36, 66, .06); }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin: 0; }
.wordmark { font-family: var(--head); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.wordmark span:first-child { color: var(--navy); }
.wordmark span:last-child { color: var(--blue); }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:hover { color: var(--blue); }
.topbar-cta { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--navy); border: 1px solid var(--line); background: #fff; }
.icon-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Hero */
.hero { position: relative; isolation: isolate; color: #dbeefe; background: radial-gradient(900px 480px at 80% -10%, rgba(56, 189, 248, .35), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(14, 165, 233, .22), transparent 65%), linear-gradient(180deg, #0e5aa0 0%, #0a4378 50%, #062848 100%); padding: 56px 0 120px; overflow: hidden; }
.hero h1, .page-hero h1 { color: #fff; }
.hero .eyebrow, .page-hero .eyebrow { color: #d6f4ff; }
.hero .lead, .page-hero .lead { color: #d4e9fb; }
.hero .price-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none; backdrop-filter: blur(4px); }
.hero .btn:not(.btn-ghost), .page-hero .btn:not(.btn-ghost) { background: #7dd3fc; border-color: #7dd3fc; color: #062848; }
.hero .btn:not(.btn-ghost):hover, .page-hero .btn:not(.btn-ghost):hover { background: #bae6fd; border-color: #bae6fd; box-shadow: 0 8px 24px rgba(56, 189, 248, .35); }
.hero .btn-ghost, .page-hero .btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .55); }
.hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }
.hero .trust, .page-hero .trust { color: #d4e9fb; border-top-color: rgba(255, 255, 255, .18); }
.hero .trust svg { color: #7dd3fc; }
.hero-inner { position: relative; z-index: 1; }

/* Live water: rising bubbles and waves.
   Transform and opacity only, and all of it stops for reduced motion. */
.water { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wave { position: absolute; left: 0; bottom: -1px; width: 200%; max-width: none; height: 110px; animation: flow 18s linear infinite; will-change: transform; }
@keyframes rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate3d(12px, -45vh, 0); } 90% { opacity: .7; } 100% { transform: translate3d(-8px, -90vh, 0); opacity: 0; } }
@keyframes flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.eyebrow { font-family: var(--head); color: var(--blue); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; margin-bottom: .9em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.offer { display: inline-block; background: #fff7e0; border: 1px solid #f5d27a; color: #6b4a00; border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: .95rem; }
.offer-small { margin: 12px 0 0; font-size: .88rem; }
.price-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 26px; }
.price-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .95rem; box-shadow: 0 2px 8px rgba(6, 36, 66, .04); }
.price-chip b { font-family: var(--head); color: var(--blue-dark); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.price-note { color: var(--muted); font-size: .9rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); font-size: .93rem; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 20px; height: 20px; color: var(--blue); flex: none; }

.hero-visual { position: relative; margin: 0; border-radius: 24px; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(220,247,251,.85)); border: 1px solid rgba(255,255,255,.8); backdrop-filter: blur(6px); aspect-ratio: 6 / 5; display: grid; place-items: center; padding: 24px; box-shadow: var(--shadow); }
.hero-visual > svg { width: 100%; height: auto; }
.hero-chip { position: absolute; bottom: -16px; left: -16px; display: inline-flex; align-items: center; gap: 8px; background: #fff; box-shadow: 0 10px 30px rgba(6, 36, 66, .15); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: .9rem; color: var(--navy); }
.hero-chip svg { width: 20px; height: 20px; color: var(--wa); }

/* Stats */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-inner div { padding: 22px 16px; display: grid; gap: 2px; text-align: center; }
.stats-inner div + div { border-left: 1px solid var(--line); }
.stats strong { font-family: var(--head); font-size: 1.5rem; color: var(--navy); letter-spacing: -0.02em; }
.stats span { color: var(--muted); font-size: .9rem; }

/* Sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-surface { background: var(--surface); }
.section-sky { background: var(--sky); }
.section-dark { background: radial-gradient(700px 300px at 90% 0%, rgba(125, 211, 252, .18), transparent 60%), linear-gradient(135deg, #0d5c9e, #062b52 70%); color: #d6ebfb; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: #d6f4ff; }
.section-dark .section-lead { color: #bcdcf5; }
.section-head { margin-bottom: 40px; }
.section-head.center { text-align: center; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }
.section-lead { color: var(--muted); max-width: 44em; font-size: 1.08rem; }

/* Why */
.why-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.why-points { display: grid; gap: 18px; }
.why-points p { margin: 0; padding: 18px 20px; border-left: 3px solid var(--blue); background: var(--surface); border-radius: 0 12px 12px 0; color: var(--muted); }
.why-points strong { color: var(--navy); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; position: relative; }
.steps::before { content: ""; position: absolute; top: 28px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, var(--blue), #bae6fd); }
.steps li { position: relative; text-align: center; }
.step-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue); position: relative; }
.step-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.step-no { display: block; font-family: var(--head); font-size: .72rem; font-weight: 700; color: var(--blue); letter-spacing: .08em; text-transform: uppercase; }
.steps h3 { margin: 4px 0 6px; }
.steps p { color: var(--muted); margin: 0; font-size: .92rem; }

/* Photo gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; background: var(--surface); }
.gallery figcaption { margin-top: 10px; font-weight: 600; color: var(--navy); display: grid; gap: 2px; }
.gallery figcaption small { font-weight: 400; color: var(--muted); font-size: .8rem; }

/* Videos */
.videos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b3d6e; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; background: #0b3d6e center/cover no-repeat; display: grid; place-items: center; }
.video-play .play { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.92); position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.video-play .play::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 20px solid var(--blue); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.video figcaption { margin-top: 12px; font-weight: 600; color: #fff; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: .95rem; }
tbody th { font-weight: 600; color: var(--navy); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.prices td { font-family: var(--head); font-weight: 700; color: var(--blue-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices tbody tr:nth-child(even) { background: #f7fdfe; }
.included { background: var(--surface); border-radius: var(--radius); padding: 28px; }
.included h3 { margin-bottom: 12px; }
.included ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.included li { position: relative; padding-left: 30px; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ticks li::before { content: "✓"; background: #dff3e8; color: var(--wa); }
.crosses li::before { content: "✕"; background: #eef2f5; color: #7a8a96; }
.crosses li { color: var(--muted); }

/* Booking */
.book { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.book-intro { position: sticky; top: 96px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-top: 8px; box-shadow: var(--shadow); }
.quote-title { font-family: var(--head); font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.quote-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.quote-row span:last-child { color: var(--ink); font-weight: 600; }
.quote-row[hidden] { display: none; }
.quote-total { border-top: 1px dashed #a9d5dc; margin-top: 10px; padding-top: 14px; align-items: baseline; }
.quote-total span:first-child { font-weight: 700; color: var(--navy); }
.quote-total span:last-child { font-family: var(--head); font-size: 2rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.quote-note { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
.badge-pay { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; background: #dff3e8; color: var(--wa-dark); font-size: .88rem; font-weight: 600; }
.badge-pay svg { width: 18px; height: 18px; }

.form { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 28px; display: grid; gap: 18px; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form legend, .form label { font-weight: 600; font-size: .93rem; color: var(--navy); }
.form label { display: grid; gap: 6px; }
.form label[hidden] { display: none; }
.form input[type="text"], .form input[type="date"], .form select {
  width: 100%; min-height: 48px; font: inherit; font-weight: 400; font-size: 1rem; padding: .6em .85em; border: 1.5px solid var(--field); border-radius: 10px; background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(12, 74, 140, .15); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { position: relative; display: grid; gap: 2px; justify-items: start; border: 1.5px solid var(--field); border-radius: 14px; padding: 12px 14px; transition: border-color .15s, background .15s; height: 100%; }
.choice span svg { width: 32px; height: 32px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 4px; }
.choice small { color: var(--muted); font-weight: 400; font-size: .82rem; }
.choice input:checked + span { border-color: var(--blue); background: var(--aqua); box-shadow: 0 0 0 1px var(--blue); }
.choice input:checked + span::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; display: grid; place-items: center; font-weight: 800; }
.choice input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.hint { margin: -6px 0 0; font-size: .86rem; color: var(--muted); }
.optional { color: var(--muted); font-weight: 400; }
.quote-inline { display: none; }
.form-error { color: #b42318; background: #fef3f2; border-radius: 8px; padding: 10px 12px; margin: 0; }
.form-hint { color: var(--muted); font-size: .85rem; text-align: center; margin: 0; }
.form .btn-wa { width: 100%; min-height: 56px; font-size: 1.08rem; }

/* Compare */
.compare-wrap { max-width: 900px; margin: 0 auto; }
.compare thead th:last-child { background: var(--blue); }
.compare td:last-child { color: var(--blue-dark); font-weight: 700; background: #f0f8ff; }
.compare td:nth-child(2) { color: var(--muted); }

/* Societies */
.societies { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.societies > div { max-width: 640px; }
.societies .section-lead { margin-bottom: 0; }

/* Areas */
.areas { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.areas li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #bae6ee; border-radius: 999px; padding: 8px 16px 8px 12px; font-size: .95rem; }
.areas li::before { content: ""; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.faq-side { position: sticky; top: 96px; }
.faq-card { background: var(--surface); border-radius: var(--radius); padding: 22px; margin-top: 12px; }
.faq-card p { color: var(--muted); }
.faq-card strong { color: var(--navy); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { color: var(--muted); margin: 10px 0 0; }

/* Coming soon */
.soon-section { padding: 48px 0; }
.soon-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.soon-inner h2 { margin: 0; }
.soon-inner .eyebrow { margin-bottom: .4em; }
.soon { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.soon li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.soon strong { color: var(--navy); font-size: .95rem; }
.soon span { color: var(--muted); font-size: .86rem; }
.link { font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Footer */
.footer { background: var(--navy); color: #bcdcf5; padding: 56px 0 96px; }
.footer a { color: #fff; }
.footer .wordmark span:first-child { color: #fff; }
.footer .wordmark span:last-child { color: #7dd3fc; }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer address { font-style: normal; }
.footer address p { margin: 0 0 6px; }
.copyright { margin-top: 32px; font-size: .85rem; color: #8fb6d8; }

/* Floating WhatsApp (desktop) and mobile booking bar */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s; }
.wa-float:hover { transform: scale(1.05); }
.mbar { display: none; }

@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
  .steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue), #bae6fd); }
  .steps li { text-align: left; padding: 0 0 22px 76px; min-height: 76px; }
  .step-icon { position: absolute; left: 0; top: 0; margin: 0; }
  .soon-inner { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 860px) {
  .hero-inner, .book, .pricing-grid, .why-inner, .faq-grid { grid-template-columns: 1fr; }
  .hero-inner { gap: 40px; }
  .hero-visual { max-width: 520px; width: 100%; margin: 0 auto; aspect-ratio: auto; padding: 18px; }
  .hero-chip { left: 12px; bottom: -14px; }
  .book-intro, .faq-side { position: static; }
  .book { gap: 28px; }
  .nav { display: none; }
  .topbar-inner { justify-content: space-between; }
  .topbar-cta .btn-small { display: none; }
  .videos { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stats-inner div:nth-child(3) { border-left: 0; }
  .stats-inner div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .quote-inline { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; border-top: 1px dashed #a9d5dc; }
  .quote-inline strong { font-family: var(--head); font-size: 1.5rem; color: var(--navy); }
  .wa-float { display: none; }
  .mbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(6, 36, 66, .08); transition: transform .25s;
  }
  .mbar.is-hidden { transform: translateY(110%); }
  .mbar-price { margin-right: auto; display: grid; line-height: 1.2; }
  .mbar-price small { color: var(--muted); font-size: .75rem; }
  .mbar-price strong { font-family: var(--head); color: var(--navy); font-size: 1.15rem; }
  .mbar-price strong span { font-family: inherit; font-weight: 500; color: var(--muted); font-size: .8rem; }
  .mbar-wa { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--wa); color: #fff; }
  .footer { padding-bottom: 110px; }
}

@media (max-width: 600px) {
  .rtable, .rtable thead, .rtable tbody, .rtable tr, .rtable th, .rtable td { display: block; }
  .rtable { border: 0; background: transparent; overflow: visible; }
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: #fff; }
  .rtable tbody tr:nth-child(even) { background: #fff; }
  .rtable th, .rtable td { padding: 0; border: 0; }
  .rtable tbody th { grid-column: 1 / -1; margin-bottom: 4px; }
  .rtable td::before { content: attr(data-label); display: block; font-family: system-ui, sans-serif; font-size: .75rem; font-weight: 500; color: var(--muted); }
  .rtable td[colspan] { grid-column: 1 / -1; }
  .compare td:last-child { background: transparent; }
  .row { grid-template-columns: 1fr; }
  .choice { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .choice span { padding: 10px; }
  .choice small { display: none; }
  .choice input:checked + span::after { top: 6px; right: 6px; }
  .hero-cta .btn { width: 100%; }
  .form { padding: 20px; }
  .soon { grid-template-columns: 1fr; }
  .included { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .water *, .water { animation: none !important; }
  .sea-bubbles { display: none; }
  * { transition: none !important; }
}

/* Service pages */
.page-hero { color: #dbeefe; background: radial-gradient(900px 400px at 90% 0%, rgba(56, 189, 248, .3), transparent 60%), linear-gradient(180deg, #0e5aa0, #062848); padding: 40px 0 56px; }
.page-hero .crumbs, .page-hero .crumbs a { color: #eaf3ff; }
.page-hero h1 { max-width: 18em; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.prose { max-width: 820px; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #2c3e4c; }
.prose ul { padding-left: 1.2em; }
.prose ul.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.prose ul.ticks li { position: relative; padding-left: 30px; }
.prose .table-wrap { margin: 18px 0; }
.prose .faq details:first-child { border-top: 1px solid var(--line); }
.plain-steps { padding-left: 1.3em; display: grid; gap: 8px; }
.related { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.related a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-weight: 600; color: var(--navy); text-decoration: none; }
.related a:hover { border-color: var(--blue); color: var(--blue); }
.footer-links { display: grid; gap: 6px; align-content: start; }
.footer-links a { color: #d6ebfb; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.services a { display: grid; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.services a:hover { border-color: var(--blue); transform: translateY(-2px); }
.services strong { font-family: var(--head); color: var(--navy); font-size: 1.1rem; }
.services span { color: var(--muted); font-size: .95rem; }
.services em { font-style: normal; color: var(--blue); font-weight: 700; font-size: .92rem; }

/* Quote flow */
.quote-summary { font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: var(--navy); margin: 0 0 8px; }
.how-quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.how-quote h3 { margin-bottom: 16px; }
.quote-steps { list-style: none; counter-reset: q; padding: 0; margin: 0 0 18px; display: grid; gap: 16px; }
.quote-steps li { counter-increment: q; position: relative; padding-left: 46px; display: grid; gap: 2px; }
.quote-steps li::before { content: counter(q); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #e0f2fe, #bae6fd); color: var(--blue-dark); font-family: var(--head); font-weight: 800; }
.quote-steps strong { color: var(--navy); }
.quote-steps span { color: var(--muted); font-size: .95rem; }

/* Live water theme: the whole page sits in clear water. A fixed blue
   gradient stays behind every section, and cards
   are glass panes floating in it. */
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 45% 35% at 96% 4%, rgba(73, 150, 239, .14), transparent 70%), radial-gradient(ellipse 60% 45% at 4% 70%, rgba(1, 67, 165, .18), transparent 70%), linear-gradient(180deg, #1766c8 0%, #1462c4 35%, #105ec2 65%, #0d5ac0 100%); }
.section:not(.section-surface):not(.section-sky):not(.section-dark):nth-of-type(odd) { background: radial-gradient(ellipse 50% 60% at 6% 30%, rgba(1, 67, 165, .10), transparent 70%); }
.section:not(.section-surface):not(.section-sky):not(.section-dark):nth-of-type(even) { background: radial-gradient(ellipse 50% 60% at 94% 40%, rgba(1, 74, 171, .08), transparent 70%); }

.btn { background: var(--blue); border-color: var(--blue); color: #06243f; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 8px 24px rgba(56, 189, 248, .3); }
.btn-ghost { background: var(--glass); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; box-shadow: 0 8px 24px rgba(15, 122, 64, .35); }
.btn-light { background: #fff; color: #072e55; }
.btn-light:hover { background: #e0f2fe; border-color: #e0f2fe; color: #072e55; }
.skip:focus { background: var(--deep); color: #fff; }

.topbar { background: rgba(6, 70, 168, .82); border-bottom: 1px solid var(--line); }
.topbar.is-scrolled { box-shadow: 0 8px 24px rgba(1, 10, 24, .35); }
.icon-btn { background: var(--glass); color: #fff; }

.hero { background: radial-gradient(900px 480px at 80% -10%, rgba(73, 150, 239, .16), transparent 60%); }
.page-hero { background: radial-gradient(900px 400px at 90% 0%, rgba(73, 150, 239, .14), transparent 60%); }
.hero-visual { background: linear-gradient(160deg, rgba(240, 253, 255, .94), rgba(224, 242, 254, .88)); border-color: rgba(255, 255, 255, .5); }
.hero-chip { background: #f0f8ff; color: #072e55; }

.stats { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section-surface { background: rgba(255, 255, 255, .03); }
.section-sky { background: rgba(125, 211, 252, .05); }
.section-dark { background: linear-gradient(135deg, rgba(56, 189, 248, .14), rgba(1, 14, 32, .35)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.why-points p, .included, .faq-card, .quote, .how-quote, .soon li, .related a, .services a, .areas li, table, .rtable tr, .rtable tbody tr:nth-child(even) { background: var(--glass); border: 1px solid var(--line); }
.form { background: var(--glass-strong); border-color: var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.why-points p { border-left: 3px solid var(--blue); }
.step-icon { background: #0a4fae; }
.steps::before { background: linear-gradient(90deg, var(--blue), rgba(186, 230, 253, .3)); }
thead th { background: rgba(1, 40, 115, .6); }
.compare thead th:last-child { background: #1a73dc; }
.compare td:last-child { color: #fff; background: rgba(1, 50, 140, .3); }
.prices tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.ticks li::before { background: rgba(74, 222, 128, .16); color: #86efac; }
.crosses li::before { background: rgba(255, 255, 255, .08); color: #b0d0ea; }
.badge-pay { background: rgba(74, 222, 128, .14); color: #a7f3d0; }
.quote-steps li::before { background: linear-gradient(160deg, #7dd3fc, #7dd3fc); color: #06243f; }
.quote-total, .quote-inline { border-top-color: var(--line); }

.form input[type="text"], .form input[type="date"], .form select { background: rgba(1, 40, 115, .5); color: var(--ink); }
.form input::placeholder { color: #b9d4f2; }
.form select option { background: #0a4fae; color: #fff; }
.form input:focus, .form select:focus { box-shadow: 0 0 0 4px rgba(56, 189, 248, .2); }
.choice span { background: rgba(1, 40, 115, .3); }
.choice input:checked + span::after { color: #06243f; }
.form-error { color: #fecaca; background: rgba(239, 68, 68, .16); }

.prose p, .prose li { color: var(--ink); }
.footer { background: rgba(2, 42, 125, .5); border-top: 1px solid var(--line); color: var(--muted); }
.mbar { background: rgba(6, 62, 158, .95); box-shadow: 0 -6px 20px rgba(1, 10, 24, .35); }
.video-frame, .video-play { background-color: #062e72; }

@media (prefers-reduced-motion: reduce) {
}
.eyebrow { color: #d6f4ff; }

/* Sea shades: layered hero waves from light turquoise to deep blue, wave
   bands where the tinted sections begin, and air bubbles rising through the
   whole page. The light shades sit only where there is no text. */
.hero { padding-bottom: 170px; }
.wave { height: 150px; }
.wave-1 { fill: rgba(110, 178, 246, .32); animation-duration: 30s; animation-direction: reverse; }
.wave-2 { fill: rgba(73, 150, 239, .34); animation-duration: 24s; }
.wave-3 { fill: rgba(43, 126, 226, .45); animation-duration: 19s; animation-direction: reverse; }
.wave-4 { fill: rgba(9, 74, 171, .40); animation-duration: 15s; }
.wave-5 { fill: #1462c4; animation-duration: 12s; animation-direction: reverse; }

.section-surface, .section-sky, .section-dark { position: relative; }
.section-surface::before, .section-sky::before, .section-dark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q180 0 360 20 T720 20 T1080 20 T1440 20 V0 H0Z' fill='rgba(110,178,246,0.30)'/%3E%3Cpath d='M0 14 Q240 34 480 14 T960 14 T1440 14 V0 H0Z' fill='rgba(1,67,165,0.28)'/%3E%3Cpath d='M0 8 Q120 22 240 8 T480 8 T720 8 T960 8 T1200 8 T1440 8 V0 H0Z' fill='rgba(73,150,239,0.30)'/%3E%3C/svg%3E") top / 100% 100% no-repeat; }
.section-surface { background: linear-gradient(180deg, rgba(1, 67, 165, .12), rgba(1, 67, 165, .03)); }
.section-sky { background: linear-gradient(180deg, rgba(2, 56, 150, .10), rgba(2, 56, 150, .02)); }
.section-dark { background: linear-gradient(180deg, rgba(1, 45, 130, .24), rgba(1, 45, 130, .12)); border-top: 0; }

.sea-bubbles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sea-bubbles i { position: absolute; bottom: -30px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(224, 242, 254, .75); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 14%, rgba(255, 255, 255, .18) 32%, rgba(186, 230, 253, .06) 60%, rgba(255, 255, 255, .22) 100%); box-shadow: inset -1px -2px 3px rgba(255, 255, 255, .25); opacity: 0; animation: bubble-up 14s linear infinite; will-change: transform, opacity; }
.sea-bubbles i:nth-child(1) { left: 4%; animation-duration: 13s; }
.sea-bubbles i:nth-child(2) { left: 7%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 1.2s; }
.sea-bubbles i:nth-child(3) { left: 9%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: 2.6s; }
.sea-bubbles i:nth-child(4) { left: 18%; width: 14px; height: 14px; animation-duration: 17s; animation-delay: 5s; }
.sea-bubbles i:nth-child(5) { left: 26%; width: 6px; height: 6px; animation-duration: 10s; animation-delay: 7s; }
.sea-bubbles i:nth-child(6) { left: 33%; width: 9px; height: 9px; animation-duration: 15s; animation-delay: 3s; }
.sea-bubbles i:nth-child(7) { left: 41%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 9s; }
.sea-bubbles i:nth-child(8) { left: 47%; width: 12px; height: 12px; animation-duration: 16s; animation-delay: 11s; }
.sea-bubbles i:nth-child(9) { left: 55%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 4.5s; }
.sea-bubbles i:nth-child(10) { left: 62%; width: 18px; height: 18px; animation-duration: 20s; animation-delay: 1s; }
.sea-bubbles i:nth-child(11) { left: 68%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 6.5s; }
.sea-bubbles i:nth-child(12) { left: 71%; width: 8px; height: 8px; animation-duration: 12s; animation-delay: 8s; }
.sea-bubbles i:nth-child(13) { left: 79%; width: 11px; height: 11px; animation-duration: 15s; animation-delay: 2s; }
.sea-bubbles i:nth-child(14) { left: 85%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 10s; }
.sea-bubbles i:nth-child(15) { left: 88%; width: 7px; height: 7px; animation-duration: 12s; animation-delay: 3.5s; }
.sea-bubbles i:nth-child(16) { left: 93%; width: 13px; height: 13px; animation-duration: 18s; animation-delay: 6s; }
.sea-bubbles i:nth-child(17) { left: 97%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 12s; }
.sea-bubbles i:nth-child(18) { left: 51%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 13s; }
.sea-bubbles i:nth-child(19) { left: 5%; width: 4px; height: 4px; animation-duration: 7s; animation-delay: 4s; }
.sea-bubbles i:nth-child(20) { left: 5.6%; width: 6px; height: 6px; animation-duration: 8s; animation-delay: 4.8s; }
.sea-bubbles i:nth-child(21) { left: 22%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0.5s; }
.sea-bubbles i:nth-child(22) { left: 22.6%; width: 3px; height: 3px; animation-duration: 7s; animation-delay: 1.3s; }
.sea-bubbles i:nth-child(23) { left: 58%; width: 7px; height: 7px; animation-duration: 10s; animation-delay: 9.5s; }
.sea-bubbles i:nth-child(24) { left: 58.5%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 10.2s; }
.sea-bubbles i:nth-child(25) { left: 82%; width: 9px; height: 9px; animation-duration: 13s; animation-delay: 7.5s; }
.sea-bubbles i:nth-child(26) { left: 36%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 12.5s; }
@keyframes bubble-up {
  0% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0; }
  8% { opacity: .75; }
  25% { transform: translate3d(10px, -28vh, 0) scale(1.25); }
  50% { transform: translate3d(-8px, -56vh, 0) scale(1.4); }
  75% { transform: translate3d(9px, -84vh, 0) scale(1.55); opacity: .65; }
  100% { transform: translate3d(-4px, -112vh, 0) scale(1.7); opacity: 0; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 130px; }
  .wave { height: 110px; }
  .sea-bubbles i:nth-child(3n) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sea-bubbles { display: none; }
}
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 150px; }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero .wave { height: 120px; }
@media (max-width: 600px) { .page-hero { padding-bottom: 110px; } .page-hero .wave { height: 90px; } }

/* No white hairlines between bands: sections blend straight into the water. */
.topbar, .stats, .section-dark, .footer, .mbar { border-top: 0; border-bottom: 0; }
.hero .trust, .page-hero .trust { border-top: 0; padding-top: 4px; }

/* Language switch and Hindi type. Devanagari needs no letter-spacing or
   uppercase, and a little more line height. */
.lang-switch { display: inline-grid; place-items: center; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.lang-switch:hover { border-color: var(--blue); color: var(--blue); }
:lang(hi) { --head: "Plus Jakarta Sans", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif; }
body:lang(hi) { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Noto Sans", sans-serif; line-height: 1.7; }
:lang(hi) .eyebrow, :lang(hi) .step-no { text-transform: none; letter-spacing: 0; font-size: .88rem; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { line-height: 1.3; letter-spacing: 0; }
.areas a { color: inherit; text-decoration: none; }
.areas a:hover { color: var(--blue); text-decoration: underline; }
.guide-list { margin-top: 8px; }
.more-link { margin-top: 14px; } .more-link a { display: inline-block; padding: 10px 0; font-weight: 700; }
.wordmark { font-family: "Baloo 2", var(--head); font-size: 1.45rem; letter-spacing: 0; line-height: 1; }
.wordmark span:last-child { font-weight: 700; }