.awatt-site .hero-product.hero-ecosystem{width:100%;align-self:center}
.awatt-site .hero-ecosystem-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:1;max-width:650px;margin-inline:auto;color:#f6f6f6}
.awatt-site .hero-ecosystem-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.awatt-site .hero-ecosystem-lines path{stroke:#d5d5d5;stroke-width:1.3;stroke-linecap:round;opacity:.58}
.awatt-site .hero-ecosystem-packets{opacity:0;fill:#f5f5f7;filter:drop-shadow(0 0 4px #f5f5f7)}
.awatt-site .hero-ecosystem-center-glow{fill:#f5f5f7;opacity:.025;filter:blur(22px)}
.awatt-site .hero-ecosystem-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:22%;line-height:1.3;font-size:clamp(10px,1.02vw,13px);font-weight:400;text-align:center;color:#f2f2f2}
.awatt-site .hero-ecosystem-node svg{width:clamp(35px,4.5vw,55px);height:clamp(35px,4.5vw,55px);color:#e4e4e4;stroke-width:1.5}
.awatt-site .hero-ecosystem-north{left:39%;top:0}
.awatt-site .hero-ecosystem-west{left:-1%;top:42%}
.awatt-site .hero-ecosystem-east{right:-1%;top:42%}
.awatt-site .hero-ecosystem-south{left:39%;bottom:0}
.awatt-site .hero-ecosystem-product{position:absolute;z-index:1;inset:16% 17%;display:grid;place-items:center;transform-origin:50% 52%}
.awatt-site .hero-product.hero-ecosystem .cad-hero-image{height:100%;width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 22px 18px #0003)}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-node{animation:awatt-site-hero-ecosystem-node-in 1.1s ease-out both}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-west{animation-delay:.12s}.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-east{animation-delay:.24s}.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-south{animation-delay:.36s}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-lines path{stroke-dasharray:1;animation:awatt-site-hero-ecosystem-connect 1.6s cubic-bezier(.3,.1,.2,1) .65s both}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-product{animation:none;opacity:1;transform:none}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-packets{animation:awatt-site-hero-ecosystem-flow-in .8s ease 2.75s both}
.awatt-site .hero-ecosystem.is-animated .hero-ecosystem-center-glow{animation:awatt-site-hero-ecosystem-glow 5.5s ease-in-out 2.8s infinite}
.awatt-site .hero-ecosystem.is-animated .hero-packet-north{animation:awatt-site-hero-ecosystem-packet-north 4.4s ease-in-out 2.8s infinite}.awatt-site .hero-ecosystem.is-animated .hero-packet-west{animation:awatt-site-hero-ecosystem-packet-west 4.4s ease-in-out 3.7s infinite}.awatt-site .hero-ecosystem.is-animated .hero-packet-east{animation:awatt-site-hero-ecosystem-packet-east 4.4s ease-in-out 4.6s infinite}.awatt-site .hero-ecosystem.is-animated .hero-packet-south{animation:awatt-site-hero-ecosystem-packet-south 4.4s ease-in-out 5.5s infinite}
.awatt-site .hero-ecosystem.is-paused *,.awatt-site .compatibility-visual.is-paused *{animation-play-state:paused!important}
@keyframes awatt-site-hero-ecosystem-node-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes awatt-site-hero-ecosystem-connect{from{stroke-dashoffset:1;opacity:.15}to{stroke-dashoffset:0;opacity:.58}}
@keyframes awatt-site-hero-ecosystem-reveal{from{opacity:0;transform:translateY(7px) scale(.965)}to{opacity:1;transform:none}}
@keyframes awatt-site-hero-ecosystem-flow-in{from{opacity:0}to{opacity:1}}
@keyframes awatt-site-hero-ecosystem-glow{0%,100%{opacity:.025}50%{opacity:.065}}
@keyframes awatt-site-hero-ecosystem-packet-north{0%{opacity:0;transform:translateY(0)}15%{opacity:1}72%{opacity:1}90%,100%{opacity:0;transform:translateY(218px)}}
@keyframes awatt-site-hero-ecosystem-packet-west{0%{opacity:0;transform:translateX(0)}15%{opacity:1}72%{opacity:1}90%,100%{opacity:0;transform:translateX(182px)}}
@keyframes awatt-site-hero-ecosystem-packet-east{0%{opacity:0;transform:translateX(0)}15%{opacity:1}72%{opacity:1}90%,100%{opacity:0;transform:translateX(-182px)}}
@keyframes awatt-site-hero-ecosystem-packet-south{0%{opacity:0;transform:translateY(0)}15%{opacity:1}72%{opacity:1}90%,100%{opacity:0;transform:translateY(-218px)}}
.awatt-site .compatibility-lead{position:relative;overflow:hidden;isolation:isolate;min-height:365px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:45px;align-content:center}
.awatt-site .compatibility-lead>.eyebrow,.awatt-site .compatibility-lead>h1,.awatt-site .compatibility-lead>p{position:relative;grid-column:1;z-index:1}
.awatt-site .compatibility-lead>h1{margin-top:17px}.awatt-site .compatibility-lead>p{margin-bottom:0;max-width:580px}
.awatt-site .compatibility-visual{position:absolute;top:50%;right:3%;transform:translateY(-50%);width:43%;max-width:520px;aspect-ratio:520/350;color:#7f7f7f;pointer-events:none}
.awatt-site .compatibility-lines{position:absolute;inset:0;width:100%;height:100%}.awatt-site .compatibility-lines path{stroke:#c7c7c7;stroke-width:1.2}.awatt-site .compatibility-line-signals path{stroke:#8b8b8b;stroke-width:1.5;stroke-dasharray:.16 .84;stroke-dashoffset:1;opacity:0}
.awatt-site .compatibility-visual.is-animated .compatibility-line-signals path{opacity:.65;animation:awatt-site-compatibility-signal 5.8s ease-in-out infinite}.awatt-site .compatibility-visual.is-animated .compatibility-line-signals path:nth-child(2){animation-delay:.6s}.awatt-site .compatibility-visual.is-animated .compatibility-line-signals path:nth-child(3){animation-delay:1.2s}.awatt-site .compatibility-visual.is-animated .compatibility-line-signals path:nth-child(4){animation-delay:1.8s}.awatt-site .compatibility-visual.is-animated .compatibility-line-signals path:nth-child(5){animation-delay:2.4s}
.awatt-site .compatibility-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-50%);font-size:10px;white-space:nowrap;line-height:1.4}.awatt-site .compatibility-node svg{width:48px;height:48px}.awatt-site .compatibility-node-center{left:50%;top:50%;color:#232426;font-weight:600;background:#ececec;padding:8px 14px;border:1px solid #c7c7c7;border-radius:16px}.awatt-site .compatibility-node-center svg{width:52px;height:52px}.awatt-site .compatibility-node-pv{left:50%;top:12%}.awatt-site .compatibility-node-heat{left:14%;top:50%}.awatt-site .compatibility-node-wallbox{left:86%;top:50%}.awatt-site .compatibility-node-battery{left:35%;top:90%}.awatt-site .compatibility-node-home{left:65%;top:90%}
@keyframes awatt-site-compatibility-signal{0%{stroke-dashoffset:1;opacity:0}20%{opacity:.7}80%{opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
@media(max-width:1100px){.awatt-site .compatibility-lead{column-gap:25px;min-height:350px}.awatt-site .compatibility-visual{right:2%;width:45%}.awatt-site .compatibility-node{font-size:9px}.awatt-site .compatibility-node svg{width:40px;height:40px}}
@media(max-width:850px){.awatt-site .hero-ecosystem-node{font-size:10px;gap:4px}.awatt-site .hero-ecosystem-node svg{width:34px;height:34px}.awatt-site .compatibility-lead{min-height:340px}.awatt-site .compatibility-node svg{width:35px;height:35px}.awatt-site .compatibility-node{font-size:8px}}
@media(max-width:600px){.awatt-site .hero-product.hero-ecosystem{margin:14px 0 15px;max-width:420px}.awatt-site .hero-ecosystem-node{font-size:11px;gap:4px}.awatt-site .hero-ecosystem-node svg{width:36px;height:36px}.awatt-site .hero-ecosystem-west{left:-2%}.awatt-site .hero-ecosystem-east{right:-2%}.awatt-site .compatibility-lead{display:block;min-height:0;padding-bottom:245px}.awatt-site .compatibility-lead>h1,.awatt-site .compatibility-lead>p{max-width:100%}.awatt-site .compatibility-visual{top:auto;bottom:20px;right:50%;transform:translateX(50%);width:330px;max-width:calc(100% - 42px)}.awatt-site .compatibility-node{font-size:9px}.awatt-site .compatibility-node svg{width:36px;height:36px}.awatt-site .compatibility-node-center svg{width:40px;height:40px}.awatt-site .compatibility-node-center{padding:5px 11px}}
@media(max-width:360px){.awatt-site .hero-ecosystem-stage{aspect-ratio:1/1.15}.awatt-site .hero-ecosystem-product{inset:18% 17%}}
@media(prefers-reduced-motion:reduce){.awatt-site .hero-ecosystem *,.awatt-site .compatibility-visual *{animation:none!important}.awatt-site .hero-ecosystem-product,.awatt-site .hero-ecosystem-node{opacity:1!important;transform:none!important}.awatt-site .hero-ecosystem-lines path{stroke-dashoffset:0!important;opacity:.58!important}.awatt-site .hero-ecosystem-packets,.awatt-site .compatibility-line-signals{display:none}}