@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy:#0F2545;
  --navy-deep:#081A33;
  --amber:#F2994A;
  --ink:#1C1F26;
  --paper:#FFFFFF;
  --offwhite:#F7F8FA;
  --gray:#6E7681;
  --line:#E7E9ED;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  line-height:1.2;
}
a{color:inherit; text-decoration:none;}
.container{max-width:1120px; margin:0 auto; padding:0 24px;}
html, body{max-width:100%; overflow-x:hidden;}
a, p, span, div{overflow-wrap:break-word;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1120px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:40px; width:auto; border-radius:6px;}
.brand-text{font-family:'Poppins'; font-weight:700; font-size:1.05rem; color:var(--navy);}
.brand-text span{color:var(--amber);}
nav ul{list-style:none; display:flex; gap:30px;}
nav a{font-size:0.95rem; font-weight:500; color:var(--ink);}
nav a.active{color:var(--amber);}
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:38px; height:38px; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--navy);
  position:relative; transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before{position:absolute; top:-7px;}
.nav-toggle span::after{position:absolute; top:7px;}
.mobile-menu{
  display:none; flex-direction:column; background:var(--paper);
  border-top:1px solid var(--line); padding:10px 24px 16px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  padding:12px 0; font-size:1rem; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-menu a.active{color:var(--amber);}
.mobile-menu a:last-of-type{border-bottom:none;}
.btn-call{
  background:var(--navy); color:var(--paper);
  padding:11px 20px; border-radius:6px; font-size:0.9rem; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-call:hover{background:var(--amber);}

/* ---------- Hero (real photo, no schematic) ---------- */
.hero{
  position:relative;
  min-height:560px;
  display:flex; align-items:center;
  background-size:cover; background-position:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,26,51,0.92) 0%, rgba(8,26,51,0.75) 45%, rgba(8,26,51,0.35) 100%);
}
.hero-inner{position:relative; z-index:2; color:var(--paper); max-width:600px;}
.hero .tag{
  display:inline-block; background:var(--amber); color:var(--navy-deep);
  font-weight:600; font-size:0.85rem; padding:6px 14px; border-radius:20px; margin-bottom:20px;
}
.hero h1{font-size:2.7rem; margin-bottom:16px; color:var(--paper);}
.hero p.lead{font-size:1.05rem; color:#DCE3EE; margin-bottom:30px; max-width:480px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  background:var(--amber); color:var(--navy-deep);
  padding:14px 28px; border-radius:6px; font-weight:600; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform 0.15s ease;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-secondary{
  border:1.5px solid rgba(255,255,255,0.6); color:var(--paper);
  padding:14px 28px; border-radius:6px; font-weight:600; font-size:0.95rem;
}
.btn-secondary:hover{background:rgba(255,255,255,0.12);}

.stats-strip{background:var(--navy); padding:26px 0;}
.stats-row{display:flex; gap:48px; flex-wrap:wrap; justify-content:center;}
.stats-row div{text-align:center; color:var(--paper);}
.stats-row .num{font-family:'Poppins'; font-weight:700; font-size:1.3rem; color:var(--amber);}
.stats-row .label{font-size:0.82rem; color:#B7C2D3; margin-top:2px;}

/* ---------- Sections ---------- */
section{padding:68px 0;}
.section-head{max-width:560px; margin:0 auto 40px; text-align:center;}
.section-head .tag{color:var(--amber); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:8px;}
.section-head h2{font-size:1.9rem; margin-bottom:10px;}
.section-head p{color:var(--gray); font-size:0.98rem;}

/* ---------- Service cards ---------- */
.service-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.service-card{
  background:var(--offwhite); border:1px solid var(--line); border-radius:14px;
  padding:32px;
}
.service-card .icon{
  width:52px; height:52px; border-radius:12px; background:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px;
}
.service-card.solar .icon{background:var(--amber);}
.service-card h3{font-size:1.25rem; margin-bottom:12px;}
.service-card ul{list-style:none;}
.service-card li{
  padding:8px 0; font-size:0.94rem; color:var(--ink);
  display:flex; align-items:flex-start; gap:10px; border-top:1px solid var(--line);
}
.service-card li:first-child{border-top:none;}
.service-card li::before{content:"✓"; color:var(--amber); font-weight:700; flex-shrink:0;}

/* ---------- Why us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-item{text-align:center; padding:8px;}
.why-item .icon{
  width:56px; height:56px; border-radius:50%; background:var(--offwhite); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 14px;
}
.why-item h4{font-size:1rem; margin-bottom:6px;}
.why-item p{font-size:0.87rem; color:var(--gray);}

/* ---------- Process (services page) ---------- */
.process{max-width:680px; margin:0 auto;}
.process-step{
  display:grid; grid-template-columns:44px 1fr; gap:18px; padding:20px 0;
  border-bottom:1px solid var(--line);
}
.process-step:last-child{border-bottom:none;}
.process-step .step-num{
  width:36px; height:36px; border-radius:50%; background:var(--navy); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:600; font-size:0.9rem;
}
.process-step h4{font-size:1.05rem; margin-bottom:4px;}
.process-step p{color:var(--gray); font-size:0.92rem;}

/* ---------- Gallery (clean cards, caption below not overlay) ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery-item{border-radius:12px; overflow:hidden; background:var(--offwhite); border:1px solid var(--line);}
.gallery-item img{width:100%; height:200px; object-fit:cover; display:block;}
.gallery-cap{padding:12px 14px; font-size:0.88rem; font-weight:500; color:var(--ink);}

/* ---------- Areas ---------- */
.area-band{background:var(--navy); color:var(--paper); padding:52px 0; text-align:center;}
.area-band .section-head h2, .area-band .section-head p{color:var(--paper);}
.area-band .section-head p{color:#B7C2D3;}
.area-tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:8px;}
.area-tags span{
  border:1px solid rgba(255,255,255,0.25); padding:8px 16px; border-radius:20px; font-size:0.85rem;
}
.area-tags span.hq{background:var(--amber); color:var(--navy-deep); border-color:var(--amber); font-weight:600;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--amber); padding:52px 0; text-align:center;}
.cta-band h2{font-size:1.7rem; margin-bottom:8px; color:var(--navy-deep);}
.cta-band p{margin-bottom:24px; color:var(--navy-deep); opacity:0.85;}
.cta-band .btn-primary{background:var(--navy); color:var(--paper);}
.cta-band .btn-primary:hover{background:var(--navy-deep);}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep); color:#AAB4C4; padding:40px 0 20px; font-size:0.88rem;}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px;}
.footer-grid .brand-text{color:var(--paper);}
.footer-col h5{color:var(--paper); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px;}
.footer-col a{display:block; margin-bottom:6px;}
.footer-col a:hover{color:var(--amber);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:16px; font-size:0.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.footer-bottom .credit a{color:#8291A8; font-weight:500;}
.footer-bottom .credit a:hover{color:var(--amber);}

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; z-index:60;
  background:#25D366; color:white; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.contact-card{border:1px solid var(--line); border-radius:14px; padding:28px; background:var(--offwhite);}
.contact-line{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.contact-line:first-child{border-top:none;}
.contact-line .ico{
  width:40px; height:40px; border-radius:10px; background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-line .lbl{font-size:0.75rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.03em;}
.contact-line .val{font-weight:600; font-size:0.98rem; overflow-wrap:anywhere; word-break:break-word;}
.contact-line > div{min-width:0;}
.contact-line a.val:hover{color:var(--amber);}
.map-wrap{border:1px solid var(--line); border-radius:14px; overflow:hidden; min-height:320px; position:relative;}
.direction-card{display:flex; flex-direction:column;}
.direction-img{width:100%; height:180px; object-fit:cover; display:block;}
.direction-body{padding:22px; background:var(--offwhite); flex:1;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-wrap{padding:10px 16px;}
  .brand img{height:30px;}
  .brand-text{font-size:0.85rem;}
  .btn-call{padding:8px 14px; font-size:0.8rem;}
  .hero h1{font-size:2.1rem;}
  .service-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
  nav ul{display:none;}
  .nav-toggle{display:flex;}
  .footer-grid{flex-direction:column;}
  .footer-bottom{flex-direction:column; gap:6px;}
}