:root{--bg:#0b0f19;--card:#101826;--text:#eaf2ff;--muted:#9bb0c7;--ocean:#0077BE;--ocean-2:#35b3ff;--ring:rgba(0,119,190,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 Poppins,system-ui,-apple-system,Segoe UI,Roboto;color:var(--text);background:var(--bg)}
.container{max-width:1120px;margin-inline:auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(11,15,25,.75);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand img{height:36px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
.mainnav{display:flex;gap:18px;align-items:center}
.mainnav a{color:var(--text);text-decoration:none}
.navlink{position:relative;padding:8px 6px;border-radius:10px}
.navlink::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,transparent, var(--ocean), transparent);opacity:0;transform:scaleX(.6);transition:transform .3s, opacity .3s}
.navlink:hover::after{opacity:1;transform:scaleX(1)}
.navlink:hover{background:rgba(255,255,255,.05)}
.btn{background:var(--ocean);color:#fff;border:none;border-radius:999px;padding:12px 18px;cursor:pointer;text-decoration:none;font-weight:700;box-shadow:0 10px 26px -10px var(--ring);transition:transform .12s ease, box-shadow .2s ease}
.btn.small{padding:8px 12px}
.btn.cta{background:linear-gradient(135deg,var(--ocean),var(--ocean-2))}
.btn:active{transform:translateY(1px);box-shadow:0 6px 18px -10px var(--ring)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--text)}
/* HERO */
.hero{position:relative;min-height:94svh;display:grid;place-items:center;overflow:hidden}
.water{position:absolute;inset:-10% -10% -10% -10%;z-index:0;background:url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;filter:brightness(.62)}
.water::after,.water::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 500px at 70% -10%, rgba(0,0,0,.35), transparent 60%);mix-blend:multiply;pointer-events:none}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.8))}
.waves{position:absolute;left:-10%;right:-10%;bottom:-1px;height:160px;opacity:.85;z-index:1;pointer-events:none}
.wave{position:absolute;width:160%;height:160px}
.wave path{fill:rgba(0,119,190,.35)}
.wave{animation:waveSlide 18s linear infinite}
.wave.delay{animation-duration:26s;opacity:.6}
@keyframes waveSlide{0%{transform:translateX(0)}100%{transform:translateX(-35%)}}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:36px;height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.03);color:#fff;font-size:22px;line-height:46px;text-align:center;cursor:pointer;box-shadow:0 10px 26px -12px var(--ring);animation:float 2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.hero-inner{position:relative;z-index:2;text-align:center}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 14px}
.actions{display:flex;gap:12px;justify-content:center;margin:10px 0 16px}
.metrics{display:flex;gap:24px;justify-content:center;color:var(--muted);font-size:14px}
.metrics strong{display:block;color:var(--text);font-size:20px}
/* Sections */
.section{padding:68px 0;border-top:1px solid rgba(255,255,255,.06)}
.section.alt{background:#0e1624}
.section-head{text-align:center;margin-bottom:24px}
.section-head h2{margin:0 0 8px}.section-head p{color:var(--muted);margin:0}
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 25px 70px -35px rgba(0,0,0,.7)}
.price-grid{grid-template-columns:repeat(3,1fr)}
.price-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;position:relative;transition:transform .25s ease, box-shadow .25s ease}
.price-card:hover{transform:translateY(-4px);box-shadow:0 25px 70px -35px rgba(0,0,0,.7)}
.price-card .badge{position:absolute;top:-12px;right:16px;background:var(--text);color:#0b0f19;font-weight:800;padding:6px 10px;border-radius:999px;font-size:12px}
.price{font-size:40px;margin:6px 0 12px}
.price-card ul{margin:0 0 16px 18px}
.featured{outline:2px solid var(--ring)}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.about img{border-radius:16px;border:1px solid rgba(255,255,255,.08)}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{position:relative;padding-left:22px}.ticks li::before{content:'✓';position:absolute;left:0;color:var(--ocean)}
.gallery{grid-template-columns:repeat(3,1fr)}
.shot{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 70px -35px rgba(0,0,0,.7)}
.shot img{display:block;width:100%;height:220px;object-fit:cover;transition:transform .5s ease;backface-visibility:hidden}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{padding:10px 12px;color:var(--muted);background:#0d1522}
/* Reviews glow */
.glow{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 18px}
.glow::before{content:"";position:absolute;inset:-2px;border-radius:14px;background:radial-gradient(120px 60px at 20% -20%, rgba(53,179,255,.25), transparent 40%), radial-gradient(120px 60px at 80% 120%, rgba(0,119,190,.25), transparent 40%);filter:blur(14px);opacity:.5;z-index:-1;animation:breath 6s ease-in-out infinite alternate}
@keyframes breath{from{opacity:.25}to{opacity:.75}}
blockquote cite{display:block;margin-top:8px;color:var(--muted);font-style:normal}
/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px}
.link{color:var(--text);text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.3)}
/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.06);padding:18px 0;background:#0d1522}
.footer .container{display:flex;align-items:center;justify-content:space-between}
.backtop{color:var(--text);background:transparent;border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:10px;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;opacity:0;pointer-events:none}
.backtop.show{opacity:1;pointer-events:auto}
.backtop:hover{box-shadow:0 12px 30px -12px var(--ring)}
/* Assistant */
.ava-button{position:fixed;right:18px;bottom:18px;border:none;background:var(--ocean);color:#fff;border-radius:999px;width:56px;height:56px;box-shadow:0 12px 30px -10px var(--ring);cursor:pointer;z-index:60;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px -10px var(--ring)}50%{box-shadow:0 12px 40px 0 var(--ring)}}
.ava-panel{position:fixed;right:18px;bottom:86px;width:340px;max-width:calc(100vw - 36px);background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 30px 80px -40px rgba(0,0,0,.9);z-index:60;display:flex;flex-direction:column;overflow:hidden}
.ava-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#0e1624;border-bottom:1px solid rgba(255,255,255,.08)}
.ava-messages{padding:12px;display:flex;flex-direction:column;gap:8px}
.msg{background:#0e1624;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.quick-replies{display:flex;gap:8px;flex-wrap:wrap}
.static-list .pill{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);text-decoration:none;color:var(--text);background:rgba(255,255,255,.04);transition:transform .12s ease, box-shadow .2s ease}
.static-list .pill:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px var(--ring)}
.ava-muted{padding:8px 12px;color:var(--muted);font-size:12px}
/* Light mode */
body.light{--bg:#f7f9fc;--text:#0b0f19;--muted:#50607a;--card:#ffffff}
body.light .section.alt{background:#f2f5fb}
body.light .footer{background:#e9f0fb}
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .mainnav{display:none}
}


/* --- Tweaks requested --- */
/* Make room so the scroll arrow is visible */
.hero-inner{padding-bottom:72px}

/* Bubble helper label */
.ava-tip{position:fixed;right:28px;bottom:86px;color:var(--text);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);padding:4px 8px;border-radius:8px;font-size:12px;backdrop-filter:blur(6px);z-index:61;animation:tipFloat 1.8s ease-in-out infinite}
@keyframes tipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Bubble hover animation */
.ava-button{transition:transform .18s ease, box-shadow .25s ease}
.ava-button:hover{transform:translateY(-2px) scale(1.03);}

/* Panel slide/fade animation */
.ava-panel{opacity:0;transform:translateY(12px);transition:transform .25s ease, opacity .25s ease}
.ava-panel.open{opacity:1;transform:none}

/* Gold stars in reviews */
.stars{color:#f6c33b}

/* Pills subtle hover already present; add focus for accessibility */
.static-list .pill:focus{outline:2px solid var(--ocean);outline-offset:2px}


/* Calm glitter stars (background) */
.sparkle-field{position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(2.5px 2.5px at 10% 20%, rgba(255,255,255,.38), transparent 60%),
  radial-gradient(2px 2px at 28% 35%, rgba(255,255,255,.33), transparent 60%),
  radial-gradient(2.2px 2.2px at 40% 60%, rgba(255,255,255,.30), transparent 60%),
  radial-gradient(1.8px 1.8px at 55% 22%, rgba(255,255,255,.28), transparent 60%),
  radial-gradient(1.8px 1.8px at 70% 30%, rgba(255,255,255,.28), transparent 60%),
  radial-gradient(1.6px 1.6px at 78% 65%, rgba(255,255,255,.26), transparent 60%),
  radial-gradient(1.6px 1.6px at 85% 75%, rgba(255,255,255,.26), transparent 60%),
  radial-gradient(1.8px 1.8px at 25% 80%, rgba(255,255,255,.26), transparent 60%);
animation:sparkleDrift 22s linear infinite alternate, sparkleBlink 6s ease-in-out infinite; opacity:.35}
@keyframes sparkleDrift{from{transform:translateY(0)}to{transform:translateY(-12px)}}

/* Gold stars (simple, no shimmer) + tiny twinkles */
.stars{color:#f6c33b;position:relative}
.stars::before,.stars::after{content:"✦";position:absolute;color:rgba(255,255,255,.65);font-size:10px;opacity:.0}
.stars::before{top:-6px;left:8px;animation:twinkle 6s ease-in-out infinite 1s}
.stars::after{bottom:-6px;right:6px;animation:twinkle 7s ease-in-out infinite 2s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}10%{opacity:.8;transform:scale(1) rotate(15deg)}20%{opacity:0;transform:scale(.5) rotate(0deg)}}

/* Ensure main content sits above sparkles */
header, .hero, .section, .footer{position:relative;z-index:1}

/* FAQ styles */
.faq details{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin:8px 0 0}

/* Exit animations (fade away when leaving viewport) */
[data-aos]{will-change:transform,opacity}
[data-aos].aos-out{opacity:0;transform:translateY(12px);transition:all .5s ease}

/* Scroll progress bar (white) */
.progress{position:fixed;top:0;left:0;height:3px;background:rgba(255,255,255,.95);width:var(--p,0%);z-index:100;box-shadow:0 3px 10px -6px rgba(255,255,255,.6)}