/* ============================================================
   Sunshine Power Solution - custom styles
   (Plain CSS so it works even though tailwind.min.css is a
   pre-compiled / purged file that does not contain new classes.)
   Brand colours come from the logo:
     orange  #F37021   sun yellow #FDB913
     navy    #0A2540   blue #0D4A8F   leaf green #3FA535
   ============================================================ */
:root{
  --ss-orange:#F37021; --ss-orange-dark:#D95A0F; --ss-sun:#FDB913;
  --ss-navy:#0A2540; --ss-blue:#0D4A8F; --ss-green:#3FA535;
  --ss-ink:#0F172A; --ss-muted:#64748B; --ss-line:#E2E8F0; --ss-soft:#F8FAFC;
}

/* ---------- Header logo swap (light logo on transparent home header) ---------- */
.nav-logo-img{height:46px;width:auto;display:block}
.nav-logo-img.logo-on-dark{display:none}
body.home-page:not(.scrolled) #mainNav .nav-logo-img.logo-on-light{display:none}
body.home-page:not(.scrolled) #mainNav .nav-logo-img.logo-on-dark{display:block}
@media (min-width:768px){.nav-logo-img{height:52px}}

/* ---------- Preloader ---------- */
html.ss-loading, html.ss-loading body{overflow:hidden!important;height:100%}
#sitePreloader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%, #123a66 0%, var(--ss-navy) 62%);color:#fff;transition:opacity .6s ease, visibility .6s ease}
#sitePreloader.ss-hide{opacity:0;visibility:hidden;pointer-events:none}
.ss-pre-logo{width:min(260px,62vw);height:auto;margin-bottom:28px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35))}
.ss-pre-ring{position:relative;width:170px;height:170px}
.ss-pre-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ss-pre-ring .track{stroke:rgba(255,255,255,.12)}
.ss-pre-ring .bar{stroke:url(#ssPreGrad);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.ss-pre-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:44px;letter-spacing:-1px}
.ss-pre-num small{font-size:20px;margin-left:2px;color:var(--ss-sun)}
.ss-pre-rays{position:absolute;inset:-18px;border-radius:50%;border:2px dashed rgba(253,185,19,.35);animation:ssSpin 14s linear infinite}
.ss-pre-text{margin-top:26px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600}
.ss-pre-sub{margin-top:8px;font-size:12px;color:rgba(255,255,255,.45)}
@keyframes ssSpin{to{transform:rotate(360deg)}}

/* ---------- Section helpers ---------- */
.ss-section{padding:80px 0}
.ss-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.ss-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.35em;font-weight:800;color:var(--ss-green);text-transform:uppercase}
.ss-eyebrow:before,.ss-eyebrow:after{content:"";width:34px;height:2px;background:var(--ss-green)}
.ss-h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;color:var(--ss-ink);margin:14px 0 0}
.ss-h2 span{color:var(--ss-orange)}
.ss-lead{color:var(--ss-muted);font-size:15px;line-height:1.7;margin-top:12px}
.ss-center{text-align:center}
.ss-center .ss-lead{max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- Solar in simple words (how it works) ---------- */
.ss-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;position:relative}
.ss-flow-card{position:relative;background:#fff;border:1px solid var(--ss-line);border-radius:20px;padding:26px 22px;text-align:center;transition:transform .35s ease, box-shadow .35s ease}
.ss-flow-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,37,64,.35)}
.ss-flow-icon{width:64px;height:64px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;font-size:30px}
.ss-flow-card h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:17px;color:var(--ss-ink);margin:0}
.ss-flow-card p{color:var(--ss-muted);font-size:13.5px;line-height:1.65;margin:8px 0 0}
.ss-flow-step{position:absolute;top:14px;left:16px;font-size:11px;font-weight:800;color:#CBD5E1;letter-spacing:.1em}
.ss-flow-card:not(:last-child):after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);color:var(--ss-orange);font-weight:800;font-size:20px;z-index:2}
.ss-note{margin-top:28px;background:linear-gradient(90deg,#FFF7ED,#FEF9C3);border:1px solid #FED7AA;border-radius:16px;padding:18px 22px;color:#7C2D12;font-size:14px;line-height:1.6;display:flex;gap:12px;align-items:flex-start}
.ss-note b{color:#9A3412}

/* ---------- Subsidy explained ---------- */
.ss-subsidy{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch;margin-top:44px}
.ss-sub-box{background:var(--ss-navy);border-radius:24px;padding:34px;color:#fff;position:relative;overflow:hidden}
.ss-sub-box:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(253,185,19,.35),transparent 70%)}
.ss-sub-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px dashed rgba(255,255,255,.15);font-size:15px}
.ss-sub-row:last-of-type{border-bottom:0}
.ss-sub-row b{font-family:'Poppins',sans-serif;font-size:22px;color:var(--ss-sun)}
.ss-sub-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ss-sub-list li{background:#fff;border:1px solid var(--ss-line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.ss-sub-list .n{flex:0 0 32px;height:32px;border-radius:10px;background:#FFF1E6;color:var(--ss-orange);font-weight:800;display:grid;place-items:center;font-size:14px}
.ss-sub-list h4{margin:0;font-size:15px;color:var(--ss-ink);font-weight:700}
.ss-sub-list p{margin:3px 0 0;font-size:13px;color:var(--ss-muted);line-height:1.55}

/* ---------- 4 easy steps ---------- */
.ss-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;counter-reset:st}
.ss-step{padding:0 18px;text-align:center;position:relative}
.ss-step:before{counter-increment:st;content:counter(st);width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--ss-orange);color:var(--ss-orange);font-weight:800;font-size:20px;display:grid;place-items:center;margin:0 auto 18px;position:relative;z-index:2;font-family:'Poppins',sans-serif}
.ss-step:after{content:"";position:absolute;top:27px;left:50%;width:100%;height:3px;background:repeating-linear-gradient(90deg,var(--ss-orange) 0 8px,transparent 8px 14px);z-index:1}
.ss-step:last-child:after{display:none}
.ss-step h3{font-family:'Poppins',sans-serif;font-size:16.5px;font-weight:700;color:var(--ss-ink);margin:0}
.ss-step p{font-size:13.5px;color:var(--ss-muted);line-height:1.6;margin:8px 0 0}

/* ---------- Plain-language benefits ---------- */
.ss-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ss-benefit{background:var(--ss-soft);border:1px solid var(--ss-line);border-radius:18px;padding:22px}
.ss-benefit .e{font-size:26px}
.ss-benefit h3{margin:10px 0 0;font-size:16px;font-weight:700;color:var(--ss-ink);font-family:'Poppins',sans-serif}
.ss-benefit p{margin:6px 0 0;color:var(--ss-muted);font-size:13.5px;line-height:1.6}

/* ---------- Buttons ---------- */
.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;transition:all .25s ease}
.ss-btn-primary{background:var(--ss-orange);color:#fff;box-shadow:0 10px 24px -10px rgba(243,112,33,.7)}
.ss-btn-primary:hover{background:var(--ss-orange-dark)}
.ss-btn-wa{background:#00A63E;color:#fff}
.ss-btn-wa:hover{background:#008f35}
.ss-btn-ghost{background:#fff;color:var(--ss-navy);border:2px solid var(--ss-navy)}
.ss-btn-ghost:hover{background:var(--ss-navy);color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .ss-flow{grid-template-columns:repeat(2,1fr)}
  .ss-flow-card:nth-child(2):after{display:none}
  .ss-subsidy{grid-template-columns:1fr}
  .ss-steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .ss-step:nth-child(2):after{display:none}
  .ss-benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
  .ss-section{padding:56px 0}
  .ss-flow{grid-template-columns:1fr}
  .ss-flow-card:after{display:none}
  .ss-steps{grid-template-columns:1fr}
  .ss-step:after{display:none}
  .ss-benefits{grid-template-columns:1fr}
  .ss-sub-box{padding:26px}
}

/* ---------- Utility classes used by the pages but missing from the
   pre-compiled tailwind.min.css (added here so they always work) ---------- */
.bg-black\/45{background-color:rgba(0,0,0,.45)}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bg-\[\#06182B\]{background-color:#06182B}
.break-all{word-break:break-all}
.duration-300{transition-duration:.3s}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.hover\:text-\[\#FDB913\]:hover{color:#FDB913}
.hover\:text-slate-800:hover{color:#1e293b}
.leading-\[1\.75\]{line-height:1.75}
.max-w-\[560px\]{max-width:560px}
.mt-2\.5{margin-top:.625rem}
.shadow-\[0_0_30px_rgba\(0\2c 166\2c 62\2c 0\.5\)\]{box-shadow:0 0 30px rgba(0,166,62,.5)}
.text-\[\#0F172A\]{color:#0F172A}
.text-\[20px\]{font-size:20px}
.text-white\/85{color:rgba(255,255,255,.85)}
.top-\[72px\]{top:72px}
.tracking-\[2px\]{letter-spacing:2px}
.\[\&_summary\:\:-webkit-details-marker\]\:hidden summary::-webkit-details-marker{display:none}
details summary{list-style:none}
@media (min-width:640px){
  .sm\:text-\[16px\]{font-size:16px}
  .sm\:w-\[360px\]{width:360px}
}
@media (min-width:1024px){
  .lg\:grid-cols-\[1\.05fr_1fr\]{grid-template-columns:1.05fr 1fr}
  .lg\:grid-cols-\[1\.1fr_1fr\]{grid-template-columns:1.1fr 1fr}
}
@media (min-width:1280px){
  .xl\:inline-flex{display:inline-flex}
}
@media (min-width:1536px){
  .\32xl\:right-12{right:3rem}
}
/* Hero subsidy badge sits just under the transparent header */
.ss-hero-badge{top:72px}
body.home-page.scrolled .ss-hero-badge{top:112px}

/* ---------- Language switch (EN / मराठी) ---------- */
.lang-switch{display:inline-flex;align-items:center;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:999px;padding:3px;gap:2px}
.lang-switch a{font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:999px;color:#475569;text-decoration:none;line-height:1;transition:all .2s}
.lang-switch a.on{background:var(--ss-orange);color:#fff;box-shadow:0 2px 6px rgba(243,112,33,.4)}
.lang-switch a:not(.on):hover{color:var(--ss-navy)}
body.home-page:not(.scrolled) .lang-switch{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
body.home-page:not(.scrolled) .lang-switch a:not(.on){color:#fff}

/* ---------- Marathi typography ----------
   Poppins/Inter have no Devanagari letters, so Marathi uses Mukta.
   Devanagari needs a bit more line height and no wide letter-spacing. */
html.lang-mr body, html.lang-mr .font-display, html.lang-mr .ss-h2, html.lang-mr h1, html.lang-mr h2, html.lang-mr h3, html.lang-mr h4{font-family:'Mukta','Poppins','Inter',sans-serif}
html.lang-mr h1{line-height:1.2!important}
html.lang-mr h2, html.lang-mr h3{line-height:1.3!important}
html.lang-mr [class*="tracking-["], html.lang-mr .ss-eyebrow, html.lang-mr .ss-pre-text{letter-spacing:.04em!important}
html.lang-mr p{line-height:1.75}
html.lang-mr .ss-hero-badge .leading-\[0\.95\]{line-height:1.3}
html.lang-mr .leading-tight{line-height:1.4}
html.lang-mr .leading-none{line-height:1.15}
html.lang-mr .tracking-widest, html.lang-mr .tracking-wider, html.lang-mr .tracking-wide{letter-spacing:.02em!important}
html.lang-mr .uppercase{text-transform:none}