/* Sabal Green Solar Pvt Ltd - Styles */
:root{
  --green:#2E7D32;
  --green-600:#1B5E20;
  --green-300:#66BB6A;
  --blue:#0277BD;
  --blue-800:#0D47A1;
  --yellow:#FDD835;
  --bg:#0b1320;
  --card:#0f1b2d;
  --text:#E6F1FF;
  --muted:#A7B3C5;
  --border:#203149;
  --shadow:0 8px 30px rgba(0,0,0,0.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1200px 600px at 80% -20%, rgba(3,169,244,0.08), transparent),
                    radial-gradient(900px 500px at -20% 10%, rgba(76,175,80,0.08), transparent),
                    #091120; 
}
img{max-width:100%; height:auto; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}
.grid{display:grid; gap:1.5rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:10px; text-decoration:none; font-weight:600; box-shadow:var(--shadow);
  border:1px solid var(--border); transition:all .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--green), var(--blue)); color:white}
.btn-outline{background:transparent; color:var(--text)}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border:1px solid var(--border); border-radius:16px; padding:1.25rem; backdrop-filter: blur(8px)}
.section{padding:4rem 0}
.section-header{margin-bottom:1.2rem}
.section-header h2{margin:0 0 .5rem; font-size:clamp(1.5rem, 2.2vw, 2.1rem)}
.section-header p{margin:0; color:var(--muted)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:rgba(9,17,32,0.65); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--text); text-decoration:none; font-weight:800}
.brand .mark{width:36px; height:36px; border-radius:10px; background:conic-gradient(from 180deg, var(--green), var(--blue)); display:grid; place-items:center; color:#091120; font-weight:900}
.brand span{letter-spacing:.4px}
nav ul{list-style:none; display:flex; gap:.8rem; padding:0; margin:0}
nav a{color:var(--muted); text-decoration:none; padding:.5rem .7rem; border-radius:8px}
nav a.active, nav a:hover{color:var(--text); background:rgba(255,255,255,0.04)}

.mobile-toggle{display:none; background:none; border:1px solid var(--border); color:var(--text); padding:.5rem; border-radius:10px}

/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; align-items:center; padding:3rem 0}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); margin:0 0 .8rem; line-height:1.1}
.hero p{color:var(--muted); margin:0 0 1.2rem}
.hero .highlights{display:flex; gap:1rem; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--yellow)}

/* Benefits */
.benefits{grid-template-columns: repeat(4, 1fr)}
.benefit h3{margin:.2rem 0 .5rem; font-size:1.1rem}
.benefit p{margin:0; color:var(--muted)}

/* Services */
.services{grid-template-columns: repeat(3, 1fr)}
.service .title{font-size:1.2rem; margin:.4rem 0}
.service ul{margin:.6rem 0 0 1.1rem; color:var(--muted)}

/* Pricing */
.pricing{grid-template-columns: repeat(3, 1fr)}
.price-card{position:relative}
.price{font-size:2rem; font-weight:800; margin:.2rem 0}
.tag{position:absolute; top:12px; right:12px; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; background:rgba(3,169,244,.15); color:#8ad1ff; border:1px solid var(--border)}

/* Gallery */
.gallery{grid-template-columns: repeat(3, 1fr)}
.gallery img{border-radius:12px; border:1px solid var(--border)}

/* Testimonials */
.testimonials{grid-template-columns: repeat(3, 1fr)}
.quote{font-style:italic; color:var(--muted)}
.stars{color:#FFD54F}

/* Contact */
.form{display:grid; gap:1rem}
input, textarea{width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border); background:#0b1629; color:var(--text)}
label{font-size:.95rem; color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--border); padding:2rem 0; color:var(--muted)}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr;}
  .benefits{grid-template-columns: repeat(2, 1fr)}
  .services{grid-template-columns: repeat(2, 1fr)}
  .pricing{grid-template-columns: repeat(2, 1fr)}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .testimonials{grid-template-columns: repeat(2, 1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  nav ul{display:none}
  .mobile-toggle{display:block}
  .benefits,.services,.pricing,.gallery,.testimonials{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}