* {
        box-sizing: border-box;
      }
      html {
        font-family: var(--font-primary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
      }
      body {
        margin: 0;
        font-family: var(--font-primary, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
        color: #183129;
        background: #fbfcf8;
        line-height: 1.55;
      }
      button,
      input,
      select,
      textarea {
        font-family: inherit;
      }
      .wrap {
        width: min(1180px, calc(100% - 48px));
        margin: auto;
      }
      
      
      .brand {
        font-size: 23px;
        font-weight: 700;
        color: #9bdd6e;
        text-decoration: none;
      }
      .brand small {
        display: block;
        font-size: 7px;
        letter-spacing: 0.15em;
        color: #d5e5d2;
      }
      .navlinks {
        display: flex;
        gap: 20px;
        margin-left: auto;
      }
      .navlinks a {
        font-size: 11px;
        text-decoration: none;
        color: #e5eee7;
      }
      .cta {
        background: #8ee36d !important;
        color: #102a20 !important;
        padding: 10px 18px;
        border-radius: 24px;
      }
      .hero {
        background: linear-gradient(120deg, #0d2e27, #173f34);
        color: #fff;
        padding: 58px 0 50px;
      }
      .kicker {
        font-size: 10px;
        letter-spacing: 0.18em;
        color: #9fd37b;
        text-transform: uppercase;
      }
      .hero h1 {
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: clamp(40px, 5vw, 66px);
        line-height: 1.1;
        letter-spacing: -0.03em;
        margin: 10px 0 18px;
      }
      .hero p {
        max-width: 760px;
        color: #d8e5dc;
        font-size: 16px;
      }
      .catalog,
      .demo {
        padding: 48px 0;
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .card {
        padding: 22px;
        background: #fff;
        border: 1px solid #dce4d8;
        border-radius: 5px;
        text-decoration: none;
      }
      .card > span {
        font-size: 9px;
        color: #4e8b61;
      }
      .card h3 {
        font-size: 21px;
        margin: 5px 0;
      }
      .card p {
        font-size: 12px;
        color: #68766b;
      }
      .card b {
        font-size: 10px;
        color: #36764e;
      }
      .tabs {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        margin: 20px 0;
      }
      .tabs button {
        border: 1px solid #dce4d8;
        background: #fff;
        padding: 10px 16px;
        border-radius: 4px;
        cursor: pointer;
      }
      .tabs button.active {
        background: #173c31;
        color: #fff;
      }
      .grid {
        display: grid;
        grid-template-columns: 1.8fr 0.9fr;
        gap: 22px;
      }
      .visual {
        min-height: 430px;
        background: linear-gradient(145deg, #244a3c, #0e2822);
        border-radius: 6px;
        color: #fff;
        padding: 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .visual .symbol {
        display: none;
      }
      .solution-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.72;
      }
      .visual {
        position: relative;
      }
      .visual:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          0deg,
          rgba(5, 24, 18, 0.9),
          rgba(5, 24, 18, 0.05) 70%
        );
      }
      .visual > *:not(.solution-photo) {
        position: relative;
        z-index: 2;
      }
      .visual h2 {
        font-size: 34px;
        margin: 0;
      }
      .visual p {
        color: #dce9df;
      }
      .panel {
        border: 1px solid #dce4d8;
        background: #fff;
        border-radius: 6px;
        padding: 17px;
      }
      .devices {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
      }
      .device {
        min-height: 80px;
        background: #f5f7f1;
        border: 1px solid #e2e7dd;
        padding: 9px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .device b {
        font-size: 9px;
      }
      .device span {
        font-size: 10px;
        color: #327149;
      }
      .explain {
        border-top: 1px solid #dce4d8;
        margin-top: 12px;
        padding-top: 12px;
      }
      .explain h3 {
        font-size: 20px;
        margin: 0 0 5px;
      }
      .explain p {
        font-size: 11px;
        color: #68766b;
      }
      .note {
        margin-top: 16px;
        padding: 12px;
        border-left: 3px solid #83a86b;
        background: #f3f6ef;
        font-size: 10px;
        color: #68766b;
      }
      footer {
        background: #0a2922;
        color: #dce8df;
        padding: 28px 0;
        margin-top: 45px;
      }
      @media (max-width: 850px) {
        .navlinks {
          display: none;
        }
        .grid,
        .cards {
          grid-template-columns: 1fr;
        }
      }

.solution-photo {
        display: none !important;
      }
      .solution-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      .visual > *:not(.solution-svg) {
        position: relative;
        z-index: 2;
      }
      .visual:after {
        z-index: 1;
      }
      .gate-left,
      .gate-right,
      .window,
      .cage-door {
        transform-box: fill-box;
        transform-origin: center;
      }
      .poolwaves path,
      .sound path,
      .flow,
      .spray path,
      .laser path {
        animation: dash 2s linear infinite;
      }
      .waterfall {
        animation: water 1.2s ease-in-out infinite alternate;
      }
      .rgb circle,
      .warning,
      .alert {
        animation: pulse2 1s ease-in-out infinite alternate;
      }
      .rain {
        animation: rain 1.2s linear infinite;
      }
      .speaker {
        animation: pulse2 0.8s ease-in-out infinite alternate;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: -48;
        }
      }
      @keyframes water {
        to {
          opacity: 0.45;
        }
      }
      @keyframes pulse2 {
        to {
          opacity: 0.35;
        }
      }
      @keyframes rain {
        to {
          transform: translateY(35px);
        }
      }
      .visual[data-state="1"] .gate-left {
        transform: translateX(-95px);
      }
      .visual[data-state="1"] .gate-right {
        transform: translateX(95px);
      }
      .visual[data-state="1"] .window {
        transform: rotate(-12deg);
      }
      .visual[data-state="2"] .cage-door {
        transform: rotateY(65deg);
      }
      .visual[data-state="0"] .alert,
      .visual[data-state="0"] .warning,
      .visual[data-state="0"] .laser,
      .visual[data-state="0"] .spray,
      .visual[data-state="0"] .sound {
        opacity: 0.15;
      }
      .visual[data-state="2"] .rgb {
        filter: hue-rotate(80deg);
      }
      .anim,
      .window,
      .cage-door {
        transition: transform 1.2s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        .solution-svg * {
          animation: none !important;
        }
      }

:root {
        --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --serif: var(--font-primary);
        --sans: var(--font-primary);
        --forest: #173b32;
        --green: #356a48;
        --ink: #213d34;
        --paper: #f8f8f2;
        --line: #dfe5db;
      }

.energy67 {
        padding: 30px 0 68px;
        background: #f8f8f2;
      }
      .energy67 .wrap {
        width: min(1270px, calc(100% - 46px));
      }
      .energy67 h2 {
        font-family: var(--font-primary);
        font-size: clamp(29px, 3vw, 43px);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.025em;
        margin: 7px 0 10px;
      }
      .energy67 > div > p {
        font-size: 13px;
        color: #617769;
        max-width: 900px;
      }
      .energy67-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.8fr) minmax(310px, 0.9fr);
        gap: 18px;
      }
      .energy67-visual {
        border: 1px solid #dce6dc;
        background: #eaf2ec;
        border-radius: 6px;
        overflow: hidden;
        align-self: start;
      }
      .energy67-visual svg {
        display: block;
        width: 100%;
        height: auto;
      }
      .energy67-caption {
        padding: 13px 18px;
        background: #173b32;
        color: white;
        min-height: 70px;
      }
      .energy67-caption strong {
        font-size: 17px;
        display: block;
      }
      .energy67-caption span {
        font-size: 12px;
        color: #d7e9d8;
      }
      .energy67-panel {
        border: 1px solid #dce6dc;
        background: white;
        border-radius: 6px;
        padding: 17px;
      }
      .energy67-panel h3 {
        font-family: var(--font-primary);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.02em;
        margin: 5px 0 12px;
      }
      .energy67-controls,
      .energy67-selector,
      .energy67-status {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .energy67-controls button,
      .energy67-selector button {
        border: 1px solid #d7e4d8;
        background: #f3f7f1;
        color: #254b39;
        border-radius: 5px;
        min-height: 48px;
        padding: 8px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .energy67-controls button.active,
      .energy67-selector button.active {
        background: #173b32;
        color: white;
      }
      .energy67-selector {
        margin-top: 9px;
      }
      .energy67-status {
        margin-top: 14px;
      }
      .energy67-status div {
        border: 1px solid #e2e9e1;
        background: #f8faf7;
        padding: 9px;
        border-radius: 5px;
        min-height: 65px;
      }
      .energy67-status b {
        display: block;
        font-size: 11px;
      }
      .energy67-status span {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        font-weight: bold;
        color: #2f7950;
      }
      .energy67-desc {
        font-size: 12px;
        line-height: 1.6;
        color: #4a6954;
        background: #edf5e9;
        border-left: 3px solid #8aac8a;
        padding: 12px;
        margin-top: 13px;
        min-height: 74px;
      }
      .energy67-note {
        font-size: 11px !important;
        color: #748477 !important;
        line-height: 1.6;
      }
      #ev-solar-flow,
      #ev-v2l-flow,
      #ev-generator-flow,
      #ev-charge-flow {
        opacity: 0;
      }
      #ev-diagram.solar #ev-solar-flow,
      #ev-diagram.solar #ev-charge-flow,
      #ev-diagram.ev #ev-v2l-flow,
      #ev-diagram.ev #ev-charge-flow,
      #ev-diagram.generator #ev-generator-flow,
      #ev-diagram.generator #ev-charge-flow {
        opacity: 1;
        animation: ev67flow 1.4s linear infinite;
      }
      @keyframes ev67flow {
        to {
          stroke-dashoffset: -56;
        }
      }
      @media (max-width: 900px) {
        .energy67-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #ev-diagram path {
          animation: none !important;
        }
      }

#ev-diagram.ev #ev-v2l-flow {
        stroke: #168bd1;
        stroke-width: 12;
        opacity: 1;
        filter: drop-shadow(0 0 3px #72d5ff);
      }
      #ev-diagram.generator #ev-generator-flow {
        stroke: #e9922f;
        stroke-width: 12;
        opacity: 1;
        filter: drop-shadow(0 0 3px #ffcd76);
      }
      #ev-diagram.ev #ev-generator-flow,
      #ev-diagram.generator #ev-v2l-flow {
        opacity: 0 !important;
        animation: none !important;
      }
      @media (prefers-reduced-motion: reduce) {
        #ev-diagram.ev #ev-v2l-flow,
        #ev-diagram.generator #ev-generator-flow {
          stroke-dasharray: none;
          animation: none;
        }
      }

/* One energy route per actual function, with backup and battery-to-house routes independent. */
      #ev-solar-flow,
      #ev-v2l-flow,
      #ev-generator-flow,
      #ev-charge-flow {
        display: none !important;
      }
      #ev69-energy-routes path {
        opacity: 0;
        animation: none;
        transition: opacity 0.25s;
      }
      #ev-diagram.solar #ev69-solar-home,
      #ev-diagram.solar #ev69-solar-battery,
      #ev-diagram.solar #ev69-solar-car,
      #ev-diagram.outage #ev69-battery-house,
      #ev-diagram.ev #ev69-battery-house,
      #ev-diagram.generator #ev69-battery-house,
      #ev-diagram.ev #ev69-ev-backup,
      #ev-diagram.generator #ev69-generator-backup {
        opacity: 1;
        animation: ev69-energy 1.4s linear infinite;
      }
      #ev-diagram.ev #ev69-ev-backup {
        filter: drop-shadow(0 0 3px #7bcfff);
      }
      #ev-diagram.generator #ev69-generator-backup {
        filter: drop-shadow(0 0 3px #f4c183);
      }
      @keyframes ev69-energy {
        to {
          stroke-dashoffset: -48;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #ev69-energy-routes path {
          animation: none !important;
          stroke-dasharray: none;
        }
      }

#ev69-energy-routes path {
        stroke-width: 8;
        stroke-dasharray: 14 11;
        stroke-linejoin: round;
        paint-order: stroke;
        filter: drop-shadow(0 1px 1px rgba(20, 53, 41, 0.36));
      }
      #ev-diagram.ev #ev69-ev-backup {
        stroke: #087dd0;
        filter: drop-shadow(0 0 4px rgba(8, 125, 208, 0.45));
      }
      #ev-diagram.generator #ev69-generator-backup {
        stroke: #d97820;
        filter: drop-shadow(0 0 4px rgba(217, 120, 32, 0.45));
      }
      #ev-car-illustration {
        filter: drop-shadow(0 4px 5px rgba(22, 51, 44, 0.14));
      }

#ev-diagram.generator #ev71-gen-smoke {
        opacity: 1;
      }
      #ev-diagram.generator #ev71-gen-smoke path {
        animation: ev71smoke 2.3s ease-in-out infinite alternate;
      }
      #ev71-house-bulb {
        filter: drop-shadow(0 0 8px rgba(255, 216, 77, 0.8));
      }
      #ev-diagram #ev71-house-bulb circle {
        animation: ev71glow 2s ease-in-out infinite alternate;
      }
      @keyframes ev71smoke {
        to {
          opacity: 0.25;
          transform: translateY(-12px);
        }
      }
      @keyframes ev71glow {
        to {
          opacity: 0.13;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #ev-diagram.generator #ev71-gen-smoke path,
        #ev-diagram #ev71-house-bulb circle {
          animation: none;
        }
      }

/* Source change is visually unambiguous: only one emergency route appears. */
      #ev69-ev-backup,
      #ev69-generator-backup {
        display: none !important;
      }
      #ev72-ev-route,
      #ev72-gen-route,
      #ev72-ev-label,
      #ev72-gen-label {
        opacity: 0;
        visibility: hidden;
      }
      #ev-diagram.ev #ev72-ev-route,
      #ev-diagram.ev #ev72-ev-label {
        opacity: 1;
        visibility: visible;
      }
      #ev-diagram.generator #ev72-gen-route,
      #ev-diagram.generator #ev72-gen-label {
        opacity: 1;
        visibility: visible;
      }
      #ev-diagram.ev #ev72-ev-route,
      #ev-diagram.generator #ev72-gen-route {
        animation: ev72-march 1.05s linear infinite;
        filter: drop-shadow(0 0 4px currentColor);
      }
      #ev-diagram.ev #ev72-ev-route {
        color: #078ad9;
      }
      #ev-diagram.generator #ev72-gen-route {
        color: #f09329;
      }
      @keyframes ev72-march {
        to {
          stroke-dashoffset: -68;
        }
      }
      #ev72-smoke {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
      }
      #ev-diagram.generator #ev72-smoke {
        opacity: 1;
        visibility: visible;
      }
      #ev-diagram.generator #ev72-smoke .ev72-plume {
        animation: ev72-rise 2.2s ease-in-out infinite alternate;
      }
      #ev-diagram.generator #ev72-smoke .plume-b {
        animation-delay: -0.7s;
      }
      #ev-diagram.generator #ev72-smoke .plume-c {
        animation-delay: -1.3s;
      }
      #ev-diagram.generator #ev72-smoke .ev72-puff {
        animation: ev72-puff 2.3s ease-in-out infinite;
      }
      #ev-diagram.generator #ev72-smoke .puff-b {
        animation-delay: -0.8s;
      }
      #ev-diagram.generator #ev72-smoke .puff-c {
        animation-delay: -1.5s;
      }
      @keyframes ev72-rise {
        from {
          opacity: 0.75;
          transform: translateY(3px);
        }
        to {
          opacity: 0.3;
          transform: translateY(-20px);
        }
      }
      @keyframes ev72-puff {
        0% {
          opacity: 0;
          transform: translateY(8px) scale(0.7);
        }
        45% {
          opacity: 0.7;
        }
        100% {
          opacity: 0;
          transform: translateY(-28px) scale(1.35);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #ev-diagram.ev #ev72-ev-route,
        #ev-diagram.generator #ev72-gen-route,
        #ev-diagram.generator #ev72-smoke * {
          animation: none !important;
        }
      }

/* Strong directional contrast and clear separation from the house-power route. */
      #ev-diagram.ev #ev73-ev-active,
      #ev-diagram.generator #ev73-generator-active {
        opacity: 1;
      }
      #ev-diagram.ev #ev73-generator-active,
      #ev-diagram.generator #ev73-ev-active {
        opacity: 0;
      }
      #ev-diagram.generator #ev72-gen-route {
        stroke: #ff971a;
        stroke-width: 13;
        stroke-dasharray: 21 13;
        opacity: 1;
        visibility: visible;
        filter: drop-shadow(0 0 6px #ffc06d);
      }
      #ev-diagram.ev #ev72-ev-route {
        stroke: #007cda;
        stroke-width: 12;
        stroke-dasharray: 21 13;
        opacity: 1;
        visibility: visible;
        filter: drop-shadow(0 0 6px #74d5ff);
      }
      #ev-diagram.generator #ev72-ev-route,
      #ev-diagram.ev #ev72-gen-route {
        opacity: 0 !important;
        visibility: hidden !important;
      }
      #ev-diagram.generator #ev72-gen-label,
      #ev-diagram.ev #ev72-ev-label {
        opacity: 1;
        visibility: visible;
      }
      #ev-diagram.generator #ev72-ev-label,
      #ev-diagram.ev #ev72-gen-label {
        opacity: 0;
        visibility: hidden;
      }
      #ev-diagram.generator #ev72-smoke {
        opacity: 1;
        visibility: visible;
      }
      @media (prefers-reduced-motion: reduce) {
        #ev-diagram.generator #ev72-gen-route,
        #ev-diagram.ev #ev72-ev-route {
          animation: none !important;
          stroke-dasharray: none;
        }
      }