[cs_element_section _id=”1″ ][cs_element_layout_row _id=”2″ ][cs_element_layout_column _id=”3″ ][cs_element_text _id=”4″ ][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][cs_element_section _id=”5″ ][cs_element_layout_row _id=”6″ ][cs_element_layout_column _id=”7″ ][cs_element_video _id=”8″ ][/cs_element_layout_column][/cs_element_layout_row][cs_element_layout_row _id=”9″ ][cs_element_layout_column _id=”10″ ][cs_element_headline _id=”11″ ][cs_element_button _id=”12″ ][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][cs_element_section _id=”13″ ][cs_element_layout_row _id=”14″ ][cs_element_layout_column _id=”15″ ][cs_element_text _id=”16″ ][/cs_element_layout_column][/cs_element_layout_row][cs_element_layout_row _id=”17″ ][cs_element_layout_column _id=”18″ ][cs_element_headline _id=”19″ ][cs_element_text _id=”20″ ][cs_element_layout_row_2 _id=”21″ ][cs_element_layout_column_2 _id=”22″ ][cs_element_layout_row_3 _id=”23″ ][cs_element_layout_column_3 _id=”24″ ][cs_element_image _id=”25″ ][/cs_element_layout_column_3][cs_element_layout_column_3 _id=”26″ ][cs_element_headline _id=”27″ ][cs_element_text _id=”28″ ][/cs_element_layout_column_3][/cs_element_layout_row_3][/cs_element_layout_column_2][cs_element_layout_column_2 _id=”29″ ][cs_element_layout_row_3 _id=”30″ ][cs_element_layout_column_3 _id=”31″ ][cs_element_image _id=”32″ ][/cs_element_layout_column_3][cs_element_layout_column_3 _id=”33″ ][cs_element_headline _id=”34″ ][cs_element_text _id=”35″ ][/cs_element_layout_column_3][/cs_element_layout_row_3][/cs_element_layout_column_2][cs_element_layout_column_2 _id=”36″ ][cs_element_layout_row_3 _id=”37″ ][cs_element_layout_column_3 _id=”38″ ][cs_element_image _id=”39″ ][/cs_element_layout_column_3][cs_element_layout_column_3 _id=”40″ ][cs_element_headline _id=”41″ ][cs_element_text _id=”42″ ][/cs_element_layout_column_3][/cs_element_layout_row_3][/cs_element_layout_column_2][/cs_element_layout_row_2][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][cs_element_section _id=”43″ ][cs_element_layout_row _id=”44″ ][cs_element_layout_column _id=”45″ ][cs_element_text _id=”46″ ][/cs_element_layout_column][/cs_element_layout_row][cs_element_layout_row _id=”47″ ][cs_element_layout_column _id=”48″ ][cs_element_headline _id=”49″ ][cs_element_text _id=”50″ ][cs_element_image _id=”51″ ][cs_element_image _id=”52″ ][cs_element_component _id=”53″ ][/cs_element_component][cs_element_headline _id=”54″ ][cs_element_component _id=”55″ ][/cs_element_component][cs_element_layout_div _id=”56″ ][cs_element_text _id=”57″ ]Renu Energy Solutions — Home Solar Energy Flow

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
font-family: ‘Segoe UI’, system-ui, -apple-system, sans-serif;
background: transparent;
padding: 0;
margin: 0;
}

.wrapper {
width: 100%;
}

/* Scene */
.scene {
background: linear-gradient(160deg, #0a1f3a 0%, #0d2b52 40%, #102d4a 70%, #0a2038 100%);
border-radius: 18px;
padding: 20px 16px 20px;
position: relative;
overflow: hidden;
min-height: 260px;
}
.scene::before {
content: ”;
position: absolute;
top: 0; left: 0; right: 0; height: 110px;
background: linear-gradient(180deg, rgba(15,50,100,0.7) 0%, transparent 100%);
border-radius: 18px 18px 0 0;
pointer-events: none;
}

.scene-title {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
margin-bottom: 10px;
position: relative; z-index: 4;
padding-top: 2px;
}

.sun {
position: absolute;
top: 38px; left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.sun-circle {
width: 46px; height: 46px;
background: radial-gradient(circle, #ffe599 30%, #f5a623 80%);
border-radius: 50%;
box-shadow: 0 0 28px 10px rgba(245,166,35,0.5);
transition: opacity 0.8s, box-shadow 0.8s;
}
.sun-label {
font-size: 9px;
font-weight: 700;
color: #f5a623;
letter-spacing: 0.05em;
background: rgba(15,40,80,0.7);
border-radius: 4px;
padding: 1px 5px;
}

.nodes-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 6px;
margin-top: 96px;
position: relative;
z-index: 2;
}

.node {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 1;
min-width: 0;
}

.icon-circle {
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(145deg, #f5a623 0%, #e08800 100%);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 0 rgba(245,166,35,0);
transition: box-shadow 0.8s;
position: relative;
flex-shrink: 0;
}
.icon-circle.glowing {
box-shadow: 0 0 16px 5px rgba(245,166,35,0.5), 0 0 32px 10px rgba(245,166,35,0.2);
}
.icon-circle svg {
width: 26px; height: 26px;
fill: none;
stroke: white;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.batt-inner {
width: 20px; height: 30px;
background: rgba(255,255,255,0.15);
border-radius: 3px;
border: 1.5px solid rgba(255,255,255,0.7);
position: relative;
overflow: hidden;
}
.batt-tip {
width: 8px; height: 4px;
background: rgba(255,255,255,0.7);
border-radius: 2px 2px 0 0;
position: absolute;
top: -5px; left: 50%; transform: translateX(-50%);
}
.batt-fill-inner {
position: absolute;
bottom: 0; left: 0; right: 0;
background: white;
border-radius: 0 0 2px 2px;
transition: height 1s ease;
}

.node-val {
font-size: 12px;
font-weight: 700;
color: white;
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 2px 8px;
min-width: 54px;
text-align: center;
letter-spacing: 0.01em;
transition: all 0.4s;
white-space: nowrap;
}
.node-val.orange { color: #f5a623; background: rgba(245,166,35,0.15); }
.node-val.red { color: #ff6b6b; background: rgba(255,80,80,0.15); }
.node-val.green { color: #4cd9a0; background: rgba(76,217,160,0.15); }

.node-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.4);
}

#flow-canvas {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
}

.net-badge {
position: absolute;
top: 10px; right: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 20px;
padding: 3px 10px;
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.75);
z-index: 10;
transition: all 0.5s;
white-space: nowrap;
}
.net-badge.exporting { color: #4cd9a0; border-color: rgba(76,217,160,0.4); background: rgba(76,217,160,0.1); }
.net-badge.importing { color: #ff9966; border-color: rgba(255,120,60,0.4); background: rgba(255,100,50,0.1); }
.net-badge.outage { color: #ff6b6b; border-color: rgba(255,80,80,0.5); background: rgba(200,30,30,0.15); }

/* Stats */
.stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 8px;
}
.stat-card {
background: #0d2040;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
padding: 9px 6px;
text-align: center;
}
.stat-val {
font-size: 16px;
font-weight: 700;
color: #f5a623;
line-height: 1;
}
.stat-val.red { color: #ff6b6b; }
.stat-val.green { color: #4cd9a0; }
.stat-val.white { color: rgba(255,255,255,0.8); }
.stat-label {
font-size: 9px;
color: rgba(255,255,255,0.32);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 3px;
font-weight: 700;
}

/* Controls */
.controls {
background: #0d2040;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.07);
padding: 16px 18px;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 12px;
}

.controls-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.ctrl-label {
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
letter-spacing: 0.07em;
min-width: 80px;
}

input[type=range] {
flex: 1;
height: 3px;
border-radius: 2px;
accent-color: #f5a623;
cursor: pointer;
min-width: 80px;
}

.ctrl-val {
font-size: 12px;
font-weight: 700;
color: #f5a623;
min-width: 44px;
text-align: right;
}

.scenario-btns {
display: flex;
gap: 5px;
flex-wrap: wrap;
}

.scen-btn {
font-size: 10px;
font-weight: 700;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.55);
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.02em;
}
.scen-btn:hover { background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.5); color: #f5a623; }
.scen-btn.active { background: #f5a623; border-color: #e08800; color: #0d2040; }

.toggle-wrap {
display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.tog-track {
width: 30px; height: 16px;
background: rgba(255,255,255,0.14);
border-radius: 8px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.tog-track.on { background: #f5a623; }
.tog-thumb {
width: 12px; height: 12px;
background: white;
border-radius: 50%;
position: absolute;
top: 2px; left: 2px;
transition: transform 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tog-track.on .tog-thumb { transform: translateX(14px); }
.toggle-text { font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 600; }

/* Legend */
.legend {
display: flex; gap: 12px; flex-wrap: wrap;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.leg-item {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: rgba(255,255,255,0.38); font-weight: 600;
}
.leg-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

@media (max-width: 480px) {
body { padding: 16px 10px 32px; }
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.icon-circle { width: 44px; height: 44px; }
.icon-circle svg { width: 22px; height: 22px; }
.node-val { font-size: 10px; min-width: 46px; }
.scene-title { font-size: 10px; }
}

⚡ Grid Balanced
Your Home Energy System

SOLAR

0.0 kW
Solar

70%
Battery

3.2 kW
Home

7.0 kW
EV

0.0 kW
Grid

0.0
Solar kW

70%
Battery

0.0
Grid kW

0¢
Bill Credits

Scenario

☀️ Peak Solar
⛅ Cloudy
🌙 Night
⚡ Outage
📤 Exporting

Solar Output

5.0 kW

Home Load

3.2 kW

Battery SOC

70%

Options

EV Charging

Battery

Net Metering

Solar flow
Battery discharge
Grid import
Grid export

// ── Canvas setup ─────────────────────────────────────────────
const canvas = document.getElementById(‘flow-canvas’);
const ctx = canvas.getContext(‘2d’);

// ── Cached DOM refs ───────────────────────────────────────────
const el = {
scene: document.getElementById(‘scene’),
sunCircle: document.getElementById(‘sun-circle’),
sunEl: document.getElementById(‘sun-el’),
badge: document.getElementById(‘net-badge’),
solarOut: document.getElementById(‘solar-output’),
statSolar: document.getElementById(‘stat-solar’),
battFill: document.getElementById(‘batt-fill-inner’),
battPct: document.getElementById(‘batt-pct’),
statBatt: document.getElementById(‘stat-batt’),
battSlider: document.getElementById(‘batt-slider’),
battVal: document.getElementById(‘batt-val’),
houseLoad: document.getElementById(‘house-load’),
gridStat: document.getElementById(‘grid-stat’),
statGrid: document.getElementById(‘stat-grid’),
savings: document.getElementById(‘stat-savings’),
nodeBatt: document.getElementById(‘node-battery’),
nodeEV: document.getElementById(‘node-ev’),
battSocRow: document.getElementById(‘batt-soc-row’),
evToggle: document.getElementById(‘ev-toggle’),
battToggle: document.getElementById(‘batt-toggle’),
nmToggle: document.getElementById(‘nm-toggle’),
solarSlider:document.getElementById(‘solar-slider’),
loadSlider: document.getElementById(‘load-slider’),
solarVal: document.getElementById(‘solar-val’),
loadVal: document.getElementById(‘load-val’),
};

// ── Pre-computed ghost line colors ────────────────────────────
const COLORS = {
solar: { hex: ‘#f5a623’, r: 245, g: 166, b: 35 },
batt: { hex: ‘#4cd9a0’, r: 76, g: 217, b: 160 },
grid: { hex: ‘#60aaff’, r: 96, g: 170, b: 255 },
export: { hex: ‘#e040fb’, r: 224, g: 64, b: 251 },
};

// ── App state ─────────────────────────────────────────────────
let state = { solar: 5.0, load: 3.2, battPct: 70, evOn: false, battOn: true, nmOn: true, scenario: ‘sunny’ };

const PRESETS = {
sunny: { solar: 10.5, load: 3.2, batt: 85, battOn: true, nm: true },
cloudy: { solar: 2.8, load: 3.2, batt: 55, battOn: true, nm: true },
night: { solar: 0, load: 2.1, batt: 65, battOn: true, nm: true },
outage: { solar: 3.5, load: 3.2, batt: 80, battOn: true, nm: false },
export: { solar: 12, load: 1.5, batt: 100, battOn: true, nm: true },
};

// ── Energy math (single source of truth) ─────────────────────
function calcEnergy() {
const s = state;
const evLoad = s.evOn ? 7 : 0;
const totalLoad = s.load + evLoad;
const battAvail = s.battOn && s.battPct > 20;
const rawDef = totalLoad – s.solar;
const rawSur = s.solar – totalLoad;
const battFlow = battAvail && rawDef > 0 ? Math.min(rawDef, 11.5) : 0;
const battCharge= s.battOn && rawSur > 0.3 && s.battPct < 99 ? Math.min(rawSur, 2) : 0; const deficit = rawDef - battFlow; const surplus = rawSur - battCharge; return { totalLoad, battAvail, evLoad, gridImport: deficit > 0.05 ? deficit : 0,
gridExport: surplus > 0.2 ? surplus : 0,
battChargeTaken: battCharge,
rawDef, rawSur,
};
}

// ── Particle system ───────────────────────────────────────────
let particles = [];

class GlowParticle {
constructor(from, to, c) {
this.from = from; this.to = to; this.c = c;
this.t = Math.random();
this.speed = 0.0007 + Math.random() * 0.0006;
this.r = 5 + Math.random() * 3.5;
this.alpha = 0.65 + Math.random() * 0.3;
}
update() { this.t += this.speed; if (this.t > 1) this.t -= 1; }
draw() {
const t = this.t, f = this.from, to = this.to;
const mx = (f.x + to.x) / 2, my = (f.y + to.y) / 2 – 22;
const x = (1-t)*(1-t)*f.x + 2*(1-t)*t*mx + t*t*to.x;
const y = (1-t)*(1-t)*f.y + 2*(1-t)*t*my + t*t*to.y;
const g = ctx.createRadialGradient(x, y, 0, x, y, this.r * 2.8);
const {r, g: gv, b} = this.c;
g.addColorStop(0, `rgba(${r},${gv},${b},${this.alpha})`);
g.addColorStop(0.4, `rgba(${r},${gv},${b},${this.alpha * 0.45})`);
g.addColorStop(1, `rgba(${r},${gv},${b},0)`);
ctx.beginPath();
ctx.arc(x, y, this.r * 2.8, 0, Math.PI * 2);
ctx.fillStyle = g;
ctx.fill();
}
}

function addParticles(from, to, c, kw) {
if (!from || !to || kw 0 && sun && solar) addParticles(sun, solar, COLORS.solar, s.solar * 0.5);
if (s.solar > 0 && solar && house) addParticles(solar, house, COLORS.solar, Math.min(s.solar, e.totalLoad));
if (e.rawSur > 0.3 && batt && s.battOn && s.battPct < 99) addParticles(solar, batt, COLORS.solar, e.battChargeTaken); if (e.rawSur > 0.3 && grid && e.gridExport > 0.2) addParticles(house, grid, COLORS.export, e.gridExport);
if (e.rawDef > 0.2 && e.battAvail && batt && house) addParticles(batt, house, COLORS.batt, Math.min(e.rawDef, 11.5));
if (e.gridImport > 0.2 && grid && house) addParticles(grid, house, COLORS.grid, e.gridImport);
if (ev && solar && s.solar > 0) addParticles(solar, ev, COLORS.solar, Math.min(s.solar, e.evLoad) * 0.5);
if (ev && batt && e.battAvail && e.rawDef > 0) addParticles(batt, ev, COLORS.batt, 2);
if (ev && grid && e.gridImport > 0) addParticles(grid, ev, COLORS.grid, 2);
}

// ── Ghost lines ───────────────────────────────────────────────
function ghostLine(from, to, c, alpha) {
if (!from || !to) return;
const mx = (from.x + to.x) / 2, my = (from.y + to.y) / 2 – 22;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.quadraticCurveTo(mx, my, to.x, to.y);
ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${alpha})`;
ctx.lineWidth = 1;
ctx.setLineDash([4, 6]);
ctx.stroke();
ctx.setLineDash([]);
}

// ── Battery display (lightweight, no full redraw) ─────────────
function renderBatt(pct) {
el.battFill.style.height = pct + ‘%’;
el.battFill.style.background = pct 0 ? ‘orange’ : ”);
el.statSolar.textContent = s.solar.toFixed(1);

// Battery
renderBatt(s.battPct);

// Home load
el.houseLoad.textContent = e.totalLoad.toFixed(1) + ‘ kW’;

// Grid stat
if (e.gridImport > 0) {
el.gridStat.textContent = ‘+’ + e.gridImport.toFixed(1) + ‘ kW’; el.gridStat.className = ‘node-val red’;
el.statGrid.textContent = e.gridImport.toFixed(1); el.statGrid.className = ‘stat-val red’;
} else if (e.gridExport > 0) {
el.gridStat.textContent = ‘−’ + e.gridExport.toFixed(1) + ‘ kW’; el.gridStat.className = ‘node-val green’;
el.statGrid.textContent = e.gridExport.toFixed(1); el.statGrid.className = ‘stat-val green’;
} else {
el.gridStat.textContent = ‘0.0 kW’; el.gridStat.className = ‘node-val’;
el.statGrid.textContent = ‘0.0’; el.statGrid.className = ‘stat-val white’;
}

// Badge
const isOutage = s.scenario === ‘outage’;
if (isOutage && s.battOn) { el.badge.textContent = ‘🔴 Grid Outage — Battery Active’; el.badge.className = ‘net-badge outage’; }
else if (isOutage) { el.badge.textContent = ‘🔴 Grid Outage — No Power’; el.badge.className = ‘net-badge outage’; }
else if (e.gridExport > 0.1 && s.nmOn) { el.badge.textContent = ‘📤 Sending ‘ + e.gridExport.toFixed(1) + ‘ kW to Grid’; el.badge.className = ‘net-badge exporting’; }
else if (e.gridExport > 0.1) { el.badge.textContent = ‘📤 Sending ‘ + e.gridExport.toFixed(1) + ‘ kW — No Credit’; el.badge.className = ‘net-badge importing’; }
else if (e.gridImport > 0.1) { el.badge.textContent = ‘📥 Importing ‘ + e.gridImport.toFixed(1) + ‘ kW’; el.badge.className = ‘net-badge importing’; }
else { el.badge.textContent = ‘⚡ Grid Balanced’; el.badge.className = ‘net-badge’; }

// Bill credits
if (!s.nmOn) { el.savings.textContent = ‘N/A’; el.savings.className = ‘stat-val white’; }
else if (e.gridExport > 0) { el.savings.textContent = ‘Earning’; el.savings.className = ‘stat-val green’; }
else if (e.gridImport > 0) { el.savings.textContent = ‘Using’; el.savings.className = ‘stat-val red’; }
else { el.savings.textContent = ‘Balanced’; el.savings.className = ‘stat-val white’; }

// Glows
el.sunCircle.style.opacity = s.solar < 0.1 ? '0.15' : '1'; el.sunCircle.style.boxShadow = s.solar < 0.1 ? 'none' : '0 0 24px 8px rgba(245,166,35,0.45)'; document.getElementById('solar-circle').classList.toggle('glowing', s.solar > 0.5);
document.getElementById(‘batt-circle’).classList.toggle(‘glowing’, e.battAvail && (e.rawDef > 0.5 || e.rawSur > 0.5));
document.getElementById(‘house-circle’).classList.toggle(‘glowing’, true);
document.getElementById(‘grid-circle’).classList.toggle(‘glowing’, e.gridImport > 0.3 || e.gridExport > 0.2);

rebuildParticles();
}

// ── Animation loop ────────────────────────────────────────────
function animate() {
canvas.width = el.scene.offsetWidth;
canvas.height = el.scene.offsetHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);

const solar = nodeCenter(‘node-solar’), batt = nodeCenter(‘node-battery’);
const house = nodeCenter(‘node-house’), grid = nodeCenter(‘node-grid’);
const ev = state.evOn ? nodeCenter(‘node-ev’) : null;
const sun = sunCenter();

ghostLine(sun, solar, COLORS.solar, 0.08);
ghostLine(solar, house, COLORS.solar, 0.10);
ghostLine(solar, batt, COLORS.solar, 0.08);
ghostLine(grid, house, COLORS.grid, 0.08);
ghostLine(batt, house, COLORS.batt, 0.10);
ghostLine(house, grid, COLORS.export, 0.08);
if (ev) {
ghostLine(solar, ev, COLORS.solar, 0.07);
ghostLine(batt, ev, COLORS.batt, 0.07);
ghostLine(grid, ev, COLORS.grid, 0.07);
}

for (const p of particles) { p.update(); p.draw(); }
requestAnimationFrame(animate);
}

// ── Controls ──────────────────────────────────────────────────
function onSolarChange(v) { state.solar = parseFloat(v); el.solarVal.textContent = parseFloat(v).toFixed(1) + ‘ kW’; updateUI(); }
function onLoadChange(v) { state.load = parseFloat(v); el.loadVal.textContent = parseFloat(v).toFixed(1) + ‘ kW’; updateUI(); }
function onBattChange(v) { state.battPct = parseInt(v); updateUI(); }

function toggleEV() {
state.evOn = !state.evOn;
el.evToggle.classList.toggle(‘on’, state.evOn);
el.nodeEV.style.display = state.evOn ? ‘flex’ : ‘none’;
updateUI();
}

function toggleBattery() {
state.battOn = !state.battOn;
el.battToggle.classList.toggle(‘on’, state.battOn);
el.nodeBatt.style.display = state.battOn ? ‘flex’ : ‘none’;
el.battSocRow.style.display = state.battOn ? ‘flex’ : ‘none’;
if (!state.battOn) { state.battPct = 0; renderBatt(0); }
updateUI();
}

function toggleNM() {
state.nmOn = !state.nmOn;
el.nmToggle.classList.toggle(‘on’, state.nmOn);
updateUI();
}

function setScenario(s, btn) {
state.scenario = s;
document.querySelectorAll(‘.scen-btn’).forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
const p = PRESETS[s];
Object.assign(state, { solar: p.solar, load: p.load, battOn: p.battOn, nmOn: p.nm });
state.battPct = p.battOn ? p.batt : 0;

el.solarSlider.value = p.solar; el.solarVal.textContent = p.solar.toFixed(1) + ‘ kW’;
el.loadSlider.value = p.load; el.loadVal.textContent = p.load.toFixed(1) + ‘ kW’;
renderBatt(state.battPct);
el.nodeBatt.style.display = p.battOn ? ‘flex’ : ‘none’;
el.battSocRow.style.display = p.battOn ? ‘flex’ : ‘none’;
el.battToggle.classList.toggle(‘on’, p.battOn);
el.nmToggle.classList.toggle(‘on’, p.nm);
updateUI();
}

// ── Battery tick ──────────────────────────────────────────────
setInterval(() => {
if (!state.battOn) return;
const { rawDef, rawSur } = calcEnergy();
if (rawDef > 0.2 && state.battPct > 20) {
const prev = state.battPct;
state.battPct = Math.max(20, state.battPct – 1);
renderBatt(state.battPct);
if (prev > 20 && state.battPct 0.3 && state.battPct < 100) { state.battPct = Math.min(100, state.battPct + 1); renderBatt(state.battPct); } }, 2000); // ── Boot ────────────────────────────────────────────────────── setScenario('sunny', document.querySelector('.scen-btn.active')); el.nodeBatt.style.display = el.battSocRow.style.display = 'flex'; animate(); \n\n[/cs_content_seo][/cs_element_layout_div][/cs_element_layout_column][cs_element_layout_column _id="58" ][cs_element_form_integration _id="59" ][/cs_element_layout_column][/cs_element_layout_row][cs_element_layout_row _id="60" ][cs_element_layout_column _id="61" ][cs_element_headline _id="62" ][cs_content_seo]Renu Energy Solutions' Solar Energy Impact \n\nQuick caption here\n\n[/cs_content_seo][cs_element_component _id="63" ][/cs_element_component][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][cs_element_section _id="64" ][cs_element_layout_row _id="65" ][cs_element_layout_column _id="66" ][cs_element_text _id="67" ][cs_content_seo]Why Renu Energy Solutions?\n\n[/cs_content_seo][/cs_element_layout_column][/cs_element_layout_row][cs_element_layout_row _id="68" ][cs_element_layout_column _id="69" ][cs_element_text _id="70" ][cs_content_seo]Why Renu Energy Solutions?\n\n[/cs_content_seo][/cs_element_layout_column][/cs_element_layout_row][cs_element_component _id="71" ][/cs_element_component][cs_element_component _id="72" ][/cs_element_component][/cs_element_section][cs_element_section _id="73" ][cs_element_component _id="74" ][/cs_element_component][/cs_element_section][cs_element_section _id="75" ][cs_element_layout_div _id="76" ][cs_element_layout_row _id="77" ][cs_element_layout_column _id="78" ][cs_element_headline _id="79" ][cs_content_seo]Environmental and Energy Independence Benefits\n\nQuick caption here\n\n[/cs_content_seo][cs_element_text _id="80" ][cs_content_seo]Installing solar panels for the home lowers carbon emissions and reduces reliance on fossil fuels. Producing clean electricity onsite supports a more sustainable future and increases household energy independence. Homeowners gain protection from rate hikes and grid supply disruptions.\n\n[/cs_content_seo][cs_element_layout_row_2 _id="81" ][cs_element_layout_column_2 _id="82" ][cs_element_headline _id="83" ][cs_content_seo]Smart. Reliable. Solar.\n\nRenu Energy Solutions delivers dependable solar energy systems that perform day after day. Each system includes monitoring, warranty coverage, and long-term energy value.\n\n[/cs_content_seo][/cs_element_layout_column_2][cs_element_layout_column_2 _id="84" ][cs_element_headline _id="85" ][cs_content_seo]Serving the Carolinas\n\nRenu Energy Solutions installs home solar energy systems across North Carolina and South Carolina, including Charlotte, Asheville, Greensboro, Raleigh, Columbia, Greenville, and surrounding areas.\n\n[/cs_content_seo][/cs_element_layout_column_2][/cs_element_layout_row_2][/cs_element_layout_column][cs_element_layout_column _id="86" ][cs_element_layout_grid _id="87" ][cs_element_layout_cell _id="88" ][cs_element_image _id="89" ][/cs_element_layout_cell][cs_element_layout_cell _id="90" ][cs_element_image _id="91" ][/cs_element_layout_cell][cs_element_layout_cell _id="92" ][cs_element_image _id="93" ][/cs_element_layout_cell][cs_element_layout_cell _id="94" ][cs_element_image _id="95" ][/cs_element_layout_cell][/cs_element_layout_grid][/cs_element_layout_column][/cs_element_layout_row][/cs_element_layout_div][/cs_element_section][cs_element_section _id="96" ][cs_element_layout_row _id="97" ][cs_element_layout_column _id="98" ][cs_element_headline _id="99" ][cs_content_seo]Harness The Power of The SUN\n\n[/cs_content_seo][/cs_element_layout_column][/cs_element_layout_row][cs_element_component _id="100" ][/cs_element_component][/cs_element_section][cs_element_section _id="101" ][cs_element_layout_row _id="102" ][cs_element_layout_column _id="103" ][cs_element_layout_div _id="104" ][cs_element_layout_div_2 _id="105" ][cs_element_component _id="106" ][/cs_element_component][/cs_element_layout_div_2][/cs_element_layout_div][/cs_element_layout_column][/cs_element_layout_row][/cs_element_section][/cs_content]