/* ---------- PG hero ---------- */
.pg-hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:center;overflow:hidden;background:var(--navy-950);color:#fff}
.pg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.pg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,31,.96) 0%,rgba(6,20,31,.86) 38%,rgba(6,20,31,.35) 70%,rgba(6,20,31,.15) 100%),linear-gradient(0deg,rgba(6,20,31,.7),transparent 35%)}
.pg-hero-inner{position:relative;z-index:1;padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.pg-hero .h1{font-size:clamp(46px,7vw,96px);font-weight:800;letter-spacing:-.045em;line-height:.93;margin:20px 0 22px}
.pg-hero .h1 em{font-style:normal;color:var(--amber)}
.pg-hero .lead{color:var(--on-dark-2);max-width:560px}
.pg-hero .btn-row{margin-top:30px}
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:12px;margin-top:40px}
.hero-facts > div{padding:16px 18px;border-radius:16px;background:rgba(6,20,31,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:4px}
.hero-facts b{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--amber);line-height:1.05}
.hero-facts span{font-size:13.5px;color:var(--on-dark-2);line-height:1.35}
@media (max-width:860px){.pg-hero::after{background:linear-gradient(180deg,rgba(6,20,31,.75),rgba(6,20,31,.92))}}
@media (max-width:600px){.hero-facts{grid-template-columns:minmax(0,1fr);width:100%}.pg-hero-inner{padding-top:48px;padding-bottom:48px}}

/* ---------- sub nav ---------- */
.subnav{position:sticky;top:72px;z-index:80;background:rgba(246,243,236,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.subnav-row{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;height:54px}
.subnav-row::-webkit-scrollbar{display:none}
.subnav a{flex-shrink:0;padding:8px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:.15s}
.subnav a:hover{background:var(--paper-2);color:var(--ink)}
.subnav a.on{background:var(--navy-900);color:#fff}
.subnav .sub-cta{margin-left:auto;background:var(--amber);color:var(--navy-900)}
.subnav .sub-cta:hover{background:var(--amber-2)}
html{scroll-padding-top:132px}

/* ---------- problem ---------- */
.problem{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.problem-photo{aspect-ratio:4/5;box-shadow:var(--shadow)}
.prob-cards{display:grid;gap:14px}
.prob-cards .fcard{display:grid;grid-template-columns:48px 1fr;column-gap:18px;row-gap:4px;padding:20px 22px}
.prob-cards .fcard .icon-tile{grid-row:span 2}
.problem .sec-head{margin-bottom:28px}
@media (max-width:860px){.problem{grid-template-columns:minmax(0,1fr);gap:32px}.problem-photo{aspect-ratio:16/10}}

/* ---------- demo ---------- */
.demo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.62fr);gap:22px;align-items:start}
.demo-video{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:#0b1720;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.demo-video video{width:100%;height:100%;object-fit:cover}
.demo-cap{position:absolute;left:18px;bottom:18px;max-width:min(460px,75%);padding:12px 16px;border-radius:14px;background:rgba(6,20,31,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:2px;transition:opacity .3s}
.demo-cap b{font-family:var(--display);font-size:clamp(16px,1.7vw,21px);letter-spacing:-.01em}
.demo-cap span{font-size:14px;color:var(--on-dark-2)}
.demo-cap.hide{opacity:0}
.demo-play{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy-900);display:grid;place-items:center}
.demo-play .ico{width:18px;height:18px}
.demo-panel{border-radius:var(--r);background:var(--navy-850);border:1px solid var(--dark-line);padding:20px;display:flex;flex-direction:column;gap:4px}
.dp-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3);padding-bottom:12px;border-bottom:1px solid var(--dark-line);margin-bottom:6px}
.dp-clock{color:var(--amber)}
.dp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--dark-line)}
.dp-k{font-size:13.5px;color:var(--on-dark-3)}
.dp-v{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;text-align:right}
.pres-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.dp-v.none .pres-dot{background:transparent;border:2px solid var(--on-dark-3);box-shadow:none}
.dp-v.arriving .pres-dot{background:var(--sky);box-shadow:0 0 10px var(--sky)}
.dp-delay .bar{width:84px;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.dp-delay .bar span{display:block;height:100%;width:0;background:var(--amber)}
.dev .ico{width:20px;height:20px;color:var(--on-dark-3)}
.dev.on .ico{color:var(--amber);filter:drop-shadow(0 0 6px rgba(242,179,61,.6))}
.dev.on .fan-ico{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dp-power{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 8px}
.dp-power b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--amber);transition:color .3s}
.dp-power b.zero{color:var(--sky)}
.dp-timeline{padding:8px 0 4px}
.tl-track{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.tl-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.tl-marks{position:relative;height:30px;margin-top:4px}
.tl-mark{position:absolute;top:0;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;padding:0}
.tl-mark::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--navy-700);border:2px solid var(--on-dark-3);transition:.2s}
.tl-mark.past::before{background:var(--amber);border-color:var(--amber)}
.tl-mark:hover::before{transform:scale(1.3)}
.tl-mark .tlt{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 8px;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s}
.tl-mark:hover .tlt,.tl-mark:focus-visible .tlt{opacity:1}
.demo-panel .note{margin-top:auto;padding-top:10px}
@media (max-width:1000px){.demo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.demo-cap{left:10px;bottom:10px;padding:8px 11px;max-width:80%}.demo-cap span{display:none}.demo-play{right:10px;bottom:10px}}

/* ---------- radar vs pir ---------- */
.radar-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.feat-pills .chip .ico{width:16px;height:16px;color:var(--amber-ink)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.seg-btn{min-height:42px;padding:0 18px;border-radius:999px;border:0;background:transparent;font-weight:600;font-size:14.5px;color:var(--ink-2);transition:.18s}
.seg-btn[aria-pressed="true"]{background:var(--navy-900);color:#fff}
.dark .seg,.deep .seg{background:rgba(255,255,255,.06);border-color:var(--dark-line)}
.dark .seg-btn,.deep .seg-btn{color:var(--on-dark-2)}
.dark .seg-btn[aria-pressed="true"],.deep .seg-btn[aria-pressed="true"]{background:var(--sky);color:var(--navy-900)}
.night{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.night svg{width:100%;height:auto}
.night .blades{transform-box:fill-box;transform-origin:center}
.night .air path{fill:none;stroke:#9BDDF6;stroke-opacity:.45;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 8;animation:air2 1.1s linear infinite;transition:opacity .6s}
@keyframes air2{to{stroke-dashoffset:-28}}
.night .chest{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.07)}}
.night .radar-waves path{stroke-width:2.5;opacity:0;transform-box:view-box;transform-origin:58px 132px}
.night .breath circle{transform-box:fill-box;transform-origin:center;opacity:0}
.night .sweat,.night .pir-zone,.night .temp{transition:opacity .8s}
.night .sensor-led{fill:#5CC8F0}
.mode-radar .blades{animation:spin .45s linear infinite}
.mode-radar .radar-waves path{animation:wave 2.4s ease-out infinite}
.mode-radar .radar-waves .w2{animation-delay:.8s}.mode-radar .radar-waves .w3{animation-delay:1.6s}
@keyframes wave{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(6.5)}}
.mode-radar .breath circle{animation:ring 2s ease-out infinite}
.mode-radar .breath circle:nth-child(2){animation-delay:1s}
@keyframes ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.mode-radar .sweat,.mode-radar .pir-zone,.mode-radar .temp{opacity:0}
.mode-pir .blades{animation:spinDown 2.6s cubic-bezier(.15,.6,.35,1) 1 forwards}
@keyframes spinDown{from{transform:rotate(0)}to{transform:rotate(1080deg)}}
.mode-pir .air path{opacity:0;transition-delay:1.2s}
.mode-pir .sensor-led{fill:#F2B33D}
.mode-pir .sweat{opacity:1;transition-delay:2.6s}
.mode-pir .temp{opacity:1}
.verdict{position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.verdict b{font-family:var(--display);font-size:15.5px}
.verdict .vi{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2)}
.verdict .vi .ico{width:16px;height:16px;stroke-width:2.6}
.mode-radar .verdict .vi{background:var(--navy-900);color:var(--sky)}
@media (max-width:960px){.radar-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:600px){.verdict{position:relative;left:auto;right:auto;bottom:auto;border-radius:0}}

/* ---------- moments ---------- */
.moments .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.moments .grid-3{grid-template-columns:minmax(0,1fr)}}
.moment{display:flex;flex-direction:column;gap:16px}
.moment .photo{aspect-ratio:4/3;box-shadow:var(--shadow-sm)}
.moment figcaption{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.moment b{font-family:var(--display);font-size:21px;letter-spacing:-.015em}
.moment figcaption > span:last-child{font-size:15.5px;color:var(--ink-2)}
.mtag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mtag i{width:8px;height:8px;border-radius:50%}
.mtag.on{background:var(--amber-soft);color:var(--amber-ink)}.mtag.on i{background:var(--amber)}
.mtag.off{background:var(--sky-soft);color:var(--sky-ink)}.mtag.off i{border:2px solid var(--sky-ink)}

/* ---------- simulator ---------- */
.sim{display:flex;flex-direction:column;gap:18px}
.sim-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--dark-line)}
.sim-clock{display:flex;align-items:center;gap:12px}
.sim-clock .ico{width:24px;height:24px;color:var(--amber)}
.sim-clock b{font-family:var(--display);font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1}
.sim-clock span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}
.sim-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sim-p{flex-basis:100%;display:grid;grid-template-columns:auto minmax(120px,320px) auto;align-items:center;gap:14px;padding-top:12px;border-top:1px solid var(--dark-line);font-size:14px;color:var(--on-dark-2)}
.sim-p output{font-family:var(--display);font-weight:800;font-size:18px;color:var(--amber);min-width:48px}
@media (max-width:600px){.sim-p{grid-template-columns:minmax(0,1fr) auto}.sim-p label{grid-column:1/-1}}
.switch{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px 0 6px;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-weight:600;font-size:14.5px}
.switch .sw{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.18);position:relative;transition:background .2s}
.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s var(--ease)}
.switch[aria-checked="true"]{border-color:var(--sky)}
.switch[aria-checked="true"] .sw{background:var(--sky)}
.switch[aria-checked="true"] .sw::after{left:21px}
.switch b{color:var(--amber)}
.switch[aria-checked="true"] b{color:var(--sky)}
.sim-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:18px}
.floor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-radius:var(--r);background:#081a28;border:1px solid var(--dark-line);position:relative}
.floor::before{content:"CORRIDOR";position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:rgba(141,165,183,.45);pointer-events:none}
.floor .room:nth-child(n+5){margin-top:26px}
.room{position:relative;border-radius:14px;padding:12px;min-height:128px;background:#0F2A3D;border:1.5px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:10px;transition:background .35s,border-color .35s;overflow:hidden}
.room.light{background:radial-gradient(120% 90% at 50% 0%,rgba(242,179,61,.32),rgba(242,179,61,.06) 60%,#13314A)}
.rm-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.rm-head b{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--on-dark-2)}
.rm-st{font-size:11.5px;font-weight:600;color:var(--on-dark-3);text-align:right;line-height:1.2}
.rm-dev{display:flex;gap:10px}
.rm-dev .ico{width:24px;height:24px;color:rgba(141,165,183,.5);transition:color .3s}
.room.light .bulb{color:var(--amber-2);filter:drop-shadow(0 0 6px rgba(242,179,61,.8))}
.room.fan .fanx{color:#fff;animation:spin .6s linear infinite}
.rm-res{display:flex;gap:6px;margin-top:auto}
.res{width:18px;height:18px;border-radius:50%;border:2px solid var(--on-dark-3);position:relative}
.res.in{background:#fff;border-color:#fff}
.res.sleep{background:var(--sky-2);border-color:var(--sky-2)}
.res.sleep::after{content:"z";position:absolute;top:-12px;right:-7px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--sky-2)}
.room.waste{border:1.5px dashed var(--amber)}
.room.waste .rm-st{color:var(--amber)}
.room.saved{border-color:rgba(92,200,240,.55)}
.room.saved .rm-st{color:var(--sky)}
.sim-side{display:flex;flex-direction:column;gap:10px}
.meter{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--dark-line);display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px}
.meter .mk{font-size:13px;color:var(--on-dark-3);grid-column:1/-1}
.meter b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em}
.meter .mu{font-size:12.5px;color:var(--on-dark-3);text-align:right}
.m-without b{color:var(--amber)}.m-with b{color:var(--sky)}
.m-saved{background:rgba(92,200,240,.08);border-color:rgba(92,200,240,.3)}
.sim-chart{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--dark-line)}
.sim-chart svg{width:100%;height:auto;display:block}
.sim-chart .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;font-size:12px;color:var(--on-dark-2)}
.sim-chart .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.lw i{background:var(--amber)}.lz i{background:var(--sky)}
.sim-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--on-dark-2)}
.sim-legend span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:14px;height:14px;border-radius:50%}
.lg-in{background:#fff}.lg-sleep{background:var(--sky-2)}.lg-out{border:2px solid var(--on-dark-3)}
.lg-waste{border-radius:4px;border:1.5px dashed var(--amber)}.lg-saved{border-radius:4px;border:1.5px solid var(--sky)}
@media (max-width:1060px){.sim-body{grid-template-columns:minmax(0,1fr)}.sim-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.sim-chart{grid-column:1/-1}.sim-chart svg{max-width:460px;margin:0 auto}}
@media (max-width:700px){.floor{grid-template-columns:repeat(2,minmax(0,1fr))}.floor::before{display:none}.floor .room:nth-child(n+5){margin-top:0}.sim-side{grid-template-columns:minmax(0,1fr)}.room{min-height:112px}}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start}
.calc-in{padding:30px;display:flex;flex-direction:column;gap:26px}
.adv{border-top:1px solid var(--line);padding-top:18px}
.adv summary{cursor:pointer;font-weight:600;color:var(--sky-ink);list-style:none;display:flex;align-items:center;gap:8px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:14px;line-height:1}
.adv[open] summary::before{content:"–"}
.adv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin-top:20px}
@media (max-width:600px){.adv-grid{grid-template-columns:minmax(0,1fr)}.calc-in{padding:22px}}
.calc-out{position:sticky;top:140px;padding:30px;border-radius:var(--r);background:var(--navy-900);color:#fff;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.co-big{display:flex;flex-direction:column;gap:4px}
.co-big b{font-family:var(--display);font-size:clamp(48px,6vw,76px);font-weight:800;letter-spacing:-.045em;line-height:.95;color:var(--amber)}
.co-big > span:last-child{color:var(--on-dark-2)}
.co-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.co-row > div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px}
.co-row b{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.co-row span{font-size:12.5px;color:var(--on-dark-3)}
.co-bar{display:flex;gap:3px;width:100%;height:16px}
.co-bar span{display:block;height:100%;transition:width .4s var(--ease)}
.co-bar .u{background:#3E8FC4;border-radius:8px 0 0 8px}
.co-bar .s{background:var(--amber);border-radius:0 8px 8px 0}
.co-bar-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--on-dark-2)}
.co-bar-key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.co-bar-key i.u{background:#3E8FC4}.co-bar-key i.s{background:var(--amber)}
.co-bar-key b{color:#fff}
.co-ac{font-size:14.5px;color:var(--on-dark-2);padding:12px 14px;border-radius:12px;border:1px dashed rgba(242,179,61,.5)}
.co-ac b{color:#fff}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{position:relative;top:0}}
@media (max-width:600px){.co-row{grid-template-columns:minmax(0,1fr)}.calc-out{padding:22px}}

/* ---------- benefits ---------- */
.ben-hi{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.ben-hi p{color:var(--on-dark-2)}
.ben-hi .icon-tile{background:var(--amber);color:var(--navy-900)}

/* ---------- water ---------- */
.water-top{background:#E6EFF3}
.water-top .lead{color:var(--ink-2)}
.water-top .ticks li{font-size:16.5px}
.water-top .ticks b{color:var(--ink)}
.water-photo{aspect-ratio:4/3;box-shadow:var(--shadow)}
.water-steps{background:#E6EFF3;padding-top:0}
.water-steps .step{border-top-color:var(--sky-ink)}
.water-steps .step .n{color:var(--sky-ink)}

.bld-wrap{display:flex;flex-direction:column;gap:16px}
.bld-ctl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.bld-ctl .seg{margin:0}
.bld-clock{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-2)}
.bld-clock .ico{width:18px;height:18px;color:var(--sky)}
.bld-clock b{font-family:var(--display);font-size:24px;color:#fff}
.bld-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:20px;align-items:start}
.bld{position:relative;padding:76px 18px 18px 64px;border-radius:var(--r);background:#081a28;border:1px solid var(--dark-line)}
.tank{position:absolute;top:16px;left:64px;right:18px;height:44px;border-radius:12px;background:linear-gradient(180deg,#1C4A66,#123448);border:1px solid rgba(92,200,240,.35);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-2)}
.riser{position:absolute;left:30px;top:38px;bottom:30px;width:10px;border-radius:6px;background:#173A52;overflow:hidden}
.riser::before{content:"";position:absolute;left:0;top:-3px;width:44px;height:10px;background:#173A52}
.riser .flow{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(92,200,240,.9) 10px 18px);background-size:100% 28px;animation:down .7s linear infinite;opacity:0;transition:opacity .4s}
.bld.flowing .riser .flow{opacity:1}
@keyframes down{to{background-position:0 28px}}
.main-sensor{position:absolute;left:-2px;top:14px;width:14px;height:14px;border-radius:50%;background:#C8942F;border:2px solid #7A5614}
.floors{display:flex;flex-direction:column;gap:10px}
.bfloor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.bfloor::before{content:"";position:absolute;left:-30px;top:50%;width:30px;height:4px;background:#173A52}
.bfloor .fl{position:absolute;left:-60px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;color:var(--on-dark-3);letter-spacing:.06em;display:none}
.unit{position:relative;padding:12px 12px 12px 34px;border-radius:12px;background:#0F2A3D;border:1.5px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;gap:8px;transition:border-color .3s,background .3s}
.unit .sens{position:absolute;left:11px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:#C8942F;border:2px solid #7A5614}
.unit.flow .sens{box-shadow:0 0 0 0 rgba(92,200,240,.7);animation:sensPulse 1s ease-out infinite}
@keyframes sensPulse{0%{box-shadow:0 0 0 0 rgba(92,200,240,.75)}100%{box-shadow:0 0 0 9px rgba(92,200,240,0)}}
.unit .un{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--on-dark-2)}
.unit .ul{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.unit .ul small{font-size:12px;font-weight:600;color:var(--on-dark-3);margin-left:2px}
.unit.alarm{border:1.5px dashed var(--amber);background:rgba(242,179,61,.08)}
.drip{position:absolute;left:28px;top:56%;display:flex;flex-direction:column;gap:6px}
.drip span{width:8px;height:11px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--sky);animation:drip 1.2s ease-in infinite;opacity:0}
.drip span:nth-child(2){animation-delay:.4s}.drip span:nth-child(3){animation-delay:.8s}
@keyframes drip{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
.bld-side{display:flex;flex-direction:column;gap:12px}
.bs-tot{display:grid;gap:8px}
.bs-tot > div{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--dark-line)}
.bs-tot .mk{font-size:13.5px;color:var(--on-dark-3)}
.bs-tot b{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bs-tot .gap b{color:var(--sky)}
.bs-tot .gap.bad{border-color:var(--amber);background:rgba(242,179,61,.08)}
.bs-tot .gap.bad b{color:var(--amber)}
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(92,200,240,.1);border:1px solid rgba(92,200,240,.35);font-size:14.5px;line-height:1.45;color:var(--on-dark-2)}
.alert b{color:#fff}
.alert .ai{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--navy-900)}
.alert .ai .ico{width:16px;height:16px;stroke-width:2.6}
.alert.bad{background:rgba(242,179,61,.1);border-color:rgba(242,179,61,.5)}
.alert.bad .ai{background:var(--amber)}
@media (max-width:960px){.bld-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.bld{padding-left:52px}.riser{left:22px}.tank{left:52px}.bfloor::before{left:-22px;width:22px}.unit{padding-left:30px}.unit .ul{font-size:17px}}

.dash{padding:26px;display:flex;flex-direction:column;gap:20px}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.dash-head b{display:block;font-family:var(--display);font-size:22px}
.dash-head .muted{font-size:13.5px}
.dash-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dash-kpis > div{padding:14px;border-radius:14px;background:var(--paper);display:flex;flex-direction:column;gap:2px}
.dash-kpis .mk{font-size:12.5px;color:var(--ink-3)}
.dash-kpis b{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.dash-kpis .sub{font-size:12px;color:var(--ink-3)}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dash-chart{padding:16px 16px 10px;border-radius:14px;border:1px solid var(--line);color:var(--ink)}
.dash-chart.wide{grid-column:1/-1}
.dc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.dc-head b{font-size:15px}
.dc-head span{font-size:12.5px;color:var(--ink-3)}
@media (max-width:960px){.dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash{padding:18px}}

.leaks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.leak{padding:20px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.lk-top{display:flex;align-items:baseline;gap:10px}
.lk-top .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--sky-ink)}
.lk-top h3{font-size:19px}
.leak p{font-size:14.5px;color:var(--ink-2)}
.leak-note{margin-top:14px}
@media (max-width:1060px){.leaks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.leaks{grid-template-columns:minmax(0,1fr)}}

.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
.price-calc{padding:28px;display:flex;flex-direction:column;gap:18px}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pc-row b{display:block;font-size:16px}
.pc-row .muted{font-size:13.5px}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden;flex-shrink:0}
.stepper button{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;color:var(--ink)}
.stepper button:hover{background:var(--paper-2)}
.stepper .ico{width:18px;height:18px}
.stepper input{width:56px;height:44px;border:0;text-align:center;font-family:var(--display);font-size:20px;font-weight:800;background:transparent;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pc-out > div{padding:16px;border-radius:14px;background:var(--sky-soft);display:flex;flex-direction:column;gap:2px}
.pc-out .mk{font-size:12.5px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-ink)}
.pc-out b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em}
.pc-out .muted{font-size:13px}
@media (max-width:860px){.price-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:420px){.pc-out{grid-template-columns:minmax(0,1fr)}.pc-row{flex-direction:column;align-items:flex-start}}