:root{
  --navy:#183a5f;
  --ink:#163550;
  --teal:#57ced3;
  --teal-dark:#157b87;
  --lime:#a6ce39;
  --light:#f4f7f7;
  --line:#dce5e7;
  --muted:#627681;
  --white:#fff;
  --radius:22px;
  --ease:cubic-bezier(.22,.7,.2,1)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.6
}
body.dialog-open{
  overflow:hidden
}
button,input,select,textarea{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled{
  cursor:default;
  opacity:.45
}
a{
  color:inherit;
  text-decoration:none
}
img{
  max-width:100%;
  display:block;
  height:auto
}
button{
  color:inherit
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--teal-dark);
  outline-offset:5px
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  line-height:1.07;
  letter-spacing:-.045em
}
h1{
  font-size:clamp(66px,7.2vw,106px);
  font-weight:700
}
h2{
  font-size:clamp(38px,4.1vw,60px)
}
h2 span{
  color:var(--teal-dark)
}
h3{
  font-size:25px;
  letter-spacing:-.035em
}
.container{
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.icon{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.symbol-library{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.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
}
[hidden]{
  display:none!important
}
.skip-link{
  position:fixed;
  left:20px;
  top:10px;
  transform:translateY(-180%);
  z-index:200;
  background:var(--navy);
  color:#fff;
  padding:12px 20px;
  border-radius:8px
}
.skip-link:focus{
  transform:translateY(0)
}
.scroll-progress{
  position:fixed;
  top:0;
  height:3px;
  background:var(--teal);
  z-index:150;
  width:0;
  pointer-events:none
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  border-radius:9px;
  padding:17px 22px;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  transition:background .25s,transform .25s,box-shadow .25s;
  min-height:52px
}
.button:hover{
  background:#204e6d;
  box-shadow:0 8px 25px #183a5f16;
  transform:translateY(-2px)
}
.button:hover .icon{
  transform:translateX(3px)
}
.button .icon{
  transition:transform .25s
}
.button.small{
  min-height:44px;
  padding:12px 17px;
  font-size:12px;
  gap:16px
}
.button.secondary{
  background:#fff;
  color:var(--navy);
  border-color:var(--line)
}
.text-link{
  display:inline-flex;
  gap:12px;
  align-items:center;
  line-height:1.5;
  font-size:14px;
  font-weight:700;
  background:none;
  border:0;
  padding:8px 0
}
.text-link span{
  font-size:21px;
  transition:transform .2s
}
.text-link:hover{
  color:var(--teal-dark)
}
.text-link:hover span{
  transform:translate(2px,-2px)
}
.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1.5;
  margin-bottom:22px
}
.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 0 4px #a6ce3917;
  flex-shrink:0
}
.header{
  background:#ffffffee;
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid #e5eced99
}
.nav-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  gap:28px
}
.brand{
  display:block;
  flex-shrink:0
}
.brand img{
  width:140px
}
.main-nav{
  display:flex;
  gap:30px;
  align-items:center
}
.main-nav a{
  font-size:12px;
  font-weight:700;
  padding:12px 0;
  position:relative
}
.main-nav a:after{
  content:'';
  height:2px;
  background:var(--teal);
  position:absolute;
  bottom:3px;
  left:0;
  width:0;
  transition:width .2s
}
.main-nav a:hover:after{
  width:100%
}
.icon-button{
  background:#fff;
  border:1px solid var(--line);
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center
}
.menu-toggle{
  display:none
}
.hero{
  padding-top:45px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
  align-items:center
}
.hero-copy{
  padding:35px 0 50px
}
.hero h1 span{
  color:var(--teal-dark)
}
.hero-lead{
  font-size:22px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.025em;
  margin-top:26px
}
.hero-description{
  font-size:14px;
  max-width:400px;
  color:var(--muted);
  line-height:1.75;
  margin-top:18px
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:28px;
  flex-wrap:wrap
}
.hero-trust{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:38px;
  font-size:11px;
  line-height:1.5;
  color:var(--ink)
}
.hero-trust small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px
}
.mini-bolt{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--teal-dark)
}
.mini-bolt .icon{
  width:17px;
  height:17px
}
.hero-visual{
  height:637px;
  background:radial-gradient(ellipse at 50% 46%,#235a66 0,#163c51 37%,#112b43 72%);
  position:relative;
  border-radius:26px;
  isolation:isolate;
  overflow:hidden;
  color:#fff
}
.hero-grid,.flow-grid{
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(transparent,#000,transparent);
  pointer-events:none
}
.hero-visual:after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:180px;
  z-index:2;
  background:linear-gradient(transparent,#102b43ee);
  pointer-events:none
}
.hero-visual-label{
  position:absolute;
  top:25px;
  left:27px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:8px;
  letter-spacing:.17em;
  z-index:3
}
.hero-big-number{
  font-size:clamp(140px,19vw,270px);
  position:absolute;
  left:0;
  top:70px;
  font-weight:700;
  line-height:1;
  color:#fff;
  opacity:.045;
  letter-spacing:-.08em;
  pointer-events:none
}
.hero-product{
  position:absolute;
  height:565px;
  width:100%;
  object-fit:contain;
  left:0;
  top:18px;
  filter:drop-shadow(0 25px 22px #0004);
  animation:productFloat 7s ease-in-out infinite;
  z-index:1;
  will-change:transform
}
.orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #ffffff13;
  border-radius:50%;
  width:470px;
  height:470px;
  transform:translate(-50%,-50%);
  pointer-events:none
}
.orbit-two{
  width:565px;
  height:565px;
  border-color:#57ced319
}
.orbit-one:after{
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  top:48px;
  left:80px;
  background:var(--lime);
  box-shadow:0 0 25px var(--lime)
}
.visual-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 16px;
  background:#ffffffee;
  color:var(--navy);
  border-radius:11px;
  z-index:3;
  box-shadow:0 16px 35px #0001;
  backdrop-filter:blur(12px)
}
.voltage-badge{
  right:20px;
  top:176px
}
.badge-icon{
  color:var(--teal-dark);
  width:31px;
  height:31px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#57ced31a
}
.badge-icon .icon{
  width:18px;
  height:18px
}
.visual-badge strong{
  font-size:14px;
  display:block;
  line-height:1.3
}
.visual-badge small{
  font-size:8px;
  display:block;
  color:var(--muted);
  margin-top:2px
}
.visual-caption{
  position:absolute;
  bottom:49px;
  left:28px;
  right:28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  z-index:3
}
.visual-caption>div>small{
  font-size:9px;
  letter-spacing:.14em;
  color:var(--lime);
  display:block;
  margin-bottom:8px
}
.visual-caption strong{
  font-size:21px;
  letter-spacing:-.03em;
  line-height:1.15;
  display:block
}
.visual-caption>span{
  font-size:18px;
  letter-spacing:-.04em;
  white-space:nowrap
}
.visual-caption>span small{
  font-size:11px;
  color:#abc3ca
}
.hero-art-note{
  position:absolute;
  bottom:15px;
  left:28px;
  font-size:8px;
  color:#d4e2e580;
  z-index:3
}
.hero-metrics{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:35px 0 36px;
  margin-top:16px;
  border-top:1px solid var(--line)
}
.hero-metrics>div{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:center;
  border-right:1px solid var(--line)
}
.hero-metrics>div:first-child{
  justify-content:flex-start
}
.hero-metrics>div:last-child{
  border:0
}
.hero-metrics strong{
  font-size:39px;
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.2;
  white-space:nowrap
}
.hero-metrics strong span{
  font-size:16px;
  color:var(--teal-dark);
  letter-spacing:-.02em
}
.hero-metrics p{
  font-size:12px;
  line-height:1.5
}
.hero-metrics p small{
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.capability-strip{
  background:var(--navy);
  color:#fff
}
.capability-strip>.container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-block:19px;
  font-size:9px;
  letter-spacing:.16em;
  font-weight:600
}
.strip-cross{
  font-size:23px;
  color:var(--lime);
  font-weight:400;
  line-height:1
}
.section{
  padding-top:100px;
  padding-bottom:100px
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:45px;
  margin-bottom:42px
}
.section-heading .eyebrow{
  color:var(--teal-dark)
}
.section-intro{
  max-width:350px;
  font-size:14px;
  color:var(--muted);
  line-height:1.8
}
.section-intro .text-link{
  margin-top:12px;
  color:var(--ink)
}
.catalog-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px
}
.filter-list{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.filter{
  border:1px solid transparent;
  padding:10px 13px;
  background:transparent;
  font-size:11px;
  font-weight:600;
  border-radius:6px;
  white-space:nowrap;
  transition:background .2s,color .2s
}
.filter:hover{
  background:var(--light)
}
.filter.active{
  background:var(--navy);
  color:#fff
}
.filter span{
  font-size:9px;
  background:#ffffff20;
  padding:2px 5px;
  margin-left:5px;
  border-radius:4px
}
.search-box{
  display:flex;
  gap:8px;
  align-items:center;
  min-width:165px;
  max-width:195px;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:6px
}
.search-box input{
  border:0;
  background:transparent;
  min-width:0;
  width:100%;
  font-size:11px;
  color:var(--ink);
  outline-offset:6px
}
.search-box .icon{
  width:16px;
  height:16px;
  color:var(--muted)
}
.catalog-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:17px 0 21px;
  color:var(--muted);
  font-size:10px
}
.catalog-meta>span:last-child{
  display:flex;
  align-items:center;
  gap:8px
}
.catalog-meta .icon{
  width:14px;
  height:14px
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.product-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .3s,transform .3s,border-color .3s;
  background:#fff
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px #183a5f10;
  border-color:#b9d7dc
}
.product-art{
  border:0;
  padding:0;
  width:100%;
  text-align:left;
  height:320px;
  position:relative;
  background:radial-gradient(ellipse at 50% 55%,#265363,#163449 64%,#112d45);
  overflow:hidden;
  display:grid;
  place-items:center;
  cursor:pointer
}
.product-art:after{
  content:'';
  position:absolute;
  width:230px;
  height:230px;
  border:1px solid #ffffff0d;
  border-radius:50%;
  pointer-events:none;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
.product-art img{
  height:94%;
  width:95%;
  object-fit:contain;
  transition:transform .65s var(--ease);
  position:relative;
  z-index:1
}
.product-card:hover .product-art img{
  transform:scale(1.035)
}
.product-art.wide img{
  width:100%;
  height:94%
}
.product-index{
  position:absolute;
  top:19px;
  left:20px;
  color:#b6c9d1;
  font-size:9px;
  letter-spacing:.15em;
  z-index:2
}
.product-chip{
  position:absolute;
  top:17px;
  right:17px;
  font-size:8px;
  padding:5px 9px;
  background:#ffffff15;
  border:1px solid #ffffff13;
  color:#fff;
  letter-spacing:.04em;
  border-radius:4px;
  z-index:2
}
.product-chip.legacy{
  background:#a6ce39;
  color:#163550;
  border:0
}
.product-enlarge{
  position:absolute;
  bottom:15px;
  right:17px;
  background:#ffffff15;
  border:1px solid #ffffff30;
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  z-index:2
}
.product-enlarge .icon{
  width:15px;
  height:15px
}
.product-body{
  padding:23px 23px 0;
  flex:1;
  display:flex;
  flex-direction:column
}
.product-kicker{
  font-size:9px;
  color:var(--teal-dark);
  margin-bottom:7px;
  letter-spacing:.04em
}
.product-title-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start
}
.product-title-line h3{
  font-size:23px
}
.product-power{
  text-align:right;
  font-size:18px;
  letter-spacing:-.05em;
  font-weight:600;
  white-space:nowrap;
  line-height:1.15
}
.product-power span{
  display:block;
  font-size:9px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0;
  margin-top:5px
}
.product-power.long{
  font-size:13px;
  line-height:1.4
}
.product-description{
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin-top:15px
}
.product-highlights{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:19px;
  margin-bottom:22px
}
.product-highlights span{
  font-size:8px;
  border:1px solid var(--line);
  padding:4px 7px;
  border-radius:4px
}
.product-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:15px 0
}
.product-details{
  background:transparent;
  border:0;
  font-size:11px;
  font-weight:700;
  padding:5px 0;
  display:flex;
  align-items:center;
  gap:12px
}
.product-details .icon{
  width:15px;
  height:15px
}
.product-compare{
  border:1px solid var(--line);
  background:#fff;
  padding:6px 9px;
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:9px
}
.product-compare .icon{
  width:12px;
  height:12px
}
.product-compare[aria-pressed=true]{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}
.fine-print{
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  margin-top:25px;
  max-width:950px
}
.empty-state{
  text-align:center;
  padding:65px 20px;
  border:1px dashed var(--line);
  border-radius:15px
}
.empty-state strong{
  font-size:20px
}
.empty-state p{
  font-size:13px;
  margin:10px 0 20px;
  color:var(--muted)
}
.energy-section{
  background:#f2f6f6
}
.energy-experience{
  border-radius:25px;
  overflow:hidden;
  background:var(--navy);
  color:#fff;
  display:grid;
  grid-template-columns:310px 1fr;
  min-height:470px
}
.energy-sidebar{
  padding:35px 29px;
  position:relative;
  z-index:2;
  background:#183a5f
}
.dark-eyebrow{
  font-size:8px;
  letter-spacing:.13em;
  color:#9ebac7;
  display:block;
  margin-bottom:28px
}
.scenario-tabs{
  display:flex;
  flex-direction:column;
  gap:8px
}
.scenario{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:17px 13px;
  text-align:left;
  background:#ffffff04;
  border:1px solid #ffffff0f;
  border-radius:8px;
  color:#bed1da;
  transition:background .25s,border-color .25s
}
.scenario>.icon{
  width:22px;
  height:22px
}
.scenario>span:not(.scenario-arrow){
  font-size:12px;
  font-weight:600;
  line-height:1.5
}
.scenario small{
  display:block;
  font-size:9px;
  font-weight:400;
  color:#9ab5c1;
  margin-top:3px
}
.scenario-arrow{
  margin-left:auto;
  font-size:18px;
  opacity:.5
}
.scenario.active{
  border-color:#57ced399;
  background:#57ced316;
  color:#fff
}
.scenario.active>.icon{
  color:var(--lime)
}
.scenario.active .scenario-arrow{
  color:var(--lime);
  opacity:1
}
.energy-sidebar>p{
  font-size:11px;
  line-height:1.8;
  color:#a6bfcc;
  margin-top:25px;
  min-height:59px
}
.scenario-disclaimer{
  font-size:9px;
  color:#a2bac6;
  line-height:1.6;
  margin-top:25px
}
.scenario-disclaimer>span{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--teal);
  margin-right:6px
}
.flow-stage{
  position:relative;
  min-height:470px;
  background:radial-gradient(ellipse at 50% 48%,#1c4b5b,#0f293f 73%);
  overflow:hidden
}
.flow-wires{
  position:absolute;
  inset:50px 15px 25px;
  width:calc(100% - 30px);
  height:calc(100% - 75px);
  overflow:visible;
  fill:none
}
.wire-back{
  stroke:#c4e8eb19;
  stroke-width:2
}
.flow-path{
  stroke:var(--teal);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:7 12;
  animation:energyFlow 2s linear infinite;
  transition:opacity .3s
}
.solar-flow{
  stroke:var(--lime)
}
.grid-flow{
  stroke:#6dc3e3
}
.load-flow{
  stroke:var(--teal)
}
.battery-flow{
  stroke:var(--lime)
}
.battery-flow.charging{
  animation-direction:reverse
}
.flow-path.inactive{
  opacity:.12;
  animation-play-state:paused
}
.flow-node{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:1;
  text-align:center;
  transform:translate(-50%,-50%)
}
.node-icon{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  background:#183b50;
  border:1px solid #b4d5df30;
  border-radius:16px;
  box-shadow:0 10px 22px #0001;
  color:var(--lime);
  margin-bottom:10px
}
.node-icon>.icon{
  width:26px;
  height:26px
}
.flow-node.source-idle{
  opacity:.38
}
.flow-node small{
  font-size:8px;
  letter-spacing:.13em;
  color:#a6c4cf;
  line-height:1.2
}
.flow-node strong{
  font-size:23px;
  font-weight:500;
  margin-top:8px;
  line-height:1.1;
  letter-spacing:-.03em
}
.flow-node strong>span{
  font-size:10px;
  font-weight:400;
  color:#b5d0d8;
  letter-spacing:0
}
.solar-node{
  left:21.7%;
  top:28%
}
.grid-node{
  left:21.7%;
  top:73%
}
.grid-node .node-icon{
  color:#6dc3e3
}
.load-node{
  left:80.1%;
  top:51%
}
.load-node .node-icon{
  color:var(--teal);
  width:65px;
  height:65px;
  border-color:#57ced360
}
.load-node strong{
  font-size:31px
}
.flow-hub{
  position:absolute;
  top:51%;
  left:50%;
  width:84px;
  height:84px;
  transform:translate(-50%,-50%);
  background:#163f50;
  border:1px solid #57ced370;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 9px #57ced307,0 0 0 22px #57ced304;
  z-index:1;
  gap:4px
}
.flow-hub>.icon{
  color:var(--teal);
  width:22px;
  height:22px
}
.flow-hub>span{
  font-size:6px;
  letter-spacing:.12em;
  line-height:1.25;
  text-align:center;
  color:#b8d7df
}
.battery-node{
  top:87%;
  left:50%;
  flex-direction:row;
  gap:12px;
  background:#183c4e;
  border:1px solid #b4d5df25;
  border-radius:11px;
  padding:12px 17px;
  text-align:left;
  min-width:185px
}
.battery-node>.icon{
  color:var(--lime);
  width:26px;
  height:26px
}
.battery-node small{
  font-size:7px
}
.battery-node strong{
  display:block;
  font-size:18px;
  margin-top:5px
}
.battery-node strong span{
  font-size:8px
}
.flow-live{
  position:absolute;
  top:25px;
  right:27px;
  font-size:7px;
  letter-spacing:.11em;
  color:#a6c4cf;
  display:flex;
  align-items:center;
  gap:8px
}
.flow-live .status-dot{
  height:5px;
  width:5px;
  background:var(--teal)
}
.energy-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:40px
}
.energy-benefits>div{
  border-top:1px solid #d4e0e2;
  padding-top:20px
}
.energy-benefits span{
  font-size:9px;
  color:var(--teal-dark);
  display:block;
  margin-bottom:16px
}
.energy-benefits h3{
  font-size:19px;
  letter-spacing:-.03em
}
.energy-benefits p{
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:11px;
  max-width:300px
}
.spec-selector{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap
}
.spec-selector label{
  font-size:10px;
  color:var(--muted)
}
select{
  appearance:none;
  -webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%23143454' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line);
  border-radius:7px;
  padding:12px 40px 12px 14px;
  color:var(--ink);
  max-width:100%;
  font-size:12px;
  line-height:1.4
}
.spec-selector select{
  min-width:180px;
  margin-right:20px
}
.spec-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px
}
.spec-table,.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:11px;
  line-height:1.6
}
.spec-table th,.spec-table td{
  padding:16px 22px;
  text-align:left;
  vertical-align:top;
  min-width:180px;
  border-bottom:1px solid #e8edee
}
.spec-table thead th{
  background:var(--navy);
  color:#fff;
  font-size:13px;
  padding-block:20px
}
.spec-table thead th:first-child{
  font-size:10px;
  color:#bed1da;
  font-weight:400
}
.spec-table tbody th{
  font-weight:500;
  color:var(--muted);
  width:28%;
  background:#f6f8f8;
  position:sticky;
  left:0;
  z-index:1
}
.spec-table tr:nth-child(even) td{
  background:#fbfcfc
}
.spec-table tr:last-child>*{
  border-bottom:0
}
.spec-note{
  background:#f1f7f7;
  border-left:3px solid var(--teal);
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  padding:17px 21px;
  border-radius:0 8px 8px 0;
  margin-top:20px
}
.source-details{
  margin-top:25px;
  border-block:1px solid var(--line);
  font-size:11px;
  color:var(--muted)
}
.source-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  color:var(--ink);
  font-weight:600
}
.source-details summary::-webkit-details-marker{
  display:none
}
.source-details summary .icon{
  width:16px;
  height:16px
}
.source-details[open] summary .icon{
  transform:rotate(45deg)
}
.source-details>div{
  padding:0 0 23px;
  max-width:950px
}
.source-details p+p{
  margin-top:12px
}
.source-links{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:18px
}
.source-links a{
  color:var(--teal-dark);
  text-decoration:underline;
  text-underline-offset:4px
}
.project-section{
  background:#eaf4f3;
  position:relative;
  overflow:hidden
}
.project-section:before{
  content:'';
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  border:1px solid #b4d1cd55;
  left:-420px;
  bottom:-360px;
  box-shadow:0 0 0 70px #b4d1cd0a,0 0 0 140px #b4d1cd08;
  pointer-events:none
}
.project-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  position:relative
}
.project-copy .eyebrow{
  color:var(--teal-dark)
}
.project-copy h2{
  font-size:clamp(36px,3.7vw,55px)
}
.project-copy>p:not(.eyebrow){
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  max-width:370px;
  margin-top:23px
}
.contact-card{
  margin-top:38px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.contact-card>img{
  width:140px;
  mix-blend-mode:multiply;
  margin-bottom:20px
}
.contact-card>a{
  font-size:15px;
  margin-bottom:8px;
  min-width:200px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.contact-card>a span{
  color:var(--teal-dark)
}
.contact-card small{
  font-size:9px;
  color:var(--muted);
  margin-top:16px
}
.project-form{
  background:#fff;
  border:1px solid #dce8e7;
  box-shadow:0 12px 40px #183a5f05;
  padding:32px;
  border-radius:20px;
  align-self:start
}
.form-top{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:8px;
  color:var(--muted);
  letter-spacing:.08em;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:24px
}
.form-step{
  color:var(--teal-dark);
  font-weight:700
}
.project-form label{
  display:block;
  font-size:10px;
  margin-bottom:8px;
  font-weight:600;
  line-height:1.5
}
.project-form label>span{
  font-weight:400;
  color:var(--muted);
  font-size:9px;
  margin-left:5px
}
.project-form input:not([type=checkbox]),.project-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  font-size:11px;
  padding:12px;
  min-height:43px;
  background-color:#fcfdfd
}
.project-form select{
  padding-right:29px
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
  margin-top:20px
}
.unit-input{
  display:flex;
  position:relative;
  align-items:center
}
.unit-input input{
  padding-right:35px!important
}
.unit-input>span{
  position:absolute;
  right:12px;
  font-size:10px;
  color:var(--muted)
}
.form-options{
  border:0;
  padding:0;
  margin:23px 0 0
}
.form-options legend{
  font-size:10px;
  font-weight:600;
  margin-bottom:10px
}
.form-options label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:400;
  margin-right:17px
}
.form-options input{
  accent-color:var(--teal-dark);
  width:14px;
  height:14px;
  margin:0
}
.form-actions{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:23px;
  flex-wrap:wrap
}
.form-actions .button{
  font-size:11px;
  padding:14px 16px;
  gap:16px;
  min-height:46px
}
.form-actions .button .icon{
  width:17px;
  height:17px
}
.download-brief{
  background:transparent;
  border:0;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 0
}
.download-brief>.icon{
  width:16px;
  height:16px
}
.form-help{
  font-size:9px;
  color:var(--muted);
  line-height:1.7;
  margin-top:17px
}
.form-feedback{
  margin-top:15px;
  padding:12px;
  font-size:10px;
  border-radius:6px;
  background:#f2f7eb;
  color:var(--navy)
}
.form-feedback a{
  display:block;
  text-decoration:underline;
  margin-top:7px;
  word-break:break-word
}
footer{
  background:#102d48;
  color:#fff;
  padding:50px 0 25px
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:35px;
  border-bottom:1px solid #ffffff20
}
.footer-top>div{
  display:flex;
  align-items:center;
  gap:25px
}
.footer-top strong{
  font-size:20px;
  letter-spacing:-.03em
}
.footer-top>div>span{
  color:#b9ccd4;
  font-size:11px
}
.footer-top>a{
  font-size:10px;
  display:flex;
  align-items:center;
  gap:20px
}
.footer-top>a>span{
  color:var(--lime);
  font-size:21px
}
.footer-bottom{
  display:flex;
  gap:25px;
  justify-content:space-between;
  padding-top:22px;
  font-size:8px;
  color:#91adbc;
  letter-spacing:.015em
}
footer a:hover{
  color:var(--lime)
}
.compare-tray{
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(1000px,calc(100% - 40px));
  padding:15px 18px;
  background:#fff;
  box-shadow:0 12px 80px #183a5f30;
  border:1px solid var(--line);
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  z-index:70
}
.compare-tray>div{
  display:flex;
  align-items:center;
  gap:14px
}
.compare-tray>div:first-child>.icon{
  color:var(--teal-dark);
  width:20px;
  height:20px
}
.compare-tray #compareCount{
  font-size:11px;
  white-space:nowrap;
  font-weight:600
}
.compare-tray #compareNames{
  display:flex;
  gap:5px;
  flex-wrap:wrap
}
.compare-name{
  font-size:9px;
  background:var(--light);
  border:0;
  padding:4px 8px;
  border-radius:4px;
  display:flex;
  align-items:center;
  gap:4px
}
.compare-name .icon{
  height:11px;
  width:11px
}
.tray-clear{
  font-size:10px;
  background:none;
  border:0;
  padding:8px;
  color:var(--muted)
}
body.has-comparison footer{
  padding-bottom:125px
}
.toast{
  position:fixed;
  left:50%;
  bottom:110px;
  background:var(--navy);
  color:#fff;
  border-radius:7px;
  font-size:12px;
  padding:12px 20px;
  z-index:140;
  max-width:calc(100% - 35px);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,10px);
  transition:opacity .2s,transform .2s
}
.toast.visible{
  opacity:1;
  transform:translate(-50%,0)
}
dialog{
  border:0;
  padding:0;
  max-height:calc(100dvh - 60px);
  color:var(--ink);
  border-radius:20px;
  box-shadow:0 30px 130px #0003;
  overflow:auto
}
dialog::backdrop{
  background:#09273edb;
  backdrop-filter:blur(8px)
}
.dialog-close{
  position:absolute;
  right:18px;
  top:18px;
  z-index:5;
  box-shadow:0 5px 15px #183a5f10
}
.product-dialog{
  width:min(1050px,calc(100% - 36px))
}
.dialog-product-layout{
  display:grid;
  grid-template-columns:38% 62%
}
.dialog-art{
  background:radial-gradient(ellipse at 50% 45%,#285c68,#122f46 70%);
  padding:50px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative
}
.dialog-art img{
  width:100%;
  max-height:650px;
  object-fit:contain
}
.dialog-art small{
  font-size:8px;
  color:#c1d4da;
  position:absolute;
  bottom:20px;
  left:20px
}
.dialog-content{
  padding:48px 40px
}
.dialog-content .eyebrow{
  font-size:9px;
  color:var(--teal-dark);
  margin-bottom:12px
}
.dialog-content h2{
  font-size:42px
}
.dialog-content>.dialog-description{
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:18px
}
.dialog-variant{
  display:block;
  margin-top:24px;
  font-size:10px;
  color:var(--muted)
}
.dialog-variant select{
  display:block;
  width:100%;
  margin-top:7px
}
.dialog-specs{
  margin:20px 0 0;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  font-size:10px;
  line-height:1.6
}
.dialog-specs dt,.dialog-specs dd{
  padding:10px 0;
  border-bottom:1px solid var(--line);
  margin:0
}
.dialog-specs dt{
  color:var(--muted);
  padding-right:12px
}
.dialog-specs dd{
  font-weight:500
}
.dialog-note{
  background:var(--light);
  border-left:2px solid var(--teal);
  padding:13px 15px;
  font-size:10px;
  color:var(--muted);
  margin-top:20px
}
.dialog-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:23px
}
.dialog-actions .button{
  font-size:11px;
  gap:10px;
  padding:13px 14px;
  min-height:44px
}
.compare-dialog{
  width:min(1180px,calc(100% - 36px));
  padding:38px
}
.compare-dialog-header{
  padding-right:40px
}
.compare-dialog-header h2{
  font-size:37px
}
.compare-dialog-header>.eyebrow{
  color:var(--teal-dark);
  margin-bottom:15px
}
.compare-dialog-header>p:not(.eyebrow){
  font-size:12px;
  color:var(--muted);
  margin-top:16px
}
.compare-dialog-header>.text-link{
  font-size:11px;
  margin-top:12px
}
.compare-table-wrap{
  overflow:auto;
  margin-top:23px;
  border:1px solid var(--line);
  border-radius:10px
}
.compare-table th,.compare-table td{
  padding:15px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  min-width:210px
}
.compare-table th:first-child{
  min-width:140px;
  width:19%;
  background:var(--light);
  color:var(--muted);
  font-weight:500;
  font-size:10px;
  position:sticky;
  left:0;
  z-index:1
}
.compare-table td:last-child,.compare-table th:last-child{
  border-right:0
}
.compare-table tr:last-child>*{
  border-bottom:0
}
.compare-table thead td{
  background:#f3f7f7
}
.compare-table thead img{
  height:115px;
  object-fit:contain;
  width:100%;
  background:radial-gradient(ellipse,#265363,#183a5f);
  border-radius:9px;
  padding:3px;
  margin-bottom:15px
}
.compare-table thead strong{
  font-size:17px;
  line-height:1.2;
  display:block
}
.compare-table thead select{
  font-size:10px;
  width:100%;
  margin-top:10px;
  padding-block:8px
}
.compare-table thead small{
  display:block;
  color:var(--teal-dark);
  font-size:8px;
  margin-bottom:8px
}
.compare-table tbody tr:nth-child(odd) td{
  background:#fbfcfc
}
.no-js{
  padding:30px;
  background:var(--navy);
  color:#fff;
  text-align:center
}
.no-js a{
  text-decoration:underline
}
.reveal{
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.js-motion .reveal.waiting{
  opacity:0;
  transform:translateY(22px)
}
.reveal.visible{
  opacity:1;
  transform:translateY(0)
}
@keyframes productFloat{
  0%,100%{
    transform:translateY(0) rotate(-.3deg)
  }
  50%{
    transform:translateY(-9px) rotate(.3deg)
  }
  
}
@keyframes energyFlow{
  to{
    stroke-dashoffset:-38
  }
  
}
@media(min-width:1450px){
  .hero-visual{
    height:660px
  }
  .hero-product{
    height:590px
  }
  .hero{
    padding-top:55px
  }
  .hero-copy{
    padding-bottom:60px
  }
  
}
@media(max-width:1150px){
  .container{
    width:calc(100% - 64px)
  }
  .nav-shell{
    gap:20px
  }
  .main-nav{
    gap:20px
  }
  .nav-cta{
    font-size:10px!important;
    gap:10px!important
  }
  .hero{
    gap:0 30px
  }
  .hero h1{
    font-size:80px
  }
  .hero-visual{
    height:600px
  }
  .hero-product{
    height:535px
  }
  .hero-actions{
    gap:15px
  }
  .hero-actions .button{
    font-size:12px;
    gap:16px
  }
  .hero-actions .text-link{
    font-size:11px
  }
  .voltage-badge{
    top:160px;
    right:12px;
    padding:10px
  }
  .visual-caption strong{
    font-size:18px
  }
  .visual-caption>span{
    font-size:15px
  }
  .hero-metrics strong{
    font-size:31px
  }
  .hero-metrics>div{
    gap:12px
  }
  .hero-metrics p{
    font-size:10px
  }
  .hero-metrics p small{
    font-size:8px
  }
  .hero-metrics strong span{
    font-size:12px
  }
  .catalog-controls{
    align-items:flex-start;
    flex-direction:column
  }
  .search-box{
    width:100%;
    max-width:100%
  }
  .filter-list{
    gap:5px
  }
  .filter{
    padding:9px 12px
  }
  .product-grid{
    gap:18px
  }
  .product-art{
    height:280px
  }
  .product-body{
    padding:20px 18px 0
  }
  .product-title-line h3{
    font-size:20px
  }
  .product-power{
    font-size:16px
  }
  .product-power.long{
    font-size:12px
  }
  .product-highlights span{
    font-size:7px
  }
  .energy-experience{
    grid-template-columns:280px 1fr
  }
  .energy-sidebar{
    padding:30px 20px
  }
  .flow-node strong{
    font-size:21px
  }
  .project-layout{
    gap:50px
  }
  .project-form{
    padding:25px
  }
  .form-grid{
    gap:12px
  }
  .spec-table th,.spec-table td{
    padding:14px 17px
  }
  
}
@media(max-width:900px){
  .main-nav{
    gap:17px
  }
  .main-nav a{
    font-size:10px
  }
  .nav-cta{
    display:none!important
  }
  .hero h1{
    font-size:68px
  }
  .hero-visual{
    height:550px
  }
  .hero-product{
    height:495px
  }
  .hero-description{
    font-size:12px
  }
  .hero-lead{
    font-size:19px
  }
  .hero-trust{
    font-size:9px
  }
  .hero-trust small{
    font-size:8px
  }
  .hero-actions .text-link{
    display:none
  }
  .visual-badge{
    right:10px;
    top:140px;
    gap:8px
  }
  .visual-badge strong{
    font-size:11px
  }
  .visual-badge small{
    font-size:6px
  }
  .badge-icon{
    width:25px;
    height:25px
  }
  .voltage-badge{
    padding:8px
  }
  .visual-caption{
    left:20px;
    right:20px;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    bottom:40px
  }
  .visual-caption strong{
    font-size:17px
  }
  .visual-caption>span{
    font-size:13px
  }
  .hero-art-note{
    left:20px
  }
  .hero-metrics>div{
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
    padding-left:25px;
    justify-content:center!important
  }
  .hero-metrics>div:first-child{
    padding-left:0
  }
  .hero-metrics p{
    font-size:11px
  }
  .hero-metrics p small{
    font-size:8px
  }
  .hero-metrics strong{
    font-size:34px
  }
  .section{
    padding-block:75px
  }
  .section-heading{
    gap:30px
  }
  .section-intro{
    max-width:280px;
    font-size:12px
  }
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .product-art{
    height:300px
  }
  .product-title-line h3{
    font-size:23px
  }
  .product-power{
    font-size:19px
  }
  .product-power.long{
    font-size:13px
  }
  .product-highlights span{
    font-size:8px
  }
  .energy-experience{
    grid-template-columns:1fr
  }
  .energy-sidebar{
    padding:25px 28px;
    display:grid;
    grid-template-columns:1fr
  }
  .scenario-tabs{
    flex-direction:row
  }
  .scenario{
    padding:13px 12px;
    gap:10px
  }
  .scenario>span:not(.scenario-arrow){
    font-size:11px
  }
  .scenario small{
    font-size:8px
  }
  .scenario-arrow{
    display:none
  }
  .dark-eyebrow{
    margin-bottom:17px
  }
  .energy-sidebar>p{
    margin-top:17px;
    min-height:0
  }
  .scenario-disclaimer{
    margin-top:12px;
    font-size:8px
  }
  .scenario-disclaimer br{
    display:none
  }
  .flow-stage{
    min-height:430px
  }
  .flow-wires{
    inset:30px 15px 25px;
    height:calc(100% - 55px)
  }
  .flow-live{
    top:17px
  }
  .flow-node strong{
    font-size:24px
  }
  .flow-node strong span{
    font-size:11px
  }
  .energy-benefits{
    gap:25px
  }
  .energy-benefits h3{
    font-size:17px
  }
  .energy-benefits p{
    font-size:11px
  }
  .project-layout{
    grid-template-columns:1fr;
    gap:35px
  }
  .project-copy{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:0 35px
  }
  .project-copy>.eyebrow,.project-copy>h2,.project-copy>p{
    grid-column:1
  }
  .project-copy .contact-card{
    grid-column:2;
    grid-row:2/4;
    align-self:start;
    margin-top:8px
  }
  .project-copy>p:not(.eyebrow){
    font-size:12px
  }
  .project-copy h2{
    font-size:39px
  }
  .project-form{
    padding:30px
  }
  .form-top{
    font-size:9px
  }
  .project-form input:not([type=checkbox]),.project-form select{
    font-size:12px
  }
  .project-form label{
    font-size:11px
  }
  .form-actions .button{
    font-size:12px
  }
  .footer-bottom{
    gap:15px;
    font-size:7px
  }
  .compare-tray #compareNames{
    display:none
  }
  .dialog-product-layout{
    grid-template-columns:33% 67%
  }
  .dialog-content{
    padding:45px 28px
  }
  .dialog-content h2{
    font-size:35px
  }
  .dialog-specs{
    font-size:9px
  }
  .dialog-art img{
    max-height:450px
  }
  
}
@media(max-width:760px) and (min-width:601px){
  .hero{
    grid-template-columns:1fr
  }
  .hero-copy{
    padding:20px 0 35px
  }
  .hero h1{
    font-size:82px
  }
  .hero-description{
    max-width:490px
  }
  .hero-visual{
    height:540px
  }
  .hero-product{
    height:510px;
    top:0
  }
  .visual-caption{
    flex-direction:row;
    align-items:flex-end;
    bottom:42px
  }
  .visual-caption strong{
    font-size:22px
  }
  .visual-caption>span{
    font-size:18px
  }
  .hero-metrics{
    margin-top:26px
  }
  .hero-actions .text-link{
    display:flex
  }
  .hero-trust{
    margin-top:27px
  }
  .voltage-badge{
    top:155px;
    right:25px;
    padding:12px 15px
  }
  .visual-badge strong{
    font-size:14px
  }
  .visual-badge small{
    font-size:8px
  }
  .section-heading{
    display:block
  }
  .section-intro{
    max-width:100%;
    margin-top:24px
  }
  .product-title-line h3{
    font-size:21px
  }
  .product-power{
    font-size:16px
  }
  .product-power.long{
    font-size:12px
  }
  .product-highlights span{
    font-size:7px
  }
  .product-art{
    height:270px
  }
  
}
@media(max-width:600px){
  html{
    scroll-padding-top:85px
  }
  .container{
    width:calc(100% - 36px)
  }
  .nav-shell{
    height:74px;
    gap:14px
  }
  .brand img{
    width:120px
  }
  .menu-toggle{
    display:flex;
    width:38px;
    height:38px
  }
  .main-nav{
    display:none;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    background:#fff;
    padding:15px 22px 22px;
    box-shadow:0 15px 25px #183a5f0c;
    border-bottom:1px solid var(--line);
    align-items:stretch
  }
  .main-nav.open{
    display:flex;
    flex-direction:column;
    gap:2px
  }
  .main-nav a{
    font-size:13px;
    padding:14px 0
  }
  .hero{
    padding-top:25px;
    display:block
  }
  .hero-copy{
    padding:12px 0 30px
  }
  .hero .eyebrow{
    font-size:9px;
    margin-bottom:23px
  }
  .hero h1{
    font-size:clamp(62px,15vw,87px);
    line-height:.99
  }
  .hero-lead{
    font-size:20px;
    line-height:1.3;
    margin-top:23px
  }
  .hero-description{
    font-size:12px;
    max-width:100%;
    margin-top:15px
  }
  .hero-actions{
    margin-top:23px
  }
  .hero-actions .button{
    font-size:12px;
    padding:15px 17px;
    gap:28px
  }
  .hero-actions .text-link{
    display:flex;
    font-size:10px
  }
  .hero-trust{
    margin-top:25px;
    font-size:10px
  }
  .hero-trust small{
    font-size:8px
  }
  .hero-visual{
    height:520px;
    border-radius:21px
  }
  .hero-product{
    height:485px;
    top:5px
  }
  .hero-visual-label{
    top:21px;
    left:21px;
    font-size:7px
  }
  .hero-big-number{
    top:60px;
    left:18px;
    font-size:200px
  }
  .voltage-badge{
    top:155px;
    right:15px;
    padding:10px 12px
  }
  .visual-badge strong{
    font-size:12px
  }
  .visual-badge small{
    font-size:7px
  }
  .visual-caption{
    flex-direction:row;
    align-items:flex-end;
    left:23px;
    right:23px;
    bottom:39px
  }
  .visual-caption strong{
    font-size:19px
  }
  .visual-caption>span{
    font-size:15px
  }
  .hero-art-note{
    left:23px;
    font-size:7px
  }
  .hero-metrics{
    margin-top:27px;
    padding:23px 0;
    gap:12px
  }
  .hero-metrics>div{
    padding-left:0;
    border:0;
    gap:9px
  }
  .hero-metrics strong{
    font-size:25px;
    letter-spacing:-.05em
  }
  .hero-metrics strong span{
    font-size:10px
  }
  .hero-metrics p{
    font-size:9px;
    line-height:1.4
  }
  .hero-metrics p small{
    font-size:7px;
    margin-top:6px
  }
  .capability-strip>.container{
    display:grid;
    grid-template-columns:1fr 15px 1fr;
    gap:12px;
    font-size:8px;
    letter-spacing:.1em;
    padding-block:19px
  }
  .capability-strip .strip-cross:nth-child(4){
    display:none
  }
  .capability-strip span:nth-child(5){
    grid-column:1
  }
  .capability-strip .strip-cross{
    font-size:18px
  }
  .capability-strip span:nth-child(3),.capability-strip span:last-child{
    text-align:right
  }
  .section{
    padding-block:58px
  }
  .section-heading{
    display:block;
    margin-bottom:30px
  }
  .section-heading .eyebrow{
    font-size:9px;
    margin-bottom:17px
  }
  h2{
    font-size:39px;
    line-height:1.08
  }
  .section-intro{
    margin-top:23px;
    max-width:100%;
    font-size:12px;
    line-height:1.8
  }
  .catalog-controls{
    padding-bottom:15px;
    gap:15px
  }
  .filter-list{
    gap:6px;
    flex-wrap:nowrap;
    overflow:auto;
    max-width:100%;
    padding-bottom:5px
  }
  .filter{
    font-size:10px;
    padding:10px 11px
  }
  .search-box{
    padding:10px 12px
  }
  .search-box input{
    font-size:12px
  }
  .catalog-meta{
    font-size:9px;
    padding:16px 0
  }
  .catalog-meta>span:last-child{
    font-size:8px;
    max-width:205px;
    line-height:1.5
  }
  .catalog-meta .icon{
    width:14px;
    height:14px
  }
  .product-grid{
    grid-template-columns:1fr;
    gap:20px
  }
  .product-art{
    height:335px
  }
  .product-body{
    padding:23px 23px 0
  }
  .product-title-line h3{
    font-size:26px
  }
  .product-power{
    font-size:22px
  }
  .product-power.long{
    font-size:15px
  }
  .product-kicker{
    font-size:10px
  }
  .product-description{
    font-size:12px;
    line-height:1.8
  }
  .product-highlights{
    margin-top:20px;
    margin-bottom:24px;
    gap:6px
  }
  .product-highlights span{
    font-size:9px;
    padding:5px 7px
  }
  .product-details{
    font-size:12px
  }
  .product-compare{
    font-size:10px;
    padding:8px
  }
  .product-actions{
    padding:17px 0
  }
  .product-chip{
    font-size:9px
  }
  .fine-print{
    font-size:9px;
    margin-top:22px
  }
  .energy-experience{
    border-radius:19px
  }
  .energy-sidebar{
    padding:24px 20px
  }
  .dark-eyebrow{
    font-size:8px;
    margin-bottom:20px
  }
  .scenario-tabs{
    gap:5px
  }
  .scenario{
    flex-direction:column;
    text-align:center;
    padding:12px 5px;
    gap:8px;
    align-items:center;
    flex:1
  }
  .scenario .icon{
    width:19px;
    height:19px
  }
  .scenario>span:not(.scenario-arrow){
    font-size:9px;
    line-height:1.4
  }
  .scenario small{
    display:none
  }
  .energy-sidebar>p{
    font-size:11px;
    line-height:1.7;
    min-height:57px
  }
  .scenario-disclaimer{
    font-size:8px;
    line-height:1.6
  }
  .flow-stage{
    min-height:375px
  }
  .flow-wires{
    inset:25px 0 25px;
    width:100%;
    height:calc(100% - 50px)
  }
  .flow-live{
    font-size:6px;
    top:9px;
    right:16px
  }
  .flow-live .status-dot{
    width:4px;
    height:4px
  }
  .node-icon{
    width:43px;
    height:43px;
    border-radius:12px;
    margin-bottom:9px
  }
  .node-icon>.icon{
    width:21px;
    height:21px
  }
  .flow-node small{
    font-size:6px;
    letter-spacing:.08em
  }
  .flow-node strong{
    font-size:20px;
    margin-top:7px
  }
  .flow-node strong>span{
    font-size:9px
  }
  .solar-node{
    top:28%
  }
  .grid-node{
    top:72%
  }
  .load-node{
    left:80%;
    top:50%
  }
  .load-node .node-icon{
    width:50px;
    height:50px
  }
  .load-node strong{
    font-size:22px
  }
  .flow-hub{
    width:60px;
    height:60px;
    top:50%;
    box-shadow:0 0 0 7px #57ced307,0 0 0 17px #57ced304
  }
  .flow-hub>.icon{
    width:18px;
    height:18px
  }
  .flow-hub>span{
    font-size:5px
  }
  .battery-node{
    top:87%;
    padding:11px 13px;
    min-width:162px;
    gap:9px
  }
  .battery-node>.icon{
    width:22px;
    height:22px
  }
  .battery-node strong{
    font-size:16px;
    margin-top:5px
  }
  .battery-node strong span{
    font-size:7px
  }
  .battery-node small{
    font-size:6px
  }
  .energy-benefits{
    grid-template-columns:1fr;
    gap:22px;
    margin-top:30px
  }
  .energy-benefits>div{
    display:grid;
    grid-template-columns:24px 1fr;
    padding-top:18px;
    gap:9px 14px
  }
  .energy-benefits span{
    grid-column:1;
    grid-row:1/3;
    margin:0;
    padding-top:4px
  }
  .energy-benefits h3{
    font-size:18px;
    grid-column:2
  }
  .energy-benefits p{
    font-size:11px;
    grid-column:2;
    margin:0;
    max-width:100%
  }
  .spec-selector{
    display:grid;
    grid-template-columns:85px 1fr;
    gap:12px
  }
  .spec-selector label{
    font-size:10px
  }
  .spec-selector select{
    min-width:0;
    width:100%;
    margin:0;
    font-size:12px
  }
  .spec-table th,.spec-table td{
    padding:13px 15px;
    min-width:180px;
    font-size:10px
  }
  .spec-table thead th{
    font-size:12px
  }
  .spec-table tbody th{
    min-width:145px;
    font-size:9px
  }
  .spec-note{
    font-size:10px;
    padding:14px 16px
  }
  .source-details{
    font-size:10px
  }
  .source-details summary{
    font-size:10px;
    gap:15px
  }
  .source-links{
    gap:12px 20px
  }
  .project-layout{
    gap:30px
  }
  .project-copy{
    display:block
  }
  .project-copy h2{
    font-size:38px
  }
  .project-copy>p:not(.eyebrow){
    font-size:12px
  }
  .project-copy .contact-card{
    margin-top:28px
  }
  .contact-card>img{
    width:125px;
    margin-bottom:15px
  }
  .contact-card>a{
    font-size:14px
  }
  .contact-card small{
    font-size:8px;
    margin-top:10px
  }
  .project-form{
    padding:23px 19px;
    border-radius:16px
  }
  .form-top{
    font-size:7px;
    padding-bottom:18px;
    margin-bottom:22px
  }
  .form-grid{
    grid-template-columns:1fr;
    gap:17px;
    margin-top:17px
  }
  .project-form label{
    font-size:10px
  }
  .project-form input:not([type=checkbox]),.project-form select{
    font-size:12px;
    min-height:46px
  }
  .form-options label{
    font-size:10px;
    margin-right:13px;
    margin-bottom:9px
  }
  .form-actions{
    gap:12px;
    margin-top:15px
  }
  .form-actions .button{
    font-size:11px;
    gap:12px;
    padding:13px
  }
  .download-brief{
    font-size:10px
  }
  .form-help{
    font-size:9px
  }
  footer{
    padding-top:37px
  }
  .footer-top{
    align-items:flex-start;
    gap:12px;
    padding-bottom:25px
  }
  .footer-top>div{
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .footer-top strong{
    font-size:18px
  }
  .footer-top>div>span{
    font-size:10px
  }
  .footer-top>a{
    font-size:9px;
    gap:9px
  }
  .footer-bottom{
    flex-direction:column;
    gap:8px;
    padding-top:20px;
    font-size:8px
  }
  .compare-tray{
    bottom:12px;
    width:calc(100% - 22px);
    padding:12px;
    gap:10px
  }
  .compare-tray>div{
    gap:7px
  }
  .compare-tray>div:first-child>.icon{
    width:17px;
    height:17px
  }
  .compare-tray #compareCount{
    font-size:9px
  }
  .compare-tray .button{
    font-size:9px;
    gap:8px;
    padding:10px;
    min-height:38px
  }
  .compare-tray .button>.icon{
    width:14px;
    height:14px
  }
  .tray-clear{
    font-size:9px;
    padding:5px
  }
  .compare-tray>div:last-child{
    gap:4px
  }
  .toast{
    bottom:90px;
    font-size:11px
  }
  .product-dialog{
    width:calc(100% - 20px);
    max-height:calc(100dvh - 25px);
    border-radius:15px
  }
  .dialog-product-layout{
    grid-template-columns:1fr
  }
  .dialog-art{
    min-height:275px;
    max-height:330px;
    padding:20px 30px
  }
  .dialog-art img{
    height:275px;
    max-height:275px;
    width:100%
  }
  .dialog-art small{
    font-size:7px;
    bottom:12px;
    left:18px
  }
  .dialog-content{
    padding:28px 22px
  }
  .dialog-content h2{
    font-size:35px
  }
  .dialog-content>.dialog-description{
    font-size:12px
  }
  .dialog-close{
    right:12px;
    top:12px;
    width:36px;
    height:36px
  }
  .dialog-specs{
    font-size:10px;
    grid-template-columns:1fr 1.25fr
  }
  .dialog-note{
    font-size:10px
  }
  .dialog-actions .button{
    font-size:10px
  }
  .compare-dialog{
    width:calc(100% - 20px);
    max-height:calc(100dvh - 25px);
    border-radius:15px;
    padding:27px 18px
  }
  .compare-dialog-header{
    padding-right:20px
  }
  .compare-dialog-header h2{
    font-size:31px
  }
  .compare-dialog-header>.eyebrow{
    font-size:8px
  }
  .compare-dialog-header>p:not(.eyebrow){
    font-size:10px
  }
  .compare-dialog-header>.text-link{
    font-size:10px
  }
  .compare-table{
    font-size:10px
  }
  .compare-table th,.compare-table td{
    min-width:190px;
    padding:13px
  }
  .compare-table th:first-child{
    min-width:125px;
    font-size:9px
  }
  .compare-table thead strong{
    font-size:15px
  }
  .compare-table thead img{
    height:95px
  }
  
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .js-motion .reveal.waiting{
    opacity:1;
    transform:none
  }
  
}
@media print{
  .header,.hero-visual,.hero-actions,.hero-trust,.capability-strip,.catalog-controls,.catalog-meta,.product-art,.product-actions,.energy-section,.project-section,.compare-tray,.scroll-progress,.toast,dialog,.source-details,.spec-selector,.footer-top>a{
    display:none!important
  }
  .container{
    width:100%
  }
  .hero{
    display:block;
    padding-top:0
  }
  .hero h1{
    font-size:40px
  }
  .hero-copy{
    padding:10px 0
  }
  .hero-description{
    max-width:100%
  }
  .hero-metrics{
    margin:15px 0;
    padding:15px 0
  }
  .section{
    padding:25px 0
  }
  .section-heading{
    margin-bottom:20px
  }
  h2{
    font-size:28px
  }
  .product-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .product-card{
    break-inside:avoid;
    border-radius:0;
    box-shadow:none;
    transform:none
  }
  .product-body{
    padding:15px
  }
  .product-title-line h3{
    font-size:19px
  }
  .product-description{
    font-size:10px
  }
  .spec-table th,.spec-table td{
    padding:8px;
    font-size:9px;
    min-width:0
  }
  .spec-table-wrap{
    overflow:visible
  }
  .js-motion .reveal.waiting{
    opacity:1;
    transform:none
  }
  .spec-table tbody th{
    position:static
  }
  .footer-bottom{
    color:#555
  }
  footer{
    background:#fff;
    color:#111;
    padding:20px 0
  }
  .footer-top strong{
    font-size:16px
  }
  
}
/* CYEB GREEN V2 — aligned with green.cyeb.hu */
:root {
   --navy:#183A5F;
   --ink:#183A5F;
   --lime:#A6CE39;
   --teal:#57CED3;
   --warm-gray:#868372;
   --green-dark:#6F8E2E;
   --deep:#1C1C37;
   --radius:14px;
   
}
body {
   font-family:'Roboto',Arial,sans-serif;
   
}
h1,h2,h3 {
   letter-spacing:-.035em;
   
}
h2 span {
   color:var(--green-dark);
   
}
.main-nav {
   gap:27px;
   
}
.main-nav a {
   font-family:'Poppins','Roboto',Arial,sans-serif;
   font-size:11px;
   font-weight:500;
   
}
.nav-shell {
   height:86px;
   
}
.brand img {
   width:150px;
   
}
.button {
   background:var(--lime);
   border-color:var(--lime);
   color:var(--navy);
   font-weight:600;
   border-radius:7px;
   
}
.button:hover {
   background:#95BB2E;
   border-color:#95BB2E;
   
}
.button.secondary {
   border-color:var(--navy);
   background:#ffffffc9;
   color:var(--navy);
   
}
.button.secondary:hover {
   background:#fff;
   
}
.eyebrow {
   color:var(--green-dark);
   font-size:10px;
   letter-spacing:.11em;
   
}
.text-link:hover {
   color:var(--green-dark);
   
}
.hero-stage {
   position:relative;
   isolation:isolate;
   overflow:hidden;
   background:#f3f8f5;
   
}
.hero-scene {
   position:absolute;
   inset:0;
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:center right;
   z-index:-3;
   
}
.hero-wash {
   position:absolute;
   inset:0;
   z-index:-2;
   background:linear-gradient(90deg,#fff 0%,#fffffff2 30%,#ffffff7d 56%,#ffffff05 100%),linear-gradient(0deg,#f4faf7c9,transparent 45%);
   
}
.hero-v2 {
   padding-top:0;
   grid-template-columns:1.08fr 1fr;
   gap:0;
   position:relative;
   align-items:center;
   
}
.hero-v2 .hero-copy {
   padding:55px 0 43px;
   position:relative;
   z-index:4;
   
}
.hero-v2 .brand-line {
   color:var(--navy);
   font-size:13px;
   letter-spacing:0;
   font-weight:400;
   margin-bottom:22px;
   
}
.hero-v2 h1 {
   font-size:clamp(44px,4.5vw,65px);
   line-height:1.05;
   font-weight:700;
   letter-spacing:-.045em;
   white-space:nowrap;
   
}
.hero-v2 h1 span {
   display:inline-block;
   color:var(--green-dark);
   font-size:.83em;
   
}
.hero-v2 .hero-lead {
   font-size:23px;
   line-height:1.4;
   margin-top:23px;
   font-weight:400;
   
}
.hero-v2 .hero-description {
   font-size:14px;
   max-width:420px;
   color:#536c7c;
   margin-top:17px;
   
}
.hero-v2 .hero-actions {
   margin-top:28px;
   gap:14px;
   
}
.hero-v2 .hero-actions .button {
   font-size:12px;
   padding:15px 19px;
   gap:17px;
   
}
.integrated-visual {
   height:540px;
   border-radius:0;
   background:none;
   color:var(--navy);
   overflow:visible;
   isolation:auto;
   
}
.integrated-visual:after {
   display:none;
   
}
.integrated-visual .hero-product {
   width:46%;
   height:auto;
   max-height:460px;
   object-fit:contain;
   left:0;
   top:auto;
   bottom:35px;
   z-index:3;
   filter:drop-shadow(0 24px 15px #1c3a4f19);
   animation:productFloat 8s ease-in-out infinite;
   
}
.hero-storage {
   position:absolute;
   width:77%;
   max-height:480px;
   object-fit:contain;
   right:-10%;
   bottom:40px;
   z-index:2;
   filter:drop-shadow(0 22px 18px #1c3a4f13);
   
}
.hero-platform {
   position:absolute;
   width:110%;
   height:75px;
   left:-2%;
   bottom:25px;
   border-radius:50%;
   background:radial-gradient(ellipse,#ffffffda,#f3faf300 70%);
   transform:rotate(-3deg);
   
}
.hero-system-label {
   position:absolute;
   top:27px;
   right:5px;
   z-index:5;
   padding:8px 11px;
   border:1px solid #d3e5dc;
   background:#ffffffb9;
   border-radius:5px;
   font-size:8px;
   letter-spacing:.08em;
   color:var(--navy);
   backdrop-filter:blur(8px);
   
}
.hero-system-label span {
   margin:0 6px;
   color:var(--green-dark);
   
}
.integrated-visual .hero-art-note {
   left:5%;
   bottom:10px;
   color:#657d83;
   font-size:7px;
   
}
.hero-energy-lines {
   position:absolute;
   width:120%;
   height:100%;
   left:-9%;
   top:0;
   z-index:1;
   fill:none;
   stroke:var(--lime);
   stroke-width:2;
   opacity:.7;
   stroke-dasharray:12 7;
   animation:energyFlow 8s linear infinite;
   
}
.hero-energy-lines path:last-child {
   stroke:var(--teal);
   
}
.brand-pillars {
   grid-column:1/-1;
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:22px;
   padding:16px 0 30px;
   position:relative;
   z-index:5;
   width:78%;
   
}
.brand-pillars>div {
   display:flex;
   align-items:center;
   gap:18px;
   padding-right:23px;
   border-right:1px solid #b8cdd26e;
   
}
.brand-pillars>div:last-child {
   border:0;
   
}
.brand-pillars strong {
   display:block;
   font-size:17px;
   line-height:1.3;
   
}
.brand-pillars small {
   display:block;
   font-size:11px;
   color:#536c7c;
   line-height:1.55;
   margin-top:5px;
   
}
.brand-drop {
   display:grid;
   place-items:center;
   height:53px;
   width:53px;
   border-radius:50% 50% 50% 9%;
   transform:rotate(-45deg);
   flex-shrink:0;
   background:var(--lime);
   color:#fff;
   box-shadow:0 4px 14px #183a5f08;
   
}
.brand-drop .icon {
   height:28px;
   width:28px;
   transform:rotate(45deg);
   stroke-width:1.6;
   
}
.brand-drop.storage {
   background:var(--teal);
   
}
.brand-drop.consumption {
   background:var(--warm-gray);
   
}
.section {
   padding-block:85px;
   
}
.section-heading {
   margin-bottom:35px;
   
}
.section-intro {
   font-size:14px;
   max-width:370px;
   
}
.solutions-grid {
   display:grid;
   grid-template-columns:repeat(3,minmax(0,1fr));
   gap:24px;
   
}
.solution-card {
   border:1px solid var(--line);
   border-radius:13px;
   overflow:hidden;
   background:#fff;
   transition:transform .3s,box-shadow .3s;
   
}
.solution-card:hover {
   transform:translateY(-4px);
   box-shadow:0 18px 35px #183a5f0a;
   
}
.solution-image {
   height:215px;
   position:relative;
   overflow:hidden;
   background:#ecf5f2;
   
}
.solution-image img {
   width:100%;
   height:100%;
   object-fit:cover;
   transition:transform .6s var(--ease);
   
}
.solution-card:hover img {
   transform:scale(1.035);
   
}
.solution-image small {
   position:absolute;
   right:9px;
   bottom:8px;
   padding:3px 7px;
   border-radius:3px;
   color:#fff;
   background:#183a5f99;
   font-size:7px;
   letter-spacing:.04em;
   
}
.solution-copy {
   padding:24px;
   
}
.solution-copy>span {
   font-size:8px;
   letter-spacing:.12em;
   color:var(--green-dark);
   display:block;
   margin-bottom:10px;
   
}
.solution-copy h3 {
   font-size:24px;
   
}
.solution-copy p {
   font-size:12px;
   line-height:1.8;
   color:var(--muted);
   margin-top:12px;
   min-height:65px;
   
}
.solution-copy a {
   display:flex;
   gap:15px;
   align-items:center;
   justify-content:space-between;
   margin-top:22px;
   padding-top:16px;
   border-top:1px solid var(--line);
   font-size:11px;
   font-weight:600;
   
}
.solution-copy a .icon {
   height:18px;
   width:18px;
   color:var(--green-dark);
   
}
.energy-section {
   background:#f2f7f5;
   
}
.energy-experience {
   border-radius:16px;
   
}
.energy-sidebar {
   background:var(--navy);
   
}
.flow-stage {
   background:radial-gradient(ellipse at 50% 48%,#245568,#183A5F 80%);
   
}
.flow-node .node-icon {
   border:0;
   background:var(--lime);
   color:#fff;
   border-radius:50% 50% 50% 12%;
   transform:rotate(-45deg);
   box-shadow:0 6px 22px #0001;
   
}
.flow-node .node-icon .icon {
   transform:rotate(45deg);
   
}
.grid-node .node-icon {
   background:#315a7d;
   color:#b8dce6;
   
}
.load-node .node-icon {
   background:var(--warm-gray);
   color:#fff;
   
}
.battery-node {
   background:#214b67;
   
}
.battery-node>.icon {
   color:var(--teal);
   
}
.energy-benefits h3 {
   font-size:20px;
   
}
.products-section .product-grid {
   gap:24px;
   
}
.product-card {
   border-radius:14px;
   
}
.product-art {
   height:320px;
   background:radial-gradient(ellipse at 50% 50%,#fff,#eff5f2 80%);
   
}
.product-art:after {
   border-color:#183a5f06;
   
}
.product-art img {
   height:93%;
   width:94%;
   
}
.product-index {
   color:#5b7583;
   
}
.product-chip {
   color:var(--navy);
   background:#ffffffd9;
   border-color:#dce8e4;
   font-size:8px;
   
}
.product-chip.legacy {
   background:#e7f1d4;
   color:#456221;
   
}
.product-enlarge {
   color:var(--navy);
   background:#fff;
   border-color:#d4e2dd;
   
}
.product-kicker {
   font-size:10px;
   color:var(--green-dark);
   
}
.product-description {
   font-size:12px;
   line-height:1.8;
   
}
.product-highlights span {
   font-size:9px;
   
}
.product-details {
   font-size:12px;
   
}
.product-compare {
   font-size:10px;
   
}
.filter {
   font-size:11px;
   
}
.filter.active {
   background:var(--navy);
   
}
.catalog-meta {
   font-size:11px;
   
}
.search-box input {
   font-size:12px;
   
}
.dialog-art {
   background:radial-gradient(ellipse,#fff,#eff5f2);
   
}
.dialog-art small {
   color:#5b7583;
   
}
.dialog-specs {
   font-size:11px;
   
}
.dialog-description {
   font-size:13px!important;
   
}
.dialog-note {
   font-size:11px;
   
}
.compare-table thead img {
   background:#eef5f2;
   
}
.spec-table,.compare-table {
   font-size:12px;
   
}
.spec-note,.source-details {
   font-size:12px;
   
}
.fine-print {
   font-size:10px;
   
}
.service-section {
   background:#f6f8f5;
   
}
.service-grid {
   display:grid;
   grid-template-columns:repeat(4,1fr);
   gap:28px;
   
}
.service-grid article {
   border-top:1px solid #d8e5db;
   padding-top:24px;
   
}
.service-grid article>span {
   display:grid;
   place-items:center;
   width:35px;
   height:35px;
   border-radius:50% 50% 50% 12%;
   transform:rotate(-8deg);
   background:#e4efce;
   color:var(--green-dark);
   font-size:10px;
   margin-bottom:22px;
   
}
.service-grid h3 {
   font-size:21px;
   line-height:1.2;
   
}
.service-grid p {
   margin-top:14px;
   color:var(--muted);
   font-size:12px;
   line-height:1.8;
   
}
.project-section {
   background:#ecf5f2;
   
}
.project-form {
   border-radius:15px;
   
}
.project-form label {
   font-size:11px;
   
}
.project-form input:not([type=checkbox]),.project-form select,.project-form textarea {
   font-size:12px;
   
}
.project-form textarea {
   width:100%;
   border:1px solid var(--line);
   border-radius:6px;
   padding:12px;
   min-height:90px;
   resize:vertical;
   color:var(--navy);
   background:#fcfdfd;
   line-height:1.6;
   
}
.profile-label {
   margin-top:20px;
   
}
.form-help {
   font-size:10px;
   
}
.form-feedback {
   font-size:11px;
   
}
.contact-card small {
   font-size:10px;
   
}
footer {
   background:var(--navy);
   
}
.footer-bottom {
   font-size:9px;
   
}
@media(min-width:1450px) {
  
    .hero-v2 h1 {
     font-size:65px;
     
  }
  
    .integrated-visual {
     height:560px;
     
  }
  
    .integrated-visual .hero-product {
     max-height:475px;
     width:47%;
     
  }
  
    .hero-storage {
     max-height:490px;
     
  }
  
  
}
@media(max-width:1150px) {
  
    .main-nav {
     gap:19px;
     
  }
  
    .main-nav a {
     font-size:10px;
     
  }
  
    .hero-v2 h1 {
     font-size:clamp(40px,4.5vw,54px);
     
  }
  
    .hero-v2 .hero-lead {
     font-size:21px;
     
  }
  
    .hero-v2 .hero-description {
     max-width:350px;
     font-size:13px;
     
  }
  
    .hero-v2 .hero-actions {
     gap:10px;
     
  }
  
    .hero-v2 .hero-actions .button {
     padding:14px;
     font-size:10px;
     gap:12px;
     
  }
  
    .integrated-visual {
     height:500px;
     
  }
  
    .integrated-visual .hero-product {
     width:48%;
     bottom:45px;
     
  }
  
    .hero-storage {
     width:78%;
     right:-10%;
     bottom:50px;
     
  }
  
    .brand-pillars {
     width:90%;
     
  }
  
    .hero-system-label {
     top:28px;
     right:0;
     font-size:6px;
     
  }
  
    .solutions-grid {
     gap:20px;
     
  }
  
    .solution-image {
     height:190px;
     
  }
  
    .solution-copy {
     padding:21px;
     
  }
  
    .solution-copy h3 {
     font-size:22px;
     
  }
  
    .solution-copy p {
     min-height:86px;
     
  }
  
    .service-grid {
     gap:20px;
     
  }
  
    .service-grid h3 {
     font-size:19px;
     
  }
  
  
}
@media(max-width:900px) {
  
    .hero-v2 {
     grid-template-columns:1fr 1fr;
     
  }
  
    .hero-v2 h1 {
     font-size:40px;
     
  }
  
    .hero-v2 h1 span {
     font-size:.76em;
     
  }
  
    .hero-v2 .hero-copy {
     padding-top:40px;
     
  }
  
    .hero-v2 .brand-line {
     font-size:12px;
     
  }
  
    .hero-v2 .hero-lead {
     font-size:20px;
     
  }
  
    .hero-v2 .hero-description {
     font-size:12px;
     max-width:330px;
     
  }
  
    .hero-v2 .hero-actions {
     flex-direction:column;
     align-items:flex-start;
     gap:9px;
     
  }
  
    .hero-v2 .hero-actions .button {
     padding:12px 17px;
     font-size:11px;
     min-height:43px;
     
  }
  
    .integrated-visual {
     height:490px;
     
  }
  
    .hero-storage {
     width:90%;
     right:-14%;
     bottom:60px;
     
  }
  
    .integrated-visual .hero-product {
     width:53%;
     left:-6%;
     bottom:48px;
     
  }
  
    .hero-system-label {
     top:55px;
     font-size:6px;
     
  }
  
    .brand-pillars {
     width:100%;
     gap:13px;
     padding-bottom:27px;
     
  }
  
    .brand-pillars>div {
     gap:12px;
     padding-right:10px;
     
  }
  
    .brand-drop {
     height:44px;
     width:44px;
     
  }
  
    .brand-drop .icon {
     width:24px;
     height:24px;
     
  }
  
    .brand-pillars strong {
     font-size:15px;
     
  }
  
    .brand-pillars small {
     font-size:10px;
     
  }
  
    .solutions-grid {
     gap:15px;
     
  }
  
    .solution-image {
     height:155px;
     
  }
  
    .solution-copy {
     padding:18px;
     
  }
  
    .solution-copy h3 {
     font-size:20px;
     
  }
  
    .solution-copy p {
     font-size:11px;
     min-height:100px;
     
  }
  
    .solution-copy a {
     font-size:10px;
     gap:10px;
     
  }
  
    .service-grid {
     grid-template-columns:1fr 1fr;
     gap:28px;
     
  }
  
    .product-art {
     height:310px;
     
  }
  
    .section-intro {
     font-size:13px;
     
  }
  
  
}
@media(max-width:760px) {
  
    .hero-v2 {
     grid-template-columns:1fr;
     
  }
  
    .hero-v2 .hero-copy {
     padding:35px 0 0;
     
  }
  
    .hero-v2 h1 {
     font-size:clamp(35px,6.7vw,52px);
     line-height:1.08;
     white-space:normal;
     
  }
  
    .hero-v2 h1 span {
     font-size:.9em;
     
  }
  
    .hero-v2 .hero-description {
     max-width:480px;
     
  }
  
    .hero-v2 .hero-actions {
     flex-direction:row;
     margin-top:22px;
     flex-wrap:wrap;
     
  }
  
    .hero-scene {
     object-position:70% center;
     opacity:.75;
     
  }
  
    .hero-wash {
     background:linear-gradient(180deg,#fffffff5 0%,#ffffffb3 35%,#ffffff1a 65%,#f1f9f3aa 100%);
     
  }
  
    .integrated-visual {
     height:410px;
     width:92%;
     max-width:560px;
     justify-self:center;
     
  }
  
    .integrated-visual .hero-product {
     width:38%;
     max-height:375px;
     bottom:30px;
     left:7%;
     
  }
  
    .hero-storage {
     width:65%;
     max-height:370px;
     right:0;
     bottom:35px;
     
  }
  
    .hero-system-label {
     top:12px;
     right:0;
     font-size:7px;
     
  }
  
    .integrated-visual .hero-art-note {
     left:7%;
     bottom:6px;
     
  }
  
    .brand-pillars {
     padding:16px 0 30px;
     
  }
  
    .solutions-grid {
     grid-template-columns:1fr;
     gap:22px;
     
  }
  
    .solution-image {
     height:260px;
     
  }
  
    .solution-copy p {
     font-size:13px;
     min-height:0;
     
  }
  
    .solution-copy h3 {
     font-size:25px;
     
  }
  
    .solution-copy a {
     font-size:12px;
     margin-top:18px;
     
  }
  
    .solution-copy>span {
     font-size:9px;
     
  }
  
  
}
@media(max-width:600px) {
  
    .nav-shell {
     height:74px;
     
  }
  
    .brand img {
     width:130px;
     
  }
  
    .main-nav a {
     font-size:12px;
     
  }
  
    .hero-v2 {
     display:grid;
     
  }
  
    .hero-v2 .brand-line {
     font-size:12px;
     margin-bottom:19px;
     
  }
  
    .hero-v2 h1 {
     font-size:clamp(32px,7.8vw,45px);
     
  }
  
    .hero-v2 h1 span {
     font-size:.93em;
     
  }
  
    .hero-v2 .hero-lead {
     margin-top:18px;
     font-size:21px;
     
  }
  
    .hero-v2 .hero-description {
     font-size:13px;
     line-height:1.8;
     margin-top:13px;
     
  }
  
    .hero-v2 .hero-actions .button {
     font-size:11px;
     padding:13px 15px;
     min-height:45px;
     
  }
  
    .hero-v2 .hero-actions {
     gap:10px;
     
  }
  
    .integrated-visual {
     height:330px;
     width:100%;
     margin-top:20px;
     
  }
  
    .integrated-visual .hero-product {
     width:42%;
     left:1%;
     bottom:22px;
     
  }
  
    .hero-storage {
     width:71%;
     right:-4%;
     bottom:27px;
     
  }
  
    .hero-system-label {
     top:0;
     right:0;
     font-size:6px;
     padding:6px 8px;
     
  }
  
    .integrated-visual .hero-art-note {
     font-size:6px;
     left:1%;
     bottom:2px;
     
  }
  
    .brand-pillars {
     gap:15px;
     grid-template-columns:1fr;
     width:100%;
     padding:19px 0 26px;
     
  }
  
    .brand-pillars>div {
     border:0;
     padding:0;
     gap:18px;
     
  }
  
    .brand-drop {
     width:42px;
     height:42px;
     
  }
  
    .brand-drop .icon {
     width:24px;
     height:24px;
     
  }
  
    .brand-pillars>div>div {
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap:15px;
     
  }
  
    .brand-pillars strong {
     font-size:15px;
     min-width:60px;
     
  }
  
    .brand-pillars small {
     font-size:10px;
     margin:0;
     line-height:1.6;
     
  }
  
    .brand-pillars small br {
     display:none;
     
  }
  
    .section {
     padding-block:58px;
     
  }
  
    h2 {
     font-size:36px;
     
  }
  
    .section-intro {
     font-size:13px;
     
  }
  
    .section-heading {
     margin-bottom:28px;
     
  }
  
    .solution-image {
     height:210px;
     
  }
  
    .solution-copy {
     padding:22px;
     
  }
  
    .solution-copy h3 {
     font-size:25px;
     
  }
  
    .solution-copy p {
     font-size:13px;
     
  }
  
    .product-description {
     font-size:13px;
     
  }
  
    .product-art {
     height:325px;
     
  }
  
    .product-highlights span {
     font-size:9px;
     
  }
  
    .catalog-meta {
     font-size:10px;
     
  }
  
    .catalog-meta>span:last-child {
     font-size:8px;
     
  }
  
    .service-grid {
     grid-template-columns:1fr;
     gap:24px;
     
  }
  
    .service-grid article {
     display:grid;
     grid-template-columns:40px 1fr;
     gap:9px 15px;
     padding-top:21px;
     
  }
  
    .service-grid article>span {
     grid-column:1;
     grid-row:1/3;
     margin:0;
     
  }
  
    .service-grid h3 {
     grid-column:2;
     font-size:20px;
     
  }
  
    .service-grid p {
     grid-column:2;
     margin:0;
     font-size:12px;
     
  }
  
    .spec-table,.compare-table {
     font-size:11px;
     
  }
  
    .spec-note,.source-details {
     font-size:11px;
     
  }
  
    .dialog-specs {
     font-size:10px;
     
  }
  
    .dialog-description {
     font-size:12px!important;
     
  }
  
    .project-form label {
     font-size:11px;
     
  }
  
    .project-form input:not([type=checkbox]),.project-form select,.project-form textarea {
     font-size:13px;
     
  }
  
    .contact-card small {
     font-size:9px;
     
  }
  
    .footer-bottom {
     font-size:8px;
     
  }
  
  
}
@media(prefers-reduced-motion:reduce) {
   .hero-energy-lines {
     animation:none;
     
  }
   
}
@media print {
   .hero-scene,.hero-wash,.integrated-visual,.solution-image,.brand-pillars,.service-section {
     display:none!important;
     
  }
   .hero-stage {
     background:#fff;
     
  }
   .hero-v2 {
     display:block;
     
  }
   .hero-v2 h1 {
     font-size:35px;
     white-space:normal;
     
  }
   .solutions-grid {
     grid-template-columns:1fr 1fr 1fr;
     gap:12px;
     
  }
   .solution-copy {
     padding:12px;
     
  }
   .solution-copy p {
     min-height:0;
     font-size:10px;
     
  }
   .solution-copy a {
     display:none;
     
  }
   .solution-copy h3 {
     font-size:18px;
     
  }
   
}

/* Celestial catalogue branding */
.product-title-line h3 small,.dialog-content h2 small { display:block; font-family:'Poppins','Roboto',Arial,sans-serif; color:var(--green-dark); font-size:8px; font-weight:500; letter-spacing:.1em; line-height:1.6; margin-bottom:6px; }
.dialog-content h2 small { font-size:10px; margin-bottom:9px; }
.product-title-line h3 { line-height:1.1; }
.compare-table thead strong>small { font-size:8px; letter-spacing:.08em; margin-bottom:5px; }
.service-page-link{margin-top:34px;font-size:12px}
@media(max-width:980px) and (min-width:601px){
  .header .nav-shell{position:relative;gap:18px}
  .header .menu-toggle{display:flex;flex-shrink:0}
  .header .nav-cta{margin-left:auto}
  .header .main-nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;padding:14px 22px 20px;border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 14px 25px #183a5f0c;align-items:stretch;gap:0}
  .header .main-nav.open{display:flex;flex-direction:column}
  .header .main-nav a{font-size:13px;padding:14px 0;border-bottom:1px solid #edf1ef}
  .header .main-nav a:after{bottom:0}
}