:root{--teal:#0e7c86;--deep:#0a3d5c;--aqua:#37d3d9;--mint:#b9f3ef;--orange:#ff7a1a;--orange2:#e85d00;--ink:#0b2a3b;--glass:rgba(255,255,255,.18);--glass2:rgba(255,255,255,.62);--bd:rgba(255,255,255,.45)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);line-height:1.65;background:linear-gradient(160deg,#dffbfa 0%,#bfeef2 35%,#9fd8ec 70%,#cdeffa 100%) fixed;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;background:linear-gradient(135deg,#ff9a3c,var(--orange2));color:#fff!important;text-decoration:none;font-weight:700;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;font-size:16px;box-shadow:0 8px 22px rgba(232,93,0,.38),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,93,0,.5)}
.btn.ghost{background:var(--glass);border:1.5px solid rgba(255,255,255,.8);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.55);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--bd);box-shadow:0 6px 24px rgba(10,61,92,.1)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.logo{height:44px;width:auto}
nav.main{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--deep);font-weight:600;padding:8px 12px;border-radius:999px;font-size:15px}
nav.main a:hover,nav.main a[aria-current]{background:rgba(255,255,255,.7)}
nav.main a.btn{color:#fff;padding:10px 18px}
.hero{position:relative;padding:60px 0 80px;background:radial-gradient(circle at 20% 10%,rgba(55,211,217,.55),transparent 50%),linear-gradient(135deg,#0a3d5c,#0e7c86 55%,#37d3d9);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:linear-gradient(to top,#cfeff6,transparent)}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.12;margin-bottom:16px;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.hero p{font-size:18px;opacity:.96;margin-bottom:22px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.stage{perspective:1100px;position:relative;margin-top:36px;height:300px}
.scene{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .12s ease-out}
.layer{position:absolute;border-radius:18px;box-shadow:0 24px 50px rgba(0,30,50,.4);border:2px solid rgba(255,255,255,.55);object-fit:cover;transform-style:preserve-3d}
.l1{width:56%;height:80%;left:0;top:8%;transform:translateZ(20px)}
.l2{width:42%;height:52%;right:4%;top:0;transform:translateZ(90px)}
.l3{width:38%;height:48%;right:12%;bottom:0;transform:translateZ(150px)}
.l4{width:26%;height:40%;left:34%;bottom:-4%;transform:translateZ(110px)}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.2) 45%,rgba(55,211,217,.25));border:1px solid rgba(255,255,255,.7);animation:float 6s ease-in-out infinite}
.b1{width:34px;height:34px;left:46%;top:10%;transform:translateZ(200px)}
.b2{width:20px;height:20px;left:6%;top:70%;transform:translateZ(170px);animation-delay:-2s}
.b3{width:48px;height:48px;right:0;top:60%;transform:translateZ(230px);animation-delay:-4s}
.b4{width:14px;height:14px;left:30%;top:4%;transform:translateZ(120px);animation-delay:-1s}
@keyframes float{50%{margin-top:-18px}}
.hero-form{background:var(--glass);border:1px solid var(--bd);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-radius:24px;padding:24px;box-shadow:0 20px 50px rgba(0,30,50,.3),inset 0 1px 0 rgba(255,255,255,.6);display:grid;gap:12px;color:#fff}
.hero-form strong{font-size:20px}
.hero-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-form label{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
.hero-form input,.hero-form textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.85);font:inherit;color:var(--ink)}
.hero-form textarea{min-height:90px;resize:vertical}
.hero-form input:focus,.hero-form textarea:focus{outline:3px solid var(--orange)}
section.block{padding:64px 0}
h2{font-size:clamp(24px,3.2vw,36px);color:var(--deep);margin-bottom:16px;line-height:1.2}
h3{color:var(--deep);margin-bottom:8px;font-size:19px}
p{margin-bottom:14px}
.glass{background:var(--glass2);border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;padding:28px;box-shadow:0 14px 40px rgba(10,61,92,.14),inset 0 1px 0 rgba(255,255,255,.8)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;perspective:1000px}
.grid.steps{grid-template-columns:repeat(4,1fr)}
.card{background:var(--glass2);border:1px solid var(--bd);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;padding:24px;box-shadow:0 12px 34px rgba(10,61,92,.14),inset 0 1px 0 #fff;transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .3s;will-change:transform}
.card:hover{box-shadow:0 22px 50px rgba(14,124,134,.3),inset 0 1px 0 #fff}
.card h3,.card p,.card .ico{transform:translateZ(30px)}
.ico{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--aqua),var(--teal));display:grid;place-items:center;margin-bottom:12px;box-shadow:0 8px 18px rgba(14,124,134,.4)}
.ico svg{width:28px;height:28px;fill:#fff}
.imgwide{border-radius:24px;border:2px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(10,61,92,.28);width:100%;height:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
ul.list{padding-left:20px;margin-bottom:14px}ul.list li{margin-bottom:8px}
ul.zones{list-style:none;padding:0;display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
ul.zones li{background:linear-gradient(135deg,var(--aqua),var(--teal));color:#fff;padding:10px 22px;border-radius:999px;font-weight:700;box-shadow:0 8px 18px rgba(14,124,134,.3)}
.faq details{background:var(--glass2);border:1px solid var(--bd);border-radius:16px;padding:14px 18px;margin-bottom:12px;backdrop-filter:blur(10px)}
.faq summary{cursor:pointer;font-weight:700;color:var(--deep)}
.faq details p{margin:10px 0 0}
.cta-band{margin:30px 0 0;padding:60px 0;text-align:center;color:#fff;background:radial-gradient(circle at 80% 0,rgba(255,255,255,.25),transparent 50%),linear-gradient(135deg,var(--deep),var(--teal) 60%,var(--aqua))}
.cta-band h2{color:#fff}
.cta-band .btn.alt{background:var(--glass);border:2px solid #fff;box-shadow:none;backdrop-filter:blur(8px)}
.fcall{display:none}
@media(max-width:900px){
.hero-grid,.split{grid-template-columns:1fr}
.grid{grid-template-columns:1fr 1fr}.grid.steps{grid-template-columns:1fr 1fr}
.stage{height:240px}
nav.main a:not(.btn):not(.lang){display:none}
.fcall{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;background:linear-gradient(135deg,#ff9a3c,var(--orange2));text-align:center;padding:12px}
.fcall a{color:#fff;font-weight:700;text-decoration:none}
}
@media(max-width:560px){.grid,.grid.steps,.hero-form .row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* shared extras */
.lang{border:1px solid rgba(10,61,92,.25)}
form.quote{display:grid;gap:12px}
form.quote input,form.quote select,form.quote textarea{width:100%;padding:11px 13px;border-radius:12px;border:1px solid rgba(10,61,92,.25);background:rgba(255,255,255,.9);font:inherit;color:var(--ink)}
form.quote label{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
form.quote .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.quote button{border:0;cursor:pointer;font:inherit}
.hero-form{display:grid;gap:10px}
.mapbox{border-radius:24px;overflow:hidden;border:2px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(10,61,92,.28);margin-top:18px}
.mapbox iframe{display:block;width:100%;height:420px;border:0}
.mapnote{font-size:14px;opacity:.85;margin-top:10px}
/* footer 4 columns */
footer.site{background:var(--deep);color:#d6f3f6;padding:44px 0 22px;text-align:left}
footer.site a{color:#fff}
.fgrid{display:grid;gap:32px;grid-template-columns:1.3fr .9fr 1.1fr 1.6fr}
.fgrid h4{color:#fff;text-transform:uppercase;letter-spacing:.8px;font-size:13px;margin:0 0 12px}
.fgrid ul{list-style:none;padding:0;margin:0}.fgrid li{margin:0 0 8px}.fgrid a{text-decoration:none;color:#d6f3f6;margin:0}.fgrid a:hover{color:#fff;text-decoration:underline}
.fgrid p{margin:0 0 10px}.fbrand{font-size:20px;font-weight:800;color:#fff}.fbrand span{color:var(--aqua)}
.fphone{font-size:20px;font-weight:800;color:#fff!important}
.fgrid .btn{color:#fff!important;text-decoration:none!important;padding:10px 18px;font-size:14px}
.fbottom{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:flex;gap:14px 24px;justify-content:space-between;flex-wrap:wrap;font-size:13px;color:#a9dbe2}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.mapbox iframe{height:320px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}.fbottom{flex-direction:column}form.quote .row{grid-template-columns:1fr}}
form.quote:not(.hero-form){max-width:680px}
.card.svc{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.svc img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0;transform:none}
.card.svc .sbody{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card.svc h3,.card.svc p{transform:none}
.card.svc a.more{margin-top:auto;font-weight:700;text-decoration:none}

@media(max-width:900px){footer.site{padding-bottom:78px}}
.imgcol{display:flex;flex-direction:column;gap:22px;align-self:start}
.imgcol .imgwide{width:100%;height:auto}
.imgcol .imgwide.second{aspect-ratio:16/9;object-fit:cover}
.nw{white-space:nowrap}
@media(min-width:901px){.fgrid p:has(.nw){white-space:nowrap}}