:root{
  --energy-green:#9AC66F;
  --energy-green-deep:#487322;
  --energy-bg:#061008;
}

.energy-saver-overlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(72,115,34,.24), transparent 27%),
    radial-gradient(circle at 50% 48%, rgba(154,198,111,.08), transparent 42%),
    rgba(3,8,5,.965);
  color:#f5f7f3;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, visibility 0s linear .45s;
  -webkit-font-smoothing:antialiased;
}

.energy-saver-overlay.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .45s ease, visibility 0s linear 0s;
}

.energy-saver-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(154,198,111,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,198,111,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center, #000 0 24%, transparent 72%);
  opacity:.55;
}

.energy-saver-card{
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.energy-saver-logo{
  width:min(260px, 54vw);
  height:auto;
  margin:0 auto 34px;
  filter:brightness(0) invert(1);
  opacity:.97;
}

.energy-saver-leaf{
  width:76px;
  height:76px;
  margin-bottom:28px;
  border:1px solid rgba(154,198,111,.32);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(154,198,111,.07);
  box-shadow:0 0 70px rgba(154,198,111,.08);
}

.energy-saver-leaf svg{
  width:38px;
  height:38px;
  stroke:var(--energy-green);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.energy-saver-title{
  margin:0 0 14px;
  font:800 clamp(32px,5vw,56px)/1.02 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.045em;
}

.energy-saver-title span{color:var(--energy-green)}

.energy-saver-copy{
  max-width:610px;
  margin:0;
  color:rgba(245,247,243,.7);
  font:500 clamp(15px,1.6vw,19px)/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.energy-saver-wake{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.54);
  background:rgba(255,255,255,.035);
  font:700 11px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.energy-saver-wake::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--energy-green);
  box-shadow:0 0 0 5px rgba(154,198,111,.08);
}

html.energy-saver-active,
html.energy-saver-active body{overflow:hidden!important}

@media (max-width:600px){
  .energy-saver-logo{margin-bottom:26px}
  .energy-saver-leaf{width:64px;height:64px;margin-bottom:22px}
  .energy-saver-copy{max-width:460px}
}

@media (prefers-reduced-motion:reduce){
  .energy-saver-overlay{transition:none}
}