/* ==========================================================
   Sai Solar Energy — Premium Theme
   Navy + Gold, glassmorphism, soft shadows, rounded cards
   ========================================================== */
:root{
  --navy-900:#071427;
  --navy-800:#0b1f3a;
  --navy-700:#122a4d;
  --navy-600:#1b3a66;
  --gold-500:#f5b400;
  --gold-400:#ffcc33;
  --gold-100:#fff4d6;
  --ink-900:#0d1520;
  --ink-600:#4b5768;
  --ink-400:#7c8798;
  --surface:#ffffff;
  --surface-soft:#f7f9fc;
  --border:#e6ebf2;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-soft:0 10px 30px rgba(11,31,58,.08);
  --shadow-strong:0 20px 60px rgba(11,31,58,.18);
  --grad-gold:linear-gradient(135deg,#ffd23c 0%,#f5b400 60%,#e29500 100%);
  --grad-navy:linear-gradient(135deg,#0b1f3a 0%,#122a4d 55%,#1b3a66 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink-900);
  background:var(--surface);
  overflow-x:hidden;
  padding-bottom:64px; /* mobile bottom nav space */
}
@media (min-width:992px){ body{ padding-bottom:0; } }

h1,h2,h3,h4,.font-display{ font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.02em; }
a{ text-decoration:none; }
.text-gold{ color:var(--gold-500) !important; }
.bg-navy{ background:var(--grad-navy) !important; }
.bg-soft{ background:var(--surface-soft); }
.section{ padding:88px 0; }
.section-sm{ padding:56px 0; }
@media (max-width:767px){ .section{ padding:56px 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-100); color:#8a6400;
  padding:6px 16px; border-radius:999px; font-weight:600; font-size:.8rem;
  letter-spacing:.04em; text-transform:uppercase;
}
.eyebrow.on-dark{ background:rgba(245,180,0,.15); color:var(--gold-400); }

.btn{ border-radius:999px; font-weight:600; padding:.75rem 1.6rem; transition:all .25s ease; }
.btn-gold{ background:var(--grad-gold); color:var(--navy-900); border:none; box-shadow:0 10px 24px rgba(245,180,0,.35); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(245,180,0,.45); color:var(--navy-900); }
.btn-outline-light2{ border:2px solid rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px); }
.btn-outline-light2:hover{ background:rgba(255,255,255,.16); color:#fff; }
.btn-navy{ background:var(--grad-navy); color:#fff; }
.btn-navy:hover{ color:#fff; transform:translateY(-2px); }
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ color:#fff; transform:translateY(-2px); }

/* ---------------- Top utility bar ---------------- */
.top-bar{ background:var(--navy-900); color:#d7e2f5; font-size:.82rem; font-weight:500; letter-spacing:.01em; }
.top-bar .address-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:460px; }
.top-bar a{ color:#e8eefb; font-weight:500; white-space:nowrap; transition:color .2s ease; }
.top-bar a:hover{ color:var(--gold-400); }
.top-bar .divider{ width:1px; height:14px; background:rgba(255,255,255,.2); flex:none; }
@media (max-width:1199px){ .top-bar .address-line{ max-width:280px; } }

/* ---------------- Header / Navbar ---------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled{ box-shadow:var(--shadow-soft); }

.navbar{ padding-top:.7rem; padding-bottom:.7rem; }
.navbar-brand{ padding:0; margin-right:1rem; flex:none; }
.navbar-brand img{ display:block; transition:transform .25s ease; flex:none; }
.navbar-brand:hover img{ transform:scale(1.05); }

.navbar-nav{ gap:0; flex-wrap:nowrap; }
.nav-link{
  font-weight:600; font-size:.8rem; color:var(--ink-900) !important;
  padding:.5rem .4rem !important; position:relative; border-radius:8px; white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.nav-link:hover{ color:var(--navy-900) !important; background:var(--surface-soft); }
.nav-link::after{
  content:''; position:absolute; left:.48rem; right:.48rem; bottom:.2rem; height:2px;
  background:var(--grad-gold); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--navy-900) !important; }
.nav-link.active::after{ transform:scaleX(1); }

.navbar-nav .dropdown-toggle::after{ vertical-align:1px; margin-left:.3rem; opacity:.6; }
.dropdown-menu{ margin-top:.6rem !important; min-width:240px; }
.dropdown-item{
  font-weight:500; font-size:.92rem; padding:.6rem .9rem;
  display:flex; align-items:center; gap:.6rem; color:var(--ink-900);
}
.dropdown-item i{ color:var(--gold-500); font-size:1.05rem; width:20px; text-align:center; }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--gold-100); color:var(--navy-900); }

.nav-cta-group{ display:flex; align-items:center; gap:.6rem; flex:none; margin-left:.5rem; }
.nav-cta-group .btn-gold{ white-space:nowrap; padding:.55rem 1rem; font-size:.84rem; }
.nav-divider{ width:1px; height:28px; background:var(--border); flex:none; }
.nav-icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-soft); color:var(--navy-900); font-size:1rem; border:1px solid var(--border);
  transition:all .2s ease; flex:none;
}
.nav-icon-btn:hover{ background:var(--gold-100); color:var(--navy-900); transform:translateY(-2px); }

@media (max-width:991px){
  .navbar-collapse{
    background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
    padding:1rem; margin-top:.75rem; border:1px solid var(--border);
  }
  .navbar-nav{ flex-wrap:wrap; }
  .nav-link::after{ display:none; }
  .nav-link{ padding:.75rem 1rem !important; font-size:.95rem !important; border-bottom:1px solid var(--border); border-radius:0; }
  .navbar-nav .nav-item:last-child .nav-link{ border-bottom:none; }
  .nav-cta-group{ margin-top:1rem; margin-left:0; }
  .nav-cta-group .btn-gold{ width:100%; text-align:center; font-size:1rem; padding:.75rem 1.4rem; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grad-navy);
  color:#fff;
  padding:120px 0 100px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(245,180,0,.25), transparent 45%),
             radial-gradient(circle at 10% 80%, rgba(27,58,102,.6), transparent 50%);
  pointer-events:none;
}
.hero-sun{
  position:absolute; top:-80px; right:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,#ffe27a 0%,#f5b400 55%,transparent 75%);
  filter:blur(4px); opacity:.85; animation:pulseSun 6s ease-in-out infinite;
}
@keyframes pulseSun{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.hero-particle{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--gold-400); opacity:.7; animation:floatUp 7s linear infinite;
}
@keyframes floatUp{ 0%{ transform:translateY(0) translateX(0); opacity:0;} 10%{opacity:.8;} 100%{ transform:translateY(-260px) translateX(20px); opacity:0;} }

.hero-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px);
  border-radius:var(--radius-lg);
  padding:22px 26px;
  box-shadow:var(--shadow-strong);
  animation:floatCard 5s ease-in-out infinite;
}
.hero-card.delay1{ animation-delay:.6s; }
.hero-card.delay2{ animation-delay:1.2s; }
@keyframes floatCard{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

.hero-visual{ position:relative; min-height:420px; perspective:1200px; }

/* ---------------- 3D Solar Scene (inline SVG hero illustration) ---------------- */
.solar-scene{
  position:relative; z-index:2; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-strong); border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,#12294d 0%,#0b1f3a 70%);
  transform-style:preserve-3d; transition:transform .3s ease;
}
.solar-scene-svg{ display:block; width:100%; height:auto; }

.scene-sun{ transform-origin:452px 86px; animation:sunPulse 5s ease-in-out infinite; }
@keyframes sunPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }
.sun-rays{ animation:rayRotate 18s linear infinite; transform-origin:452px 86px; }
@keyframes rayRotate{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.scene-house{ animation:houseFloat 6s ease-in-out infinite; transform-origin:240px 410px; }
.scene-panels{ animation:houseFloat 6s ease-in-out infinite; animation-delay:.15s; transform-origin:240px 410px; }
@keyframes houseFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }

.panel-glow{ animation:panelShimmer 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes panelShimmer{ 0%,100%{ opacity:.25;} 50%{ opacity:.75;} }

.energy-flow{ animation:dashFlow 1.4s linear infinite; }
@keyframes dashFlow{ to{ stroke-dashoffset:-32; } }

.energy-dot{ offset-path:path('M 300 205 C 330 240, 330 300, 300 340'); animation:dotTravel 2.4s linear infinite; filter:drop-shadow(0 0 4px #ffcc33); }
.dot1{ animation-delay:0s; }
.dot2{ animation-delay:.8s; }
.dot3{ animation-delay:1.6s; }
@keyframes dotTravel{ 0%{ offset-distance:0%; opacity:0;} 10%{ opacity:1;} 90%{ opacity:1;} 100%{ offset-distance:100%; opacity:0;} }

@media (prefers-reduced-motion: reduce){
  .scene-sun, .sun-rays, .scene-house, .scene-panels, .panel-glow, .energy-flow, .energy-dot{ animation:none !important; }
}
.stat-pill{
  display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  border-radius:999px; padding:.5rem 1rem; font-size:.85rem; color:#e6edff;
}
.counter-num{ font-size:2.1rem; font-weight:800; color:#fff; }
.counter-label{ font-size:.85rem; color:#b9c8e6; }

/* ---------------- Cards ---------------- */
.card-premium{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease;
}
/* height:100% is opt-in via .h-100 (for equal-height grid cards) — NOT a default,
   since it blows up sidebar/stacked cards when a flex row stretches their column. */
.card-premium:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); }
.tilt-card{ transform-style:preserve-3d; transition:transform .2s ease, box-shadow .3s ease; will-change:transform; }
.tilt-card:hover{ box-shadow:var(--shadow-strong); }
.card-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-gold); color:var(--navy-900); font-size:1.4rem; margin-bottom:1rem;
}
.card-icon.navy{ background:var(--grad-navy); color:#fff; }

.service-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.service-card img{ height:230px; object-fit:cover; width:100%; transition:transform .5s ease; }
.service-card:hover img{ transform:scale(1.08); }
.service-card .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(7,20,39,.92) 5%, transparent 60%); display:flex; align-items:flex-end; padding:24px; }

.project-card{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); background:#fff; }
.project-card .img-wrap{ position:relative; overflow:hidden; height:220px; }
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.project-card:hover img{ transform:scale(1.1); }
.badge-cap{ position:absolute; top:14px; left:14px; background:var(--grad-gold); color:var(--navy-900); font-weight:700; padding:.35rem .8rem; border-radius:999px; font-size:.78rem; }

/* ---------------- Process timeline ---------------- */
.process-step{ text-align:center; position:relative; }
.process-num{
  width:64px; height:64px; border-radius:50%; background:var(--grad-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem;
  margin:0 auto 1rem; box-shadow:var(--shadow-soft); position:relative; z-index:2;
}
.process-line{ position:absolute; top:32px; left:50%; width:100%; height:2px; background:repeating-linear-gradient(90deg, var(--gold-500) 0 8px, transparent 8px 16px); z-index:1; }

/* ---------------- Calculator ---------------- */
.calc-box{ background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); border:1px solid var(--border); }
.calc-result{ background:var(--grad-navy); color:#fff; border-radius:var(--radius-lg); }
.calc-result .value{ font-size:2rem; font-weight:800; color:var(--gold-400); }

/* ---------------- Testimonials ---------------- */
.testi-card{ background:var(--surface-soft); border-radius:var(--radius-md); padding:28px; border:1px solid var(--border); }
.stars{ color:var(--gold-500); }

/* ---------------- FAQ ---------------- */
.accordion-button:not(.collapsed){ background:var(--gold-100); color:var(--navy-900); }
.accordion-button:focus{ box-shadow:none; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--navy-900); color:#c8d4ea; }
.site-footer h5{ color:#fff; font-weight:700; margin-bottom:1.1rem; }
.site-footer a{ color:#c8d4ea; }
.site-footer a:hover{ color:var(--gold-400); }
.footer-bottom{ background:#050d1b; color:#8ea0c2; font-size:.85rem; }

/* ---------------- Floating buttons ---------------- */
.float-actions{ position:fixed; right:20px; bottom:84px; z-index:1200; display:flex; flex-direction:column; gap:12px; }
@media (min-width:992px){ .float-actions{ bottom:28px; } }
.float-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem; box-shadow:var(--shadow-strong); transition:transform .25s ease;
}
.float-btn:hover{ transform:scale(1.1); color:#fff; }
.float-btn.wa{ background:#25D366; }
.float-btn.call{ background:var(--grad-gold); color:var(--navy-900); }

/* ---------------- Mobile bottom nav ---------------- */
.mobile-bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:1100;
  background:#fff; border-top:1px solid var(--border);
  display:flex; justify-content:space-around; padding:8px 4px;
  box-shadow:0 -6px 20px rgba(0,0,0,.06);
}
@media (min-width:992px){ .mobile-bottom-nav{ display:none; } }
.mobile-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.68rem; color:var(--ink-600); font-weight:600; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover{ color:var(--gold-500); }
.mobile-bottom-nav i{ font-size:1.2rem; }

/* ---------------- Scroll reveal ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

.glass{ background:rgba(255,255,255,.65); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.4); }

/* ---------------- Breadcrumb ---------------- */
.breadcrumb-nav{ background:var(--surface-soft); border-bottom:1px solid var(--border); }
.breadcrumb-item a{ color:var(--ink-600); text-decoration:none; font-weight:500; }
.breadcrumb-item a:hover{ color:var(--gold-500); }
.breadcrumb-item.active{ color:var(--ink-900); font-weight:600; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--ink-400); }

/* ---------------- Self-contained image placeholder (no external hotlinks) ---------------- */
.img-placeholder{
  position:relative; width:100%; height:100%; min-height:190px;
  background:var(--grad-navy);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.img-placeholder::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
    radial-gradient(circle at 75% 20%, rgba(245,180,0,.35), transparent 55%);
}
.img-placeholder i{ position:relative; z-index:1; font-size:2.6rem; color:var(--gold-400); opacity:.9; }
.img-placeholder.sm i{ font-size:1.8rem; }
.img-placeholder.lg{ min-height:320px; }
.img-placeholder.lg i{ font-size:3.6rem; }