:root{
  color-scheme: dark;
  --ink:#0B100E;
  --graphite:#141B18;
  --graphite-2:#1B2420;
  --line:rgba(237,241,238,.12);
  --forest:#0F3B29;
  --forest-2:#15503A;
  --volt:#39FF99;
  --volt-dim:rgba(57,255,153,.16);
  --fog:#EDF1EE;
  --fog-2:#E1E7E3;
  --white:#FFFFFF;
  --text-on-dark:#EDF1EE;
  --muted-on-dark:#A3B1AA;
  --text-on-light:#101713;
  --muted-on-light:#4B5751;
  --todo:#F2C14E;
  --radius-l:28px;
  --radius-m:18px;
  --radius-s:10px;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1240px;
  --gutter:clamp(16px,4vw,40px);
  --header-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{background:var(--ink);color:var(--text-on-dark);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-stretch:112%;font-weight:800;letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0}
.display .thin{font-weight:400;letter-spacing:-.03em}
h2.display{font-size:clamp(1.65rem,2.9vw,2.5rem)}
h3{font-family:var(--display);font-stretch:106%;font-weight:750;letter-spacing:-.02em;line-height:1.1;margin:0;font-size:1.3rem}
p{margin:0}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted-on-dark);max-width:58ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark)}
.eyebrow .led{width:8px;height:8px;border-radius:2px;background:var(--volt);box-shadow:0 0 12px var(--volt)}
.pill{padding:8px 14px 8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(11,16,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-on-dark)}
.mono{font-family:var(--mono);font-weight:600;letter-spacing:.04em}

/* ---------- Todo markers (content Bolk still has to supply) ---------- */
.todo{display:inline-flex;align-items:center;gap:8px;border:1.5px dashed var(--todo);color:var(--todo);border-radius:8px;padding:4px 10px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.on-light .todo{color:#8A6400;border-color:#C89A1E;background:rgba(242,193,78,.12)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-volt{background:var(--volt);color:var(--ink)}
.btn-volt:hover{box-shadow:0 0 0 6px var(--volt-dim);transform:translateY(-1px)}
.btn-ghost{background:rgba(237,241,238,.08);color:var(--text-on-dark);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:rgba(237,241,238,.14)}
.btn-ink{background:var(--ink);color:var(--fog)}
.btn-ink:hover{background:var(--forest)}

/* ---------- Logo ---------- */
.logo{display:inline-grid;place-content:center;aspect-ratio:1;background:var(--ink);color:var(--white);border-radius:9px;font-family:var(--display);font-stretch:100%;font-weight:900;letter-spacing:-.06em;line-height:.84;text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.logo span{display:block}
.logo i{display:inline-block;width:.2em;height:.2em;background:var(--volt);margin-left:.06em;border-radius:1px;vertical-align:baseline}
.logo-sm{width:46px;font-size:12.5px;padding:6px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand small{font-size:.78rem;line-height:1.25;color:var(--muted-on-dark);white-space:nowrap}
@media (max-width:1320px){.brand small{display:none}}
.brand small b{display:block;color:var(--text-on-dark);font-weight:600}

/* ---------- Header ---------- */
.site-header{position:fixed;inset-inline:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .3s ease,box-shadow .3s ease}
.site-header.solid{background:rgba(11,16,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:6px;border-radius:999px;background:rgba(237,241,238,.06);box-shadow:inset 0 0 0 1px var(--line)}
.nav-links a,.nav-links button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;font-size:.93rem;font-weight:500;text-decoration:none;background:none;border:0;cursor:pointer;color:var(--text-on-dark)}
.nav-links a:hover,.nav-links button:hover,.nav-links button[aria-expanded="true"],.nav-links a.current{background:rgba(237,241,238,.1)}
.nav-links button svg{width:14px;height:14px;transition:transform .2s}
.nav-links button[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{min-height:44px;padding:0 18px;font-size:.93rem}
.burger{display:none;width:48px;height:48px;border-radius:14px;border:0;background:rgba(237,241,238,.08);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;place-content:center;gap:6px}
.burger span{display:block;width:20px;height:2px;background:var(--fog);border-radius:2px}

/* Mega menu */
.mega{position:absolute;left:50%;top:calc(var(--header-h) + env(safe-area-inset-top,0px) - 4px);transform:translateX(-50%);width:min(760px,calc(100vw - 32px));background:var(--graphite);border-radius:var(--radius-l);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);padding:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.mega[hidden]{display:none}
.mega-list{display:grid;gap:4px;list-style:none;margin:0;padding:0}
.mega-list a{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:12px;border-radius:14px;text-decoration:none}
.mega-list a:hover{background:rgba(237,241,238,.06)}
.mega-list .ic{width:40px;height:40px;border-radius:10px;display:grid;place-content:center;background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--volt)}
.mega-list b{display:block;font-weight:600}
.mega-list small{color:var(--muted-on-dark);font-size:.84rem}
.mega-card{border-radius:20px;background:radial-gradient(120% 90% at 50% 10%,#1F3A2D 0%,var(--forest) 55%,#0A2A1D 100%);padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;overflow:hidden}
.mega-card .product{max-width:150px;margin:0 auto}
.mega-card p{font-size:.88rem;color:var(--muted-on-dark)}

/* Mobile fly-out */
.flyout{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:1fr min(420px,100%);pointer-events:none}
.flyout-scrim{background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s ease}
.flyout-panel{background:var(--graphite);transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);overflow-y:auto}
.flyout.open{pointer-events:auto}
.flyout.open .flyout-scrim{opacity:1}
.flyout.open .flyout-panel{transform:none}
.flyout-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.close{width:48px;height:48px;border-radius:14px;border:0;background:rgba(237,241,238,.08);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;display:grid;place-content:center}
.close svg{width:20px;height:20px}
.fly-links{list-style:none;margin:0;padding:0;display:grid}
.fly-links>li{border-bottom:1px solid var(--line)}
.fly-links a,.fly-links button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 4px;font-family:var(--display);font-stretch:108%;font-weight:750;font-size:1.55rem;letter-spacing:-.02em;text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.fly-links button svg{width:22px;height:22px;transition:transform .25s}
.fly-links button[aria-expanded="true"] svg{transform:rotate(45deg)}
.fly-sub{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:2px}
.fly-sub a{font-family:var(--body);font-stretch:100%;font-weight:500;font-size:1.02rem;letter-spacing:0;padding:10px 4px;color:var(--muted-on-dark)}
.fly-foot{margin-top:auto;padding-top:28px;display:grid;gap:14px}
.fly-foot .btn{width:100%}
.fly-contact{font-size:.9rem;color:var(--muted-on-dark)}
.fly-contact b{color:var(--text-on-dark);font-weight:600;user-select:all}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(900px,100svh);display:flex;align-items:flex-end;padding-block:calc(var(--header-h) + 64px) 56px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#05080a url("../img/hero.webp") center 62%/cover no-repeat;transform:scale(1.04);animation:heroIn 1.8s cubic-bezier(.2,.8,.2,1) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,16,14,.55) 0%,rgba(11,16,14,0) 30%,rgba(11,16,14,.2) 55%,rgba(11,16,14,.96) 100%),
  linear-gradient(90deg,rgba(11,16,14,.85) 0%,rgba(11,16,14,.35) 55%,rgba(11,16,14,0) 100%)}
@keyframes heroIn{from{transform:scale(1.12);filter:brightness(.6)}to{transform:scale(1.04);filter:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:40px;align-items:end}
.hero-copy{display:grid;gap:26px;justify-items:start}
.hero h1{font-size:clamp(2.1rem,4vw,3.5rem);max-width:18ch}
.hero h1 .thin{color:rgba(237,241,238,.72)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

.product-card{justify-self:end;width:min(380px,100%);border-radius:var(--radius-l);background:rgba(20,27,24,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.45);padding:14px;display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;animation:cardIn 1s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:none}}
.product-thumb{border-radius:18px;background:radial-gradient(90% 80% at 50% 30%,#2A3A33,#121916);padding:10px}
.product-card h2{font-family:var(--display);font-stretch:108%;font-weight:800;letter-spacing:-.03em;font-size:1.35rem;margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.05em;padding:5px 8px;border-radius:7px;background:rgba(237,241,238,.07);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-on-dark);white-space:nowrap}
.status-link{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(11,16,14,.6);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:.9rem}
.status-link span{display:flex;align-items:center;gap:10px}
.status-link .led{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px var(--volt);animation:pulse 2.4s ease-in-out infinite}
.status-link svg{width:16px;height:16px;transition:transform .2s}
.status-link:hover svg{transform:translateX(3px)}
@keyframes pulse{50%{opacity:.35}}

/* Product image with our own logo on the door */
.product{position:relative;aspect-ratio:675/820;width:100%}
.product img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.product .door-logo{position:absolute;left:49.6%;top:23%;transform:translate(-50%,-50%);width:17%}
.product{container-type:inline-size}
.product .door-logo .logo{width:100%;font-size:4.1cqw;padding:12%;border-radius:12%}


/* ---------- Hero v2 (variant A) ---------- */
.hero2{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);padding-block:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(16px,3vw,32px)) clamp(40px,6vw,72px)}
.hero2-mark{position:absolute;z-index:-1;left:clamp(-90px,-4vw,-30px);bottom:clamp(-120px,-8vw,-40px);width:min(560px,52vw);height:auto;stroke:rgba(237,241,238,.045);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
.hero2-mark *{vector-effect:non-scaling-stroke}
.hero2-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.hero2-copy{display:grid;gap:30px;align-content:center;justify-items:start;padding-block:clamp(8px,2vw,24px)}
.hero2 h1{font-size:clamp(1.75rem,3vw,2.7rem);max-width:21ch}
.hero2 h1 .thin{color:#9FB0A7}
.hero2 .lead{color:#C1CBC6}
.usps{list-style:none;margin:0;padding:0;display:grid;width:min(100%,460px);border-top:1px solid var(--line)}
.usps li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:1rem;color:var(--text-on-dark)}
.usp-ic{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-content:center;background:rgba(57,255,153,.14);color:var(--volt)}
.usp-ic svg{width:18px;height:18px}
.hero2-photo{position:relative;border-radius:24px 0 0 24px;margin-right:calc(-1 * (max(0px,(100vw - var(--wrap)) / 2) + var(--gutter)));min-height:clamp(600px,76vh,780px);background:#05080a url("../img/hero.webp") 55% 60%/cover}
.pcard{position:absolute;left:20px;bottom:20px;width:168px;padding:14px;border-radius:18px;background:var(--fog);color:var(--text-on-light);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.pcard .product{max-width:118px;margin-inline:auto}
.pcard p{margin-top:10px;font-size:.8rem;line-height:1.3;color:var(--muted-on-light)}
.pcard p b{display:block;font-size:.95rem;color:var(--text-on-light)}
.person{display:flex;align-items:center;gap:10px;text-decoration:none;padding:4px 14px 4px 4px;border-radius:999px;background:rgba(237,241,238,.08);box-shadow:inset 0 0 0 1px var(--line);line-height:1.2}
.person img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.person b{display:block;font-size:.9rem;font-weight:700}
.person small{font-size:.8rem;color:var(--muted-on-dark);font-variant-numeric:tabular-nums}
@media (max-width:1080px){
  .hero2-grid{grid-template-columns:1fr}
  .hero2-photo{min-height:420px}
  .hero2-mark{width:min(460px,90vw);bottom:auto;top:60px}
}
@media (max-width:760px){
  .hero2-photo{min-height:340px}
  .pcard{width:140px;left:14px;bottom:14px}
  .person{padding:3px}
}

.hero2-word{position:absolute;z-index:-1;left:0;right:0;bottom:-.06em;overflow:hidden;line-height:.8;pointer-events:none;user-select:none}
.hero2-word span{display:inline-block;white-space:nowrap;font-family:var(--display);font-weight:900;font-stretch:100%;letter-spacing:-.06em;font-size:18vw;color:rgba(237,241,238,.035);padding-left:.02em}
/* Hero photo story: net -> outage -> switch -> backup */
.ph{position:absolute;inset:0;border-radius:inherit;background:url("../img/hero.webp") 55% 60%/cover;transition:opacity .9s ease}
.ph-off{background-image:url("../img/hero-off.webp");opacity:0}
.s-out .ph-off,.s-switch .ph-off{opacity:1}
.ph-steps{position:absolute;top:18px;left:18px;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(11,16,14,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ph-steps button{border:0;cursor:pointer;padding:7px 13px;border-radius:999px;background:transparent;color:rgba(237,241,238,.72);font-size:.82rem;font-weight:600;transition:background-color .3s,color .3s}
.s-net .ph-steps [data-s="net"]{background:rgba(237,241,238,.16);color:var(--white)}
.s-out .ph-steps [data-s="out"],.s-switch .ph-steps [data-s="out"]{background:#FF7A6B;color:var(--ink)}
.s-backup .ph-steps [data-s="backup"]{background:var(--volt);color:var(--ink)}
.pcard{transition:box-shadow .4s ease}
.s-switch .pcard{box-shadow:0 0 0 3px var(--volt),0 0 40px rgba(57,255,153,.45),0 20px 44px rgba(0,0,0,.4)}
.pstatus{display:flex;align-items:center;gap:8px;margin-top:6px!important;font-size:.8rem!important;font-weight:600;color:var(--text-on-light)!important;line-height:1.3}
.pstatus i{width:8px;height:8px;border-radius:50%;flex:none;background:#9AA7A0;transition:background-color .3s}
.s-net .pstatus i{background:#9AA7A0}
.s-out .pstatus i{background:#E5533F}
.s-switch .pstatus i,.s-backup .pstatus i{background:#16A35A;box-shadow:0 0 0 4px rgba(22,163,90,.18)}
@media (max-width:760px){.ph-steps{top:12px;left:12px}.ph-steps button{padding:6px 10px;font-size:.76rem}}

/* Hero right side: calm photo with one sentence (variant C) */
.hero-calm{overflow:hidden}
.hero-calm::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(11,16,14,.6) 0%,rgba(11,16,14,0) 34%,rgba(11,16,14,0) 62%,rgba(11,16,14,.7) 100%);pointer-events:none}
.calm-q{position:absolute;z-index:1;left:clamp(20px,3vw,36px);top:clamp(20px,3vw,36px);right:24px;margin:0;font-family:var(--display);font-stretch:106%;font-weight:750;font-size:clamp(1.3rem,2.1vw,1.8rem);letter-spacing:-.02em;line-height:1.15;max-width:17ch;color:var(--white)}
.calm-q em{font-style:normal;color:var(--volt)}
.calm-card{position:absolute;z-index:1;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);display:flex;align-items:center;gap:16px;padding:12px 22px 12px 12px;border-radius:20px;background:var(--white);color:var(--text-on-light);box-shadow:0 24px 50px rgba(0,0,0,.4);max-width:calc(100% - 40px)}
.calm-thumb{width:72px;height:72px;flex:none;border-radius:14px;background:var(--fog);display:grid;place-content:center}
.calm-thumb .product{width:48px}
.calm-card>div:last-child>b{display:block;font-family:var(--display);font-stretch:104%;font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
.calm-card>div:last-child>span{display:block;font-size:.88rem;line-height:1.35;color:var(--muted-on-light)}
/* ---------- Spec strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--ink)}
.strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:28px 24px;display:grid;gap:6px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{font-family:var(--display);font-stretch:110%;font-weight:800;letter-spacing:-.03em;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;font-variant-numeric:tabular-nums}
.stat b small{font-size:.5em;font-weight:700;letter-spacing:-.01em;margin-left:4px;color:var(--muted-on-dark)}
.stat span{font-size:.92rem;color:var(--muted-on-dark)}
.stat sup{color:var(--volt);font-weight:700}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,140px)}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:820px}
.on-light{background:var(--fog);color:var(--text-on-light)}
.on-light .lead{color:var(--muted-on-light)}
.on-light .eyebrow{color:var(--muted-on-light)}
.on-light .eyebrow .led{box-shadow:none;background:var(--forest-2)}

/* Compare: loose parts vs one box */
.compare{display:grid;grid-template-columns:1fr 1fr .9fr;gap:16px}
.cmp{border-radius:var(--radius-l);padding:32px;display:grid;gap:22px;align-content:start}
.cmp-loose{background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2)}
.cmp-box{background:var(--forest);color:var(--text-on-dark)}
.cmp-stat{background:var(--ink);color:var(--text-on-dark);align-content:space-between}
.cmp .tag{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cmp li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;line-height:1.45}
.cmp li svg{width:22px;height:22px;margin-top:1px}
.cmp-loose li svg{color:#9AA7A0}
.cmp-box li svg{color:var(--volt)}
.big-num{font-family:var(--display);font-stretch:115%;font-weight:800;letter-spacing:-.05em;font-size:clamp(4.2rem,9vw,7.2rem);line-height:.9}
.big-num em{font-style:normal;color:var(--volt)}
.cmp-stat p{color:var(--muted-on-dark)}
.cmp-stat small{font-size:.8rem;color:var(--muted-on-dark);opacity:.8}
.cmp-stat{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 50% 38%,rgba(57,255,153,.16),transparent 70%),var(--ink);justify-items:center;text-align:center;align-content:start}
.cmp-stat .tag{justify-self:start}
.dial{position:relative;width:min(220px,100%);aspect-ratio:1}
.dial svg{width:100%;height:100%;overflow:visible}
.dial-track{fill:none;stroke:rgba(237,241,238,.1);stroke-width:10}
.dial-arc{fill:none;stroke:var(--volt);stroke-width:10;stroke-linecap:round;stroke-dasharray:138.2 552.9;filter:drop-shadow(0 0 8px rgba(57,255,153,.55))}
.dial-dot{fill:var(--volt);animation:pulse 2.4s ease-in-out infinite}
.tk{stroke:rgba(237,241,238,.22);stroke-width:2;stroke-linecap:round}
.tk.on{stroke:var(--volt)}
.dial-num{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;line-height:1}
.dial-num b{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:4.4rem;letter-spacing:-.05em;color:var(--white)}
.dial-num span{font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--volt);margin-top:4px}
.dial-lead{color:var(--text-on-dark)!important;font-weight:600;font-size:1.05rem}


/* ---------- Simulator ---------- */
.sim{background:var(--graphite);border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--line);display:grid;grid-template-columns:minmax(0,1fr) 340px;overflow:hidden}
.sim-stage{padding:clamp(18px,3vw,36px);border-right:1px solid var(--line);background:
  radial-gradient(circle at 1px 1px,rgba(237,241,238,.07) 1px,transparent 1.5px) 0 0/22px 22px}
.sim-stage svg{width:100%;height:auto;display:block}
.sim-v{display:none}
.sim-side{padding:28px;display:flex;flex-direction:column;gap:22px}
.readout{display:grid;gap:0;border-radius:16px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.readout div{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--line)}
.readout div:first-child{border-top:0}
.readout dt,.readout dd{margin:0}
.readout dt{color:var(--muted-on-dark)}
.readout dd{font-weight:600;text-align:right;color:var(--volt);transition:color .3s}
.readout dd.off{color:#FF7A6B}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:12px;border-radius:14px;color:var(--muted-on-dark);transition:background-color .3s,color .3s}
.steps li::before{content:counter(s);width:30px;height:30px;border-radius:9px;display:grid;place-content:center;font-family:var(--mono);font-size:.8rem;font-weight:600;background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line)}
.steps li.active{background:rgba(57,255,153,.07);color:var(--text-on-dark)}
.steps li.active::before{background:var(--volt);color:var(--ink);box-shadow:none}
.switch{display:flex;align-items:center;gap:14px;width:100%;padding:10px 10px 10px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);justify-content:space-between;font-weight:700}
.switch .knob{width:64px;height:36px;border-radius:999px;background:var(--volt);position:relative;transition:background-color .3s;flex:none}
.switch .knob::after{content:"";position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sim.outage .switch .knob{background:#FF7A6B}
.sim.outage .switch .knob::after{transform:translateX(28px)}
.sim-note{font-size:.8rem;color:var(--muted-on-dark)}

/* SVG styling */
.n rect{fill:var(--graphite-2);stroke:rgba(237,241,238,.18);stroke-width:1}
.n text{fill:var(--text-on-dark);font-family:var(--body);font-size:12.5px;font-weight:600}
.n text.sub{fill:var(--muted-on-dark);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.n.ats rect{fill:#10261C;stroke:var(--volt);stroke-width:1.5}
.n.ats .pos{fill:var(--volt);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.03em}
.frame{fill:rgba(57,255,153,.04);stroke:rgba(57,255,153,.5);stroke-width:1.2;stroke-dasharray:6 6}
.frame-label{fill:var(--volt);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em}
.mk-label{fill:var(--muted-on-dark);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em}
.w{fill:none;stroke-width:3;stroke-linecap:round;stroke:rgba(237,241,238,.16);transition:stroke .4s}
.w.live{stroke:var(--volt);stroke-dasharray:6 10;animation:flow 1s linear infinite}
.w.idle{stroke:rgba(237,241,238,.22);stroke-dasharray:3 7}
.w.dead{stroke:rgba(255,122,107,.45);stroke-dasharray:none}
@keyframes flow{to{stroke-dashoffset:-16}}
.n.dim rect{stroke:rgba(255,122,107,.5)}
.n.dim text{fill:#8C9A93}
.n .led-dot{fill:var(--volt);transition:fill .3s}
.n.dim .led-dot{fill:#FF7A6B}


/* ---------- Simple flow (how it works) ---------- */
.flow{background:var(--graphite);border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,4vw,48px);display:grid;gap:clamp(28px,4vw,44px)}
.flow-map{display:grid;grid-template-columns:minmax(0,1fr) clamp(40px,7vw,96px) minmax(0,1.15fr) clamp(40px,7vw,96px) minmax(0,1fr);grid-template-rows:auto 56px auto;grid-template-areas:"net w1 box w2 home" ". . w3 . ." ". . inv . .";align-items:center}
.fn{border-radius:22px;background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line);padding:22px;display:grid;gap:6px;justify-items:start;transition:box-shadow .35s,background-color .35s,opacity .35s}
.fn b{font-family:var(--display);font-stretch:106%;font-weight:750;font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.02em;line-height:1.15}
.fn-st{font-size:1rem;color:var(--volt);font-weight:600;transition:color .3s}
.fn-ic{width:48px;height:48px;border-radius:14px;background:var(--ink);display:grid;place-content:center;color:var(--fog);margin-bottom:8px}
.fn-ic svg{width:26px;height:26px}
.fn-net{grid-area:net}.fn-box{grid-area:box;background:#10261C;box-shadow:inset 0 0 0 2px var(--volt)}.fn-home{grid-area:home}.fn-inv{grid-area:inv}
.w1{grid-area:w1}.w2{grid-area:w2}.w3{grid-area:w3}
.wire{position:relative;align-self:stretch;justify-self:stretch}
.wire::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(237,241,238,.14)}
.w3::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:4px;margin:0 0 0 -2px}
.wire.live::before{background:repeating-linear-gradient(90deg,var(--volt) 0 12px,transparent 12px 22px);animation:fx 0.9s linear infinite}
.w3.live::before{background:repeating-linear-gradient(0deg,var(--volt) 0 12px,transparent 12px 22px);animation:fyUp 0.9s linear infinite}
.wire.dead::before{background:rgba(255,122,107,.5)}
@keyframes fx{to{background-position:22px 0}}
@keyframes fyUp{to{background-position:0 -22px}}
@keyframes fyDown{to{background-position:0 22px}}
@keyframes fxLeft{to{background-position:-22px 0}}
.flow.outage .fn-net{opacity:.55}
.flow.outage .fn-net .fn-st{color:#FF7A6B}
.flow-side{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:28px;align-items:start}
.flow .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.flow .steps li{grid-template-columns:34px 1fr;font-size:1rem;line-height:1.45;padding:14px}
.flow .steps li b{display:block;color:var(--text-on-dark);font-weight:700;margin-bottom:2px}
.flow .steps li::before{width:34px;height:34px}
.flow.outage .switch .knob{background:#FF7A6B}
.flow.outage .switch .knob::after{transform:translateX(28px)}
@media (max-width:1080px){
  .flow-side{grid-template-columns:1fr}
}
@media (max-width:760px){
  .flow-map{grid-template-columns:minmax(0,1fr) 36px minmax(0,.9fr);grid-template-rows:auto 40px auto 40px auto;grid-template-areas:"net . ." "w1 . ." "box w3 inv" "w2 . ." "home . ."}
  .fn{padding:16px;border-radius:18px}
  .fn-ic{width:40px;height:40px;margin-bottom:4px}
  .fn-st{font-size:.92rem}
  .w1::before,.w2::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:4px;margin:0 0 0 -2px}
  .w1.live::before,.w2.live::before{background:repeating-linear-gradient(180deg,var(--volt) 0 12px,transparent 12px 22px);animation:fyDown 0.9s linear infinite}
  .w3::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:4px;margin:-2px 0 0 0}
  .w3.live::before{background:repeating-linear-gradient(90deg,var(--volt) 0 12px,transparent 12px 22px);animation:fxLeft 0.9s linear infinite}
  .w1,.w2{justify-self:start;width:calc(50% + 2px)}
  .w1::before,.w2::before{left:auto;right:0;margin:0}
  .flow .steps{grid-template-columns:1fr}
}

/* ---------- What's inside (bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:16px}
.cell{border-radius:var(--radius-l);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;position:relative;overflow:hidden}
.cell p{font-size:.97rem;line-height:1.5}
.cell .mod{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.08em;padding:8px 11px;border-radius:9px}
.cell .mod::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor}
.c-hero{grid-column:span 2;grid-row:span 2;background:radial-gradient(110% 80% at 50% 20%,#23362E 0%,var(--graphite) 60%);color:var(--text-on-dark);box-shadow:inset 0 0 0 1px var(--line)}
.c-hero .product{max-width:300px;margin:4px auto 0}
.c-hero .cap{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.c-forest{background:var(--forest);color:var(--text-on-dark)}
.c-forest .mod{background:rgba(57,255,153,.12);color:var(--volt)}
.c-forest p{color:rgba(237,241,238,.78)}
.c-white{background:var(--white);color:var(--text-on-light);box-shadow:inset 0 0 0 1px var(--fog-2)}
.c-white .mod{background:var(--fog);color:var(--forest-2)}
.c-white p{color:var(--muted-on-light)}
.c-ink{background:var(--ink);color:var(--text-on-dark)}
.c-ink .mod{background:rgba(237,241,238,.08);color:var(--fog)}
.c-ink p{color:var(--muted-on-dark)}
.c-volt{background:var(--volt);color:var(--ink)}
.c-volt .mod{background:rgba(11,16,14,.1);color:var(--ink)}
.c-wide{grid-column:span 2}
.cell h3{font-size:1.25rem}


/* ---------- Inside: box left, parts right ---------- */
.inside{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(20px,3vw,40px);align-items:start}
.inside-box{position:sticky;top:calc(var(--header-h) + 24px);border-radius:var(--radius-l);background:radial-gradient(110% 80% at 50% 20%,#23362E 0%,var(--graphite) 65%);padding:clamp(24px,3vw,40px);display:grid;gap:22px;color:var(--text-on-dark)}
.inside-box .product{max-width:320px;margin-inline:auto}
.inside-cap{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap}
.inside-cap p{color:var(--muted-on-dark);font-size:.95rem}
.parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.parts li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:20px;border-radius:var(--radius-m);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2)}
.parts h3{font-size:1.08rem;margin-bottom:4px}
.parts p{font-size:.94rem;line-height:1.5;color:var(--muted-on-light)}
.part-tag{width:52px;height:52px;border-radius:14px;display:grid;place-content:center;background:var(--fog);color:var(--forest-2);font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.04em}

/* ---------- Reviews ---------- */
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.rev-score{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--radius-m);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line)}
.rev-score b{display:block;font-family:var(--display);font-stretch:110%;font-weight:800;font-size:1.8rem;line-height:1;letter-spacing:-.03em}
.rev-score span{font-size:.88rem;color:var(--muted-on-dark)}
.stars{display:inline-flex;gap:3px}
.stars i{width:16px;height:16px;background:var(--volt);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars-lg i{width:22px;height:22px}
.rev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rev{margin:0;border-radius:var(--radius-l);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);padding:26px;display:flex;flex-direction:column;gap:18px}
.rev blockquote{margin:0;font-size:1.05rem;line-height:1.55;color:var(--muted-on-dark);font-style:italic}
.rev figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:.88rem;color:var(--muted-on-dark)}
.rev figcaption b{display:block;color:var(--text-on-dark);font-weight:600}
.av{width:40px;height:40px;border-radius:50%;background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line);flex:none}
.rev .todo{align-self:flex-start}
@media (max-width:1080px){
  .inside{grid-template-columns:1fr}
  .inside-box{position:static}
  .rev-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .parts{grid-template-columns:1fr}
  .parts li{padding:16px;grid-template-columns:44px 1fr;gap:14px}
  .part-tag{width:44px;height:44px;font-size:.72rem}
  .rev-grid{grid-template-columns:1fr}
}


/* ---------- Inside v2: illustrated open cabinet ---------- */
.ins{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.cab-wrap{margin:0;position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:12px}
.cab-wrap figcaption{font-size:.84rem;color:var(--muted-on-light);text-align:center}
.cab{border-radius:26px 26px 18px 18px;background:linear-gradient(180deg,#CFC9CC,#BDB6BA);padding:22px 22px 0;box-shadow:0 30px 60px rgba(20,30,25,.18),inset 0 0 0 1px rgba(0,0,0,.06)}
.cab-plate{border-radius:14px;background:#EDEAEB;box-shadow:inset 0 2px 8px rgba(0,0,0,.12);padding:clamp(14px,2.4vw,26px);display:grid;gap:clamp(14px,2.2vw,22px)}
.rail{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding-block:6px}
.rail::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:14px;margin-top:-7px;background:linear-gradient(180deg,#B8B3B5,#D6D2D3 50%,#A9A3A6);border-radius:3px;z-index:0}
.mod,.slot{position:relative;z-index:1;min-height:clamp(96px,11vw,128px);border-radius:6px}
.slot{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.mod{border:0;cursor:pointer;background:#FBFBFA;box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 6px 12px;color:var(--text-on-light);transition:box-shadow .2s,transform .2s}
.mod b{font-size:clamp(.72rem,1vw,.86rem);font-weight:700;line-height:1.15;text-align:center;hyphens:manual}
.mod .n{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-content:center;font-size:.74rem;font-weight:700}
.mod .sw{width:14px;height:26px;border-radius:4px;background:#2B332F;box-shadow:inset 0 -10px 0 #4B5751;margin-bottom:auto;margin-top:18px}
.mod .lcd{width:62%;height:22px;border-radius:4px;background:#1E3A2C;box-shadow:inset 0 0 0 2px #2E4A3B;margin-bottom:auto;margin-top:18px}
.mod-res{background:transparent;box-shadow:inset 0 0 0 2px rgba(15,59,41,.35);border:0;outline:2px dashed rgba(15,59,41,.35);outline-offset:-2px}
.mod:hover{transform:translateY(-2px)}
.mod.on{box-shadow:0 0 0 3px var(--forest-2),0 10px 24px rgba(15,59,41,.25)}
.mod.on .n{background:var(--volt);color:var(--ink)}
.glands{display:flex;justify-content:space-around;padding:14px 18px 0;height:34px}
.glands i{width:clamp(22px,3vw,34px);height:20px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#E3E1E2,#C7C3C5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ins-side{display:grid;gap:22px}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plist button{width:100%;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;text-align:left;border:0;cursor:pointer;padding:16px 18px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);color:var(--text-on-light);transition:background-color .2s,box-shadow .2s}
.plist .n{width:34px;height:34px;border-radius:50%;display:grid;place-content:center;background:var(--fog);font-weight:700;font-size:.9rem}
.plist b{display:block;font-family:var(--display);font-stretch:104%;font-weight:750;font-size:1.06rem;letter-spacing:-.01em;line-height:1.25}
.plist em{display:block;font-style:normal;font-size:.94rem;line-height:1.5;color:var(--muted-on-light);margin-top:3px}
.plist li.on button{background:var(--forest);box-shadow:none;color:var(--text-on-dark)}
.plist li.on em{color:rgba(237,241,238,.8)}
.plist li.on .n{background:var(--volt);color:var(--ink)}
.extras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.extras li{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--fog-2);font-size:.88rem;line-height:1.35;color:var(--muted-on-light)}
.extras b{display:block;color:var(--text-on-light);font-size:.94rem}
.extras svg{width:20px;height:20px;color:var(--forest-2)}
@media (max-width:1000px){
  .ins{grid-template-columns:1fr}
  .cab-wrap{position:static;max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:760px){
  .cab{padding:14px 14px 0;border-radius:20px 20px 14px 14px}
  .mod .n{width:20px;height:20px;font-size:.66rem;top:5px;left:5px}
  .mod .sw{height:20px;margin-top:14px}
  .mod .lcd{margin-top:14px;height:18px}
  .mod b{font-size:.68rem}
  .extras{grid-template-columns:1fr}
}
/* ---------- Compatibility ---------- */
.compat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compat-tool{background:var(--graphite);border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(22px,3vw,36px);display:grid;gap:26px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);padding:5px;border-radius:999px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{border:0;background:none;padding:12px;border-radius:999px;font-weight:700;cursor:pointer;color:var(--muted-on-dark);transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--fog);color:var(--ink)}
.field{display:grid;gap:12px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.field output{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:2.2rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.field output small{font-size:.45em;color:var(--muted-on-dark);margin-left:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--volt) 0 var(--fill,40%),rgba(237,241,238,.12) var(--fill,40%) 100%)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--volt) 0 var(--fill,40%),rgba(237,241,238,.12) var(--fill,40%) 100%)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--fog);margin-top:-10px;box-shadow:0 0 0 6px rgba(57,255,153,.18)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--fog);box-shadow:0 0 0 6px rgba(57,255,153,.18)}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted-on-dark)}
.verdict{border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;transition:background-color .3s}
.verdict .ic{width:40px;height:40px;border-radius:12px;display:grid;place-content:center}
.verdict .ic svg{width:22px;height:22px}
.verdict.ok{background:rgba(57,255,153,.09)}
.verdict.ok .ic{background:var(--volt);color:var(--ink)}
.verdict.no{background:rgba(255,122,107,.1)}
.verdict.no .ic{background:#FF7A6B;color:var(--ink)}
.verdict b{display:block}
.verdict span{font-size:.92rem;color:var(--muted-on-dark)}
.compat-info{border-radius:var(--radius-l);background:var(--forest);padding:clamp(22px,3vw,36px);display:grid;gap:22px;align-content:start}
.brands{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-tile{border-radius:18px;background:rgba(11,16,14,.35);box-shadow:inset 0 0 0 1px rgba(237,241,238,.1);padding:20px;display:grid;gap:6px}
.brand-tile b{font-family:var(--display);font-stretch:110%;font-weight:800;font-size:1.6rem;letter-spacing:-.03em}
.brand-tile span{font-size:.88rem;color:rgba(237,241,238,.75)}
.seg-4{grid-template-columns:repeat(4,1fr)}
.seg-4 button{padding:12px 6px}
.brand-tile.alt{background:transparent;box-shadow:inset 0 0 0 1px rgba(237,241,238,.18)}
.brand-tile.alt b{font-size:1.3rem}
.why15{border-radius:18px;background:rgba(11,16,14,.35);padding:18px 20px;display:grid;gap:8px}
.why15 p{font-size:.95rem;color:rgba(237,241,238,.82)}
.verdict.info{background:rgba(237,241,238,.07)}
.verdict.info .ic{background:var(--fog);color:var(--ink)}
.c-full{grid-column:1/-1}
.bento{grid-auto-flow:dense}
.w.rs{stroke:rgba(237,241,238,.28);stroke-width:1.5;stroke-dasharray:4 5}
.port{fill:var(--volt);font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;text-anchor:start}
.sim.outage .port{fill:var(--volt)}
.ph-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--volt);color:var(--ink);display:grid;place-content:center}
.ph-ic svg{width:20px;height:20px}
.bolk-sign{display:inline-flex;align-items:center;gap:12px}
.bolk-sign img{width:120px;filter:invert(1);opacity:.45}

/* ---------- Audience ---------- */
.aud{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px}
.aud-photo{border-radius:var(--radius-l);min-height:420px;background:#222 url("../img/installer.webp") center/cover;position:relative;overflow:hidden}
.aud-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,14,0) 45%,rgba(11,16,14,.85))}
.aud-photo .q{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;font-family:var(--display);font-stretch:108%;font-weight:750;font-size:1.45rem;letter-spacing:-.02em;line-height:1.1;color:var(--white)}
.aud-card{border-radius:var(--radius-l);padding:30px;display:flex;flex-direction:column;gap:18px}
.aud-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aud-card li{padding-left:22px;position:relative;line-height:1.45}
.aud-card li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;background:currentColor;opacity:.5}
.aud-card .btn{margin-top:auto;align-self:flex-start}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.faq-aside{position:sticky;top:calc(var(--header-h) + 32px);display:grid;gap:22px}
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:34px;height:34px;border-radius:10px;background:var(--fog);display:grid;place-content:center;transition:transform .25s,background-color .25s}
.faq summary .plus{font-size:1.3rem;font-weight:500;line-height:1}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--volt)}
.faq .ans{padding:0 22px 22px;color:var(--muted-on-light);display:grid;gap:12px;max-width:62ch}


.t-card{position:sticky;top:calc(var(--header-h) + 32px);border-radius:var(--radius-l);overflow:hidden;background:var(--graphite);color:var(--text-on-dark)}
.t-photo{position:relative;aspect-ratio:1/1;background:#1a2a20}
.t-photo img{width:100%;height:100%;object-fit:cover}
.t-badge{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(11,16,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.82rem;font-weight:600}
.t-badge i{width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 10px var(--volt)}
.t-body{padding:22px;display:grid;gap:10px;justify-items:start}
.t-body h3{font-size:1.35rem}
.t-body p{color:var(--muted-on-dark);font-size:.95rem}
.t-body .t-tel{color:var(--text-on-dark);font-weight:600;font-variant-numeric:tabular-nums;user-select:all}
.t-body .btn{margin-top:6px}
@media (max-width:760px){
  .t-card{position:static;display:grid;grid-template-columns:110px 1fr}
  .t-photo{aspect-ratio:auto}
  .t-badge{display:none}
  .t-body{padding:16px}
}

/* Reviews slider */
.rev-nav{display:flex;gap:8px}
.rev-btn{width:48px;height:48px;border-radius:14px;border:0;cursor:pointer;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-content:center;transition:background-color .2s,opacity .2s}
.rev-btn:hover{background:var(--graphite-2)}
.rev-btn:disabled{opacity:.35;cursor:default}
.rev-btn svg{width:20px;height:20px}
.rev-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.rev-track::-webkit-scrollbar{display:none}
.rev-track .rev{scroll-snap-align:start}
.rev-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.rev-dots i{width:8px;height:8px;border-radius:50%;background:rgba(237,241,238,.2);transition:background-color .2s,width .2s}
.rev-dots i.on{width:24px;border-radius:4px;background:var(--volt)}
/* Product in the form */
.order-item{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line)}
.order-thumb{width:64px;height:64px;border-radius:12px;background:var(--fog);display:grid;place-content:center;padding:6px}
.order-thumb .product{width:40px}
.order-item>div:last-child>span{display:block;font-size:.78rem;color:var(--muted-on-dark)}
.order-item>div:last-child>b{display:block;font-family:var(--display);font-stretch:104%;font-weight:750;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.order-item>div:last-child>small{font-size:.84rem;color:var(--muted-on-dark)}
@media (max-width:1080px){.rev-track{grid-auto-columns:calc((100% - 16px) / 2)}}
@media (max-width:760px){.rev-track{grid-auto-columns:86%}}
/* ---------- Contact / CTA ---------- */
.cta-block{border-radius:calc(var(--radius-l) + 8px);background:
  radial-gradient(80% 120% at 100% 0%,rgba(57,255,153,.18),transparent 60%),var(--forest);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,64px);overflow:hidden}
.cta-block .display{font-size:clamp(1.65rem,2.9vw,2.5rem)}
.contact-lines{display:grid;gap:12px;margin-top:8px}
.contact-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(11,16,14,.35);box-shadow:inset 0 0 0 1px rgba(237,241,238,.1)}
.contact-line span{font-size:.82rem;color:rgba(237,241,238,.7)}
.contact-line b{font-weight:600;user-select:all;font-variant-numeric:tabular-nums}
.copy{border:0;border-radius:10px;padding:8px 12px;background:rgba(237,241,238,.1);cursor:pointer;font-size:.82rem;font-weight:600}
form.lead-form{background:var(--ink);border-radius:var(--radius-l);padding:clamp(20px,3vw,30px);display:grid;gap:14px;box-shadow:inset 0 0 0 1px var(--line)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inp{display:grid;gap:6px}
.inp label{font-size:.84rem;font-weight:600;color:var(--muted-on-dark)}
.inp input,.inp select,.inp textarea{width:100%;font:inherit;font-size:1rem;color:var(--text-on-dark);background:var(--graphite);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.inp textarea{min-height:96px;resize:vertical}
.inp input:focus,.inp select:focus,.inp textarea:focus{outline:none;border-color:var(--volt);box-shadow:0 0 0 4px var(--volt-dim)}
.form-msg{font-size:.88rem;color:var(--volt)}

/* ---------- Footer ---------- */
footer{padding-block:64px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.foot h4{margin:0 0 12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--text-on-dark);opacity:.85}
.foot a:hover{opacity:1;color:var(--volt)}
.by-bolk{display:grid;gap:14px;justify-items:start}
.by-bolk p{font-size:.92rem;color:var(--muted-on-dark);max-width:34ch}
.legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted-on-dark)}


/* ---------- Footer v2 ---------- */
.c-ic{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-content:center;background:rgba(57,255,153,.5);color:var(--ink)}
.c-ic svg{width:20px;height:20px}
.ft{padding-block:clamp(56px,7vw,88px) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);overflow:hidden}
.ft-top{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid var(--line)}
.ft-brand{display:flex;align-items:center;gap:18px;max-width:520px}
.ft-brand p{color:var(--muted-on-dark);font-size:.98rem}
.ft-contact{display:flex;gap:14px;flex-wrap:wrap}
.ft-c{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:999px;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line)}
.ft-c span{display:block;font-size:.78rem;color:var(--muted-on-dark);line-height:1.2}
.ft-c b{display:block;font-weight:600;font-variant-numeric:tabular-nums;user-select:all}
.ft-mid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(240px,1.2fr);gap:28px;padding-block:36px;align-items:start}
.ft-mid h4{margin:0 0 12px;font-size:.84rem;font-weight:600;color:var(--muted-on-dark)}
.ft-mid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-mid a{text-decoration:none;color:var(--text-on-dark)}
.ft-mid ul a:hover{color:var(--volt)}
.ft-cta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:20px 22px;border-radius:20px;background:var(--forest);transition:background-color .2s}
.ft-cta:hover{background:var(--forest-2)}
.ft-cta span{font-size:.82rem;color:rgba(237,241,238,.72)}
.ft-cta b{grid-column:1;font-family:var(--display);font-stretch:104%;font-weight:750;font-size:1.1rem;letter-spacing:-.01em}
.ft-cta svg{grid-row:1/3;grid-column:2;width:22px;height:22px;color:var(--volt)}
.ft-word{width:100%;overflow:hidden;line-height:.8;margin-block:12px -4px;user-select:none;pointer-events:none}
.ft-word span{display:inline-block;white-space:nowrap;font-family:var(--display);font-weight:900;font-stretch:100%;letter-spacing:-.06em;font-size:18vw;color:rgba(237,241,238,.07);padding-left:.02em}
.ft .legal{margin-top:0;padding-top:22px}
@media (max-width:1080px){.ft-mid{grid-template-columns:repeat(3,minmax(0,1fr))}.ft-cta{grid-column:1/-1}}
@media (max-width:760px){
  .ft-brand{flex-direction:column;align-items:flex-start}
  .ft-contact{flex-direction:column;width:100%}
  .ft-mid{grid-template-columns:1fr 1fr}
  .ft{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
.contact-line .c-ic,.ft-c .c-ic{display:grid;color:var(--ink);font-size:inherit;line-height:1}

/* ---------- Conversion elements ---------- */
.nav-pre{min-height:42px!important;padding:0 16px!important;font-size:.9rem!important}
.hero-note{font-size:.88rem;color:var(--muted-on-dark);display:flex;align-items:center;gap:8px}
.hero-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 4px rgba(57,255,153,.15)}
.band{background:var(--volt);color:var(--ink);overflow:hidden;padding-block:0 clamp(24px,4vw,40px)}
.band-track{display:flex;width:max-content;animation:marquee 75s linear infinite;padding-block:22px 18px;border-bottom:1px solid rgba(11,16,14,.14)}
.band-row{display:flex;align-items:center;gap:28px;padding-right:28px}
.band-row span{font-family:var(--display);font-weight:800;font-stretch:108%;letter-spacing:-.03em;font-size:clamp(1.3rem,2.6vw,2rem);white-space:nowrap}
.band-row i{width:10px;height:10px;border-radius:2px;background:var(--ink);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}
.band:hover .band-track{animation-play-state:paused}
.band-cta{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-top:22px}
.band-cta p{font-size:1.05rem;max-width:60ch}
.ins-cta{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.ins-cta span{font-size:.92rem;color:var(--muted-on-light)}
.ins-cta b{color:var(--text-on-light);font-variant-numeric:tabular-nums}
.verdict{grid-template-columns:40px 1fr auto!important}
.v-cta{min-height:42px;padding:0 16px;font-size:.9rem}
.verdict.no .v-cta,.verdict.info .v-cta{background:var(--fog)}
.intent{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line)}
.intent button{border:0;cursor:pointer;padding:11px;border-radius:10px;background:transparent;font-weight:700;color:var(--muted-on-dark)}
.intent button[aria-pressed="true"]{background:var(--volt);color:var(--ink)}
.form-note{font-size:.86rem;color:var(--muted-on-dark)}
.form-note b{color:var(--text-on-dark);font-variant-numeric:tabular-nums;user-select:all}
@media (max-width:1080px){.nav-pre{display:none!important}}
@media (max-width:760px){.verdict{grid-template-columns:40px 1fr!important}.v-cta{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.band-track{animation:none}}

.batch{margin-top:22px;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(18px,2.5vw,26px);border-radius:26px;background:var(--ink);color:var(--text-on-dark);box-shadow:0 24px 50px rgba(11,16,14,.22)}
.batch-thumb{width:120px;height:120px;border-radius:20px;background:radial-gradient(90% 80% at 50% 30%,#F4F6F3,#DDE3DE);display:grid;place-content:center}
.batch-thumb .product{width:76px}
.batch-copy{display:grid;gap:8px;justify-items:start}
.batch-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(57,255,153,.12);color:var(--volt);font-size:.82rem;font-weight:700}
.batch-tag i{width:8px;height:8px;border-radius:50%;background:var(--volt);animation:pulse 2.4s ease-in-out infinite}
.batch h3{font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:-.025em}
.batch-copy p{color:var(--muted-on-dark);font-size:1rem;max-width:52ch}
.batch-actions{display:grid;gap:10px;justify-items:start}
.batch-tel{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted-on-dark)}
.batch-tel svg{width:16px;height:16px;color:rgba(57,255,153,.7)}
.batch-tel b{color:var(--text-on-dark);font-variant-numeric:tabular-nums;user-select:all}
@media (max-width:1000px){.batch{grid-template-columns:96px minmax(0,1fr)}.batch-thumb{width:96px;height:96px}.batch-thumb .product{width:60px}.batch-actions{grid-column:1/-1}}
@media (max-width:560px){.batch{grid-template-columns:1fr}.batch-thumb{width:100%;height:140px}}
/* header: keep nav on one line */
.nav-links{flex-wrap:nowrap;flex-shrink:1;min-width:0}
.nav-links li{white-space:nowrap}
.nav-cta{flex:none}
@media (min-width:1081px) and (max-width:1320px){.site-header .person span{display:none}.site-header .person{padding:3px}}
@media (max-width:1320px){.nav-links a,.nav-links button{padding:9px 11px}}
@media (max-width:760px){.site-header .person{padding:3px 12px 3px 3px;gap:8px}.site-header .person img{width:34px;height:34px}.site-header .person b{font-size:.82rem}.site-header .person small{font-size:.74rem}.nav{gap:10px}.nav-cta{gap:8px}}
@media (max-width:360px){.site-header .person small{display:none}}

/* ================= Sub pages ================= */

.more-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;color:var(--forest-2)}
.more-link svg{width:16px;height:16px;transition:transform .2s}
.more-link:hover svg{transform:translateX(3px)}
#page-home .sec-head .lead .more-link,.sec-head .lead .more-link{color:var(--volt);margin-left:6px}
.more-dark{margin-top:14px;color:var(--forest-2)}
.p-hero{position:relative;background:var(--ink);padding-block:calc(var(--header-h) + env(safe-area-inset-top,0px) + clamp(28px,5vw,64px)) clamp(48px,7vw,88px);overflow:hidden}
.p-hero::after{content:"BACKUP BOX";position:absolute;left:0;right:0;bottom:-.1em;text-align:center;white-space:nowrap;font-family:var(--display);font-weight:900;letter-spacing:-.06em;line-height:.8;font-size:17vw;color:rgba(237,241,238,.03);pointer-events:none}
.p-hero .wrap{position:relative;z-index:1}
.p-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center}
.p-hero-copy,.p-hero-text .wrap{display:grid;gap:22px;justify-items:start}
.p-hero h1{font-size:clamp(2.1rem,4vw,3.4rem);max-width:18ch}
.p-hero h1 .thin{color:#9FB0A7}
.p-hero .lead{color:#C1CBC6;max-width:56ch}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.88rem;color:var(--muted-on-dark)}
.crumbs a{text-decoration:none;color:var(--text-on-dark)}
.crumbs a:hover{color:var(--volt)}
.p-stage{border-radius:28px;background:radial-gradient(80% 70% at 50% 40%,#2A3A33 0%,var(--graphite) 70%);padding:clamp(28px,4vw,48px);display:grid;place-items:center;min-height:380px;box-shadow:inset 0 0 0 1px var(--line)}
.p-stage .product{width:min(260px,70%);filter:drop-shadow(0 30px 34px rgba(0,0,0,.5))}
.p-photo{border-radius:28px;min-height:400px;background:#222 url("../img/installer.webp") center/cover}
.p-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.p-card{border-radius:var(--radius-m);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);padding:24px;display:grid;gap:10px;align-content:start}
.p-card h3{font-size:1.12rem}
.p-card p{color:var(--muted-on-light);font-size:.96rem;line-height:1.55}
.p-num{min-width:44px;height:44px;padding:0 10px;border-radius:14px;display:inline-grid;place-content:center;justify-self:start;background:var(--fog);color:var(--forest-2);font-family:var(--display);font-weight:800;font-size:.95rem}
.p-num-g{background:var(--volt);color:var(--ink)}
.p-ic{width:44px;height:44px;border-radius:50%;display:grid;place-content:center;background:rgba(57,255,153,.5);color:var(--ink)}
.p-ic svg{width:20px;height:20px}
.p-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.spec{margin:0;border-radius:var(--radius-l);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.spec div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:18px;padding:16px 22px;border-top:1px solid var(--line)}
.spec div:first-child{border-top:0}
.spec dt{font-weight:700;color:var(--text-on-dark)}
.spec dd{margin:0;color:var(--muted-on-dark)}
.spec dd small{opacity:.75}
.tel-inline{color:var(--text-on-dark);font-variant-numeric:tabular-nums;user-select:all}
.on-light .tel-inline{color:var(--text-on-light)}
.p-compare{display:grid;gap:26px;max-width:900px}
.p-compare-head{display:grid;gap:16px}
.vs{border-radius:var(--radius-l);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);overflow:hidden}
.vs-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;padding:16px 22px;border-top:1px solid var(--fog-2);align-items:center}
.vs-row:first-child{border-top:0}
.vs-h{background:var(--fog)}
.vs-h b:last-child{color:var(--forest-2)}
.vs em{font-style:normal;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.vs em::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
.vs em.no{color:var(--muted-on-light)}.vs em.no::before{background:#E5A69C}
.vs em.yes{color:var(--forest-2)}.vs em.yes::before{background:#16A35A}
.vs-note{font-size:.84rem;color:var(--muted-on-light)}
.p-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.p-steps li{border-radius:var(--radius-m);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);padding:26px;display:grid;gap:10px;align-content:start}
.p-steps h3{font-size:1.2rem}
.p-steps p{color:var(--muted-on-light)}
.p-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.p-big{border-radius:var(--radius-l);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,3vw,36px);display:grid;gap:8px}
.p-big span{font-weight:600;color:var(--muted-on-dark)}
.p-big b{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(3.2rem,6vw,5rem);letter-spacing:-.05em;line-height:.95}
.p-big b small{font-size:.35em;margin-left:6px;letter-spacing:0}
.p-big p{color:var(--muted-on-dark)}
.p-big-g{background:var(--forest)}
.p-big-g b{color:var(--volt)}
.wires{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wires li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:16px 18px;border-radius:var(--radius-m);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2)}
.wires b{padding:6px 12px;border-radius:10px;background:var(--fog);font-size:.92rem;font-weight:700}
.wires i{width:22px;height:2px;background:var(--forest-2);border-radius:2px}
.wires i.dash{background:repeating-linear-gradient(90deg,var(--forest-2) 0 4px,transparent 4px 7px)}
.wires em{font-style:normal;margin-left:auto;font-size:.86rem;color:var(--muted-on-light)}
.p-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.p-brand{border-radius:var(--radius-l);padding:26px;display:grid;gap:10px;align-content:start;background:var(--forest);color:var(--text-on-dark)}
.p-brand h3{font-size:1.9rem;font-stretch:110%;letter-spacing:-.03em}
.p-brand p{color:rgba(237,241,238,.78);font-size:.95rem}
.p-brand-tag{justify-self:start;font-size:.8rem;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(57,255,153,.16);color:var(--volt)}
.p-brand-alt{background:var(--white);color:var(--text-on-light);box-shadow:inset 0 0 0 1px var(--fog-2)}
.p-brand-alt p{color:var(--muted-on-light)}
.p-brand-alt .p-brand-tag{background:var(--fog);color:var(--forest-2)}
.p-info{border-radius:var(--radius-l);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,3vw,36px);display:grid;gap:14px;align-content:start}
.p-info h3{font-size:1.35rem}
.p-info p{color:var(--muted-on-dark)}
.p-disclaimer{margin-top:22px;font-size:.88rem;color:var(--muted-on-light)}
.p-batch{background:var(--volt);padding-block:clamp(28px,5vw,56px)}
.p-batch .batch{margin-top:0}
@media (max-width:1080px){
  .p-hero-grid,.p-split{grid-template-columns:1fr}
  .p-cards{grid-template-columns:1fr 1fr}
  .p-brands{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .p-cards,.p-steps,.p-duo,.p-brands{grid-template-columns:1fr}
  .spec div{grid-template-columns:1fr;gap:4px}
  .vs-row{grid-template-columns:1.2fr 1fr 1fr;padding:14px;font-size:.9rem}
  .wires em{margin-left:0;width:100%}
  .p-stage{min-height:300px}
  .p-photo{min-height:280px}
}

.wiring{display:grid;gap:14px}
.wires2{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wires2 li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2);--c:var(--forest-2);--cbg:var(--fog)}
.wires2 .t-crit{--c:#0F7A45;--cbg:#DDF6E8}
.wires2 .t-bu{--c:#0B100E;--cbg:var(--volt)}
.wires2 .t-nc{--c:#7B8781;--cbg:#EEF0EE}
.wires2 .t-data{--c:#4B5751;--cbg:#EEF0EE}
.w-ic{width:48px;height:48px;border-radius:50%;display:grid;place-content:center;background:var(--cbg);color:var(--c)}
.w-ic svg{width:22px;height:22px}
.w-body{display:grid;gap:10px;min-width:0}
.w-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.w-title{font-family:var(--display);font-stretch:104%;font-weight:750;font-size:1.02rem;letter-spacing:-.01em}
.w-type{font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--cbg);color:var(--c)}
.w-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.w-chain b,.w-legend b{padding:7px 12px;border-radius:10px;background:var(--fog);font-size:.88rem;font-weight:700;white-space:nowrap;color:var(--text-on-light)}
.w-chain b.in,.w-legend b.in{background:var(--white);box-shadow:inset 0 0 0 2px #16A35A}
.w-chain i{position:relative;width:26px;height:2px;background:var(--c);margin-inline:4px}
.w-chain i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:6px solid var(--c);border-right:0}
.t-nc .w-chain i,.t-data .w-chain i{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px)}
.w-legend{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:.86rem;color:var(--muted-on-light);padding-left:4px}
.w-legend span{display:flex;align-items:center;gap:8px}
.w-legend b{padding:4px 10px;font-size:.8rem}
@media (max-width:760px){.wires2 li{grid-template-columns:1fr;gap:12px}.w-ic{width:40px;height:40px}}
.fly-sub a{display:grid!important;gap:2px;justify-content:start!important}
.fly-sub a b{font-family:var(--body);font-weight:700;font-size:1.02rem;color:var(--text-on-dark)}
.fly-sub a small{font-size:.84rem;color:var(--muted-on-dark);font-weight:500}
.scale-abs{position:relative;height:18px}
.scale-abs span{position:absolute;top:0;white-space:nowrap}
.scale-abs .s15{left:58.33%;transform:translateX(-50%);color:var(--volt)}
.scale-abs .smax{right:0}

.gh-set{border-radius:var(--radius-l);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,3vw,30px);display:grid;gap:14px}
.gh-set-h{font-family:var(--display);font-stretch:106%;font-weight:750;font-size:1.2rem;letter-spacing:-.02em}
.gh-list{list-style:none;margin:0;padding:0;display:grid}
.gh-list li{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.gh-list b{font-weight:700}
.gh-list span{color:var(--muted-on-dark)}
.gh-contact{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(20px,3vw,32px);border-radius:var(--radius-l);background:var(--forest)}
.gh-contact img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.gh-contact-copy{display:grid;gap:6px;justify-items:start}
.gh-contact-copy h3{font-size:1.6rem}
.gh-contact-copy p{color:rgba(237,241,238,.75)}
.gh-contact-lines{display:grid;gap:10px;justify-items:stretch}
.gh-contact-lines .ft-c{background:rgba(11,16,14,.35)}
@media (max-width:1000px){.gh-contact{grid-template-columns:96px 1fr}.gh-contact img{width:96px;height:96px}.gh-contact-lines{grid-column:1/-1}}
@media (max-width:760px){.gh-list li{grid-template-columns:1fr;gap:2px}}

.ats{display:grid;gap:14px}
.ats-terms{display:grid;gap:10px}
.term{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--radius-m);background:var(--graphite);box-shadow:inset 0 0 0 1px var(--line)}
.term b{display:block;font-weight:700}
.term span{font-family:var(--display);font-weight:700;letter-spacing:.02em;color:var(--muted-on-dark)}
.term-k{width:52px;height:52px;border-radius:14px;display:grid;place-content:center;font-family:var(--display);font-weight:800;font-size:1.1rem;background:rgba(237,241,238,.08);color:var(--text-on-dark)!important}
.term-g{background:var(--volt);color:var(--ink)!important}
.term-l{background:var(--fog);color:var(--ink)!important}
.ats-notes{list-style:none;margin:0;padding:18px 20px;display:grid;gap:10px;border-radius:var(--radius-m);background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted-on-dark);font-size:.95rem}
.ats-notes li{display:flex;gap:10px;align-items:flex-start}
.dot{width:9px;height:9px;border-radius:50%;background:#9AA7A0;flex:none;margin-top:.5em}
.dot.g{background:var(--volt)}
.p-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc{margin:0;display:grid}
.calc div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.calc dt{color:var(--muted-on-dark)}
.calc dd{margin:0;font-weight:700;text-align:right}
.warn{padding:12px 14px;border-radius:12px;background:rgba(242,193,78,.12);color:#F2D38A!important;font-size:.92rem}
.gloss{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gloss div{padding:16px;border-radius:var(--radius-m);background:var(--white);box-shadow:inset 0 0 0 1px var(--fog-2)}
.gloss dt{font-family:var(--display);font-weight:800;font-size:1.05rem}
.gloss dd{margin:2px 0 0;color:var(--muted-on-light);font-size:.92rem}
.doc-cta{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--radius-l);background:var(--fog-2)}
.doc-cta b{display:block;font-family:var(--display);font-weight:750;font-size:1.1rem}
.doc-cta span{color:var(--muted-on-light);font-size:.94rem;max-width:62ch;display:block}
@media (max-width:1000px){.gloss{grid-template-columns:1fr 1fr}.p-cards-3{grid-template-columns:1fr}}
.p-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.p-steps-4{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.p-steps-4{grid-template-columns:1fr}}

/* ---------- Fly-out v2 ---------- */
.flyout-panel{position:relative;overflow-x:hidden;background:radial-gradient(120% 50% at 100% 0%,rgba(57,255,153,.1),transparent 60%),var(--graphite);gap:18px}
.flyout-top{margin-bottom:4px}
.flyout-top .brand small{font-size:.78rem;line-height:1.25;color:var(--muted-on-dark)}
.flyout-top .brand small b{display:block;color:var(--text-on-dark)}
.fo-product{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;padding:12px;border-radius:20px;background:var(--fog);color:var(--text-on-light);text-decoration:none}
.fo-thumb{width:84px;height:84px;border-radius:14px;background:var(--white);display:grid;place-content:center}
.fo-thumb .product{width:52px;display:block}
.fo-pt b{display:block;font-family:var(--display);font-stretch:104%;font-weight:800;font-size:1.1rem}
.fo-pt small{display:block;font-size:.84rem;color:var(--muted-on-light)}
.fo-pt em{font-style:normal;display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-weight:700;font-size:.86rem;color:var(--forest-2)}
.fo-pt em .chev{width:14px;height:14px}
.fo-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fo-list>li>a,.fo-acc>button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:0;border-radius:16px;background:rgba(237,241,238,.04);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;cursor:pointer;text-align:left;transition:background-color .2s}
.fo-list>li>a:hover,.fo-acc>button:hover,.fo-list a.current{background:rgba(57,255,153,.08)}
.fo-ic{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-content:center;background:rgba(57,255,153,.14);color:var(--volt)}
.fo-ic svg{width:19px;height:19px}
.fo-l{flex:1;font-family:var(--display);font-stretch:104%;font-weight:750;font-size:1.15rem;letter-spacing:-.01em}
.chev{width:18px;height:18px;flex:none;color:var(--muted-on-dark);transition:transform .25s}
.fo-acc>button[aria-expanded="true"]{background:rgba(57,255,153,.08)}
.fo-acc>button[aria-expanded="true"] .chev{transform:rotate(180deg);color:var(--volt)}
.fo-sub{list-style:none;margin:6px 0 4px;padding:0 0 0 20px;display:grid;gap:2px;border-left:2px solid rgba(57,255,153,.25);margin-left:33px}
.fo-sub a{display:grid;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none}
.fo-sub a:hover{background:rgba(237,241,238,.05)}
.fo-sub b{font-weight:700;font-size:1rem}
.fo-sub small{font-size:.82rem;color:var(--muted-on-dark)}
.fo-foot{margin-top:auto;display:grid;gap:12px;padding:16px;border-radius:22px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line);position:relative;z-index:1}
.fo-thomas{display:flex;align-items:center;gap:12px}
.fo-thomas img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.fo-thomas b{display:block;font-family:var(--display);font-weight:800}
.fo-thomas span{font-size:.85rem;color:var(--muted-on-dark)}
.fo-lines{display:grid;gap:4px;padding-block:2px 4px}
.fo-lines .ft-c{background:none;box-shadow:none;padding:2px 0;border-radius:0;gap:10px}
.fo-lines .c-ic{width:26px;height:26px;background:rgba(57,255,153,.12);color:var(--volt)!important}
.fo-lines .c-ic svg{width:13px;height:13px}
.fo-lines .ft-c span:not(.c-ic){display:none}
.fo-lines .ft-c b{font-size:.88rem;font-weight:500;color:var(--muted-on-dark)}
.fo-foot .btn{width:100%}
.fo-word{position:absolute;left:0;right:0;bottom:-.12em;text-align:center;white-space:nowrap;font-family:var(--display);font-weight:900;letter-spacing:-.06em;line-height:.8;font-size:24vw;color:rgba(237,241,238,.035);pointer-events:none}
@media (min-width:421px){.fo-word{font-size:100px}}
.flyout.open .fo-product,.flyout.open .fo-list>li,.flyout.open .fo-foot{animation:foIn .45s cubic-bezier(.2,.8,.2,1) both}
.flyout.open .fo-list>li:nth-child(1){animation-delay:.05s}
.flyout.open .fo-list>li:nth-child(2){animation-delay:.09s}
.flyout.open .fo-list>li:nth-child(3){animation-delay:.13s}
.flyout.open .fo-list>li:nth-child(4){animation-delay:.17s}
.flyout.open .fo-list>li:nth-child(5){animation-delay:.21s}
.flyout.open .fo-foot{animation-delay:.25s}
@keyframes foIn{from{opacity:.001;transform:translateX(18px)}to{opacity:1;transform:none}}

.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(57,255,153,.12);box-shadow:inset 0 0 0 1px rgba(57,255,153,.35);color:var(--text-on-dark);font-size:.92rem;font-weight:600}
.hero-pill svg{width:22px;height:22px;color:var(--volt)}
.hero-pill b{color:var(--volt);font-family:var(--display);font-weight:800;font-size:1.05rem}
.hero-pill i{width:5px;height:5px;border-radius:50%;background:rgba(237,241,238,.4);margin-inline:2px}
.hero-note span{opacity:.7}

.hero-human{background:#2a2f2c url("../img/installatie.webp") 50% 38%/cover}
.hero-human::after{background:linear-gradient(180deg,rgba(11,16,14,0) 55%,rgba(11,16,14,.55) 100%)}
.calm-card-lg{gap:18px;padding:14px 26px 14px 14px}
.calm-card-lg .calm-thumb{width:96px;height:96px;border-radius:16px}
.calm-card-lg .calm-thumb .product{width:64px}
.calm-card-lg>div:last-child>b{font-size:1.2rem!important}
.calm-card>div:last-child>span.calm-meta{margin-top:6px;font-size:.78rem;font-weight:700;color:var(--forest-2)}
@media (max-width:760px){.hero-human{background-position:50% 35%}.calm-card-lg{left:14px;right:14px;bottom:14px}.calm-card-lg .calm-thumb{width:76px;height:76px}.calm-card-lg .calm-thumb .product{width:50px}}
/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));display:none;gap:10px;background:linear-gradient(180deg,rgba(11,16,14,0),rgba(11,16,14,.92) 35%);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1;min-height:54px;padding:0 14px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:grid}
  .nav-cta .btn{display:none}
  .compare{grid-template-columns:1fr 1fr}
  .cmp-stat{grid-column:1/-1}
  .sim{grid-template-columns:1fr}
  .sim-stage{border-right:0;border-bottom:1px solid var(--line)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud{grid-template-columns:1fr 1fr}
  .aud-photo{grid-column:1/-1;min-height:340px}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  :root{--header-h:64px}
  .hero{min-height:0;padding-block:calc(var(--header-h) + 120px) 28px}
  .hero-bg{background-position:58% 60%}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-actions .btn{flex:1 1 auto}
  .product-card{justify-self:stretch;width:100%;grid-template-columns:96px 1fr}
  .strip-grid{grid-template-columns:1fr 1fr}
  .stat{padding:20px 16px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .compare{grid-template-columns:1fr}
  .cmp{padding:24px}
  .cmp-stat{gap:14px}
  .sim-h{display:none}
  .sim-v{display:block;max-width:380px;margin-inline:auto}
  .sim-side{padding:20px}
  .bento{grid-template-columns:1fr}
  .c-hero,.c-wide{grid-column:auto}
  .c-hero{grid-row:auto}
  .compat{grid-template-columns:1fr}
  .aud{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .cta-block{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .by-bolk{grid-column:1/-1}
  .sticky-cta{display:flex}
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* static site additions */
a.plain{color:inherit;text-decoration:none}
a.plain:hover{color:var(--volt)}
html{padding-top:env(safe-area-inset-top,0px)}