:root {
  --bg: #081216;
  --bg-deep: #050b0e;
  --surface: #0e1c21;
  --surface-2: #13262c;
  --surface-3: #193138;
  --text: #f4f7f5;
  --muted: #9eb0b4;
  --muted-strong: #c0ccce;
  --line: rgba(255,255,255,.11);
  --line-strong: rgba(255,255,255,.21);
  --accent: #51d7d1;
  --accent-deep: #0aa7a0;
  --warm: #e2ab6b;
  --danger: #ff8f84;
  --success: #7be0ad;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 22px;
  --font: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
}

html[data-theme="light"] {
  --bg: #f4f7f5;
  --bg-deep: #e9efec;
  --surface: #ffffff;
  --surface-2: #e9f0ed;
  --surface-3: #dce8e4;
  --text: #0b2428;
  --muted: #587075;
  --muted-strong: #344f54;
  --line: rgba(9,38,43,.12);
  --line-strong: rgba(9,38,43,.22);
  --accent: #087f7b;
  --accent-deep: #05645f;
  --warm: #9a5a1e;
  --success: #137a4d;
  --shadow: 0 24px 60px rgba(18,52,57,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, figure { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .96; letter-spacing: -.055em; font-weight: 560; }
h2 { font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 560; }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; }
.shell { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 870px; }
.section { padding: clamp(80px, 11vw, 150px) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: 16px; padding: 12px 18px; background: var(--text); color: var(--bg); transform: translateY(-150%); border-radius: 8px; }
.skip-link:focus { transform: none; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 750; margin-bottom: 20px; }
.fine-print { color: var(--muted); font-size: .9rem; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: linear-gradient(to bottom, rgba(4,11,14,.9), transparent); transition: background .25s, border-color .25s; }
.site-header.scrolled { background: color-mix(in srgb, var(--bg) 91%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.header-inner { height: 86px; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent); color: #06272a; border-radius: 12px; }
.brand-mark svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .brand-pulse { stroke-width: 2.3; }
.brand strong, .brand small { display: block; line-height: 1.1; }
.brand strong { font-size: .98rem; letter-spacing: -.01em; }
.brand small { color: var(--muted); font-size: .69rem; margin-top: 4px; letter-spacing: .09em; text-transform: uppercase; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(17px, 2vw, 30px); }
.site-nav a { color: var(--muted-strong); font-size: .91rem; font-weight: 620; transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"]:not(.nav-cta) { box-shadow: 0 2px 0 var(--accent); }
.site-nav .nav-cta { color: #06272a; background: var(--accent); padding: 10px 16px; border-radius: 999px; }
.theme-toggle { width: 40px; height: 40px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 74%, transparent); border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.theme-toggle svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .moon, html[data-theme="light"] .theme-toggle .sun { display: none; }
html[data-theme="light"] .theme-toggle .moon { display: block; }
.nav-toggle { display: none; }

.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: .93rem; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--accent); color: #052326; }
.button.secondary { border-color: rgba(255,255,255,.28); background: rgba(0,0,0,.22); color: #fff; backdrop-filter: blur(8px); }
.button.light { background: #f4f7f5; color: #09282b; }
.text-link { display: inline-flex; gap: 11px; align-items: center; color: var(--accent); font-weight: 700; font-size: .93rem; }
.text-link span, .text-link i { transition: transform .2s; font-style: normal; }
.text-link:hover span, .text-link:hover i { transform: translateX(4px); }

.hero { min-height: 100svh; position: relative; display: flex; align-items: center; overflow: hidden; background: #060d10; color: #fff; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-image { object-position: center; animation: heroIn 1.2s ease-out both; }
.hero-shade { background: linear-gradient(90deg, rgba(3,9,11,.97) 0%, rgba(3,9,11,.83) 32%, rgba(3,9,11,.2) 68%, rgba(3,9,11,.08)), linear-gradient(0deg, rgba(3,9,11,.62), transparent 45%); }
.hero-inner { position: relative; z-index: 1; padding-top: 90px; }
.hero-copy { max-width: 790px; }
.hero-copy h1 { max-width: 780px; margin-bottom: 28px; }
.hero-lede { color: #c7d1d1; font-size: clamp(1.08rem, 1.8vw, 1.3rem); max-width: 650px; line-height: 1.6; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0; }
.hero-proof { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; color: #b5c3c4; font-size: .85rem; }
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof li::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; }
.hero-scroll { position: absolute; z-index: 2; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: #b5c3c4; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-scroll i { width: 1px; height: 28px; background: linear-gradient(var(--accent), transparent); margin-top: 8px; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.025); } }

.split-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 130px); align-items: start; }
.split-intro h2 { max-width: 560px; }
.intro-copy { color: var(--muted-strong); font-size: 1.14rem; }
.intro-copy p + p { margin-top: 26px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading.compact > p { max-width: 480px; color: var(--muted); }

.services-preview { padding-top: 0; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service-card { min-height: 395px; padding: 27px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; transition: transform .25s, border-color .25s; }
.service-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.service-card.featured { background: var(--accent); color: #06282b; border-color: transparent; }
.card-number { position: absolute; top: 20px; right: 22px; color: var(--muted); font-size: .75rem; letter-spacing: .16em; }
.featured .card-number { color: rgba(6,40,43,.6); }
.icon-wrap { width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 15px; display: grid; place-items: center; margin-bottom: auto; }
.featured .icon-wrap { border-color: rgba(6,40,43,.25); }
.icon-wrap svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { margin: 36px 0 14px; }
.service-card p { color: var(--muted); font-size: .94rem; }
.featured p { color: rgba(6,40,43,.72); }
.service-card a { margin-top: 20px; font-size: .86rem; font-weight: 750; }

.automation-videos { background: var(--bg-deep); border-top: 1px solid var(--line); }
.automation-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.automation-video-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; transition: transform .25s, border-color .25s; }
.automation-video-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.automation-video-frame { position: relative; aspect-ratio: 16 / 9; background: #071114; overflow: hidden; }
.automation-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.automation-video-frame > span { position: absolute; top: 14px; right: 14px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; background: rgba(3,9,11,.72); backdrop-filter: blur(8px); font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.video-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(3,9,11,.82);color:#fff;backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 12px 35px rgba(0,0,0,.35);transition:background .2s,transform .2s,opacity .2s; }
.video-play:hover { background:#0d2328;transform:translate(-50%,-50%) scale(1.03); }.video-play i{font-style:normal;color:var(--accent)}.video-play b{font-size:.76rem}.video-play.is-playing{top:18px;left:18px;transform:none;padding:8px 11px}.video-play.is-playing:hover{transform:none}.video-play.is-playing b{font-size:.68rem}
.automation-video-frame video:not([poster]) + span + .video-play { opacity:1; }
.automation-video-copy { padding: 27px 28px 30px; }
.automation-video-copy .eyebrow { margin-bottom: 13px; }
.automation-video-copy h3 { margin-bottom: 12px; font-size: 1.45rem; }
.automation-video-copy > p:last-child { margin: 0; color: var(--muted); font-size: .9rem; }
.video-direct { display:inline-flex;margin-top:17px;color:var(--accent);font-size:.78rem;font-weight:750; }
.automation-video-note { max-width: 850px; margin: 30px 0 0; color: var(--muted); font-size: .82rem; }

.app-explainer { background:var(--bg-deep);border-block:1px solid var(--line); }
.app-explainer-grid { display:grid;grid-template-columns:minmax(320px,.78fr) 1.22fr;gap:clamp(55px,9vw,130px);align-items:center; }
.official-ha-shot { margin:0;padding:26px 26px 20px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:var(--shadow); }
.official-ha-brand { display:flex;align-items:center;gap:13px;margin:0 2px 18px; }
.official-ha-brand img { display:block;width:48px;height:48px;flex:0 0 48px;border-radius:12px; }
.official-ha-brand span { display:grid;gap:2px; }
.official-ha-brand strong { color:var(--text);font-size:.96rem;letter-spacing:-.01em; }
.official-ha-brand small { color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.11em; }
.official-ha-shot>a { display:block;border-radius:20px;overflow:hidden;background:#000; }
.official-ha-shot>a>img { display:block;width:100%;height:auto;max-height:650px;object-fit:contain; }
.official-ha-shot figcaption { margin-top:16px;color:var(--muted);font-size:.67rem;line-height:1.55; }.official-ha-shot figcaption a{color:var(--accent);font-weight:700}
.app-phone-wrap { position:relative;min-height:660px;display:grid;place-items:center; }
.app-phone { width:min(100%,340px);min-height:620px;padding:17px 17px 22px;border:8px solid #1c292d;border-radius:48px;background:#071114;box-shadow:0 40px 90px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.06);color:#eef6f6; }
.app-phone-top { height:31px;display:flex;align-items:center;gap:6px;padding:0 7px;font-size:.64rem;color:#9eb0b4; }.app-phone-top span{margin-right:auto}.app-phone-top i{width:13px;height:7px;border:1px solid #799095;border-radius:5px}.app-phone-top i:last-child{width:18px;background:#78e8dc;border-color:#78e8dc}
.app-phone-header { display:flex;align-items:center;gap:13px;padding:19px 5px 22px;border-bottom:1px solid #203338; }.app-phone-header div{display:grid}.app-phone-header small{color:#82979c;font-size:.65rem}.app-phone-header strong{font-size:1.18rem;margin-top:2px}
.app-ha-icon { width:45px;height:45px;border-radius:13px;background:#78e8dc;color:#06282b;display:grid;place-items:center; }.app-ha-icon svg{width:31px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-status-row { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0; }.app-status-row span{padding:15px;border-radius:13px;background:#102328;border:1px solid #1d363c}.app-status-row small,.app-status-row strong{display:block}.app-status-row small{color:#82979c;font-size:.62rem}.app-status-row strong{font-size:1.16rem;margin-top:6px}
.app-control-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px; }.app-control { min-height:112px;padding:14px;border:1px solid #1c343a;border-radius:14px;background:#0c1d21;display:flex;flex-direction:column; }.app-control.active{background:#78e8dc;color:#06282b;border-color:#78e8dc}.app-control>i{font-style:normal;font-size:1.2rem;margin-bottom:auto}.app-control b{font-size:.8rem}.app-control small{color:#82979c;font-size:.6rem;margin-top:2px}.app-control.active small{color:#235358}
.app-phone-nav { margin:22px auto 0;width:145px;height:36px;border-radius:18px;background:#102328;display:flex;align-items:center;justify-content:space-around; }.app-phone-nav i{width:7px;height:7px;border-radius:50%;background:#426068}.app-phone-nav i:first-child{background:#78e8dc;box-shadow:0 0 0 5px rgba(120,232,220,.1)}
.app-notification { position:absolute;right:-15px;top:145px;max-width:205px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface);box-shadow:var(--shadow);font-size:.74rem;font-weight:700;animation:appNotification 6s ease-in-out infinite; }
.app-explainer-copy h2 { max-width:760px; }.app-lede{color:var(--muted-strong);font-size:1.05rem;max-width:780px}
.ha-capability-list { list-style:none;padding:0;margin:27px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.ha-capability-list li{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.ha-capability-list strong,.ha-capability-list span{display:block}.ha-capability-list strong{font-size:.76rem;color:var(--accent)}.ha-capability-list span{margin-top:7px;color:var(--muted);font-size:.69rem;line-height:1.5}
.app-function-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:38px 0 30px; }.app-function-grid article{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:19px 0;border-top:1px solid var(--line)}.app-function-grid article>span{color:var(--accent);font-size:.68rem;letter-spacing:.1em}.app-function-grid h3{font-size:.95rem;margin:0 0 5px}.app-function-grid p{color:var(--muted);font-size:.77rem;margin:0}
.app-privacy-note { padding:17px 19px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:.78rem; }.app-privacy-note strong{color:var(--text)}.app-explainer-copy .text-link{margin-top:20px;font-size:.76rem}
.ha-independence-note { margin-top:18px;color:var(--muted);font-size:.64rem;max-width:720px; }
@keyframes appNotification { 0%,18%,100%{opacity:0;transform:translateY(10px)}28%,78%{opacity:1;transform:none} }

[data-business-mode="guidance"] .business-full,
[data-business-mode="full-service"] .business-guidance { display: none !important; }

.animation-gallery { overflow: hidden; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.scene-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; }
.scene-card > div:last-child { padding: 25px 27px 29px; }
.scene-card > div:last-child .eyebrow { margin-bottom: 12px; }
.scene-card h3 { margin-bottom: 10px; font-size: 1.4rem; }
.scene-card p:last-child { margin: 0; color: var(--muted); font-size: .9rem; }
.scene-card:last-child { grid-column: 1 / -1; }
.scene-stage { height: 285px; position: relative; overflow: hidden; background: linear-gradient(145deg,#0c1e23,#061013); }
.scene-stage > b { position: absolute; left: 22px; bottom: 18px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(3,9,11,.65); color: #dce7e8; font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; }

.scene-lighting .scene-stage { background: linear-gradient(#22415e 0%,#d88868 54%,#152126 55%); }
.scene-sun { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: #ffd27b; box-shadow: 0 0 45px rgba(255,210,123,.58); top: 35px; right: 55px; animation: sceneSun 8s ease-in-out infinite; }
.scene-house { position: absolute; left: 13%; right: 13%; bottom: 0; height: 150px; background: #0b1518; clip-path: polygon(0 35%,18% 35%,30% 12%,48% 35%,100% 35%,100% 100%,0 100%); }
.scene-house i { position: absolute; bottom: 33px; width: 17%; height: 54px; background: #142b31; border: 2px solid #274047; animation: windowGlow 8s ease-in-out infinite; }
.scene-house i:nth-child(1){left:14%}.scene-house i:nth-child(2){left:42%;animation-delay:.45s}.scene-house i:nth-child(3){right:14%;animation-delay:.9s}
.scene-signal { position:absolute;left:50%;top:51%;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(120,232,220,.4);animation:signalPulse 2s infinite; }

.garage-shell { position:absolute;width:58%;height:165px;right:6%;bottom:0;background:#17272c;border:2px solid #2d454c;clip-path:polygon(0 22%,18% 0,100% 0,100% 100%,0 100%); }
.garage-door { position:absolute;right:8%;bottom:0;width:68%;height:105px;background:repeating-linear-gradient(0deg,#2a3e44 0 14px,#1c3036 15px 17px);transform-origin:top;animation:garageDoor 8s ease-in-out infinite; }
.scene-car { position:absolute;left:-28%;bottom:22px;width:145px;height:47px;border-radius:34px 46px 12px 12px;background:#78e8dc;box-shadow:0 7px 24px rgba(120,232,220,.18);animation:carArrive 8s ease-in-out infinite; }
.scene-car::before { content:"";position:absolute;left:34px;top:-25px;width:74px;height:34px;border-radius:38px 38px 0 0;background:#4ca8a1; }
.scene-car i { position:absolute;width:25px;height:25px;border-radius:50%;background:#071114;border:5px solid #263a40;bottom:-9px; }.scene-car i:first-child{left:20px}.scene-car i:last-child{right:18px}
.verify-one,.verify-two { position:absolute;top:35px;padding:6px 9px;border-radius:999px;background:#13292e;color:#9fb1b5;font-size:.65rem;opacity:.35;animation:verifyState 8s infinite; }.verify-one{left:24px}.verify-two{left:102px;animation-delay:.55s}

.scene-window { position:absolute;left:12%;top:45px;width:120px;height:150px;border:8px solid #21383e;background:#6b9eb2;perspective:400px; }
.scene-window i { position:absolute;inset:0;border-left:3px solid #21383e;transform-origin:left;animation:windowOpen 7s ease-in-out infinite; }
.scene-fan { position:absolute;right:23%;top:103px;width:62px;height:62px;border-radius:50%;background:#14272c;animation:fanSpin 1.3s linear infinite; }
.scene-fan i { position:absolute;left:28px;top:-43px;width:8px;height:58px;border-radius:8px;background:#78e8dc;transform-origin:4px 74px; }.scene-fan i:nth-child(2){transform:rotate(120deg);}.scene-fan i:nth-child(3){transform:rotate(240deg)}
.climate-state { position:absolute;right:11%;top:40px;color:#78e8dc;font-size:.75rem;animation:climatePause 7s infinite; }

.scene-panel { position:absolute;left:10%;top:58px;width:145px;height:90px;background:repeating-linear-gradient(90deg,transparent 0 34px,#6baeb0 35px 37px),repeating-linear-gradient(0deg,#173c48 0 27px,#6baeb0 28px 30px);transform:skewY(-8deg);border:3px solid #78e8dc; }
.scene-appliance { position:absolute;right:13%;bottom:34px;width:92px;height:128px;border-radius:10px;background:#e1e9e9;border:8px solid #a6b4b7; }
.scene-appliance::before { content:"";position:absolute;left:12px;right:12px;top:18px;height:6px;border-radius:5px;background:#071114;box-shadow:0 19px 0 #b6c3c5; }
.energy-stream { position:absolute;left:37%;top:122px;width:10px;height:10px;border-radius:50%;background:#ffd27b;box-shadow:0 0 18px #ffd27b;animation:energyTravel 2.2s linear infinite; }.stream-two{animation-delay:1.1s}

.scene-pipe { position:absolute;left:14%;top:42px;width:205px;height:72px;border-left:20px solid #789197;border-bottom:20px solid #789197;border-radius:0 0 0 26px; }
.scene-drop { position:absolute;left:53%;top:110px;width:25px;height:32px;background:#62b7f3;border-radius:65% 35% 65% 35%;transform:rotate(45deg);animation:dropFall 3s ease-in infinite; }
.scene-sensor { position:absolute;right:16%;bottom:52px;width:82px;height:34px;border-radius:50%;background:#193139;border:2px solid #78e8dc; }
.scene-sensor i { position:absolute;left:50%;top:50%;width:58px;height:58px;border:1px solid #78e8dc;border-radius:50%;transform:translate(-50%,-50%);animation:sensorRing 2s ease-out infinite; }.scene-sensor i:nth-child(2){animation-delay:1s}
.leak-alert { position:absolute;right:10%;top:45px;padding:8px 12px;border-radius:8px;background:#78e8dc;color:#06282b;font-size:.7rem;font-weight:800;animation:alertAppear 3s infinite; }

@keyframes sceneSun { 0%,15%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(105px);opacity:.35} }
@keyframes windowGlow { 0%,28%{background:#142b31;box-shadow:none}55%,100%{background:#ffc87a;box-shadow:0 0 26px rgba(255,200,122,.55)} }
@keyframes signalPulse { 70%{box-shadow:0 0 0 18px rgba(120,232,220,0)} }
@keyframes carArrive { 0%,10%{transform:translateX(0)}48%,78%{transform:translateX(305px)}100%{transform:translateX(620px)} }
@keyframes garageDoor { 0%,44%{transform:scaleY(1)}64%,100%{transform:scaleY(.1)} }
@keyframes verifyState { 0%,35%{opacity:.3}48%,100%{opacity:1;background:#78e8dc;color:#06282b} }
@keyframes windowOpen { 0%,30%{transform:rotateY(0)}52%,100%{transform:rotateY(-62deg);background:#a8d6e2} }
@keyframes fanSpin { to{transform:rotate(360deg)} }
@keyframes climatePause { 0%,42%{opacity:.25}55%,100%{opacity:1} }
@keyframes energyTravel { from{transform:translate(0,0);opacity:0}20%{opacity:1}to{transform:translate(280px,78px);opacity:0} }
@keyframes dropFall { 0%{transform:translateY(0) rotate(45deg);opacity:0}20%{opacity:1}70%,100%{transform:translateY(92px) rotate(45deg);opacity:0} }
@keyframes sensorRing { from{transform:translate(-50%,-50%) scale(.35);opacity:1}to{transform:translate(-50%,-50%) scale(1.8);opacity:0} }
@keyframes alertAppear { 0%,48%{opacity:0;transform:translateY(8px)}62%,100%{opacity:1;transform:none} }

.guidance-grid,.topic-grid,.future-roadmap { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.guidance-grid article,.topic-grid article,.future-roadmap article { padding:27px;background:var(--surface);border:1px solid var(--line);border-radius:18px; }
.guidance-grid article>span,.future-roadmap article>span { color:var(--accent);font-size:.72rem;letter-spacing:.14em; }
.guidance-grid h3,.topic-grid h3,.future-roadmap h3 { margin:34px 0 13px;font-size:1.22rem; }
.guidance-grid p,.topic-grid p,.future-roadmap p { color:var(--muted);font-size:.86rem; }
.guidance-grid .check-list { margin-top:22px;font-size:.78rem; }
.guidance-topics { padding-top:0; }
.topic-grid article { min-height:240px; }
.topic-grid article>b { color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em; }
.future-services { background:var(--bg-deep);border-block:1px solid var(--line); }
.future-services-heading { display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px; }
.future-services-heading h2 { max-width:850px;margin-bottom:0; }
.future-badge { flex:0 0 auto;padding:9px 13px;border:1px solid var(--warm);border-radius:999px;color:var(--warm);font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em; }
.future-intro { max-width:850px;color:var(--muted-strong);font-size:1.05rem;margin-bottom:48px; }
.future-roadmap article { min-height:330px;display:flex;flex-direction:column; }
.future-roadmap article small { display:block;margin-top:auto;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem;line-height:1.55; }
.future-path { margin-top:28px;padding:20px 24px;border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface); }
.future-path strong { color:var(--accent); }.future-path span{color:var(--muted-strong)}.future-path i{font-style:normal;color:var(--muted);margin-inline:auto}
.business-full { padding:30px; }

.future-home-teaser { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--bg-deep)),var(--bg-deep));border-bottom:1px solid var(--line); }
.future-home-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(50px,9vw,120px);align-items:center; }
.future-home-grid h2 { max-width:720px; }.future-home-grid p{color:var(--muted-strong);max-width:710px}.future-home-grid .text-link{margin-top:20px}
.future-home-grid ol { list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface); }
.future-home-grid li { display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px 22px;border-top:1px solid var(--line);align-items:center; }.future-home-grid li:first-child{border-top:0}.future-home-grid li span{color:var(--accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.future-home-grid li strong{font-size:.9rem}

.process-section { background: var(--bg-deep); border-block: 1px solid var(--line); }
.process-list { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(4,1fr); }
.process-list li { padding: 30px 30px 10px; border-left: 1px solid var(--line); min-height: 230px; }
.process-list li:first-child { border-left: 0; padding-left: 0; }
.process-list li > span { color: var(--accent); font-size: .75rem; letter-spacing: .16em; }
.process-list div { margin-top: 68px; }
.process-list h3 { margin-bottom: 10px; }
.process-list p { color: var(--muted); font-size: .92rem; }

.lab-callout-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px, 9vw, 130px); align-items: center; }
.lab-callout h2 { max-width: 560px; }
.lab-callout p { color: var(--muted-strong); max-width: 560px; font-size: 1.08rem; }
.lab-callout .button { margin-top: 18px; }
.mini-dashboard { background: linear-gradient(145deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); transform: perspective(900px) rotateY(-3deg) rotateX(2deg); }
.dashboard-top { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted-strong); font-size: .75rem; }
.status-pill i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 13%, transparent); }
.dashboard-metric { padding: 26px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.dashboard-metric > span { color: var(--muted); font-size: .8rem; }
.dashboard-metric strong { font-size: 3.6rem; font-weight: 500; line-height: 1; grid-row: span 2; }
.dashboard-metric strong small { font-size: 1rem; color: var(--muted); }
.dashboard-metric em { color: var(--success); font-style: normal; font-size: .82rem; }
.dashboard-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.dashboard-bars > span { height: 145px; background: var(--bg-deep); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; }
.dashboard-bars > span > i { position: absolute; inset: auto 0 0; height: var(--level); background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 23%, transparent)); }
.dashboard-bars .level-72 { --level: 72%; }.dashboard-bars .level-38 { --level: 38%; }.dashboard-bars .level-16 { --level: 16%; }
.dashboard-bars b, .dashboard-bars small { position: relative; z-index: 1; }
.dashboard-bars b { font-size: .78rem; }
.dashboard-bars small { color: var(--muted); }
.dashboard-event { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 12px; align-items: center; }
.dashboard-event > i { width: 8px; height: 8px; background: var(--warm); border-radius: 50%; }
.dashboard-event b, .dashboard-event small { display: block; }
.dashboard-event b { font-size: .81rem; }
.dashboard-event small { color: var(--muted); font-size: .72rem; }

.insights-preview { padding-top: 40px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.article-card { padding: 30px; min-height: 315px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; transition: background .2s, transform .2s; }
.article-card:hover { background: var(--surface-2); transform: translateY(-4px); }
.article-card > span, .article-meta { color: var(--accent); font-size: .73rem; text-transform: uppercase; letter-spacing: .12em; }
.article-card h3 { font-size: 1.55rem; margin: auto 0 14px; }
.article-card p { color: var(--muted); }
.article-card > i { font-style: normal; color: var(--accent); font-size: 1.4rem; }

.closing-cta { background: var(--accent-deep); color: #fff; text-align: center; }
.closing-cta .eyebrow { color: #b8fffa; }
.closing-cta h2 { max-width: 850px; margin: 0 auto 22px; }
.closing-cta p { max-width: 600px; margin: 0 auto 32px; color: rgba(255,255,255,.78); font-size: 1.08rem; }

.page-hero { padding: 190px 0 100px; background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%), var(--bg-deep); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(3.2rem, 7vw, 6.2rem); margin-bottom: 28px; }
.page-hero .narrow > p:last-child { color: var(--muted-strong); font-size: 1.2rem; max-width: 700px; }

.service-detail-section { padding-top: 60px; }
.service-detail { display: grid; grid-template-columns: 80px minmax(0,1fr) 280px; gap: 38px; padding: 80px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.detail-number { color: var(--accent); font-size: .8rem; letter-spacing: .18em; }
.service-detail h2 { font-size: clamp(2.2rem,4vw,3.7rem); }
.service-detail > div > p:not(.eyebrow) { color: var(--muted-strong); font-size: 1.06rem; max-width: 680px; }
.service-detail aside { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; align-self: start; }
.service-detail aside strong { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.service-detail aside p { color: var(--muted); margin: 12px 0 0; font-size: .9rem; }
.check-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 11px; align-items: start; color: var(--muted-strong); }
.check-list li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.scope-note { padding-top: 20px; }
.scope-note .button { margin-top: 20px; }

.project-list { padding-top: 50px; }
.project-feature { padding: 90px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px,8vw,110px); align-items: center; }
.project-feature.reverse .project-visual { order: 2; }
.project-copy h2 { font-size: clamp(2.2rem,4.5vw,4rem); }
.project-copy > p:not(.eyebrow) { color: var(--muted-strong); font-size: 1.05rem; }
.project-copy dl { margin: 32px 0 0; border-top: 1px solid var(--line); }
.project-copy dl div { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.project-copy dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.project-copy dd { margin: 0; font-size: .92rem; }
.project-visual { min-height: 430px; padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.evening-visual { display: grid; grid-template-columns: 1fr .75fr; gap: 12px; align-items: end; }
.room { height: 55%; background: linear-gradient(180deg, color-mix(in srgb, var(--warm) 5%, var(--surface-2)), color-mix(in srgb, var(--warm) 35%, var(--surface))); border: 1px solid color-mix(in srgb, var(--warm) 30%, var(--line)); position: relative; }
.room-two { height: 38%; }
.room i { position: absolute; inset: 25% 15% auto; height: 2px; background: var(--warm); box-shadow: 0 0 30px 9px color-mix(in srgb, var(--warm) 20%, transparent); }
.sun-line { position: absolute; inset: 25% 8% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--warm), transparent); }
.evening-visual > span, .evening-visual > b { position: absolute; top: 40px; }
.evening-visual > span { left: 40px; color: var(--muted); font-size: .8rem; }
.evening-visual > b { right: 40px; font-size: 1.8rem; }
.climate-visual { display: grid; place-items: center; }
.climate-ring { width: 235px; height: 235px; border-radius: 50%; border: 18px solid var(--surface-2); outline: 2px solid var(--accent); display: grid; place-content: center; text-align: center; box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 15%, transparent); }
.climate-ring strong { font-size: 3.1rem; font-weight: 520; }
.climate-ring span { color: var(--success); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; }
.climate-line { position: absolute; width: 70%; height: 1px; background: var(--line); }
.climate-line i { display: block; width: 55%; height: 100%; background: var(--accent); }
.climate-tags { position: absolute; bottom: 30px; display: flex; gap: 9px; }
.climate-tags span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; }
.energy-visual { display: grid; place-items: center; }
.energy-flow { display: flex; align-items: center; width: 100%; }
.energy-flow > span { width: 120px; height: 120px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-content: center; text-align: center; font-size: .75rem; color: var(--muted); }
.energy-flow > span b { display: block; color: var(--text); font-size: 1.1rem; }
.energy-flow > i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--accent), var(--warm)); position: relative; }
.energy-flow > i::after { content: ""; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left-color: var(--warm); }
.energy-note { position: absolute; bottom: 30px; padding: 10px 14px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); border-radius: 10px; font-size: .8rem; }
.away-visual { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.house-outline { width: 180px; height: 145px; border: 2px solid var(--accent); position: relative; margin: auto; border-top: 0; }
.house-outline::before { content: ""; position: absolute; width: 128px; height: 128px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); transform: rotate(45deg); top: -65px; left: 24px; }
.house-outline span, .house-outline i, .house-outline b { position: absolute; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 13%, transparent); width: 8px; height: 8px; }
.house-outline span { left: 25px; top: 60px; }.house-outline i { right: 25px; top: 30px; }.house-outline b { right: 55px; bottom: 25px; }
.away-events { display: grid; gap: 16px; }
.away-events span { display: flex; gap: 10px; color: var(--muted-strong); font-size: .85rem; }
.away-events i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; margin-top: 8px; }

.lab-hero { padding: 170px 0 65px; background: var(--bg-deep); }
.lab-hero > .shell { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.lab-hero h1 { font-size: clamp(3rem,6.5vw,6rem); max-width: 940px; }
.lab-hero p:not(.eyebrow) { color: var(--muted-strong); max-width: 720px; font-size: 1.12rem; }
.lab-state { text-align: right; min-width: 190px; }
.lab-state small { display: block; color: var(--muted); margin-top: 10px; max-width: 240px; }
.lab-surface { padding: 32px 0 90px; background: var(--bg-deep); }
.lab-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; }
.lab-card, .privacy-card { grid-column: span 3; padding: 25px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; min-height: 330px; }
.lab-card.wide { grid-column: span 8; min-height: 310px; }
.privacy-card { grid-column: span 4; min-height: 310px; background: var(--surface-2); }
.lab-card-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; }
.lab-card-head small { font-size: .7rem; }
.comfort-value { margin: 54px 0 30px; }
.comfort-value strong { font-size: 4.3rem; font-weight: 500; letter-spacing: -.06em; }
.comfort-value span { color: var(--muted); }
.comfort-track { height: 5px; background: linear-gradient(90deg,#58aef1,var(--accent),var(--warm)); border-radius: 5px; position: relative; margin-bottom: 30px; }
.comfort-track i { position: absolute; width: 14px; height: 14px; border: 3px solid var(--text); background: var(--surface); border-radius: 50%; top: -5px; left: 53%; }
.comfort-track span { position: absolute; top: 12px; color: var(--muted); font-size: .62rem; }.comfort-track span:nth-of-type(1){left:0}.comfort-track span:nth-of-type(2){left:50%;transform:translateX(-50%)}.comfort-track span:nth-of-type(3){right:0}
.comfort-card dl { display: flex; gap: 28px; margin: 42px 0 0; }.comfort-card dt{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}.comfort-card dd{margin:2px 0 0;font-size:.9rem}
.energy-orbit { height: 225px; position: relative; margin-top: 26px; }
.orbit-node { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-content: center; text-align: center; z-index: 2; background: var(--surface); }
.orbit-node span { color: var(--muted); font-size: .68rem; }.orbit-node strong{font-size:.9rem}.solar-node{left:0;top:0}.home-node{right:0;top:28%}.grid-node{left:12%;bottom:0}
.orbit-line { position:absolute;height:1px;background:var(--accent);transform-origin:left}.orbit-line.one{width:55%;left:30%;top:30%;transform:rotate(17deg)}.orbit-line.two{width:50%;left:35%;top:70%;transform:rotate(-20deg)}
.lab-caption { color: var(--muted); font-size: .75rem; margin: 0; }
.scene-name { margin: 54px 0 30px; }.scene-name small,.scene-name strong{display:block}.scene-name small{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em}.scene-name strong{font-size:2.5rem;font-weight:520}
.state-list { list-style:none;padding:0;margin:0;display:grid;gap:13px}.state-list li{display:grid;grid-template-columns:9px 1fr auto;gap:9px;align-items:center;font-size:.8rem}.state-list i{width:7px;height:7px;border-radius:50%;background:var(--muted)}.state-list .state-on{background:var(--success)}.state-list span{color:var(--muted)}
.pulse-total { margin: 48px 0 18px; }.pulse-total strong{display:block;font-size:3.6rem;line-height:1;font-weight:520}.pulse-total span{color:var(--muted);font-size:.78rem}
.pulse-chart { height:85px;display:flex;gap:4px;align-items:end;margin-bottom:17px}.pulse-chart i{flex:1;height:var(--h);background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 12%,transparent));border-radius:3px 3px 0 0}
.pulse-chart .h25{--h:25%}.pulse-chart .h38{--h:38%}.pulse-chart .h28{--h:28%}.pulse-chart .h55{--h:55%}.pulse-chart .h42{--h:42%}.pulse-chart .h70{--h:70%}.pulse-chart .h48{--h:48%}.pulse-chart .h62{--h:62%}.pulse-chart .h85{--h:85%}.pulse-chart .h58{--h:58%}.pulse-chart .h72{--h:72%}.pulse-chart .h92{--h:92%}
.event-list { list-style:none;padding:0;margin:30px 0 0;display:grid}.event-list li{display:grid;grid-template-columns:55px 10px 1fr;gap:15px;align-items:start;padding:15px 0;border-top:1px solid var(--line)}.event-list time{color:var(--muted);font-size:.75rem}.event-list i{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px}.event-list strong,.event-list small{display:block}.event-list strong{font-size:.88rem}.event-list small{color:var(--muted);margin-top:3px;font-size:.75rem}
.privacy-card h2 { font-size: 1.75rem; }.privacy-card .check-list{font-size:.82rem}.privacy-card .text-link{margin-top:25px;font-size:.78rem}
.lab-explainer { padding-top: 85px; }

.insights-list { padding-top: 60px; }
.article-feature { display:grid;grid-template-columns:1fr .8fr;gap:60px;padding:55px;background:var(--surface);border:1px solid var(--line);border-radius:26px;min-height:460px;align-items:center;transition:border-color .2s}.article-feature:hover{border-color:var(--line-strong)}.article-feature h2{font-size:clamp(2.2rem,4vw,4rem);margin:24px 0 18px}.article-feature p{color:var(--muted-strong);max-width:630px}.article-feature .text-link{margin-top:18px}
.article-motif{height:100%;min-height:330px;border-left:1px solid var(--line);position:relative;display:grid;place-items:center}.article-motif i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}.article-motif i:nth-child(1){top:18%;left:22%}.article-motif i:nth-child(2){top:45%;right:20%}.article-motif i:nth-child(3){bottom:20%;left:30%}.article-motif i:nth-child(4){top:55%;left:44%;background:var(--warm)}.article-motif::before,.article-motif::after{content:"";position:absolute;background:linear-gradient(90deg,transparent,var(--accent),transparent);height:1px;width:70%;transform:rotate(30deg)}.article-motif::after{transform:rotate(-36deg)}.article-motif span{position:absolute;color:var(--muted);font-size:.6rem;letter-spacing:.13em}.article-motif span:nth-of-type(1){top:10%;left:15%}.article-motif span:nth-of-type(2){top:38%;right:13%}.article-motif span:nth-of-type(3){bottom:12%;left:22%}
.article-grid.large { grid-template-columns: repeat(2,1fr); margin-top:14px; }.article-grid.large .article-card{min-height:360px}
.newsletter-note { margin-top:90px;padding:44px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.newsletter-note h2{font-size:2rem;margin:0}.newsletter-note>p{color:var(--muted)}

.article-header { padding: 180px 0 80px; background: var(--bg-deep); border-bottom: 1px solid var(--line); }.article-header h1{font-size:clamp(3rem,6vw,5.7rem);margin:28px 0}.article-header p:last-child{color:var(--muted-strong);font-size:1.2rem;max-width:750px}.back-link{display:inline-flex;color:var(--muted);font-size:.82rem;margin-bottom:50px}.back-link:hover{color:var(--text)}
.article-layout { display:grid;grid-template-columns:minmax(0,730px) 280px;gap:clamp(60px,10vw,140px);padding-block:90px;align-items:start}.prose{font-size:1.05rem}.prose .lead{font-size:1.28rem;line-height:1.65;color:var(--muted-strong)}.prose h2{font-size:2rem;margin:60px 0 18px}.prose p,.prose li{color:var(--muted-strong)}.prose li+li{margin-top:9px}.article-callout{margin:40px 0;padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.article-callout span{padding:8px 11px;background:var(--surface-2);border-radius:8px;font-size:.78rem;font-weight:700}.article-callout i{font-style:normal;color:var(--accent)}.article-callout p{width:100%;margin:15px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:.85rem}.article-callout.vertical{display:block}.article-callout.vertical strong{color:var(--accent)}
.article-aside{position:sticky;top:120px}.article-aside>div{padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:18px}.article-aside h2{font-size:1.45rem}.article-aside ul{padding-left:18px;color:var(--muted);font-size:.86rem}.article-aside li+li{margin-top:10px}.article-footer{padding:55px 0 90px;border-top:1px solid var(--line)}.article-footer>.shell{display:flex;align-items:center;justify-content:space-between;gap:30px}.article-footer p{font-size:1.3rem;margin:0}

.about-hero-grid { display:grid;grid-template-columns:1fr 360px;gap:clamp(60px,10vw,140px);align-items:center}.about-hero-grid>div>p:last-child{color:var(--muted-strong);font-size:1.18rem}.portrait-frame{margin:0;position:relative}.portrait-frame img{display:block;width:100%;height:auto;object-fit:contain;border-radius:22px;filter:saturate(.8);border:1px solid var(--line)}.portrait-frame figcaption{color:var(--muted);font-size:.75rem;text-align:right;margin-top:10px}
.principles-section { background:var(--bg-deep);border-block:1px solid var(--line)}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.principle-grid article{padding:28px;min-height:300px;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column}.principle-grid span{color:var(--accent);font-size:.72rem;letter-spacing:.14em}.principle-grid h3{margin-top:auto}.principle-grid p{color:var(--muted);font-size:.88rem}
.home-assistant-note>.shell{display:grid;grid-template-columns:170px 1fr;gap:60px;align-items:center}.ha-mark{width:150px;height:150px;border-radius:30px;background:var(--accent);display:grid;place-items:center;color:#06282b;transform:rotate(-4deg)}.ha-mark svg{width:90px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.home-assistant-note h2{font-size:clamp(2.2rem,4vw,4rem)}.home-assistant-note p:last-child{max-width:760px;color:var(--muted-strong);font-size:1.06rem}

.contact-intro { display:grid;grid-template-columns:1fr 340px;gap:80px;align-items:end}.contact-expect{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px}.contact-expect h2{font-size:1.5rem;margin:24px 0}.contact-expect ol{list-style:none;padding:0;margin:0;display:grid;gap:16px;color:var(--muted);font-size:.83rem}.contact-expect li{display:flex;gap:12px;align-items:start}.contact-expect li span{width:23px;height:23px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.contact-section{padding-top:70px}.contact-grid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:clamp(60px,9vw,120px);align-items:start}.contact-form{display:grid;gap:24px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:8px}.field label{font-size:.84rem;font-weight:700}.field label span{color:var(--muted);font-weight:400}.field input,.field select,.field textarea{width:100%;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:14px 15px;outline:none;transition:border-color .2s,box-shadow .2s}.field textarea{resize:vertical;min-height:170px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}.field [aria-invalid="true"]{border-color:var(--danger)}.field small{min-height:1em;color:var(--danger);font-size:.72rem}.field-help{display:flex;justify-content:space-between;gap:20px}.field-help>span{color:var(--muted);font-size:.72rem}.consent{display:flex;gap:12px;align-items:start;color:var(--muted-strong);font-size:.82rem}.consent input{margin-top:5px;accent-color:var(--accent)}.consent a{color:var(--accent);text-decoration:underline}.submit-button{justify-self:start;border:0}.submit-button[disabled]{opacity:.55;cursor:wait}.form-note{color:var(--muted);font-size:.75rem;max-width:600px}.form-status{padding:16px;border-radius:12px;border:1px solid var(--line)}.form-status.success{border-color:color-mix(in srgb,var(--success) 50%,transparent);background:color-mix(in srgb,var(--success) 9%,var(--surface));color:var(--success)}.form-status.error{border-color:color-mix(in srgb,var(--danger) 50%,transparent);background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--danger)}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact-sidebar{display:grid;gap:25px}.contact-sidebar>div{padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:18px}.contact-sidebar h2{font-size:1.5rem}.privacy-mini{display:flex;gap:15px!important}.privacy-mini>span{color:var(--accent);font-size:1.8rem}.privacy-mini h3{font-size:1rem;margin-bottom:6px}.privacy-mini p{color:var(--muted);font-size:.78rem;margin:0}

.legal-hero p:last-child{color:var(--muted)}.legal-content{padding-top:70px}.legal-content .prose{max-width:760px}.legal-content h2:first-child{margin-top:0}

.site-footer { padding: 80px 0 25px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.7fr .7fr .7fr 1fr; gap: 60px; }
.footer-grid > div:first-child > p { color: var(--muted); max-width: 340px; margin: 25px 0 0; font-size: .9rem; }
.footer-grid h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-bottom: 20px; }
.footer-grid > div:not(:first-child) > a { display: block; font-size: .86rem; margin: 10px 0; color: var(--muted-strong); }
.footer-grid > div:not(:first-child) > a:hover { color: var(--accent); }
.footer-note p { color: var(--muted); font-size: .8rem; margin-top: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 65px; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#app-explainer-title,#automation-videos-title,#future-services { scroll-margin-top:180px; }

@media (max-width: 1050px) {
  .service-grid, .principle-grid { grid-template-columns: repeat(2,1fr); }
  .guidance-grid,.topic-grid,.future-roadmap { grid-template-columns:repeat(2,1fr); }
  .lab-card { grid-column: span 6; }.lab-card.wide,.privacy-card{grid-column:span 6}
  .footer-grid { grid-template-columns: 1.5fr .7fr .7fr; }.footer-note{grid-column:1/-1}
  .service-detail { grid-template-columns: 55px 1fr; }.service-detail aside{grid-column:2}
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 32px, 680px); }
  h1 { font-size: clamp(2.75rem,12vw,5rem); }
  .header-inner { height: 72px; }
  .nav-toggle { display: grid; gap: 4px; margin-left: auto; width: 40px; height: 40px; place-content: center; border: 1px solid var(--line); background: var(--surface); border-radius: 50%; cursor:pointer; }
  .nav-toggle > span:not(.sr-only) { width: 17px; height: 1px; background: currentColor; }
  .site-nav { position: fixed; inset: 72px 0 auto; background: var(--bg); border-bottom: 1px solid var(--line); padding: 25px 24px 30px; display: grid; gap: 5px; transform: translateY(-130%); visibility: hidden; transition: transform .3s, visibility .3s; }
  .site-nav.open { transform: none; visibility: visible; }
  .site-nav a { padding: 11px 0; font-size: 1.05rem; }.site-nav a[aria-current="page"]:not(.nav-cta){box-shadow:none;color:var(--accent)}
  .site-nav .nav-cta { text-align:center;margin-top:10px;padding:12px 16px; }
  .theme-toggle { width: 36px; height: 36px; }
  .hero { min-height: 900px; align-items: end; padding-bottom: 110px; }.hero-image{object-position:65% center}.hero-shade{background:linear-gradient(0deg,rgba(3,9,11,.98) 10%,rgba(3,9,11,.72) 62%,rgba(3,9,11,.2))}.hero-inner{padding-top:150px}.hero-copy h1{font-size:clamp(3.2rem,13vw,5.6rem)}.hero-scroll{display:none}
  .split-intro,.lab-callout-grid,.project-feature,.project-feature.reverse,.about-hero-grid,.contact-intro,.contact-grid,.article-feature,.newsletter-note,.article-layout,.future-home-grid,.app-explainer-grid { grid-template-columns: 1fr; }
  .project-feature.reverse .project-visual { order: initial; }.project-visual{min-height:380px}.article-layout{max-width:740px}.article-aside{position:static}.article-aside>div{margin-top:0}
  .process-list { grid-template-columns: 1fr 1fr; }.process-list li:nth-child(3){border-left:0;padding-left:0}
  .automation-video-grid { grid-template-columns: 1fr; }
  .scene-grid { grid-template-columns:1fr; }.scene-card:last-child{grid-column:auto}
  .future-services-heading{display:block}.future-badge{display:inline-block;margin-top:22px}
  .app-phone-wrap{min-height:620px}.app-phone{min-height:590px}.app-notification{right:8%}
  .official-ha-shot{max-width:520px;margin-inline:auto}.ha-capability-list{grid-template-columns:1fr 1fr}
  .lab-hero>.shell { grid-template-columns:1fr }.lab-state{text-align:left}.lab-card.wide,.privacy-card{grid-column:span 12}
  .about-hero-grid .portrait-frame{max-width:360px}.contact-intro{align-items:start}
  .home-assistant-note>.shell{grid-template-columns:110px 1fr;gap:30px}.ha-mark{width:100px;height:100px}.ha-mark svg{width:60px}
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}

@media (max-width: 620px) {
  .section { padding: 75px 0; }.page-hero{padding:140px 0 70px}
  .brand small { display:none; }.brand-mark{width:34px;height:34px}.brand-mark svg{width:24px}
  .button-row { display:grid }.button { width:100% }
  .hero { min-height: 820px; }.hero-proof{gap:10px 15px}.hero-proof li{font-size:.75rem}
  .section-heading { display:block }.section-heading .text-link{margin-top:20px}
  .service-grid,.article-grid,.article-grid.large,.principle-grid,.process-list,.field-row,.guidance-grid,.topic-grid,.future-roadmap { grid-template-columns: 1fr; }
  .automation-video-copy { padding: 22px; }
  .scene-stage{height:240px}.scene-card>div:last-child{padding:22px}.future-path{align-items:flex-start}.future-path i{display:none}.future-roadmap article{min-height:0}.future-home-grid li{grid-template-columns:60px 1fr}
  .app-phone-wrap{min-height:550px}.app-phone{width:286px;min-height:525px;border-radius:40px;padding:13px}.app-control{min-height:92px}.app-notification{right:0;top:120px;max-width:170px}.app-function-grid{grid-template-columns:1fr}.video-play{padding:10px 13px}.video-play b{font-size:.68rem}
  .official-ha-shot{padding:16px 16px 14px}.official-ha-shot>a>img{max-height:560px}.official-ha-brand{margin-bottom:14px}.official-ha-brand img{width:42px;height:42px;flex-basis:42px}.ha-capability-list{grid-template-columns:1fr}
  .service-card{min-height:330px}.process-list li,.process-list li:first-child,.process-list li:nth-child(3){border-left:0;border-top:1px solid var(--line);padding:25px 0;min-height:0}.process-list div{margin-top:30px}
  .lab-callout-grid{gap:50px}.mini-dashboard{padding:18px;transform:none}.dashboard-metric strong{font-size:3rem}
  .service-detail{grid-template-columns:1fr;gap:15px;padding:60px 0}.service-detail aside{grid-column:1}.detail-number{margin-bottom:15px}
  .project-feature{padding:60px 0}.project-visual{min-height:330px;padding:20px}.energy-flow>span{width:88px;height:88px}.energy-flow>span b{font-size:.85rem}.away-visual{grid-template-columns:1fr}.away-events{display:none}
  .lab-card{grid-column:span 12;min-height:310px}.lab-grid{gap:10px}.lab-card,.privacy-card{padding:20px}.orbit-node{width:90px;height:90px}
  .article-feature{padding:27px;gap:35px}.article-motif{min-height:250px;border-left:0;border-top:1px solid var(--line)}
  .article-header{padding:140px 0 65px}.article-layout{padding-block:60px}.article-footer>.shell{display:block}.article-footer .button{margin-top:20px}.article-callout{justify-content:flex-start}
  .about-hero-grid .portrait-frame{max-width:270px}.home-assistant-note>.shell{grid-template-columns:1fr}.ha-mark{transform:none}
  .contact-form .submit-button{width:100%}.contact-section{padding-top:55px}
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid>div:first-child,.footer-note{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ===== 2026-09-30 additions: offer clarity, FAQ, My setup, testimonials ===== */
.hero-note { margin-top: 18px; color: var(--muted-strong); font-size: .95rem; }
.reply-time { margin-top: 18px; color: var(--muted); font-size: .92rem; }
.reply-time strong { color: var(--text); }
.center { text-align: center; }

.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.how-grid article { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.how-grid h3 { margin: 18px 0 10px; font-size: 1.15rem; }
.how-grid p { color: var(--muted); font-size: .92rem; margin: 0; }
.how-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--accent); font-size: 1.2rem; }
.offer-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin: 28px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.offer-facts div { padding: 20px 22px; background: var(--surface); }
.offer-facts dt { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 750; }
.offer-facts dd { margin: 6px 0 0; color: var(--muted-strong); font-size: .92rem; }

.faq-list { display: grid; gap: 10px; }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 24px; }
.faq-list summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 650; display: flex; justify-content: space-between; gap: 20px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq-list details p { color: var(--muted); margin: 0 0 22px; }
.faq-list a { color: var(--accent); text-decoration: underline; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 0 18px; }
.stat-grid div { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.stat-grid dt { color: var(--muted); font-size: .85rem; }
.stat-grid dd { margin: 8px 0 0; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.setup-stats { padding-top: 0; }

.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line-strong); background: #fafafa; box-shadow: var(--shadow); }
.shot figcaption { margin-top: 12px; color: var(--muted); font-size: .85rem; }
.setup-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(36px, 6vw, 90px); align-items: center; margin-bottom: clamp(70px, 9vw, 120px); }
.setup-feature.reverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.setup-feature.reverse .setup-copy { order: 2; }
.setup-feature .shot:not(.wide) { max-width: 420px; justify-self: center; }
.setup-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.setup-copy > p { color: var(--muted-strong); }
.setup-lesson { margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; color: var(--muted-strong); font-size: .93rem; }
.setup-lesson strong { color: var(--text); }
.setup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.setup-pair.uneven { grid-template-columns: 1.2fr 1fr; }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.setup-grid article { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.setup-grid article > b { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.setup-grid h3 { margin: 16px 0 10px; font-size: 1.15rem; }
.setup-grid p { color: var(--muted); font-size: .9rem; margin: 0; }
.lesson-list { margin: 0; padding-left: 1.2em; display: grid; gap: 14px; color: var(--muted-strong); }
.lesson-list strong { color: var(--text); }
.arch-diagram { margin: 0; }
.arch-diagram svg { width: 100%; height: auto; }
.arch-box { fill: var(--surface-2); stroke: var(--accent); stroke-width: 1.5; }
.arch-box.soft { fill: var(--surface); stroke: var(--line-strong); }
.arch-label { fill: var(--muted-strong); font: 500 13px var(--font); }
.arch-label.strong { fill: var(--text); font-weight: 700; font-size: 15px; }
.arch-small { fill: var(--accent); font: 600 11px var(--font); letter-spacing: .08em; }
.arch-line { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .7; }
.arch-line.dashed { stroke-dasharray: 5 5; }
.arch-diagram figcaption { margin-top: 12px; color: var(--muted); font-size: .85rem; }

.setup-teaser-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.setup-teaser-grid .shot { max-width: 420px; }
.setup-teaser-grid p { color: var(--muted-strong); }
.app-brief .ha-independence-note { margin-top: 22px; color: var(--muted); font-size: .8rem; }
.article-layout .shot { margin: 28px 0; max-width: 360px; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.testimonial { margin: 0; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.testimonial blockquote { margin: 0 0 18px; font-size: 1.05rem; color: var(--text); }
.testimonial blockquote p::before { content: "“"; color: var(--accent); }
.testimonial blockquote p::after { content: "”"; color: var(--accent); }
.testimonial figcaption strong { display: block; }
.testimonial figcaption span { color: var(--muted); font-size: .85rem; }

@media (max-width: 1050px) {
  .setup-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .offer-facts, .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .how-grid, .setup-feature, .setup-feature.reverse, .setup-pair, .setup-pair.uneven, .setup-teaser-grid { grid-template-columns: 1fr; }
  .setup-feature.reverse .setup-copy { order: 0; }
  .setup-teaser-grid .shot { justify-self: center; }
}
@media (max-width: 620px) {
  .setup-grid, .offer-facts, .stat-grid { grid-template-columns: 1fr; }
  .faq-list details { padding: 0 18px; }
}
.setup-feature.stacked { grid-template-columns: 1fr; gap: 36px; }
.setup-feature.stacked .setup-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 clamp(36px,6vw,90px); align-items: start; }
.setup-feature.stacked .setup-copy > .eyebrow, .setup-feature.stacked .setup-copy > h2 { grid-column: 1; }
.setup-feature.stacked .setup-copy > p, .setup-feature.stacked .setup-copy > ul { grid-column: 2; }
.setup-feature.stacked .setup-copy > h2 { grid-row: 2 / span 3; }
.setup-feature.stacked .setup-copy > .eyebrow { grid-row: 1; }
@media (max-width: 860px) { .setup-feature.stacked .setup-copy { display: block; } }
/* Dark top fade is only for the homepage hero photo; inner pages fade from the page colour. */
body:not(.home-page) .site-header:not(.scrolled) { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent); }