:root{--bg:#04121F;--bg2:#062238;--ink:#EAF7FF;--mut:#9DB9CF;--aqua:#4FD8FF;--aqua2:#7CF3FF;--blue:#1A8CFF;--line:rgba(124,243,255,.18)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:radial-gradient(1200px 700px at 78% 30%,#0B3A5E 0%,transparent 60%),radial-gradient(900px 600px at 10% 0%,#0A2A47 0%,transparent 55%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit}

/* ambient water light */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.caustics{position:absolute;inset:-20%;opacity:.16;background:
 radial-gradient(closest-side,rgba(124,243,255,.55),transparent 70%) 0 0/220px 160px,
 radial-gradient(closest-side,rgba(79,216,255,.45),transparent 70%) 110px 80px/260px 190px;
 filter:blur(18px);animation:drift 26s linear infinite;mix-blend-mode:screen}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-220px,-160px,0) rotate(8deg)}}
.bubbles i{position:absolute;bottom:-30px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(124,243,255,.25) 60%,transparent 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);animation:rise linear infinite;opacity:.0}
.bubbles i:nth-child(1){left:6%;animation-duration:13s;animation-delay:0s}
.bubbles i:nth-child(2){left:14%;width:6px;height:6px;animation-duration:10s;animation-delay:3s}
.bubbles i:nth-child(3){left:23%;width:14px;height:14px;animation-duration:16s;animation-delay:6s}
.bubbles i:nth-child(4){left:35%;width:7px;height:7px;animation-duration:12s;animation-delay:1s}
.bubbles i:nth-child(5){left:47%;animation-duration:15s;animation-delay:8s}
.bubbles i:nth-child(6){left:58%;width:5px;height:5px;animation-duration:9s;animation-delay:2s}
.bubbles i:nth-child(7){left:66%;width:12px;height:12px;animation-duration:17s;animation-delay:5s}
.bubbles i:nth-child(8){left:74%;width:8px;height:8px;animation-duration:11s;animation-delay:9s}
.bubbles i:nth-child(9){left:82%;animation-duration:14s;animation-delay:4s}
.bubbles i:nth-child(10){left:89%;width:6px;height:6px;animation-duration:10s;animation-delay:7s}
.bubbles i:nth-child(11){left:95%;width:9px;height:9px;animation-duration:13s;animation-delay:11s}
.bubbles i:nth-child(12){left:41%;width:4px;height:4px;animation-duration:8s;animation-delay:12s}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.8}50%{transform:translate3d(14px,-55vh,0)}90%{opacity:.5}100%{transform:translate3d(-8px,-110vh,0);opacity:0}}

/* header */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px clamp(20px,5vw,64px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.drop{width:34px;height:42px;filter:drop-shadow(0 0 14px rgba(79,216,255,.45))}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font-weight:800;font-size:22px;letter-spacing:.14em}
.wm small{margin-top:5px;font-size:10.5px;font-weight:700;letter-spacing:.32em;color:var(--aqua2)}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--mut);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(4,18,31,.45);backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:#4CFF9A;box-shadow:0 0 0 0 rgba(76,255,154,.6);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(76,255,154,.55)}100%{box-shadow:0 0 0 12px rgba(76,255,154,0)}}

/* hero */
.hero{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(10px,3vw,40px) clamp(20px,5vw,64px) 150px;max-width:1360px;width:100%;margin:0 auto}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--aqua2);padding-left:14px;border-left:3px solid var(--aqua);margin-bottom:22px}
h1{font-size:clamp(34px,4.1vw,58px);line-height:1.02;font-weight:800;letter-spacing:-.025em}
h1 span{background:linear-gradient(92deg,#7CF3FF 0%,#4FD8FF 40%,#1A8CFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:22px;max-width:560px;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--mut)}
.lead strong{color:var(--ink)}
.cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:17px 28px;border-radius:14px;font-weight:700;font-size:16.5px;text-decoration:none;color:#03243D;background:linear-gradient(92deg,#7CF3FF,#4FD8FF 45%,#2AA6FF);box-shadow:0 10px 30px -8px rgba(79,216,255,.65),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(79,216,255,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.btn span{transition:transform .2s ease}.btn:hover span{transform:translateX(4px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;max-width:560px}
.chips li{font-size:12.5px;font-weight:600;color:#CFE9F8;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(10,42,71,.45)}

/* plant illustration */
.plant{position:relative}
.plant::before{content:"";position:absolute;inset:8% 6% 14%;border-radius:32px;background:radial-gradient(closest-side,rgba(79,216,255,.18),transparent 75%);filter:blur(10px)}
.plant svg{position:relative;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.pipe{stroke:#2E557A;stroke-width:9}
.flow{stroke:#7CF3FF;stroke-width:3.5;stroke-dasharray:6 14;animation:flow 1.4s linear infinite;opacity:.95;filter:drop-shadow(0 0 4px rgba(124,243,255,.9))}
.f2{animation-delay:-.3s}.f3{animation-delay:-.6s}.f4{animation-delay:-.9s}.f5{animation-delay:-1.1s}.f6{animation-delay:-.2s}
@keyframes flow{to{stroke-dashoffset:-40}}
.needle{transform-origin:360px 387px;animation:needle 3.2s ease-in-out infinite alternate}
.needle.n2{transform-origin:404px 387px;animation-duration:4.1s}
@keyframes needle{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
.led{animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}
.tankwater{animation:fill 9s ease-in-out infinite alternate}
@keyframes fill{from{transform:translateY(22px)}to{transform:translateY(-34px)}}
.tankwater path{animation:slosh 3.6s linear infinite}
.tankwater .w2{animation-duration:5.2s;animation-direction:reverse}
@keyframes slosh{from{transform:translateX(0)}to{transform:translateX(-80px)}}
.bub{animation:tb 3s ease-in infinite}.b2{animation-delay:1s}.b3{animation-delay:2s}
@keyframes tb{from{transform:translateY(0);opacity:.7}to{transform:translateY(-120px);opacity:0}}

/* waves */
.waves{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:1;pointer-events:none}
.waves .w{position:absolute;left:0;bottom:0;width:200%;height:100%}
.waves .back{fill:#0B3E66;opacity:.55;animation:wave 22s linear infinite}
.waves .mid{fill:#0E5A8F;opacity:.55;animation:wave 15s linear infinite reverse;height:85%}
.waves .front{fill:#127BBF;opacity:.5;animation:wave 10s linear infinite;height:70%}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:16px 20px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#D9F1FF}
.foot .sep{opacity:.5}

@media (max-width:900px){
 .hero{grid-template-columns:1fr;padding-bottom:170px;text-align:left}
 .plant{order:2;max-width:560px;margin:0 auto;width:100%}
 .pill{display:none}
}
@media (max-width:520px){
 .wm b{font-size:18px}.wm small{font-size:9px;letter-spacing:.26em}
 .btn{width:100%;justify-content:center}
 .waves{height:110px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}

/* contact (numbers exactly as on culligan4u.com) */
.contact{margin-top:30px;max-width:560px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(4,18,31,.55);backdrop-filter:blur(6px)}
.phones{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.phones li{display:flex;flex-direction:column;gap:3px}
.phones span{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua2)}
.phones a{font-size:18px;font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:.01em}
.phones a:hover{color:var(--aqua2)}
.hours{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mut);line-height:1.5}
@media (max-width:520px){.phones{grid-template-columns:1fr 1fr}.phones a{font-size:16px}}