:root{--paper:#fff;--ink:#0b0d12;--pine:#146ff8;--pine-d:#015eea;--sun:#00c0fa;--sand:#f3f5f8;--surface:#eef1f5;--moss:#5b6472;--line:#e3e7ee;--chrome:#000}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font-family:Inter,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}a{color:var(--pine);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
/* header */
.hd{background:var(--chrome);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.hw{max-width:1440px;margin:auto;display:flex;align-items:center;gap:36px;padding:0 32px;height:64px}
.lg img{height:28px;width:auto}
.nv{display:flex;gap:4px;align-items:stretch;height:100%;flex:1}
.ni{position:relative;display:flex;align-items:center}
.ni>a{color:#fff;font-size:16px;padding:0 14px;height:64px;display:flex;align-items:center;border-bottom:3px solid transparent}
.ni>a:hover{text-decoration:none;border-bottom-color:#fff}
.ni>a[aria-current]{border-bottom-color:var(--pine);font-weight:700}
.dd{display:none;position:absolute;top:64px;left:0;min-width:220px;background:#fff;border-radius:0 0 10px 10px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:8px 0}
.dd a{display:block;padding:9px 18px;color:var(--ink);font-size:16px}.dd a:hover{background:var(--sand);text-decoration:none}
.has-dd:hover .dd,.has-dd:focus-within .dd{display:block}
.shop{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--pine);color:#fff;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:600}
.shop:hover{background:var(--pine-d);text-decoration:none}
.mnu{display:none}
/* buttons */
.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--pine);color:#fff;border-radius:999px;padding:9px 20px;font-weight:600;font-size:14px;white-space:nowrap;border:1px solid var(--pine)}
.btn:hover{background:var(--pine-d);text-decoration:none}
.btn.big{padding:13px 34px;font-size:16px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
/* hero */
.hero{position:relative;background:#e9e6e1;overflow:hidden}
.hbg{width:100%;height:clamp(380px,36vw,680px);object-fit:cover;object-position:40% 60%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 52%,rgba(244,242,239,.78) 66%,rgba(244,242,239,.92));pointer-events:none}
.hov{position:absolute;top:0;bottom:0;right:5vw;width:min(460px,32vw);display:flex;flex-direction:column;justify-content:center;z-index:2}
.ey{color:var(--pine);letter-spacing:.12em;text-transform:uppercase;font-size:14px;font-weight:700;margin:0 0 10px}
.hh{font-size:clamp(30px,3.2vw,44px);color:var(--ink);margin:0 0 22px}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
/* sections */
.sec{max-width:1440px;margin:auto;padding:44px 32px 8px}
.sh{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}.sh h2{font-size:clamp(22px,2.2vw,30px);margin:0}.sh a,.sh span{margin-left:auto;font-size:16px;color:var(--moss)}.sh a{color:var(--pine)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(min-width:1600px){.grid.g5{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--sand);border-radius:16px;overflow:hidden;height:100%;transition:box-shadow .2s}
.card:hover{box-shadow:0 8px 24px rgba(11,13,18,.08)}
.ci{display:block;aspect-ratio:1/1;background:#fff;padding:10px}.ci img{width:100%;height:100%;object-fit:contain}
.cb{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:14px 16px 18px}
.cb h3{font-size:16px;margin:0 0 6px}.cb h3 a{color:var(--ink)}
.cl{flex:1;margin:0 0 14px;font-size:14px;color:var(--moss)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--surface);color:var(--ink)}
.tile img{width:100%;aspect-ratio:1200/499;object-fit:cover}
.tt{display:flex;flex-direction:column;align-items:center;padding:16px 12px 20px;text-align:center}
.tt b{font-size:20px}.tt small{font-size:14px;color:var(--moss)}.tt em{font-style:normal;color:var(--pine);font-weight:600;margin-top:6px}
.tile:hover{text-decoration:none}
.tech{background:var(--chrome);color:#fff;margin-top:48px;padding:48px 32px}
.tech .sh{max-width:1440px;margin:0 auto 22px}.tech h2{color:#fff}
.tg{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tg a{border:1px solid #2a2f38;border-radius:14px;padding:20px;color:#fff;display:flex;flex-direction:column;gap:4px}
.tg a:hover{border-color:var(--pine);text-decoration:none}.tg b{font-size:16px}.tg span{color:#aab3c2;font-size:14px}
/* category */
.ch{max-width:1440px;margin:auto;padding:36px 32px 6px}.ch h1{font-size:clamp(30px,3.2vw,44px)}.ch p{max-width:820px;color:var(--moss);font-size:16px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-width:1440px;margin:14px auto 0;padding:0 32px}
.chips a{background:var(--sand);border-radius:999px;padding:7px 16px;color:var(--ink);font-size:14px;font-weight:500}.chips a:hover{background:var(--surface);text-decoration:none}
.tw{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:16px}th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
thead th{background:var(--sand);font-weight:700}.na{color:var(--moss)}
/* product */
.wrap{max-width:1280px;margin:auto;padding:16px 32px 24px}
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;padding:20px 0 36px}
.main-img{background:var(--sand);border-radius:20px;overflow:hidden;aspect-ratio:1/1;padding:24px}.main-img img{width:100%;height:100%;object-fit:contain}
.crumb{font-size:14px;color:var(--moss);margin:0 0 8px}.crumb a{color:var(--moss)}
.pinfo h1{font-size:clamp(22px,2.2vw,30px)}
.ptype{color:var(--pine);font-weight:600;margin:0 0 14px}
.kp{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:8px}
.kp li{position:relative;padding:4px 0 4px 26px;font-size:16px}.kp li:before{content:"";position:absolute;left:4px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--pine)}
.prose{max-width:860px}.pbody{margin:0 auto}
.prose h1{font-size:clamp(30px,3.2vw,44px);margin-top:12px}.prose h2{font-size:clamp(22px,2.2vw,30px);margin-top:1.5em}.prose p,.prose li{font-size:16px}
.trust{margin:0 auto;padding-bottom:24px}
.spec th{width:34%;background:var(--sand);font-weight:600}
.qa{border-bottom:1px solid var(--line);padding:12px 0}.qa summary{cursor:pointer;font-weight:600;font-size:16px}.qa p{margin:8px 0 0}
/* footer */
.ft{background:var(--chrome);color:#aab3c2;padding:52px 32px 22px;margin-top:56px}
.fw{max-width:1440px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.fb img{height:32px;width:auto;margin-bottom:12px}.fb p{font-size:14px;max-width:340px}
.ft h4{color:#fff;margin:0 0 12px;font-size:14px;letter-spacing:.06em;text-transform:uppercase}.fc a{display:block;color:#aab3c2;font-size:16px;padding:4px 0}.fc a:hover{color:#fff}
.fwm{max-width:1000px;margin:40px auto 0;aspect-ratio:88/25;background:url(/assets/ecovacs-logo-white.svg) center/contain no-repeat;opacity:.08}
.cp{max-width:1440px;margin:24px auto 0;border-top:1px solid #222831;padding-top:16px;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.cp a{color:#aab3c2}
.sticky{display:none}
@media(max-width:1100px){.tg{grid-template-columns:repeat(3,1fr)}.ni>a{padding:0 9px}}
@media(max-width:960px){
 .hw{padding:0 16px;height:56px;gap:0;justify-content:space-between;position:relative}
 .nv{display:none}
 .lg{position:absolute;left:50%;transform:translateX(-50%)}.lg img{height:24px}
 .mnu{display:block}.mnu summary{list-style:none;cursor:pointer;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px}
 .mnu summary::-webkit-details-marker{display:none}.mnu summary span{display:block;height:2px;background:#fff;border-radius:2px}
 .mp{position:fixed;left:0;right:0;top:56px;background:#000;padding:8px 20px 20px;box-shadow:0 12px 20px rgba(0,0,0,.4)}
 .mp a{display:block;color:#fff;padding:13px 0;border-bottom:1px solid #20242c;font-size:16px}
 .shop{margin-left:0;padding:6px 14px}
 .pdp{grid-template-columns:1fr;gap:20px}.tiles{grid-template-columns:1fr 1fr 1fr;gap:12px}.tt b{font-size:16px}
 .fw{grid-template-columns:1fr 1fr}.fb{grid-column:1/-1}
}
@media(max-width:960px){.hero{background:var(--paper)}.hero:after{display:none}.hbg{height:auto;aspect-ratio:2400/700;object-position:40% 60%}.hov{position:static;width:auto;padding:18px 24px 4px}}
@media(max-width:700px){
 .hbg{aspect-ratio:800/470;object-position:50% 50%}
 .hov{padding:14px 16px 4px}
 .ey{font-size:14px;margin-bottom:4px}.hh{font-size:20px;margin-bottom:12px}
 .hcta .btn.big{padding:10px 24px;font-size:16px}.hcta .btn.ghost{padding:10px 18px}
 .sec{padding:22px 16px 4px}.sh{margin-bottom:12px}.sh h2{font-size:20px}.sh a,.sh span{font-size:14px}
 .grid{grid-template-columns:1fr 1fr;gap:10px}
 .ci{padding:6px}.cb{padding:8px 8px 12px}.cb h3{font-size:14px;margin-bottom:3px}.cl{font-size:14px;margin-bottom:10px}.btn{padding:8px 14px;font-size:14px}
 .tiles{grid-template-columns:1fr;gap:12px}.tt{padding:10px 12px 14px}
 .tech{padding:32px 16px}.tg{grid-template-columns:1fr 1fr;gap:10px}.tg a{padding:14px}.tg b{font-size:16px}
 .ch{padding:22px 16px 4px}.ch p{font-size:16px}.chips{padding:0 16px;gap:6px}.chips a{padding:6px 12px;font-size:14px}
 .wrap{padding:8px 16px 16px}.pdp{padding:6px 0 18px}.main-img{aspect-ratio:auto;height:300px;padding:12px}
 .pinfo h1{font-size:20px}.kp{margin-bottom:14px}.kp li{font-size:16px}
 .prose p,.prose li{font-size:16px}.prose h2{font-size:20px}
 table{font-size:14px}th,td{padding:9px 8px}
 .ft{padding:36px 16px 18px}.fw{grid-template-columns:1fr;gap:4px}
 .fc{border-top:1px solid #222831;padding:10px 0}
 .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#000;padding:10px 16px;align-items:center;justify-content:space-between;gap:12px}
 .sticky span{font-weight:600;font-size:14px;color:#fff}.has-sticky{padding-bottom:64px}
}
.sticky:not(.show){display:none!important}
/* articles */
.tiles{grid-template-columns:repeat(4,1fr)}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art-card{background:var(--sand);border-radius:16px;overflow:hidden;color:var(--ink);font-weight:700;display:flex;flex-direction:column}
.art-card img{aspect-ratio:16/10;object-fit:contain;width:100%;background:#fff;padding:10px}.art-card span{padding:14px 18px 18px;font-size:16px;line-height:1.35}.art-card small{display:block;font-weight:400;color:var(--moss);font-size:14px;margin-top:6px}
.art-card:hover{text-decoration:none;box-shadow:0 8px 24px rgba(11,13,18,.08)}
.art{margin:0 auto}.byline{font-size:16px;color:var(--moss);margin:-4px 0 18px}.byline a{color:var(--ink);font-weight:600}
.pcard{display:flex;gap:16px;align-items:center;background:var(--sand);border-radius:16px;padding:14px;margin:8px 0 24px}
.pci{flex:none;width:120px;height:120px;background:#fff;border-radius:12px;overflow:hidden}.pci img{width:100%;height:100%;object-fit:contain}
.pcn{font-weight:700;margin:0 0 4px;font-size:16px}.pcn a{color:var(--ink)}.pcl{margin:0 0 10px;font-size:16px;color:var(--moss)}
.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.abox{border-top:1px solid var(--line);margin-top:36px;padding-top:20px}.an{font-weight:700;margin:0 0 6px}.abox p{font-size:16px}
.ajob{color:var(--pine);font-weight:600;margin-top:-6px}.alist li{margin-bottom:10px}.alist span{display:block;font-size:14px;color:var(--moss)}
@media(max-width:960px){.tiles{grid-template-columns:1fr 1fr}.arts{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.tiles{grid-template-columns:1fr 1fr;gap:10px}.tt b{font-size:16px}.tt small{font-size:14px}.arts{grid-template-columns:1fr;gap:12px}.pc{grid-template-columns:1fr;gap:0}.pci{width:92px;height:92px}.pcard{gap:12px;padding:10px}.pcn{font-size:16px}.pcl{font-size:14px}}
.ctab p{max-width:860px;font-size:16px}.ctab table td:first-child{min-width:180px}
.art,.author{margin:0 auto}
/* batch build: count-aware grids, no empty columns */
.grid.even{grid-template-columns:repeat(4,1fr)}
.grid.six{grid-template-columns:repeat(3,1fr)}
.grid.row{grid-template-columns:repeat(var(--n,2),1fr)}.grid.row.c2{--n:2}.grid.row.c3{--n:3}
.grid.row .card{flex-direction:row;align-items:stretch}.grid.row .ci{flex:0 0 44%;aspect-ratio:auto;min-height:220px}
.grid.row .cb{align-items:flex-start;text-align:left;justify-content:center;padding:20px 22px}.grid.row .cl{flex:0}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;background:var(--sand);border-radius:18px;overflow:hidden;align-items:center}
.fi{display:block;background:#fff;aspect-ratio:4/3;padding:16px}.fi img{width:100%;height:100%;object-fit:contain}
.fb2{padding:28px 40px}.fb2 .ey{margin:0 0 6px}.fb2 h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 12px}.fb2 h3 a{color:var(--ink)}.fb2 .kp{margin:0 0 20px}
.tiles.t3{grid-template-columns:repeat(3,1fr)}
.tg.n4{grid-template-columns:repeat(4,1fr)}.tg.n3{grid-template-columns:repeat(3,1fr)}.tg.n2{grid-template-columns:repeat(2,1fr)}
.arts.n2{grid-template-columns:repeat(2,1fr)}.arts.n1{grid-template-columns:1fr;max-width:560px}
@media(max-width:1100px){.tg.n4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.arts{grid-template-columns:repeat(3,1fr)}.arts.n2,.arts.n4{grid-template-columns:repeat(2,1fr)}.grid.row.c3{--n:1}.grid.row.c3 .ci{flex-basis:36%}.grid.even{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.grid.even{grid-template-columns:repeat(2,1fr)}.grid.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.grid.row{--n:1!important;gap:10px}.grid.row .ci{flex-basis:38%;min-height:140px}.grid.row .cb{padding:12px 14px}.grid.six{grid-template-columns:1fr 1fr}
 .feat{grid-template-columns:1fr}.fi{aspect-ratio:16/11}.fb2{padding:18px 18px 22px}.fb2 .kp li{font-size:16px}
 .arts,.arts.n2{grid-template-columns:1fr}.tiles.t3{grid-template-columns:1fr}.tg.n3{grid-template-columns:1fr}}
/* qc 1046: hero overlay, gallery, article figure, footer accordion, sticky gap */
.hbg{object-position:50% 70%}
.hero:after{background:linear-gradient(90deg,transparent 55%,rgba(244,242,239,.8) 68%,rgba(244,242,239,.94))}
.hh a{color:var(--ink)}.hsp{font-size:16px;color:var(--ink);margin:0 0 20px;max-width:380px}
.hcta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.hlink{font-weight:600;color:var(--ink)}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.th{border:2px solid transparent;border-radius:10px;padding:0;background:#fff;cursor:pointer;width:80px;height:60px;overflow:hidden}
.th img{width:100%;height:100%;object-fit:cover}.th.on{border-color:var(--pine)}
.main-img img[src^="/assets/g/"]{object-fit:cover;border-radius:12px}
.afig{margin:0 0 20px}.afig img{width:100%;border-radius:16px;aspect-ratio:16/9;object-fit:cover}
details.fc>summary{list-style:none;cursor:default}details.fc>summary::-webkit-details-marker{display:none}
.has-sticky{padding-bottom:0}
@media(max-width:700px){
 .has-sticky .ft{padding-bottom:84px}
 details.fc{border-bottom:1px solid #2a2f38}details.fc>summary{cursor:pointer;padding:12px 0;display:flex;justify-content:space-between;align-items:center}
 details.fc>summary h4{margin:0}details.fc>summary:after{content:"+";color:#fff;font-size:20px}details.fc[open]>summary:after{content:"–"}
 details.fc .fl{padding-bottom:10px}
 .th{width:64px;height:48px}.hsp{font-size:14px;margin-bottom:12px}.hh{font-size:20px}
}

h1{font-size:clamp(30px,3.2vw,44px)}h2{font-size:clamp(22px,2.2vw,30px)}h3{font-size:20px}
.cb h3{font-size:16px}
.hh{font-weight:700}