/* =========================
   GLOBAL
========================= */

body {
  margin:0;
  font-family:'Inter',sans-serif;
  background:linear-gradient(180deg,#f5f7f6,#eef2f1);
  color:#1a1a1a;
  line-height:1.6;
}

.container {
  width:90%;
  max-width:1200px;
  margin:auto;
}

section { 
  padding:90px 0;
}

/* =========================
   HEADER FIX (IMPORTANT)
========================= */

header {
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid #eee;
}

nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}

nav img {
  height:65px;
  width:auto;
}

/* =========================
   HERO (FIXED HEIGHT ISSUE)
========================= */

.hero {
  background:url('../assets/images/solarpanel.png') center/cover no-repeat;
  padding:80px 0;          /* reduced from 140 */
  min-height:60vh;         /* prevents massive blank space */
  display:flex;
  align-items:center;
}

.hero-box {
  backdrop-filter: blur(8px);
  background:rgba(0,0,0,0.6);
  padding:40px;
  border-radius:16px;
  max-width:600px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}

.hero h1 { 
  color:#fff; 
  font-size:42px; 
}

.hero p { 
  color:#ddd; 
}

/* =========================
   PREMIUM BUILDER
========================= */

.solar-builder {
  padding:120px 20px;
  text-align:center;
}

.builder-container {
  max-width:850px;
  margin:auto;
  background:#fff;
  padding:50px;
  border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,0.15);
  transition:0.3s;
}

.builder-container:hover {
  transform:translateY(-5px);
}

.sub {
  color:#666;
  margin-bottom:40px;
}

/* =========================
   CONTROLS
========================= */

.builder-control {
  margin-bottom:40px;
}

label {
  display:block;
  font-weight:600;
  margin-bottom:10px;
}

.panel-buttons {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}

.panel-buttons button {
  width:70px;
  height:70px;
  font-size:28px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,#f58220,#ff9b3d);
  color:#fff;
  cursor:pointer;
  box-shadow:0 15px 40px rgba(245,130,32,0.4);
  transition:0.3s;
}

.panel-buttons button:hover {
  transform:scale(1.15);
}

.panel-display {
  font-size:36px;
  font-weight:800;
  width:100px;
}

/* =========================
   BATTERY
========================= */

.battery-buttons {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.battery-buttons button {
  padding:16px 22px;
  border:none;
  border-radius:12px;
  background:#eee;
  cursor:pointer;
  font-weight:600;
  transition:0.3s;
}

.battery-buttons button:hover {
  background:#f58220;
  color:#fff;
  transform:translateY(-3px);
}

/* ✅ ACTIVE STATE FIX (IMPORTANT) */
.battery-buttons button.active {
  background:#f58220;
  color:#fff;
  box-shadow:0 10px 25px rgba(245,130,32,0.4);
}

/* =========================
   RESULTS
========================= */

.builder-results {
  margin-top:40px;
}

.result-big {
  font-size:60px;
  font-weight:900;
  color:#0f3b65;
  text-shadow:0 0 25px rgba(15,59,101,0.15);
}

.result-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:25px;
}

.result-grid div {
  background:#f7f9f9;
  padding:12px;
  border-radius:8px;
}

.lifetime {
  margin-top:25px;
  font-size:24px;
  font-weight:700;
  color:#0f3b65;
}

.warning {
  margin-top:15px;
  color:#c0392b;
  font-weight:600;
}

.disclaimer {
  margin-top:20px;
  font-size:12px;
  color:#888;
}

/* =========================
   CTA
========================= */

.builder-cta {
  margin-top:40px;
}

.cta-btn {
  padding:18px 45px;
  font-size:18px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,#f58220,#ff9b3d);
  color:#fff;
  cursor:pointer;
  box-shadow:0 20px 60px rgba(245,130,32,0.5);
  transition:0.3s;
}

.cta-btn:hover {
  transform:scale(1.05);
}

/* subtle glow pulse */
.cta-btn {
  animation: glow 2s infinite;
}

@keyframes glow {
  0% {box-shadow:0 0 0 rgba(245,130,32,0.4);}
  50% {box-shadow:0 0 25px rgba(245,130,32,0.6);}
  100% {box-shadow:0 0 0 rgba(245,130,32,0.4);}
}

.cta-sub {
  margin-top:10px;
  font-size:13px;
  color:#777;
}

/* =========================
   MODAL
========================= */

.quote-modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.quote-box {
  background:#fff;
  padding:40px;
  border-radius:16px;
  width:90%;
  max-width:400px;
  text-align:center;
  position:relative;
}

.quote-box input {
  width:100%;
  padding:14px;
  margin-bottom:10px;
  border:1px solid #ddd;
  border-radius:8px;
}

.quote-box button {
  width:100%;
  padding:15px;
  background:#f58220;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

.close {
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .result-grid {
    grid-template-columns:1fr;
  }

  .panel-buttons button {
    width:60px;
    height:60px;
  }

  .result-big {
    font-size:44px;
  }

}