.page-header { background:linear-gradient(135deg,var(--secondary),var(--secondary-light)); padding:6rem 1.5rem; text-align:center; position:relative; overflow:hidden; }
.page-header::after { content:''; position:absolute; left:-10%; top:-50%; width:600px; height:600px; background:radial-gradient(circle,rgba(var(--primary-rgb), .15) 0%,transparent 70%); pointer-events:none; }
.page-title { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,5vw,3.5rem); font-weight:800; color:white; line-height:1.1; margin-bottom:1rem; position:relative; z-index:1; }
.page-title span { background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-sub { color:#94a3b8; font-size:1.1rem; max-width:650px; margin:0 auto; line-height:1.6; position:relative; z-index:1; }

.section { max-width:1280px; margin:0 auto; padding:5rem 1.5rem; }
.section-eyebrow { font-size:.75rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; text-align:center; }
.section-title { font-size:clamp(2rem,4vw,2.8rem); font-weight:800; color:var(--secondary); line-height:1.15; margin-bottom:3rem; text-align:center; }

.benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 300px),1fr)); gap:2.5rem; }
.benefit-card { background: var(--primary-bg); border-radius:24px; padding:3rem 2rem; border:1px solid var(--primary-border); transition:all .3s; }
.benefit-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.08); border-color:var(--primary); }
.b-icon { width:64px; height:64px; background:rgba(var(--primary-rgb), .1); color:var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; transition:transform .3s; }
.benefit-card:hover .b-icon { transform:scale(1.1) rotate(5deg); background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:white; }
.b-title { font-size:1.35rem; font-weight:800; color:var(--secondary); margin-bottom:1rem; }
.b-desc { color:#64748b; font-size:.95rem; line-height:1.6; }

.stat-banner { background:linear-gradient(135deg,var(--secondary),var(--secondary-light)); border-radius:32px; padding:4rem; margin-top:5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; position:relative; overflow:hidden; }
.stat-banner::before { content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&q=80') center/cover; opacity:0.1; }
.stat-item { position:relative; z-index:2; }
.s-num { font-family:'Syne',sans-serif; font-size:clamp(2.5rem,4vw,3.5rem); font-weight:800; color:var(--primary); margin-bottom:.5rem; }
.s-lbl { color:white; font-size:1.1rem; font-weight:600; }

@media(max-width:768px) {
    .stat-banner { grid-template-columns:1fr; gap:3rem; padding:3rem 1.5rem; }
    .page-header { padding:5rem 1.5rem 3rem; }
    .page-title { font-size: 2rem; }
    .page-sub { font-size: 0.95rem; }
    .section { padding: 3rem 1.5rem; }
    .benefits-grid { gap: 1.5rem; }
    .benefit-card { padding: 2rem 1.5rem; }
    .section-title { margin-bottom: 2rem; }
}

@media(max-width:480px) {
    .page-title { font-size: 1.75rem; }
    .b-title { font-size: 1.15rem; }
    .s-num { font-size: 2rem; }
    .s-lbl { font-size: 0.95rem; }
    .why-solar-cta-title { font-size: 1.5rem; }
}

/* ===== CTA SECTION ===== */
.why-solar-cta {
    text-align: center;
    margin-top: 5rem;
}

.why-solar-cta-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.why-solar-cta-sub {
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}