/*
Theme Name: Elec3City V2
Theme URI: https://elec3city.com.ph
Author: Elec3City
Description: Advanced multi-renewable platform theme with animations, PH map, dashboard, investor pages, and counters.
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: elec3cityv2
*/
@charset "UTF-8";
:root{--e3-text:#eaf2f8;--e3-muted:rgba(234,242,248,.75);--e3-border:rgba(234,242,248,.12);--e3-radius:18px;--e3-max:1180px;--e3-shadow:0 14px 36px rgba(0,0,0,.28);}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--e3-text);background:linear-gradient(180deg,#070b10 0%,#0a0f14 100%);}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}
.container{max-width:var(--e3-max);margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(7,11,16,.55);border-bottom:1px solid var(--e3-border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.3px}
.brand img{height:34px;width:auto}
.nav-toggle{display:none}
.nav ul{display:flex;gap:12px;list-style:none;padding:0;margin:0;align-items:center}
.nav a{padding:10px 12px;border-radius:12px;color:var(--e3-muted)}
.nav a:hover,.nav a:focus{color:var(--e3-text);background:rgba(255,255,255,.06)}
.nav .current-menu-item>a{color:var(--e3-text);background:rgba(255,255,255,.08)}
.hero{position:relative;padding:74px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--hero-img);background-size:cover;background-position:center;opacity:var(--hero-opacity);filter:saturate(1.05) contrast(1.02);transform:scale(1.03);}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 360px at 20% 15%,rgba(11,42,58,.65),transparent 60%),radial-gradient(700px 340px at 90% 10%,rgba(185,122,33,.35),transparent 55%),linear-gradient(180deg,rgba(7,11,16,.45) 0%,rgba(7,11,16,.88) 68%,#070b10 100%);}
.hero>.container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--e3-border);border-radius:999px;background:rgba(255,255,255,.05);color:var(--e3-muted);width:max-content}
.h1{font-size:clamp(30px,3.3vw,54px);line-height:1.05;margin:14px 0}
.lead{font-size:clamp(15px,1.25vw,18px);color:var(--e3-muted);line-height:1.55;margin:0 0 18px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--e3-border);background:rgba(255,255,255,.06);color:var(--e3-text);}
.btn.primary{background:linear-gradient(135deg,rgba(185,122,33,.95),rgba(185,122,33,.65));border-color:rgba(185,122,33,.55)}
.btn:hover{transform:translateY(-1px)}
.card{background:rgba(255,255,255,.06);border:1px solid var(--e3-border);border-radius:var(--e3-radius);box-shadow:var(--e3-shadow);}
.hero-card{padding:16px}
.hero-card h3{margin:0 0 6px;font-size:16px}
.hero-card p{margin:0;color:var(--e3-muted);font-size:14px;line-height:1.45}
.hero-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--e3-border);}
.stat .num{font-weight:800;font-size:22px}
.stat .lbl{color:var(--e3-muted);font-size:12px;margin-top:6px}
.section{padding:44px 0}
.section h2{font-size:clamp(22px,2.2vw,34px);margin:0 0 10px}
.section p{color:var(--e3-muted);line-height:1.65;margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.energy-card{padding:14px;position:relative;overflow:hidden}
.energy-card .tag{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--e3-border);background:rgba(0,0,0,.18);color:var(--e3-muted)}
.energy-card h3{margin:10px 0 6px}
.energy-card p{margin:0;font-size:14px}
.energy-card .thumb{border-radius:14px;overflow:hidden;margin-top:12px;border:1px solid var(--e3-border)}
.energy-card .thumb img{display:block;width:100%}
.fade-in{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.fade-in.is-visible{opacity:1;transform:none}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.map-wrap{padding:14px}#ph-map{height:440px;border-radius:16px;border:1px solid var(--e3-border);overflow:hidden}
.map-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;color:var(--e3-muted);font-size:13px}
.dashboard{padding:14px}.canvas-wrap{padding:12px;border-radius:16px;border:1px solid var(--e3-border);background:rgba(0,0,0,.18)}
canvas{max-width:100%}
.footer{padding:26px 0;border-top:1px solid var(--e3-border);color:var(--e3-muted)}
.footer a{color:var(--e3-text)}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.nav-toggle{display:inline-flex}.nav{display:none}.nav.is-open{display:block}.nav ul{flex-direction:column;align-items:flex-start;padding:12px 0}}