:root {
  --navy:#1a2332; --navy-light:#243044; --navy-dark:#0f1720;
  --orange:#ff6900; --orange-dark:#e55e00; --orange-light:#fff3e8;
  --blue:#0051a5; --blue-dark:#003d7a; --blue-light:#e8f0fa;
  --green:#00703c; --green-light:#e8f5ee;
  --white:#fff; --gray-50:#f8f9fa; --gray-100:#f1f3f5;
  --gray-200:#e9ecef; --gray-300:#dee2e6; --gray-600:#6c757d;
  --gray-800:#343a40; --gray-900:#212529;
  --beige:#e8e4de;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --r:6px; --rl:12px; --tr:all .25s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--gray-900);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}

/* TOP BAR */
.tb{background:#ddd5c7;color:var(--gray-800);font-size:.78rem;border-bottom:3px solid var(--orange)}
.tb-in{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;height:34px}
.tb a{color:var(--gray-800);transition:color .2s;display:inline-flex;align-items:center;gap:5px;font-weight:500}
.tb a:hover{color:var(--orange)}
.tb-l,.tb-r{display:flex;gap:18px}

/* NAV */
.nav{background:var(--white);position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-sm)}
.nav-in{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-logo img{height:38px}
.nl{display:flex;gap:24px;align-items:center}
.nl a{font-size:.88rem;font-weight:600;color:var(--gray-800);transition:color .2s}
.nl a:hover{color:var(--orange)}
.nl .act{color:var(--orange)}
.nb{padding:10px 22px;border-radius:30px;font-size:.84rem;font-weight:600;transition:var(--tr);display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:none}
.nb-or{background:var(--orange);color:var(--white)}
.nb-or:hover{background:var(--orange-dark)}
.mob{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--gray-800);padding:8px}

/* HERO */
.hero{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero-bg{position:absolute;inset:0;background:url('/files/generac-solar-hero.webp') center/cover no-repeat}
.hero-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,35,50,.9) 0%,rgba(26,35,50,.72) 38%,transparent 72%)}
.hero-in{max-width:1320px;margin:0 auto;padding:90px 24px;position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;color:var(--white);line-height:1.08;margin-bottom:20px;max-width:540px}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.78);max-width:480px;line-height:1.7;margin-bottom:32px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:30px;font-size:.95rem;font-weight:700;transition:var(--tr);cursor:pointer;border:none}
.btn-or{background:var(--orange);color:var(--white)}
.btn-or:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,105,0,.3)}
.btn-wh{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.45)}
.btn-wh:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
.btn-navy{background:transparent;color:var(--navy);border:2px solid var(--navy);border-radius:30px}
.btn-navy:hover{background:var(--navy);color:var(--white)}
.btn-blue{background:var(--blue);color:var(--white);border-radius:30px}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)}

/* SECTIONS */
.sec{padding:80px 24px}
.sec-alt{background:var(--gray-50)}
.sec-beige{background:var(--beige)}
.sec-navy{background:var(--navy);color:var(--white)}
.sec-blue{background:var(--blue);color:var(--white)}
.sec-in{max-width:1320px;margin:0 auto}
.sh{text-align:center;margin-bottom:48px}
.sh h2{font-size:2rem;font-weight:800;margin-bottom:10px;line-height:1.2}
.sh p{font-size:1.05rem;color:var(--gray-600);max-width:640px;margin:0 auto}
.sec-navy .sh p,.sec-blue .sh p{color:rgba(255,255,255,.6)}

/* ANCHOR NAV (sticky sub-nav for solar sections) */
.snav{background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:70px;z-index:90;padding:0 24px}
.snav-in{max-width:1320px;margin:0 auto;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.snav a{padding:14px 20px;font-size:.84rem;font-weight:600;color:var(--gray-600);white-space:nowrap;border-bottom:3px solid transparent;transition:var(--tr)}
.snav a:hover,.snav a.act{color:var(--orange);border-bottom-color:var(--orange)}

/* SPLIT (two-column product sections) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-img{display:flex;align-items:center;justify-content:center}
.split-img img{max-height:400px;object-fit:contain;border-radius:var(--rl)}
.split-txt .tag{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--orange);margin-bottom:8px;background:var(--orange-light);padding:4px 12px;border-radius:20px}
.split-txt h2{font-size:1.8rem;font-weight:800;margin-bottom:14px;line-height:1.2}
.split-txt p{font-size:.95rem;color:var(--gray-600);line-height:1.7;margin-bottom:14px}
.split-txt .stat{font-size:2.8rem;font-weight:800;color:var(--orange);line-height:1;margin:16px 0 8px}
.split-txt .stat-label{font-size:.9rem;color:var(--gray-600);margin-bottom:16px}
.split-txt ul{list-style:none;margin:16px 0 20px}
.split-txt li{padding:8px 0 8px 28px;position:relative;font-size:.9rem;color:var(--gray-800);line-height:1.5}
.split-txt li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;color:var(--orange);font-size:.8rem;top:10px}

/* SPECS TABLE */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gray-200);border-radius:var(--rl);overflow:hidden;margin:24px 0}
.spec{background:var(--white);padding:16px 20px}
.spec-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gray-600);margin-bottom:2px}
.spec-val{font-size:1rem;font-weight:700;color:var(--navy)}

/* 3 BENEFIT CARDS */
.b3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.bc{background:var(--white);border-radius:var(--rl);padding:32px 24px;box-shadow:var(--shadow-md);text-align:center;transition:var(--tr)}
.bc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bc i{font-size:2.2rem;color:var(--orange);margin-bottom:14px;display:block}
.bc h3{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.bc p{font-size:.88rem;color:var(--gray-600);line-height:1.6}

/* DARK BENEFIT CARDS */
.b3-dark .bc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);box-shadow:none}
.b3-dark .bc h3{color:var(--white)}
.b3-dark .bc p{color:rgba(255,255,255,.6)}

/* ECOSYSTEM */
.eco{text-align:center}
.eco img{max-width:1000px;width:100%;margin:0 auto;border-radius:var(--rl)}

/* TESTIMONIALS */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--rl);padding:32px}
.tc-stars{color:var(--orange);font-size:.85rem;margin-bottom:12px}
.tc-q{font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.8);margin-bottom:16px;font-style:italic}
.tc-au{font-weight:600;font-size:.88rem;color:var(--white)}
.tc-loc{font-size:.78rem;color:rgba(255,255,255,.45)}

/* HOW IT WORKS */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;counter-reset:step}
.how-step{position:relative;padding-top:56px}
.how-step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--orange);color:white;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.how-step h3{font-size:1rem;font-weight:700;margin-bottom:6px}
.how-step p{font-size:.85rem;color:var(--gray-600);line-height:1.5}

/* VIDEO */
.vid{max-width:900px;margin:0 auto;border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-lg)}
.vid iframe{width:100%;aspect-ratio:16/9;border:none}
.vid-ph{width:100%;aspect-ratio:16/9;background:var(--gray-100);display:flex;align-items:center;justify-content:center;border-radius:var(--rl)}

/* CTA BANNER */
.cta-b{position:relative;padding:80px 24px;text-align:center;overflow:hidden}
.cta-b-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%)}
.cta-b-ct{position:relative;z-index:1;max-width:680px;margin:0 auto;color:var(--white)}
.cta-b-ct h2{font-size:2rem;font-weight:800;margin-bottom:14px}
.cta-b-ct p{font-size:1.05rem;opacity:.8;margin-bottom:28px;line-height:1.6}

/* FOOTER */
.ft{background:var(--navy);color:rgba(255,255,255,.6);padding:48px 24px 32px}
.ft-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-brand img{height:34px;margin-bottom:14px}
.ft-brand p{font-size:.85rem;line-height:1.7}
.ft-social{display:flex;gap:10px;margin-top:16px}
.ft-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.6);transition:var(--tr)}
.ft-social a:hover{background:var(--orange);border-color:var(--orange);color:var(--white)}
.ft h4{color:var(--white);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.ft ul{list-style:none}
.ft li{margin-bottom:8px}
.ft li a{font-size:.84rem;color:rgba(255,255,255,.6);transition:color .2s}
.ft li a:hover{color:var(--orange)}
.ft-bot{max-width:1320px;margin:16px auto 0;text-align:center;font-size:.78rem}

/* RESPONSIVE */
@media(max-width:1024px){
  .split{grid-template-columns:1fr;gap:32px}
  .b3{grid-template-columns:1fr}
  .tg{grid-template-columns:1fr}
  .how{grid-template-columns:1fr 1fr}
  .specs{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  #video .sec-in > div{grid-template-columns:1fr !important;gap:24px !important}
  .tb{display:none}
  .nl{display:none}
  .mob{display:block}
  .snav{top:70px}
  .hero{min-height:380px}
  .hero h1{font-size:1.8rem}
  .sec{padding:48px 20px}
  .how{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr;gap:28px}
}

/* Video split layouts */
.vid-split{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.vid-split-rev{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
@media(max-width:768px){
  .vid-split,.vid-split-rev{grid-template-columns:1fr!important;gap:24px!important}
}


/* ══ IMAGE EFFECTS: 3D tilt + zoom on hover ══ */
.split-img img, .eco img, .sec-beige .split img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s ease !important;
  cursor: pointer;
}
.split-img img:hover, .eco img:hover, .sec-beige .split img:hover {
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.06) !important;
  box-shadow: 12px 16px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,105,0,.08) !important;
}

/* Specific 3D for the ecobee Spanish image — zoom more to make readable */
#ecobee .split-img img, #ecobee .split img, .sec-beige img[src*=ecobee] {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease !important;
}
#ecobee .split-img img:hover, #ecobee .split img:hover, .sec-beige img[src*=ecobee]:hover {
  transform: perspective(600px) rotateY(-2deg) scale(1.15) !important;
  box-shadow: 16px 20px 50px rgba(0,0,0,.3) !important;
  z-index: 5;
  position: relative;
}

/* Ecosystem diagram — subtle float + glow */
.eco img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.8s ease, filter 0.8s ease !important;
}
.eco img:hover {
  transform: perspective(1000px) rotateX(2deg) scale(1.04) translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.2) !important;
  filter: brightness(1.03);
}

/* Product images (PWRmicro, PWRcell, etc) — 3D card tilt */
.split-img img[src*=pwrmicro], .split-img img[src*=pwrcell], .split-img img[src*=storm], .split-img img[src*=installed], .split-img img[src*=pwrview] {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease !important;
}
.split-img img[src*=pwrmicro]:hover, .split-img img[src*=storm]:hover {
  transform: perspective(700px) rotateY(4deg) rotateX(-2deg) scale(1.08) !important;
  box-shadow: -10px 14px 36px rgba(0,0,0,.2) !important;
}
.split-img img[src*=pwrcell]:hover, .split-img img[src*=installed]:hover {
  transform: perspective(700px) rotateY(-4deg) rotateX(2deg) scale(1.08) !important;
  box-shadow: 10px 14px 36px rgba(0,0,0,.2) !important;
}

/* Chart image — zoom for readability */
.split-img img[src*=chart]:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.2) !important;
}

/* Video thumbnails — subtle lift */
video {
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
video:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4) !important;
}

/* Mobile: reduce effects to avoid janky performance */
@media(max-width:768px) {
  .split-img img:hover, .eco img:hover, .sec-beige img:hover {
    transform: scale(1.03) !important;
  }
}