:root {
  --navy: #071d2b;
  --navy-2: #0a2737;
  --teal: #0c5966;
  --cyan: #49e5e8;
  --cyan-soft: #a8fbfb;
  --lime: #b9f342;
  --ink: #0b2633;
  --muted: #667783;
  --line: #dce6e9;
  --panel: #f4f8f8;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(10, 38, 51, .11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { max-width: 100%; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 108px 0; }
.site-shell { overflow: hidden; }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 78px; display: flex; align-items: center; transition: .3s ease; }
.site-header.scrolled { background: rgba(7, 29, 43, .92); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-wrap { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; }
.brand-word { font-size: 25px; letter-spacing: -.8px; }
.brand-word span { color: var(--cyan); }
.brand-mark { width: 32px; height: 32px; position: relative; display: inline-block; }
.brand-ring { position: absolute; border: 3px solid var(--cyan); border-radius: 999px; }
.ring-a { width: 25px; height: 15px; transform: rotate(48deg); top: 8px; left: 3px; }
.ring-b { width: 25px; height: 15px; transform: rotate(-48deg); top: 8px; left: 3px; border-color: var(--lime); }
.brand-core { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; top: 13px; left: 13px; box-shadow: 0 0 16px rgba(73,229,232,.8); }
.main-nav { display: flex; justify-content: center; gap: 28px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 600; }
.main-nav a { transition: .2s; }
.main-nav a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 21px; border-radius: 10px; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--cyan); color: var(--navy); box-shadow: 0 14px 34px rgba(73,229,232,.18); }
.btn-primary:hover { background: #6cf0f2; box-shadow: 0 16px 38px rgba(73,229,232,.26); }
.btn-secondary { border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.05); }
.btn-secondary:hover { background: rgba(255,255,255,.1); }
.btn-portal { min-height: 42px; border: 1px solid rgba(73,229,232,.34); color: var(--cyan); background: rgba(73,229,232,.07); }
.nav-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px; background: #fff; }
.hero { position: relative; min-height: 760px; padding: 165px 0 34px; color: #fff; background: radial-gradient(circle at 77% 17%, rgba(16,104,118,.5), transparent 31%), linear-gradient(135deg, #061922 0%, #071d2b 55%, #0a2938 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right, transparent 0, #000 45%, #000 100%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.hero-glow-one { width: 340px; height: 340px; background: rgba(73,229,232,.11); right: 14%; top: 160px; }
.hero-glow-two { width: 270px; height: 270px; background: rgba(185,243,66,.06); right: -40px; top: 390px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 66px; align-items: center; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--cyan-soft); font-size: 12px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.dark-eye { color: var(--teal); }
.pulse-dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 6px rgba(185,243,66,.09); }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(48px, 6vw, 78px); line-height: .98; letter-spacing: -3.7px; font-weight: 820; }
.hero h1 span { color: var(--cyan); }
.hero-lead { max-width: 650px; margin: 27px 0 31px; color: rgba(255,255,255,.71); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-proof { margin-top: 42px; display: flex; gap: 36px; flex-wrap: wrap; }
.hero-proof div { display: flex; flex-direction: column; gap: 2px; }
.hero-proof strong { font-size: 18px; color: #fff; }
.hero-proof span { font-size: 12px; color: rgba(255,255,255,.5); }
.hero-visual { position: relative; min-height: 500px; padding: 24px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: 0 38px 90px rgba(0,0,0,.27); backdrop-filter: blur(10px); }
.hero-visual::after { content:""; position:absolute; inset:10px; border:1px solid rgba(73,229,232,.07); border-radius:18px; pointer-events:none; }
.visual-topline { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); }
.visual-topline > div { display:flex; flex-direction:column; gap:4px; }
.visual-topline strong { font-size:17px; }
.visual-kicker { color:rgba(255,255,255,.4); font-size:10px; letter-spacing:1.5px; font-weight:800; }
.status-pill { display:inline-flex; align-items:center; gap:7px; color:#d9ffd0; background:rgba(185,243,66,.08); border:1px solid rgba(185,243,66,.18); border-radius:999px; padding:7px 10px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.status-pill i { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px rgba(185,243,66,.8); }
.flow-canvas { position:relative; height:310px; }
.flow-node { position:absolute; z-index:2; display:flex; align-items:center; gap:10px; min-width:128px; padding:12px 13px; background:rgba(5,25,34,.78); border:1px solid rgba(255,255,255,.1); border-radius:13px; box-shadow:0 14px 26px rgba(0,0,0,.18); }
.flow-node small { display:block; color:rgba(255,255,255,.4); font-size:9px; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.flow-node strong { font-size:12px; }
.node-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:10px; background:rgba(73,229,232,.1); color:var(--cyan); }
.node-grid { top:36px; left:9px; }
.node-solar { top:132px; left:9px; }
.node-water { bottom:23px; left:9px; }
.node-building { right:14px; top:110px; min-width:178px; padding:16px; border-color:rgba(73,229,232,.25); background:rgba(7,31,43,.94); }
.building-icon { display:grid; grid-template-columns:repeat(3,6px); gap:3px; align-items:end; width:36px; height:36px; padding:5px; border-radius:8px; background:rgba(73,229,232,.11); }
.building-icon span { background:var(--cyan); border-radius:2px 2px 0 0; }
.building-icon span:nth-child(1){height:17px}.building-icon span:nth-child(2){height:25px}.building-icon span:nth-child(3){height:12px}
.building-live { position:absolute; right:10px; top:10px; font-size:8px; font-weight:900; color:var(--lime); }
.flow-line { position:absolute; left:135px; width:202px; height:2px; z-index:1; background:linear-gradient(90deg, rgba(73,229,232,.9), rgba(73,229,232,.14)); transform-origin:left center; }
.flow-line::after { content:""; position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px rgba(73,229,232,.8); animation:travel 2.8s linear infinite; }
.line-grid { top:69px; transform:rotate(18deg); }
.line-solar { top:165px; transform:rotate(-1deg); }
.line-water { top:255px; transform:rotate(-19deg); }
.line-water::after { animation-delay:-1.3s; }
.line-solar::after { animation-delay:-.6s; }
.flow-label { position:absolute; z-index:3; padding:4px 7px; border-radius:6px; background:#0a2634; border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.48); font-size:8px; letter-spacing:.8px; text-transform:uppercase; }
.label-a{left:194px;top:79px}.label-b{left:198px;top:148px}.label-c{left:201px;top:223px}
.visual-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid rgba(255,255,255,.08); padding-top:16px; }
.visual-metrics div { padding:11px; border-radius:10px; background:rgba(255,255,255,.035); }
.visual-metrics span { display:block; color:rgba(255,255,255,.42); font-size:9px; text-transform:uppercase; letter-spacing:.8px; }
.visual-metrics strong { display:block; margin:3px 0; font-size:12px; }
.visual-metrics em { color:var(--cyan); font-size:9px; font-style:normal; }
.utility-strip { position:relative; z-index:2; margin-top:68px; padding-top:27px; border-top:1px solid rgba(255,255,255,.09); display:flex; justify-content:center; align-items:center; gap:17px; flex-wrap:wrap; color:rgba(255,255,255,.4); font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.utility-strip i { width:3px; height:3px; background:rgba(73,229,232,.5); border-radius:50%; }
.light-section { background:#fff; }
.section-heading { max-width:790px; margin-bottom:55px; }
.section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading h2, .split-heading h2, .intelligence-copy h2, .cta-inner h2 { margin:0; color:var(--ink); font-size:clamp(38px,4.8vw,58px); line-height:1.05; letter-spacing:-2.5px; }
.section-heading p, .split-heading > p, .intelligence-copy > p { margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-height:290px; padding:30px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 5px 24px rgba(14,50,63,.035); transition:.25s ease; }
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#c7dcdf; }
.feature-wide { grid-column:span 3; min-height:330px; display:grid; grid-template-columns:auto 1fr 1fr; gap:28px; align-items:center; background:linear-gradient(120deg,#f4fbfb 0%,#fff 54%); overflow:hidden; }
.feature-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; background:#edf4f4; color:var(--teal); font-size:13px; font-weight:900; }
.feature-icon.electric { background:rgba(73,229,232,.13); color:#087785; }
.feature-icon.lime { background:rgba(185,243,66,.18); color:#557e00; }
.card-kicker { display:block; margin:22px 0 9px; color:#5e747c; text-transform:uppercase; font-size:10px; letter-spacing:1.4px; font-weight:900; }
.feature-wide .card-kicker { margin-top:0; }
.feature-card h3 { margin:0 0 12px; font-size:24px; line-height:1.18; letter-spacing:-.7px; }
.feature-wide h3 { font-size:31px; }
.feature-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.mini-dashboard { padding:18px; background:var(--navy); border-radius:17px; transform:rotate(-2deg); box-shadow:0 24px 40px rgba(7,29,43,.18); }
.mini-head { display:flex; gap:5px; margin-bottom:18px; }
.mini-head span { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18); }
.mini-kpis { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:15px; }
.mini-kpis b { height:39px;border-radius:7px;background:rgba(255,255,255,.065);position:relative; }
.mini-kpis b:first-child::after { content:"";position:absolute;left:7px;right:17px;bottom:8px;height:4px;border-radius:3px;background:var(--cyan); }
.mini-chart { height:95px;border-radius:9px;background:rgba(255,255,255,.035);display:flex;align-items:end;gap:7px;padding:14px; }
.mini-chart i { flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#49e5e8,#197a85); }
.mini-chart i:nth-child(1){height:36%}.mini-chart i:nth-child(2){height:53%}.mini-chart i:nth-child(3){height:43%}.mini-chart i:nth-child(4){height:76%}.mini-chart i:nth-child(5){height:64%}.mini-chart i:nth-child(6){height:85%}.mini-chart i:nth-child(7){height:70%}
.solutions-section { background:var(--navy); color:#fff; position:relative; }
.solutions-section::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 35%,rgba(73,229,232,.1),transparent 26%);pointer-events:none; }
.split-heading { position:relative; display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;margin-bottom:48px; }
.split-heading h2 { color:#fff; }
.split-heading > p { color:rgba(255,255,255,.58); }
.solution-tabs { position:relative; }
.tab-list { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px; }
.solution-tab { cursor:pointer;border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:11px 17px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.56);font-size:12px;font-weight:800; }
.solution-tab.active { background:var(--cyan);color:var(--navy);border-color:var(--cyan); }
.tab-panel { display:none;min-height:430px;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;padding:42px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:rgba(255,255,255,.035); }
.tab-panel.active { display:grid; }
.tab-copy .card-kicker { color:var(--cyan);margin-top:0; }
.tab-copy h3 { margin:0 0 14px;font-size:34px;letter-spacing:-1.2px; }
.tab-copy p { color:rgba(255,255,255,.58);line-height:1.7;font-size:15px; }
.check-list { list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.check-list li { position:relative;padding-left:21px;color:rgba(255,255,255,.76);font-size:12px;font-weight:650; }
.check-list li::before { content:"✓";position:absolute;left:0;color:var(--lime);font-weight:900; }
.chart-card { padding:20px;border-radius:16px;background:#0a2735;border:1px solid rgba(255,255,255,.08); }
.chart-head { display:flex;justify-content:space-between;gap:20px;align-items:center;color:#fff;font-size:12px;font-weight:800; }
.chart-head small { color:rgba(255,255,255,.34);font-weight:600; }
.chart-area { position:relative;height:260px;margin-top:20px;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08); }
.chart-area svg { position:absolute;inset:0;width:100%;height:100%; }
.yline { position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.06); }.y1{top:25%}.y2{top:50%}.y3{top:75%}
.chart-foot { display:flex;justify-content:space-between;margin-top:9px;color:rgba(255,255,255,.3);font-size:9px; }
.metric-showcase,.solar-visual,.asset-map,.finance-visual { min-height:330px;border-radius:18px;background:linear-gradient(145deg,rgba(73,229,232,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08); }
.metric-showcase { display:flex;align-items:center;justify-content:center;gap:34px;padding:35px; }
.metric-orb { width:190px;height:190px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid rgba(73,229,232,.34);box-shadow:inset 0 0 60px rgba(73,229,232,.08),0 0 45px rgba(73,229,232,.06); }
.metric-orb span,.metric-orb small{font-size:9px;color:rgba(255,255,255,.42);letter-spacing:1.2px;text-transform:uppercase}.metric-orb strong{font-size:43px;color:var(--cyan);margin:4px 0}
.metric-stack{display:grid;gap:10px}.metric-stack div{padding:14px 17px;border-radius:11px;background:rgba(255,255,255,.045)}.metric-stack span{display:block;font-size:9px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1px}.metric-stack b{font-size:12px}
.solar-visual { position:relative;display:grid;place-items:center;overflow:hidden; }.sun-core{width:95px;height:95px;border-radius:50%;display:grid;place-items:center;font-size:37px;background:rgba(185,243,66,.13);color:var(--lime);box-shadow:0 0 55px rgba(185,243,66,.08);position:absolute;left:12%;top:26%}.solar-line{position:absolute;left:31%;right:27%;top:46%;height:2px;background:linear-gradient(90deg,var(--lime),var(--cyan))}.solar-line::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cyan);top:-3px;animation:travel 2.4s linear infinite}.solar-building{position:absolute;right:12%;top:27%;width:106px;height:128px;border:1px solid rgba(73,229,232,.26);background:rgba(73,229,232,.05);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px;align-items:end}.solar-building span{background:var(--cyan);border-radius:3px 3px 0 0}.solar-building span:nth-child(1){height:48%}.solar-building span:nth-child(2){height:82%}.solar-building span:nth-child(3){height:64%}.solar-caption{position:absolute;left:32%;bottom:30px}.solar-caption b,.solar-caption small{display:block}.solar-caption small{color:rgba(255,255,255,.38);margin-top:4px;font-size:10px}
.asset-map { display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:32px;position:relative; }.asset-box{padding:18px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.12);min-width:92px;text-align:center;font-size:12px;font-weight:800}.asset-box.meter,.asset-box.output{border-color:rgba(73,229,232,.28);color:var(--cyan)}.asset-arrow{color:rgba(255,255,255,.28)}.asset-sub{position:absolute;bottom:32px;color:rgba(255,255,255,.4);font-size:10px}
.finance-visual{display:flex;align-items:center;justify-content:center;gap:12px;padding:28px;flex-wrap:wrap}.finance-card{padding:18px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);min-width:155px}.finance-card small,.finance-card strong{display:block}.finance-card small{color:rgba(255,255,255,.37);font-size:9px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.finance-card strong{font-size:13px}.finance-card.result{border-color:rgba(185,243,66,.26);box-shadow:0 0 30px rgba(185,243,66,.05)}.finance-card.result strong{color:var(--lime)}
.intelligence-section { background:#f1f6f6; }
.intelligence-grid { display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center; }
.intelligence-copy h2 { font-size:clamp(38px,4.6vw,55px); }
.intelligence-points { margin-top:33px;display:grid;gap:20px; }
.intelligence-points div { display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start; }
.intelligence-points span { display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#dff4f4;color:#0d7380;font-size:11px;font-weight:900; }
.intelligence-points p { margin:4px 0;color:var(--muted);font-size:14px;line-height:1.55; }.intelligence-points strong{color:var(--ink)}
.intel-console { padding:19px;border-radius:22px;background:var(--navy);box-shadow:0 32px 70px rgba(7,29,43,.2); }
.console-head,.console-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:8px 7px 17px;color:#fff}.console-head>div{display:flex;align-items:center;gap:8px}.console-head small,.console-footer{color:rgba(255,255,255,.36);font-size:9px}.console-logo-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px rgba(73,229,232,.7)}
.console-body { display:grid;gap:9px; }.insight-card{display:grid;grid-template-columns:40px 1fr;gap:13px;padding:17px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.insight-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.05);font-weight:900}.insight-card small{display:block;font-size:8px;letter-spacing:1px;font-weight:900;margin-bottom:5px}.insight-card strong{font-size:13px;color:#fff}.insight-card p{margin:6px 0 0;color:rgba(255,255,255,.42);font-size:10px;line-height:1.5}.insight-card.critical .insight-icon,.insight-card.critical small{color:#ffd36b}.insight-card.positive .insight-icon,.insight-card.positive small{color:var(--lime)}.insight-card.neutral .insight-icon,.insight-card.neutral small{color:var(--cyan)}.console-footer{padding:15px 7px 3px}.console-footer span:first-child{display:flex;align-items:center;gap:6px}.console-footer i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.why-section { background:#fff; }.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.why-card{padding:28px 24px;border-top:2px solid #d9e7e8;background:#f8fbfb;min-height:240px}.why-card>span{display:block;color:#5d858c;font-size:11px;font-weight:900;letter-spacing:1px;margin-bottom:48px}.why-card h3{font-size:21px;margin:0 0 12px}.why-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.why-card:nth-child(2){border-color:var(--cyan)}.why-card:nth-child(3){border-color:var(--lime)}
.portal-cta { position:relative;padding:85px 0;background:linear-gradient(130deg,#071d2b,#0b3544);color:#fff;overflow:hidden; }.cta-grid-bg{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(90deg,transparent,#000)}.cta-inner{position:relative;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}.cta-inner h2{color:#fff;max-width:760px}.cta-inner p{margin:18px 0 0;max-width:710px;color:rgba(255,255,255,.57);line-height:1.7}.cta-button{min-width:250px;min-height:56px}
.site-footer{padding:48px 0;background:#05151e;color:#fff}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:30px;align-items:end}.footer-brand{margin-bottom:12px}.footer-grid p{margin:0;color:rgba(255,255,255,.36);font-size:12px}.footer-links{display:flex;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.58);font-size:11px;font-weight:700}.footer-links a:hover{color:var(--cyan)}.footer-meta{display:flex;flex-direction:column;gap:7px;text-align:right;color:rgba(255,255,255,.32);font-size:10px}
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
@keyframes travel { from{left:0} to{left:calc(100% - 8px)} }
@media (max-width: 1020px){.main-nav{display:none}.nav-wrap{grid-template-columns:auto 1fr auto}.nav-toggle{display:block;justify-self:end}.nav-portal{display:none}.main-nav.open{position:absolute;display:flex;flex-direction:column;top:70px;left:20px;right:20px;padding:20px;background:#092432;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.25)}.hero-grid,.intelligence-grid{grid-template-columns:1fr}.hero{padding-top:135px}.hero-visual{max-width:700px;width:100%;margin:0 auto}.feature-card{grid-column:span 1}.feature-wide{grid-column:span 3}.why-grid{grid-template-columns:1fr 1fr}.split-heading{grid-template-columns:1fr;gap:15px}.tab-panel{grid-template-columns:1fr;}.cta-inner{grid-template-columns:1fr}.cta-button{justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}.footer-meta{grid-column:span 2;text-align:left}}
@media (max-width: 720px){.container{width:min(100% - 28px,1180px)}.section{padding:76px 0}.site-header{height:68px}.hero{min-height:auto;padding:125px 0 28px}.hero h1{font-size:48px;letter-spacing:-2.6px}.hero-lead{font-size:16px}.hero-proof{gap:23px}.hero-visual{min-height:440px;padding:17px}.flow-canvas{height:285px}.flow-node{min-width:109px;padding:9px}.node-building{min-width:145px;right:3px}.flow-line{left:112px;width:155px}.visual-metrics{grid-template-columns:1fr}.visual-metrics div{display:flex;align-items:center;justify-content:space-between;gap:10px}.utility-strip{margin-top:44px}.section-heading h2,.split-heading h2,.intelligence-copy h2,.cta-inner h2{font-size:38px;letter-spacing:-1.8px}.platform-grid{grid-template-columns:1fr}.feature-wide{grid-column:auto;grid-template-columns:1fr;}.feature-wide>.feature-icon{display:none}.mini-dashboard{margin-top:10px}.check-list{grid-template-columns:1fr}.tab-panel{padding:26px 20px}.tab-copy h3{font-size:29px}.metric-showcase{flex-direction:column}.solar-visual{min-height:290px}.sun-core{left:7%}.solar-building{right:7%}.solar-caption{left:18px}.asset-arrow{transform:rotate(90deg)}.asset-map{flex-direction:column}.asset-sub{position:static;margin-top:10px}.finance-visual{flex-direction:column}.why-grid{grid-template-columns:1fr}.why-card{min-height:190px}.why-card>span{margin-bottom:26px}.footer-grid{grid-template-columns:1fr}.footer-meta{grid-column:auto}.nav-wrap{gap:12px}.brand-word{font-size:22px}.hero-actions .btn{width:100%}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.flow-line::after,.solar-line::after{animation:none}}


/* =========================================================
   EcoFlux Website V2 - Live Flow / EcoFlux LiveFlow Experience
   ========================================================= */
.hero { isolation:isolate; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(circle at var(--mx,78%) var(--my,28%), rgba(73,229,232,.085), transparent 18%); transition:background .15s linear; }
.hero-visual { overflow:hidden; transform-style:preserve-3d; will-change:transform; transition:transform .22s ease-out, border-color .3s ease, box-shadow .3s ease; }
.hero-visual:hover { border-color:rgba(73,229,232,.22); box-shadow:0 42px 100px rgba(0,0,0,.32), 0 0 55px rgba(73,229,232,.045); }
.digital-twin-canvas { overflow:hidden; border-radius:15px; }
.twin-grid { position:absolute; inset:0; opacity:.13; background-image:linear-gradient(rgba(73,229,232,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(73,229,232,.12) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(circle at 67% 48%,#000,transparent 74%); animation:gridDrift 14s linear infinite; }
.flow-network { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.network-path { fill:none; stroke-width:2.15; opacity:.66; vector-effect:non-scaling-stroke; transition:opacity .25s ease, stroke-width .25s ease, filter .25s ease; }
.network-grid { stroke:url(#gridFlow); }
.network-solar { stroke:url(#solarFlow); }
.network-water { stroke:url(#waterFlow); }
.network-return { stroke:rgba(73,229,232,.18); stroke-dasharray:5 9; }
.flow-particle { fill:var(--cyan); opacity:.95; }
.p-solar { fill:var(--lime); }
.p-water { fill:#78c8ff; }
.twin-scan { position:absolute; z-index:1; left:32%; right:5%; top:30px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 17px rgba(73,229,232,.7); opacity:.5; animation:twinScan 4.8s ease-in-out infinite; }
.interactive-node { cursor:default; transition:transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease, opacity .24s ease; }
.interactive-node:hover,.interactive-node:focus-visible { transform:translateY(-3px) scale(1.025); border-color:rgba(73,229,232,.42); background:rgba(7,35,46,.96); box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 28px rgba(73,229,232,.08); outline:none; }
.flow-node em { display:block; margin-top:4px; color:rgba(255,255,255,.28); font-size:8px; font-style:normal; letter-spacing:.35px; }
.node-primary { animation:buildingBreath 3.8s ease-in-out infinite; }
.node-primary::before { content:""; position:absolute; inset:-10px; z-index:-1; border-radius:18px; border:1px solid rgba(73,229,232,.08); opacity:.3; animation:nodeHalo 3.8s ease-out infinite; }
.building-live { letter-spacing:.7px; }
.building-icon span { box-shadow:0 0 10px rgba(73,229,232,.22); animation:buildingBars 2.7s ease-in-out infinite alternate; }
.building-icon span:nth-child(2){animation-delay:-.7s}.building-icon span:nth-child(3){animation-delay:-1.3s}
.digital-twin-canvas.source-focus .interactive-node { opacity:.38; }
.digital-twin-canvas.source-focus .interactive-node.is-active { opacity:1; }
.digital-twin-canvas.source-focus .network-path { opacity:.12; }
.digital-twin-canvas.source-focus .network-path.is-active { opacity:1; stroke-width:3.25; filter:drop-shadow(0 0 7px rgba(73,229,232,.55)); }
.twin-tooltip { position:absolute; z-index:4; left:43%; bottom:16px; width:180px; padding:10px 12px; border-radius:10px; background:rgba(5,22,31,.82); border:1px solid rgba(73,229,232,.12); backdrop-filter:blur(10px); transition:opacity .25s ease, transform .25s ease; opacity:.72; }
.twin-tooltip span { display:block; color:var(--cyan); font-size:7px; letter-spacing:1.1px; font-weight:900; }
.twin-tooltip strong { display:block; margin:3px 0; font-size:10px; color:#fff; }
.twin-tooltip small { display:block; color:rgba(255,255,255,.38); font-size:8px; line-height:1.35; }
.hero-visual.tilt-ready { transform:perspective(1100px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) translateZ(0); }
.visual-metrics div { transition:transform .25s ease, background .25s ease, border-color .25s ease; border:1px solid transparent; }
.visual-metrics div:hover { transform:translateY(-3px); background:rgba(73,229,232,.065); border-color:rgba(73,229,232,.12); }
.pulse-dot { animation:statusPulse 2.1s ease-in-out infinite; }
.status-pill i,.console-logo-dot { animation:statusPulse 2.1s ease-in-out infinite; }
.mini-chart i { transform-origin:bottom; animation:miniBars 4.4s ease-in-out infinite alternate; }
.mini-chart i:nth-child(2){animation-delay:-.8s}.mini-chart i:nth-child(3){animation-delay:-1.6s}.mini-chart i:nth-child(4){animation-delay:-2.2s}.mini-chart i:nth-child(5){animation-delay:-1.1s}.mini-chart i:nth-child(6){animation-delay:-2.8s}
.line-path { stroke-dasharray:900; stroke-dashoffset:900; animation:chartDraw 3.2s ease forwards; }
.area-path { opacity:0; animation:chartFill 1.4s ease 1.1s forwards; }
.intel-console { position:relative; overflow:hidden; }
.intel-console::after { content:""; position:absolute; left:-20%; right:-20%; top:-25%; height:46%; background:linear-gradient(180deg,transparent,rgba(73,229,232,.055),transparent); transform:rotate(-4deg); pointer-events:none; animation:consoleScan 6.8s linear infinite; }
.insight-card { position:relative; overflow:hidden; transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.insight-card:hover { transform:translateX(5px); border-color:rgba(73,229,232,.18); background:rgba(255,255,255,.06); }
.insight-card::after { content:""; position:absolute; left:-25%; top:0; width:18%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:cardSweep 7s linear infinite; }
.insight-card:nth-child(2)::after{animation-delay:-2.2s}.insight-card:nth-child(3)::after{animation-delay:-4.5s}

@keyframes gridDrift { to{background-position:28px 28px} }
@keyframes twinScan { 0%,100%{transform:translateY(0);opacity:.12} 50%{transform:translateY(235px);opacity:.58} }
@keyframes buildingBreath { 0%,100%{box-shadow:0 14px 26px rgba(0,0,0,.18),0 0 0 rgba(73,229,232,0)} 50%{box-shadow:0 18px 34px rgba(0,0,0,.23),0 0 34px rgba(73,229,232,.09)} }
@keyframes nodeHalo { 0%{transform:scale(.96);opacity:.38} 75%,100%{transform:scale(1.16);opacity:0} }
@keyframes buildingBars { to{filter:brightness(1.45);transform:scaleY(.86)} }
@keyframes statusPulse { 0%,100%{box-shadow:0 0 0 0 rgba(185,243,66,.05),0 0 11px rgba(185,243,66,.65)} 50%{box-shadow:0 0 0 6px rgba(185,243,66,.07),0 0 17px rgba(185,243,66,.8)} }
@keyframes miniBars { to{transform:scaleY(.72);filter:brightness(1.18)} }
@keyframes chartDraw { to{stroke-dashoffset:0} }
@keyframes chartFill { to{opacity:1} }
@keyframes consoleScan { from{transform:translateY(-180%) rotate(-4deg)} to{transform:translateY(560%) rotate(-4deg)} }
@keyframes cardSweep { from{transform:translateX(-100%)} to{transform:translateX(900%)} }

@media (max-width:720px){
  .flow-network{opacity:.9}.twin-tooltip{display:none}.twin-scan{right:0}.flow-node em{display:none}
  .digital-twin-canvas.source-focus .interactive-node{opacity:1}.hero-visual.tilt-ready{transform:none!important}
}
@media (prefers-reduced-motion: reduce){
  .twin-grid,.twin-scan,.node-primary,.node-primary::before,.building-icon span,.pulse-dot,.status-pill i,.console-logo-dot,.mini-chart i,.intel-console::after,.insight-card::after{animation:none!important}
  .hero-visual.tilt-ready{transform:none!important}.line-path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}.area-path{opacity:1;animation:none}
}


/* =========================================================
   EcoFlux Live Flow Hotfix 1 - clean, cache-safe EcoFlux LiveFlow
   ========================================================= */
.digital-twin-canvas { isolation:isolate; }
.flow-network { z-index:1; pointer-events:none; }
.flow-route { opacity:.78; transition:opacity .25s ease, filter .25s ease; }
.flow-route path { fill:none !important; vector-effect:non-scaling-stroke; }
.route-pulse { opacity:.96; }
.route-pulse.soft { opacity:.62; }
.flow-node { z-index:4; min-width:130px; }
.flow-node > div { min-width:0; }
.flow-node strong { display:block; white-space:nowrap; }
.flow-node em { display:none !important; }
.node-building { z-index:5; min-width:184px; }
.flow-label { z-index:3; pointer-events:none; }
.label-a { left:40%; top:27%; }
.label-b { left:42%; top:49%; }
.label-c { left:42%; top:71%; }
.flow-statusline { position:absolute; z-index:3; left:50%; bottom:12px; transform:translateX(-50%); display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.34); font-size:8px; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.flow-statusline i { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px rgba(73,229,232,.65); }
.digital-twin-canvas.source-focus .interactive-node { opacity:.5; }
.digital-twin-canvas.source-focus .interactive-node.is-active,
.digital-twin-canvas.source-focus .node-building { opacity:1; }
.digital-twin-canvas.source-focus .flow-route { opacity:.12; }
.digital-twin-canvas.source-focus .flow-route.is-active { opacity:1; filter:drop-shadow(0 0 6px rgba(73,229,232,.34)); }
.digital-twin-canvas.source-focus .flow-route.is-active path { stroke-width:3 !important; }
.twin-tooltip { display:none !important; }
.twin-scan { opacity:.18; }
.hero-visual.tilt-ready { transform:none !important; }
.hero-visual { will-change:auto; }

@media (max-width:720px){
  .flow-node { min-width:108px; }
  .node-building { min-width:150px; }
  .flow-label { display:none; }
  .flow-statusline { bottom:5px; }
}

/* =========================================================
   EcoFlux Website V3 - EcoFlux LiveFlow Storytelling
   ========================================================= */
.scroll-progress{position:fixed;z-index:9999;top:0;left:0;width:100%;height:2px;pointer-events:none}.scroll-progress>i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--lime));box-shadow:0 0 12px rgba(73,229,232,.6)}
.main-nav a{position:relative}.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--cyan);transform:scaleX(0);transition:transform .25s ease;transform-origin:center}.main-nav a.is-current::after{transform:scaleX(1)}
.story-rail{margin:36px auto 0;max-width:1040px;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:0;position:relative}.story-rail::before{content:"";position:absolute;left:7%;right:7%;top:18px;height:1px;background:rgba(73,229,232,.16)}.story-step{position:relative;text-align:center;color:rgba(255,255,255,.46);font-size:9px;letter-spacing:.8px;text-transform:uppercase}.story-step i{display:block;margin:0 auto 10px;width:9px;height:9px;border-radius:50%;background:#183b49;border:1px solid rgba(73,229,232,.35);transition:.35s}.story-step.is-lit{color:#fff}.story-step.is-lit i{background:var(--cyan);box-shadow:0 0 18px rgba(73,229,232,.7)}
.tab-visual{position:relative;overflow:hidden}.tab-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(73,229,232,.08),transparent 34%);opacity:0;transition:opacity .3s}.tab-visual:hover::after{opacity:1}
.chart-cursor{position:absolute;z-index:4;top:38px;bottom:34px;width:1px;background:linear-gradient(transparent,rgba(185,243,66,.9),transparent);left:0;opacity:.72;animation:chartCursor 7s ease-in-out infinite}.chart-cursor::after{content:"";position:absolute;top:38%;left:-4px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px rgba(185,243,66,.75)}
.metric-orb{animation:orbBreath 4s ease-in-out infinite}.metric-orb::after{content:"";position:absolute;inset:-12px;border:1px solid rgba(73,229,232,.12);border-radius:50%;animation:orbRing 4s ease-out infinite}.metric-stack>div{transition:transform .25s ease,border-color .25s ease}.metric-stack>div:hover{transform:translateX(6px);border-color:rgba(73,229,232,.22)}
.solar-line{overflow:visible}.solar-line::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px rgba(185,243,66,.75);top:50%;left:0;transform:translateY(-50%);animation:solarTravel 3.2s linear infinite}.sun-core{animation:sunPulse 4s ease-in-out infinite}
.asset-map .asset-box{transition:.3s ease}.asset-map.story-running .asset-box{animation:assetWake 4.8s ease-in-out infinite}.asset-map.story-running .asset-box:nth-of-type(3){animation-delay:.7s}.asset-map.story-running .asset-box:nth-of-type(5){animation-delay:1.4s}.asset-map.story-running .asset-box:nth-of-type(7){animation-delay:2.1s}.asset-arrow{animation:arrowPulse 1.6s ease-in-out infinite}
.finance-visual .finance-card{transition:.3s ease}.finance-visual .finance-card:hover{transform:translateY(-5px);border-color:rgba(73,229,232,.25)}.finance-visual .result{animation:resultGlow 4s ease-in-out infinite}
.intel-console{--scan-y:0}.intel-stage{display:flex;align-items:center;gap:7px;margin:0 18px 12px;padding-top:2px}.intel-stage span{height:4px;flex:1;border-radius:10px;background:rgba(255,255,255,.07);overflow:hidden}.intel-stage span::after{content:"";display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));transform:scaleX(0);transform-origin:left}.intel-console.in-view .intel-stage span:nth-child(1)::after{animation:stageFill 5.8s ease infinite}.intel-console.in-view .intel-stage span:nth-child(2)::after{animation:stageFill 5.8s ease .55s infinite}.intel-console.in-view .intel-stage span:nth-child(3)::after{animation:stageFill 5.8s ease 1.1s infinite}.intel-console.in-view .insight-card{animation:intelCard 5.8s ease infinite}.intel-console.in-view .insight-card:nth-child(2){animation-delay:.55s}.intel-console.in-view .insight-card:nth-child(3){animation-delay:1.1s}
.why-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.why-card:hover{transform:translateY(-7px);box-shadow:0 18px 40px rgba(5,29,43,.08);border-color:rgba(73,229,232,.35)}
.btn{position:relative;overflow:hidden}.btn::before{content:"";position:absolute;top:-30%;bottom:-30%;width:30%;left:-45%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .6s ease}.btn:hover::before{left:120%}
@keyframes chartCursor{0%,100%{left:8%;opacity:.25}50%{left:90%;opacity:.85}}@keyframes orbBreath{50%{transform:scale(1.035);filter:brightness(1.12)}}@keyframes orbRing{0%{transform:scale(.94);opacity:.4}80%,100%{transform:scale(1.15);opacity:0}}@keyframes solarTravel{from{left:0}to{left:100%}}@keyframes sunPulse{50%{filter:drop-shadow(0 0 20px rgba(185,243,66,.45));transform:scale(1.04)}}@keyframes assetWake{0%,65%,100%{box-shadow:none}20%{box-shadow:0 0 0 1px rgba(73,229,232,.35),0 0 22px rgba(73,229,232,.14);transform:translateY(-3px)}}@keyframes arrowPulse{50%{color:var(--cyan);transform:translateX(3px)}}@keyframes resultGlow{50%{box-shadow:0 0 28px rgba(185,243,66,.09)}}@keyframes stageFill{0%,12%{transform:scaleX(0)}35%,72%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}}@keyframes intelCard{0%,15%,100%{transform:translateX(0);filter:none}28%{transform:translateX(5px);filter:brightness(1.1)}}
@media(max-width:720px){.story-rail{grid-template-columns:repeat(3,1fr);row-gap:20px}.story-rail::before{display:none}.scroll-progress{height:2px}.chart-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.chart-cursor,.metric-orb,.metric-orb::after,.solar-line::after,.sun-core,.asset-map.story-running .asset-box,.asset-arrow,.finance-visual .result,.intel-console.in-view .intel-stage span::after,.intel-console.in-view .insight-card{animation:none!important}}

/* =========================================================
   V4 — Interactive EcoFlux LiveFlow Experience
   ========================================================= */
.twin-showcase-section{position:relative;overflow:hidden;background:#061d2a;color:#fff;padding:105px 0 112px}
.twin-showcase-grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(73,229,232,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(73,229,232,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.twin-showcase-section:before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;right:-180px;top:-240px;background:radial-gradient(circle,rgba(73,229,232,.14),transparent 66%);filter:blur(18px);pointer-events:none}
.twin-showcase-heading{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end;margin-bottom:38px}
.twin-showcase-heading h2{font-size:clamp(38px,4vw,64px);line-height:1.02;max-width:760px;margin:12px 0 0}
.twin-showcase-heading>p{max-width:570px;color:#9bb6c4;font-size:17px;line-height:1.75;margin:0 0 5px}
.twin-experience{position:relative;border:1px solid rgba(98,220,226,.2);border-radius:28px;background:linear-gradient(145deg,rgba(19,53,68,.94),rgba(7,30,43,.97));box-shadow:0 38px 95px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035);overflow:hidden}
.twin-experience-topbar,.twin-experience-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid rgba(131,218,224,.13);font-size:12px;color:#7fa3b3;letter-spacing:.04em}
.twin-experience-topbar>div{display:flex;align-items:center;gap:10px}.twin-experience-topbar strong{font-size:14px;color:#fff;letter-spacing:0}.twin-experience-topbar small{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#6f94a4}
.twin-live-dot{width:8px;height:8px;border-radius:50%;background:#b9f342;box-shadow:0 0 14px #b9f342;animation:v4dot 1.8s ease-in-out infinite}
.twin-mode{border:1px solid rgba(73,229,232,.3);border-radius:999px;padding:7px 12px;color:#6ff1f2;background:rgba(73,229,232,.06);font-size:9px;font-weight:800;letter-spacing:.14em}
.twin-experience-stage{position:relative;min-height:620px;overflow:hidden;background:radial-gradient(circle at 54% 42%,rgba(73,229,232,.075),transparent 31%),linear-gradient(rgba(255,255,255,.012),rgba(255,255,255,0))}
.building-network{position:absolute;inset:34px 34px 22px;width:calc(100% - 68px);height:calc(100% - 56px);z-index:1;overflow:visible}
.bt-route{opacity:.52;transition:opacity .3s ease,filter .3s ease}.bt-route circle{transition:opacity .25s ease}.twin-experience-stage.has-focus .bt-route{opacity:.08}.twin-experience-stage.has-focus .bt-route.is-active{opacity:1;filter:drop-shadow(0 0 8px rgba(73,229,232,.28))}.twin-experience-stage.has-focus .bt-intel-route{opacity:.5}
.bt-node{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;width:155px;padding:13px 14px;border:1px solid rgba(93,210,220,.14);border-radius:14px;background:rgba(5,28,40,.93);box-shadow:0 12px 28px rgba(0,0,0,.2);cursor:pointer;transition:opacity .3s ease,transform .3s ease,border-color .3s ease,box-shadow .3s ease;outline:none}
.bt-node>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(73,229,232,.1);color:#49e5e8;font-weight:900}.bt-node small{display:block;color:#6f94a4;font-size:8px;letter-spacing:.1em;margin-bottom:3px}.bt-node strong{display:block;color:#fff;font-size:12px}.bt-node:hover,.bt-node:focus,.bt-node.is-active{transform:translateY(-3px);border-color:rgba(73,229,232,.55);box-shadow:0 0 0 1px rgba(73,229,232,.08),0 16px 32px rgba(0,0,0,.3),0 0 25px rgba(73,229,232,.08)}
.twin-experience-stage.has-focus .bt-node:not(.is-active){opacity:.26}.bt-grid{left:4%;top:9%}.bt-solar{left:4%;top:29%}.bt-water{left:4%;top:51%}.bt-borehole{left:4%;top:72%}.bt-generator{right:4%;top:12%}.bt-heatpump{right:4%;top:52%}.bt-solar>span{color:#b9f342;background:rgba(185,243,66,.1)}.bt-water>span,.bt-borehole>span{color:#76c9ff;background:rgba(118,201,255,.1)}.bt-generator>span{color:#ffc868;background:rgba(255,200,104,.1)}.bt-heatpump>span{color:#9af47d;background:rgba(154,244,125,.1)}
.digital-building{position:absolute;z-index:3;left:50%;top:48%;width:285px;transform:translate(-50%,-50%);outline:none;transition:filter .35s ease,transform .35s ease}.digital-building:hover,.digital-building:focus,.digital-building.is-active{transform:translate(-50%,-50%) scale(1.015);filter:drop-shadow(0 0 25px rgba(73,229,232,.14))}
.building-roof{display:flex;justify-content:center;gap:5px;height:24px;align-items:flex-end}.building-roof i{display:block;width:48px;height:12px;transform:skewX(-24deg);background:linear-gradient(90deg,rgba(185,243,66,.72),rgba(73,229,232,.45));border:1px solid rgba(185,243,66,.35);box-shadow:0 0 16px rgba(185,243,66,.08)}
.building-shell{position:relative;border:1px solid rgba(73,229,232,.32);border-radius:15px 15px 7px 7px;background:linear-gradient(160deg,rgba(24,66,82,.9),rgba(7,31,44,.98));overflow:hidden;box-shadow:0 25px 55px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.04)}
.floor{height:58px;border-bottom:1px solid rgba(73,229,232,.1);display:grid;grid-template-columns:72px 1fr repeat(3,18px);align-items:center;gap:8px;padding:0 15px;position:relative}.floor span,.plant-room span{font-size:7px;letter-spacing:.12em;color:#6f94a4}.floor i,.plant-room i{height:13px;border-radius:3px;background:#143e4d;border:1px solid rgba(73,229,232,.12);transition:background .35s ease,box-shadow .35s ease}.floor-load{height:3px;max-width:92px;border-radius:999px;background:linear-gradient(90deg,#49e5e8,#b9f342);transform-origin:left;animation:floorload 3.2s ease-in-out infinite}.floor:nth-child(2) .floor-load{animation-delay:-.7s}.floor:nth-child(3) .floor-load{animation-delay:-1.4s}.floor:nth-child(4) .floor-load{animation-delay:-2.1s}.digital-building.is-active .floor i,.digital-building:hover .floor i{background:#2c7d86;box-shadow:0 0 10px rgba(73,229,232,.22)}
.plant-room{height:52px;padding:0 15px;display:grid;grid-template-columns:1fr repeat(3,34px);gap:8px;align-items:center;background:rgba(1,20,30,.45)}
.building-caption{text-align:center;margin-top:13px}.building-caption small{display:block;color:#49e5e8;font-size:8px;letter-spacing:.18em}.building-caption strong{display:block;color:#fff;font-size:14px;margin:4px 0}.building-caption span{color:#6f94a4;font-size:9px}
.bt-intelligence{position:absolute;z-index:5;right:9%;bottom:5%;width:300px;padding:16px;border:1px solid rgba(73,229,232,.2);border-radius:15px;background:rgba(4,26,38,.96);box-shadow:0 18px 38px rgba(0,0,0,.28);outline:none;transition:transform .3s ease,border-color .3s ease}.bt-intelligence:hover,.bt-intelligence:focus,.bt-intelligence.is-active{transform:translateY(-3px);border-color:rgba(73,229,232,.5)}
.bt-intel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.bt-intel-head span{width:7px;height:7px;border-radius:50%;background:#49e5e8;box-shadow:0 0 12px #49e5e8}.bt-intel-head strong{font-size:11px}.bt-intel-process{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:13px}.bt-intel-process i{height:2px;background:#163c4b;overflow:hidden;position:relative}.bt-intel-process i:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#49e5e8,#b9f342);transform:translateX(-100%);animation:intelstage 4.2s ease-in-out infinite}.bt-intel-process i:nth-child(2):after{animation-delay:.5s}.bt-intel-process i:nth-child(3):after{animation-delay:1s}.bt-intelligence p{font-size:13px;font-weight:800;margin:0 0 5px}.bt-intelligence>small{display:block;min-height:38px;color:#789aaa;font-size:9px;line-height:1.5}.bt-intel-actions{display:flex;align-items:center;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(73,229,232,.1)}.bt-intel-actions span{font-size:7px;letter-spacing:.08em;color:#6ff1f2}.bt-intel-actions b{font-size:9px;color:#486a78}
.twin-experience-footer{border-top:1px solid rgba(131,218,224,.13);border-bottom:0}.twin-experience-footer span:first-child{color:#90b0bd}.twin-experience-footer span:first-child i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#49e5e8;box-shadow:0 0 9px #49e5e8;margin-right:8px}
@keyframes v4dot{50%{opacity:.45;transform:scale(.78)}}@keyframes floorload{0%,100%{transform:scaleX(.42);opacity:.5}50%{transform:scaleX(1);opacity:1}}@keyframes intelstage{0%,15%{transform:translateX(-100%)}45%,80%{transform:translateX(0)}100%{transform:translateX(110%)}}
@media(max-width:980px){.twin-showcase-heading{grid-template-columns:1fr;gap:20px}.twin-experience-stage{min-height:760px}.digital-building{top:41%;width:260px}.bt-node{width:142px}.bt-grid,.bt-solar,.bt-water,.bt-borehole{left:3%}.bt-generator,.bt-heatpump{right:3%}.bt-intelligence{right:50%;transform:translateX(50%);bottom:3%;width:min(440px,80%)}.bt-intelligence:hover,.bt-intelligence:focus,.bt-intelligence.is-active{transform:translateX(50%) translateY(-3px)}.building-network{opacity:.7}}
@media(max-width:720px){.twin-showcase-section{padding:78px 0}.twin-showcase-heading h2{font-size:38px}.twin-experience-stage{min-height:auto;padding:24px 16px 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.building-network{display:none}.bt-node,.digital-building,.bt-intelligence{position:relative;inset:auto;right:auto;left:auto;top:auto;bottom:auto;width:auto;transform:none}.bt-node{width:auto;min-width:0;padding:11px}.digital-building{grid-column:1/-1;width:min(270px,82%);margin:15px auto}.digital-building:hover,.digital-building:focus,.digital-building.is-active{transform:scale(1.01)}.bt-intelligence{grid-column:1/-1;width:auto;transform:none}.bt-intelligence:hover,.bt-intelligence:focus,.bt-intelligence.is-active{transform:translateY(-3px)}.twin-experience-stage.has-focus .bt-node:not(.is-active){opacity:.55}.twin-experience-topbar small{display:none}.twin-experience-footer{align-items:flex-start;flex-direction:column}.bt-intel-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.twin-live-dot,.floor-load,.bt-intel-process i:after{animation:none!important}.bt-route circle{display:none}}