:root{
    --green:#239e0a;
    --deep:#0a4d21;
    --text:#151b18;
    --muted:#626873;
    --border:#e4e8e5;
    --soft:#f1f8ed
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#fff;
    font-size:15px;
    -webkit-font-smoothing:antialiased
}
button,a{
    -webkit-tap-highlight-color:transparent
}
button{
    font:inherit;
    cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible{
    outline:3px solid #f5ba36;
    outline-offset:4px
}
button{
    color:inherit
}
a{
    color:inherit;
    text-decoration:none
}
button .icon{
    flex-shrink:0
}
.icon{
    width:36px;
    height:36px;
    vertical-align:middle;
    color:var(--green)
}
.container{
    width:calc(100% - 92px);
    max-width:1188px;
    margin:auto
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:1px solid var(--green);
    border-radius:6px;
    padding:15px 28px;
    background:linear-gradient(115deg,#46bd17,#209d06);
    color:white;
    font-weight:700;
    white-space:nowrap;
    transition:box-shadow .2s,transform .2s
}
.button:hover{
    box-shadow:0 5px 18px #259e092b;
    transform:translateY(-1px)
}
.button .icon{
    color:inherit;
    width:23px;
    height:23px
}
.button-outline{
    background:#ffffffba;
    color:#168209;
    border-color:#2caa12
}
.button-small{
    padding:6px 18px;
    font-size:13px
}
.notice{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    background:#edf4e9;
    color:#244337;
    font-size:14px
}
.notice>span{
    display:flex;
    align-items:center;
    gap:10px
}
.notice .icon{
    width:22px;
    height:22px;
    color:#244337
}
.button-yellow{
    padding:7px 14px;
    background:#ffd153;
    border-color:#ffd153;
    color:#332c16;
    font-size:12px;
    gap:7px
}
.button-yellow .icon{
    width:14px;
    height:14px
}
.header{
    height:81px;
    background:#fffffff2
}
.header-inner{
    height:100%;
    max-width:1200px;
    width:calc(100% - 80px);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px
}
.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:21px;
    font-weight:600;
    color:var(--green);
    white-space:nowrap
}
.brand .icon{
    width:44px;
    height:39px
}
.header nav{
    display:flex;
    align-items:center;
    gap:51px;
    font-size:13px;
    font-weight:700
}
.header nav a:hover{
    color:var(--green)
}
.header-actions{
    display:flex;
    gap:12px
}
.header-actions .button{
    padding:12px 18px;
    font-size:14px
}
.menu-toggle{
    display:none
}
.hero{
    position:relative;
    overflow:hidden;
    background:radial-gradient(ellipse at 29% 25%,#e1f8cd 0,transparent 55%),linear-gradient(115deg,#f8fbf5,#edf7e5 70%,#f6faf2)
}
.hero:before,.hero:after{
    content:"";
    position:absolute;
    width:950px;
    height:700px;
    border:2px solid #fff9;
    border-radius:50%;
    transform:rotate(32deg);
    pointer-events:none
}
.hero:before{
    left:-300px;
    top:-120px;
    background:linear-gradient(150deg,transparent 45%,#ffffff50)
}
.hero:after{
    left:-320px;
    top:320px;
    width:900px;
    height:570px
}
.hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:43% 57%;
    min-height:700px;
    padding-top:34px;
    padding-bottom:30px
}
.hero-copy{
    padding-top:15px
}
.eyebrow{
    font-size:13px;
    color:#178b0b;
    font-weight:700;
    letter-spacing:.2px;
    margin:12px 0 25px
}
h1{
    font-size:42px;
    line-height:1.27;
    letter-spacing:-.9px;
    color:var(--deep);
    margin:28px 0 14px
}
p{
    line-height:1.55
}
.hero-description{
    font-size:16px;
    line-height:1.8;
    margin:0 0 30px
}
.hero-actions{
    display:flex;
    gap:16px
}
.hero-actions .button{
    padding:17px 29px;
    font-size:15px
}
.benefits{
    padding:0;
    list-style:none;
    font-size:14px;
    line-height:1.5;
    margin:29px 0 12px
}
.benefits li{
    display:flex;
    align-items:center;
    gap:15px;
    margin:12px 0
}
.benefits li:before{
    content:'✓';
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    background:#75c856;
    border-radius:50%;
    color:white;
    font-size:12px
}
.meters-art{
    width:440px;
    max-width:96%;
    height:176px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat
}
.dashboard{
    align-self:start;
    background:linear-gradient(135deg,#ffffffee,#fff);
    border-radius:16px;
    box-shadow:0 8px 25px #3867210c;
    padding:13px 16px 17px;
    min-width:0
}
.dashboard-toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:20px;
    height:43px;
    margin-bottom:5px
}
.object-select{
    border:1px solid #edf0ed;
    background:white;
    border-radius:6px;
    font-size:10px;
    padding:8px 12px;
    color:var(--muted)
}
.object-select span{
    margin-left:10px
}
.notification{
    position:relative;
    background:none;
    border:0;
    padding:0
}
.notification .icon{
    color:#9ba1ab;
    width:26px;
    height:26px
}
.notification>span{
    position:absolute;
    right:0;
    top:0;
    background:var(--green);
    color:white;
    border-radius:50%;
    font-size:7px;
    width:11px;
    height:11px;
    display:grid;
    place-items:center
}
.avatar{
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border:1px solid #f1f1f1;
    border-radius:50%;
    font-size:11px;
    font-weight:bold
}
.energy-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px
}
.energy-card{
    border:1px solid #f0f1ef;
    border-radius:8px;
    padding:17px 10px;
    display:flex;
    gap:10px;
    box-shadow:0 4px 12px #233c0804;
    min-width:0
}
.energy-icon .icon{
    width:23px;
    height:30px;
    color:inherit
}
.energy-icon{
    border-radius:50%;
    background:#f8fafc
}
.blue{
    color:#318dff
}
.amber{
    color:#ffab0b
}
.green{
    color:#269624
}
.red{
    color:#ff3434
}
.energy-card strong{
    display:block;
    font-size:12px;
    margin-bottom:8px
}
.energy-card b{
    display:block;
    font-size:14px;
    white-space:nowrap
}
.energy-card b span{
    font-size:12px
}
.energy-card small{
    display:block;
    font-size:6.6px;
    color:#5f6671;
    margin-top:8px;
    white-space:nowrap
}
.energy-card em{
    font-style:normal
}
.dashboard-panels{
    display:grid;
    grid-template-columns:1.08fr 1fr;
    gap:10px;
    margin:10px 0 15px
}
.chart-panel,.map-panel{
    border:1px solid #f0f2ef;
    border-radius:9px;
    padding:13px;
    box-shadow:0 5px 15px #00000003;
    min-width:0
}
.dashboard h3{
    font-size:11px;
    margin:2px 0 12px
}
.chart-tabs{
    display:flex;
    border:1px solid #f0f1f3;
    border-radius:5px;
    margin-left:10px
}
.chart-tabs button{
    flex:1;
    border:0;
    background:none;
    color:#707683;
    font-size:9px;
    padding:6px 4px;
    border-radius:5px
}
.chart-tabs button.active{
    background:#dff4db;
    color:#218129;
    font-weight:bold
}
.water-chart{
    position:relative;
    height:231px;
    margin-top:14px;
    padding:18px 0 22px 20px
}
.water-chart svg{
    width:100%;
    height:100%;
    overflow:visible;
    cursor:crosshair
}
.chart-unit{
    position:absolute;
    font-size:9px;
    top:0;
    left:0;
    color:var(--muted)
}
.chart-y{
    position:absolute;
    left:0;
    top:18px;
    bottom:26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    font-size:9px;
    color:#5d6471
}
.grid{
    stroke:#eef0f3;
    stroke-width:1;
    fill:none
}
.chart-line{
    stroke:#328cff;
    stroke-width:1.5;
    fill:none;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    animation:draw-line 1.8s ease forwards
}
.chart-guide{
    stroke:#368eff;
    stroke-opacity:.23;
    stroke-dasharray:2 2
}
.chart-point{
    fill:#328cff;
    stroke:white;
    stroke-width:1
}
.chart-tooltip{
    position:absolute;
    left:48%;
    top:32px;
    font-size:9px;
    line-height:1.7;
    padding:9px 14px;
    border:1px solid #edf0f1;
    border-radius:7px;
    background:#ffffffee;
    box-shadow:0 2px 8px #00000005;
    pointer-events:none;
    transition:left .12s,top .12s
}
.chart-tooltip strong,.chart-tooltip span{
    display:block
}
.chart-x{
    display:flex;
    justify-content:space-between;
    color:#626977;
    font-size:9px;
    margin-top:9px
}
.map-art{
    position:relative;
    height:258px;
    background-color:#fafbf9;
    background-size:100% 100%;
    background-repeat:no-repeat
}
.map-marker{
    position:absolute;
    border:2px solid #34962b;
    background:white;
    border-radius:50%;
    width:27px;
    height:27px;
    box-shadow:0 0 0 4px #ffffff90;
    display:grid;
    place-items:center;
    padding:0
}
.map-marker:after{
    content:'';
    width:11px;
    height:11px;
    border:2px solid #26a31e;
    border-radius:50%
}
.marker-one{
    left:67%;
    top:5%
}
.marker-two{
    left:33%;
    top:19%
}
.marker-three{
    left:73%;
    top:39%
}
.marker-four{
    left:29%;
    top:69%
}
.marker-warning{
    left:51%;
    top:48%;
    border-color:#ff3131;
    color:#ff3131;
    font-size:19px;
    animation:pulse 2.5s infinite
}
.marker-warning:after{
    display:none
}
.alarm-strip{
    width:100%;
    display:flex;
    align-items:center;
    text-align:left;
    gap:16px;
    border:0;
    background:#fff1f1;
    border-radius:8px;
    padding:19px 16px
}
.alarm-strip>.icon{
    color:#ff3030;
    width:29px;
    height:39px
}
.alarm-strip strong{
    display:block;
    color:red;
    font-size:15px;
    margin-bottom:7px
}
.alarm-strip small{
    font-size:11px
}
.alarm-detail{
    margin-left:auto;
    border:1px solid #ffdbdb;
    color:#bd1111;
    background:white;
    padding:11px 16px;
    border-radius:6px;
    white-space:nowrap;
    font-size:11px
}
.content{
    position:relative
}
.proof-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--border);
    border-radius:8px;
    background:#fff;
    margin:0 0 11px;
    padding:22px 8px;
    min-height:95px
}
.proof-strip>div{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    border-right:1px solid var(--border)
}
.proof-strip>div:last-child{
    border:0
}
.proof-strip .icon{
    width:48px;
    height:45px;
    color:#26793a
}
.proof-strip p{
    margin:0;
    line-height:1.4
}
.proof-strip strong{
    display:block;
    color:var(--deep);
    font-size:24px
}
.proof-strip span:not(.api-icon){
    font-size:12px
}
.proof-strip p>span{
    display:block;
    margin-top:5px
}
.proof-strip b{
    font-size:15px
}
.api-icon{
    color:#238726;
    font-size:17px;
    border:1.5px dashed #238726;
    border-radius:45%;
    padding:12px 4px
}
.proof-strip .devices-proof{
    flex-direction:column;
    gap:5px
}
.devices-proof .icon{
    height:25px
}
.statistics{
    display:grid;
    grid-template-columns:2fr repeat(3, .97fr);
    align-items:center;
    gap:20px;
    border-radius:13px;
    background:radial-gradient(ellipse at 30% 5%,#fff8,transparent 60%),linear-gradient(110deg,#e7f7d8,#edf7e6);
    padding:31px 29px 19px 54px;
    min-height:320px
}
.big-number{
    display:block;
    font-size:120px;
    line-height:.91;
    color:#259f0b;
    letter-spacing:-4px
}
.statistics-copy h2{
    font-size:22px;
    line-height:1.2;
    margin:6px 0 13px;
    letter-spacing:-.3px;
    color:#070d08
}
.statistics-copy p{
    font-size:16px;
    margin:0 0 4px;
    line-height:1.5
}
.statistics-copy small{
    font-size:10px;
    color:#586353
}
.stat-card{
    min-height:230px;
    background:#fff;
    border:1px solid #e8eee6;
    border-radius:13px;
    box-shadow:0 5px 15px #54793208;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:27px 10px 23px;
    gap:14px
}
.stat-card .icon{
    width:60px;
    height:55px
}
.stat-card strong{
    font-size:41px;
    color:var(--deep);
    line-height:1.1
}
.stat-card b{
    font-size:17px;
    line-height:1.5;
    color:#080c08
}
.section-title{
    text-align:center;
    color:var(--deep);
    font-size:23px;
    line-height:1.2;
    margin:13px 0 9px
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px
}
.feature-card{
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 17px 15px;
    min-height:154px;
    background:linear-gradient(130deg,#fff,#fcfdff)
}
.icon-disc{
    display:grid;
    place-items:center;
    background:#eef5e9;
    border-radius:50%;
    width:65px;
    height:65px;
    margin-bottom:5px
}
.icon-disc .icon{
    width:39px;
    height:39px;
    color:#21752b
}
.feature-card h3{
    font-size:15px;
    margin:7px 0 5px;
    color:#111
}
.feature-card p,.audience-card li{
    font-size:12px;
    color:#59606a;
    line-height:1.6;
    margin:0
}
.audience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:29px
}
.audience-card{
    border:1px solid var(--border);
    border-radius:9px;
    padding:15px 35px 12px;
    min-height:181px
}
.audience-card>.icon{
    width:61px;
    height:57px;
    color:#197b20
}
.audience-card h3{
    color:#16790a;
    font-size:16px;
    margin:5px 0 8px
}
.audience-card ul{
    padding-left:12px;
    margin:0
}
.case-study{
    display:grid;
    grid-template-columns:55% 45%;
    background:#f6faf3;
    border-radius:10px;
    margin-top:15px;
    padding:8px 14px 8px 18px;
    min-height:302px;
    gap:25px
}
.alarm-dashboard{
    background:#fff;
    border:1px solid #f1f2ee;
    border-radius:9px;
    padding:10px 12px;
    min-width:0
}
.back-label{
    font-size:9px;
    color:#6a707c
}
.alarm-dashboard-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 7px 8px 0
}
.alarm-dashboard h3{
    font-size:14px;
    margin:9px 0
}
.alarm-dashboard-heading>span{
    display:flex;
    gap:9px;
    align-items:center;
    border-radius:5px;
    background:#fff0f0;
    padding:7px 11px
}
.alarm-dashboard-heading .icon{
    color:#ff3636;
    width:24px;
    height:28px
}
.alarm-dashboard-heading b{
    display:block;
    font-size:9px;
    color:#ff2828
}
.alarm-dashboard-heading small{
    font-size:8px
}
.alarm-dashboard-body{
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:8px
}
.alarm-chart,.alarm-data{
    border:1px solid #edf0ec;
    border-radius:6px;
    padding:9px;
    position:relative;
    min-width:0
}
.alarm-dashboard h4{
    font-size:11px;
    margin:0 0 14px
}
.mini-tabs{
    position:absolute;
    right:8px;
    top:8px;
    display:flex;
    font-size:8px;
    border:1px solid #eff1ed;
    border-radius:4px
}
.mini-tabs span{
    padding:4px 13px
}
.mini-tabs span:first-child{
    background:#dff5db;
    color:#177915
}
.alarm-chart>small{
    font-size:8px;
    color:var(--muted)
}
.alarm-chart svg{
    width:100%;
    height:147px;
    display:block
}
.alarm-chart .chart-x{
    font-size:7px;
    margin-top:1px
}
.leak-tooltip{
    position:absolute;
    top:62px;
    left:24%;
    padding:6px 13px;
    border:1px solid #eee;
    border-radius:6px;
    background:white;
    font-size:10px;
    line-height:1.5
}
.alarm-data>small{
    font-size:8px;
    color:#79808b
}
.alarm-data p{
    font-size:9px;
    margin:3px 0 9px
}
.new-badge{
    background:#fff0ef;
    color:#ec2929;
    border:1px solid #ffdad6;
    border-radius:3px;
    padding:1px 5px
}
.alarm-data .button{
    padding:10px 6px;
    font-size:10px;
    width:100%;
    margin-top:5px
}
.case-copy{
    align-self:center;
    padding-right:22px
}
.case-copy h2{
    font-size:24px;
    line-height:1.2;
    color:#16780a;
    margin:5px 0 9px
}
.case-copy>p{
    font-size:14px;
    margin:0 0 17px
}
.case-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:11px
}
.case-metrics>div{
    background:#edf7e4;
    border-radius:8px;
    padding:11px 8px;
    font-size:13px;
    text-align:center
}
.case-metrics .icon{
    width:23px;
    height:23px;
    margin-right:7px
}
.case-metrics b{
    color:#17721c
}
.case-metrics span{
    display:block;
    font-size:12px;
    margin-top:9px;
    white-space:nowrap
}
.mobile-section{
    display:grid;
    grid-template-columns:55% 45%;
    border:1px solid #eff4e9;
    border-radius:10px;
    background:#f5f9f2;
    margin-top:13px;
    height:250px;
    overflow:hidden
}
.phones-art{
    height:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:contain
}
.mobile-copy{
    padding:19px 28px
}
.mobile-copy .eyebrow{
    font-size:12px;
    margin:9px 0 12px
}
.mobile-copy h2{
    font-size:29px;
    color:var(--deep);
    margin:0 0 10px
}
.mobile-copy>p:not(.eyebrow){
    font-size:16px;
    margin:0 0 12px;
    line-height:1.5
}
.store-links{
    display:flex;
    gap:17px;
    margin:7px 0 12px
}
.store-badge{
    display:flex;
    align-items:center;
    gap:9px;
    border:0;
    background:#000;
    color:#fff;
    border-radius:6px;
    font-size:23px;
    padding:6px 12px;
    text-align:left;
    line-height:1
}
.store-badge small{
    display:block;
    font-size:8px;
    margin-bottom:2px
}
.apple-symbol{
    font-size:35px
}
.play-symbol{
    width:0;
    height:0;
    border-top:17px solid transparent;
    border-bottom:17px solid transparent;
    border-left:25px solid #43d185;
    filter:drop-shadow(2px 0 0 #36a9fc)
}
.faq .section-title{
    margin:14px 0 1px
}
.faq-intro{
    text-align:center;
    font-size:14px;
    margin:0 0 5px
}
.faq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:21px
}
.faq details{
    border:1px solid var(--border);
    border-radius:6px;
    margin-top:-1px;
    padding:0 26px;
    background:#fff
}
.faq summary{
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    padding:9px 20px 9px 0;
    position:relative
}
.faq summary::-webkit-details-marker{
    display:none
}
.faq summary:after{
    content:'+';
    position:absolute;
    right:0;
    top:5px;
    font-size:23px;
    font-weight:400
}
.faq details[open] summary:after{
    content:'−'
}
.faq details p{
    font-size:12px;
    color:var(--muted);
    line-height:1.4;
    margin:0 0 8px
}
.all-faq{
    display:block;
    margin:5px auto 9px;
    background:none;
    border:0;
    color:var(--green);
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px
}
.bottom-cta{
    display:grid;
    grid-template-columns:32% 1fr auto;
    align-items:center;
    gap:16px;
    background:linear-gradient(110deg,#4dbb22,#59bb0e 60%,#3eb117);
    color:#fff;
    border-radius:8px;
    min-height:103px;
    padding:9px 97px 9px 22px
}
.cta-art{
    height:84px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat
}
.bottom-cta h2{
    font-size:27px;
    line-height:.96;
    letter-spacing:.2px;
    margin:0 0 5px
}
.bottom-cta p{
    font-size:14px;
    font-weight:600;
    line-height:1.05;
    margin:0
}
.button-white{
    background:white;
    border-color:white;
    color:#151b18;
    padding:9px 23px;
    font-size:14px
}
.button-white .icon{
    color:var(--green)
}
footer{
    background:linear-gradient(110deg,#f3f9ef,#edf6e7);
    margin-top:15px;
    padding:15px 0 3px
}
.footer-inner{
    display:grid;
    grid-template-columns:.9fr 1.05fr 1.15fr 1.05fr;
    gap:20px
}
.footer-inner>div{
    display:flex;
    gap:15px
}
.footer-inner .icon{
    width:29px;
    height:32px;
    flex-shrink:0
}
.footer-inner p{
    margin:0;
    font-size:11px
}
.footer-inner strong{
    display:block;
    color:#28862b;
    font-size:12px;
    margin-bottom:7px
}
.footer-inner p span{
    color:#687366;
    font-size:11px
}
.footer-inner .stamp{
    align-items:center;
    gap:22px;
    font-size:10px;
    color:#5b6f55
}
.stamp b{
    color:#6fe321;
    font-size:42px;
    font-style:italic;
    letter-spacing:-2px;
    line-height:1
}
.stamp small{
    display:block;
    font-size:9px;
    letter-spacing:0;
    text-align:right
}
.copyright{
    text-align:center;
    font-size:11px;
    margin:4px 0 0
}
dialog{
    border:1px solid #dbe8d3;
    border-radius:18px;
    padding:35px;
    max-width:540px;
    width:calc(100% - 32px);
    color:var(--text);
    box-shadow:0 20px 80px #123a2633
}
dialog::backdrop{
    background:#10382065;
    backdrop-filter:blur(5px)
}
dialog h2{
    color:var(--deep);
    margin-top:0
}
dialog .eyebrow{
    margin-top:0
}
.modal-close{
    position:absolute;
    right:15px;
    top:10px;
    background:none;
    border:0;
    font-size:30px;
    color:#60705b
}
#modal-content p{
    font-size:15px
}
.modal-note{
    padding:13px;
    background:var(--soft);
    border-radius:8px;
    color:#53644d;
    font-size:13px!important
}
.modal-alarm{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff0f0;
    padding:15px;
    border-radius:8px
}
.modal-alarm .icon{
    color:#f33
}
.modal-alarm strong{
    color:#d22
}
.reference-art{
    background-image:none
}
@keyframes draw-line{
    to{
        stroke-dashoffset:0
    }
}
@keyframes pulse{
    50%{
        box-shadow:0 0 0 8px #ff303015
    }
}
@media(min-width:1400px){
    .hero-inner{
        min-height:700px
    }
}
@media(max-width:1150px){
    .header nav{
        gap:23px
    }
    .header-inner{
        gap:18px
    }
    .header-actions .button{
        padding:11px 12px;
        font-size:12px
    }
    .hero-actions{
        gap:10px
    }
    .hero-actions .button{
        padding:15px 18px;
        font-size:13px
    }
    h1{
        font-size:36px
    }
    .energy-card{
        gap:5px;
        padding:16px 5px
    }
    .energy-card b{
        font-size:12px
    }
    .energy-card strong{
        font-size:11px
    }
    .statistics{
        padding-left:30px;
        gap:15px
    }
    .big-number{
        font-size:103px
    }
    .statistics-copy h2{
        font-size:19px
    }
    .statistics-copy p{
        font-size:14px
    }
    .feature-grid{
        gap:15px
    }
    .audience-card{
        padding-left:24px;
        padding-right:16px
    }
    .bottom-cta{
        padding-right:35px
    }
    .case-study{
        gap:18px
    }
    .case-metrics{
        gap:6px
    }
    .case-metrics span{
        font-size:10px
    }
    .mobile-copy h2{
        font-size:25px
    }
    .store-badge{
        font-size:19px
    }
    .footer-inner{
        gap:10px
    }
}
@media(max-width:900px){
    .container{
        width:calc(100% - 40px)
    }
    .header-inner{
        width:calc(100% - 40px)
    }
    .header nav{
        gap:18px
    }
    .header-actions .button-outline{
        display:none
    }
    .notice{
        gap:12px;
        font-size:11px
    }
    .hero-inner{
        grid-template-columns:42% 58%;
        min-height:610px
    }
    .hero-copy{
        padding-top:3px
    }
    .eyebrow{
        font-size:11px
    }
    h1{
        font-size:30px
    }
    .hero-description{
        font-size:13px
    }
    .hero-actions{
        flex-direction:column;
        align-items:flex-start
    }
    .hero-actions .button{
        padding:12px 20px
    }
    .benefits{
        font-size:12px;
        margin-top:20px
    }
    .meters-art{
        height:145px
    }
    .energy-icon .icon{
        width:18px
    }
    .energy-card{
        gap:3px
    }
    .energy-card b{
        font-size:10px
    }
    .energy-card b span{
        font-size:8px
    }
    .energy-card small{
        font-size:5px
    }
    .energy-card strong{
        font-size:9px
    }
    .dashboard{
        padding:9px
    }
    .dashboard-panels{
        gap:6px
    }
    .chart-panel,.map-panel{
        padding:9px
    }
    .alarm-strip{
        gap:9px;
        padding:13px 8px
    }
    .alarm-strip strong{
        font-size:12px
    }
    .alarm-strip small{
        font-size:8px
    }
    .alarm-detail{
        font-size:8px;
        padding:9px
    }
    .statistics{
        padding:25px 20px;
        gap:12px;
        min-height:280px
    }
    .big-number{
        font-size:83px
    }
    .statistics-copy h2{
        font-size:16px
    }
    .statistics-copy p{
        font-size:12px
    }
    .stat-card{
        min-height:200px;
        gap:13px
    }
    .stat-card strong{
        font-size:32px
    }
    .stat-card b{
        font-size:13px
    }
    .feature-card{
        padding:10px
    }
    .feature-card h3{
        font-size:12px
    }
    .feature-card p,.audience-card li{
        font-size:10px
    }
    .audience-grid{
        gap:16px
    }
    .audience-card h3{
        font-size:13px
    }
    .case-study{
        grid-template-columns:54% 46%;
        gap:12px;
        padding:8px
    }
    .case-copy{
        padding-right:12px
    }
    .case-copy h2{
        font-size:20px
    }
    .case-copy>p{
        font-size:12px
    }
    .case-metrics>div{
        padding:9px 3px;
        font-size:10px
    }
    .case-metrics .icon{
        width:18px;
        margin-right:2px
    }
    .case-metrics span{
        font-size:8px
    }
    .alarm-dashboard{
        padding:8px
    }
    .alarm-dashboard h3{
        font-size:10px
    }
    .alarm-dashboard-heading>span{
        padding:5px
    }
    .alarm-dashboard-heading b{
        font-size:7px
    }
    .alarm-dashboard-heading small{
        font-size:6px
    }
    .alarm-dashboard-heading .icon{
        width:17px
    }
    .mini-tabs span{
        padding:3px 6px
    }
    .alarm-dashboard h4{
        font-size:9px
    }
    .alarm-data .button{
        font-size:8px
    }
    .mobile-copy{
        padding:19px 15px
    }
    .mobile-copy h2{
        font-size:22px
    }
    .mobile-copy>p:not(.eyebrow){
        font-size:13px
    }
    .store-links{
        gap:10px
    }
    .store-badge{
        font-size:17px;
        padding:6px 9px
    }
    .bottom-cta{
        padding-right:20px;
        grid-template-columns:30% 1fr auto;
        gap:10px
    }
    .bottom-cta h2{
        font-size:22px
    }
    .bottom-cta p{
        font-size:11px
    }
    .button-white{
        font-size:12px;
        padding:9px 13px
    }
    .footer-inner strong{
        font-size:10px
    }
    .footer-inner p span{
        font-size:9px
    }
    .footer-inner>div{
        gap:8px
    }
    .footer-inner .stamp{
        gap:8px;
        font-size:8px
    }
    .stamp b{
        font-size:33px
    }
}
@media(max-width:680px){
    html{
        scroll-padding-top:15px
    }
    .container,.header-inner{
        width:calc(100% - 32px)
    }
    .notice{
        height:auto;
        min-height:65px;
        padding:8px 16px;
        flex-wrap:wrap;
        gap:6px;
        text-align:center
    }
    .notice>span{
        font-size:10px;
        gap:5px
    }
    .notice .button{
        font-size:10px;
        padding:5px 10px
    }
    .header{
        height:70px;
        position:relative;
        z-index:5
    }
    .brand{
        font-size:19px
    }
    .brand .icon{
        width:36px
    }
    .header-actions{
        margin-left:auto
    }
    .header-actions .button{
        font-size:11px;
        padding:10px
    }
    .menu-toggle{
        display:block;
        background:none;
        border:0;
        color:var(--deep);
        font-size:25px;
        order:3;
        padding:3px
    }
    .header nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:70px;
        background:white;
        padding:20px;
        box-shadow:0 12px 15px #133b1510;
        flex-direction:column;
        align-items:flex-start
    }
    .header nav.is-open{
        display:flex
    }
    .hero-inner{
        display:flex;
        flex-direction:column;
        padding-top:20px;
        padding-bottom:25px;
        gap:20px
    }
    .hero-copy{
        padding:0
    }
    .eyebrow{
        font-size:11px;
        margin-top:7px
    }
    h1{
        font-size:37px;
        margin:20px 0 14px
    }
    .hero-description{
        font-size:15px
    }
    .hero-actions{
        flex-direction:row;
        gap:12px
    }
    .hero-actions .button{
        font-size:12px;
        padding:14px 17px
    }
    .benefits{
        margin-top:22px;
        font-size:13px
    }
    .meters-art{
        height:150px;
        width:360px
    }
    .dashboard{
        width:100%;
        max-width:540px;
        margin:auto;
        padding:12px
    }
    .energy-card{
        padding:13px 5px;
        gap:5px
    }
    .energy-card strong{
        font-size:10px
    }
    .energy-card b{
        font-size:11px
    }
    .energy-card small{
        font-size:5px
    }
    .energy-icon .icon{
        width:18px
    }
    .dashboard-panels{
        grid-template-columns:1.08fr 1fr
    }
    .chart-panel,.map-panel{
        padding:8px
    }
    .water-chart{
        height:205px
    }
    .map-art{
        height:230px
    }
    .chart-tooltip{
        padding:6px 9px;
        font-size:8px
    }
    .alarm-strip strong{
        font-size:11px
    }
    .alarm-strip small{
        font-size:7px
    }
    .alarm-detail{
        font-size:7px;
        padding:8px 6px
    }
    .alarm-strip>.icon{
        width:23px
    }
    .proof-strip{
        grid-template-columns:1fr 1fr;
        padding:8px;
        margin-top:15px
    }
    .proof-strip>div{
        padding:12px;
        gap:14px
    }
    .proof-strip>div:nth-child(2){
        border:0
    }
    .proof-strip>div:nth-child(-n+2){
        border-bottom:1px solid var(--border)
    }
    .proof-strip strong{
        font-size:23px
    }
    .proof-strip .icon{
        height:35px;
        width:39px
    }
    .proof-strip .devices-proof{
        gap:8px
    }
    .statistics{
        grid-template-columns:repeat(3,1fr);
        padding:25px 16px;
        gap:10px
    }
    .statistics-copy{
        grid-column:1/-1;
        margin-bottom:8px
    }
    .big-number{
        font-size:105px
    }
    .statistics-copy h2{
        font-size:22px
    }
    .statistics-copy p{
        font-size:14px
    }
    .stat-card{
        min-height:160px;
        padding:18px 5px;
        gap:10px;
        border-radius:9px
    }
    .stat-card .icon{
        width:39px;
        height:39px
    }
    .stat-card strong{
        font-size:28px
    }
    .stat-card b{
        font-size:11px
    }
    .section-title{
        font-size:21px;
        margin-top:22px;
        margin-bottom:13px
    }
    .feature-grid{
        grid-template-columns:1fr 1fr;
        gap:12px
    }
    .feature-card{
        padding:13px;
        min-height:170px
    }
    .feature-card h3{
        font-size:13px
    }
    .feature-card p{
        font-size:11px
    }
    .feature-card p br{
        display:none
    }
    .icon-disc{
        width:55px;
        height:55px
    }
    .audience-grid{
        grid-template-columns:1fr;
        gap:12px
    }
    .audience-card{
        padding:18px 22px;
        min-height:auto
    }
    .audience-card h3{
        font-size:16px
    }
    .audience-card li{
        font-size:13px
    }
    .audience-card>.icon{
        float:right;
        width:70px;
        height:70px;
        margin:8px 8px 0 20px
    }
    .case-study{
        display:flex;
        flex-direction:column;
        gap:20px;
        padding:12px;
        margin-top:22px
    }
    .alarm-dashboard{
        width:100%;
        padding:10px
    }
    .alarm-dashboard h3{
        font-size:11px
    }
    .alarm-dashboard h4{
        font-size:10px
    }
    .case-copy{
        width:100%;
        padding:0 7px 10px
    }
    .case-copy h2{
        font-size:25px
    }
    .case-copy>p{
        font-size:14px
    }
    .case-metrics>div{
        font-size:12px;
        padding:13px 5px
    }
    .case-metrics span{
        font-size:10px
    }
    .case-metrics .icon{
        width:22px
    }
    .mobile-section{
        height:auto;
        display:flex;
        flex-direction:column-reverse;
        margin-top:18px
    }
    .mobile-copy{
        padding:23px
    }
    .mobile-copy h2{
        font-size:26px
    }
    .mobile-copy>p:not(.eyebrow){
        font-size:15px
    }
    .store-badge{
        font-size:21px
    }
    .phones-art{
        height:230px
    }
    .faq-grid{
        grid-template-columns:1fr;
        gap:0
    }
    .faq-intro{
        font-size:12px;
        margin-bottom:14px
    }
    .faq details{
        padding:0 15px
    }
    .faq summary{
        font-size:12px;
        padding:11px 20px 11px 0
    }
    .faq summary:after{
        top:7px
    }
    .all-faq{
        margin:13px auto
    }
    .bottom-cta{
        display:flex;
        flex-wrap:wrap;
        padding:23px;
        gap:18px
    }
    .cta-art{
        display:none
    }
    .bottom-cta h2{
        font-size:25px
    }
    .bottom-cta p{
        font-size:13px;
        line-height:1.2
    }
    .bottom-cta .button{
        font-size:13px
    }
    .footer-inner{
        grid-template-columns:1fr 1fr;
        gap:22px 12px
    }
    .footer-inner strong{
        font-size:11px
    }
    .footer-inner p span{
        font-size:10px
    }
    .footer-inner .stamp{
        font-size:9px
    }
    .copyright{
        margin-top:15px
    }
    .desktop-break{
        display:none
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        animation:none!important;
        transition:none!important
    }
    .chart-line{
        stroke-dashoffset:0
    }
}