/* ===========================================================
   LOTUS SUN ENERGY — brand additions & B2C components
   (loaded after style.css; overrides + new pieces)
   =========================================================== */

/* Devanagari subset for the Hindi PDF report (rendered via html2canvas) */
@font-face { font-family: "LotusHindi"; src: url("../fonts/LotusHindi.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; }
.cr-actions { grid-template-columns: 1fr 1fr; }
.cr-actions .btn { font-size: 13.5px; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
@media (max-width:420px){ .cr-actions { grid-template-columns: 1fr; } }

/* ---------- brand wordmark: "Lotus"(navy) + "Sun"(orange) + "Energy"(olive), matches logo ---------- */
.brand-word { font-family: "Poppins", serif; font-weight: 700; font-size: 22px; letter-spacing: .3px; line-height: 1; white-space: nowrap; }
.brand-word .w1 { color: var(--navy-700); }
.brand-word .w2 { color: var(--orange-500); }
.brand-word .w3 { color: var(--green-700); }
.footer__brand .logo .brand-word .w1 { color: var(--navy-700); }
.brand-lotus { width: 42px; height: 42px; flex: none; }
.header.scrolled .brand-lotus { width: 38px; height: 38px; }
.brand-tag { display:block; font-family:var(--head); font-size:8.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--green-600); margin-top:3px; }
@media (max-width:600px){ .brand-tag { display:none; } }

/* secondary (go-green) button needs light text */
.btn--sun { color: #fff; }
.hero__badge b { color: #fff; }

/* lotus pink helper */
.text-lotus { background: var(--grad-lotus); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn--lotus { background: var(--grad-lotus); color:#fff; box-shadow: 0 12px 28px rgba(225,29,107,.32); }
.btn--lotus:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(225,29,107,.45); }

/* ===========================================================
   HERO (light, B2C, illustration)
   =========================================================== */
.lhero { position: relative; overflow: hidden; background: var(--grad-hero); padding: 150px 0 80px; }
.lhero::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-160px; top:-160px;
  background: radial-gradient(circle, rgba(255,154,61,.30), transparent 70%); filter: blur(8px); }
.lhero::after { content:""; position:absolute; width:440px; height:440px; border-radius:50%; left:-160px; bottom:-180px;
  background: radial-gradient(circle, rgba(20,184,166,.22), transparent 70%); }
.lhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.lhero__badge { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); padding:8px 16px 8px 9px; border-radius:50px; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:22px; }
.lhero__badge b { background: var(--grad-green); color:#fff; font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.5px; padding:4px 10px; border-radius:50px; }
.lhero h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -1.5px; color: var(--ink); margin-bottom: 18px; }
.lhero p.lead { font-size: clamp(16px, 2vw, 19px); color: var(--body); max-width: 540px; margin-bottom: 30px; }
.lhero__actions { display:flex; flex-wrap:wrap; gap:14px; }
.lhero__chips { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:32px; }
.lhero__chips .c { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink); }
.lhero__chips .c svg { width:20px; height:20px; color:var(--green-600); flex:none; }

/* hero illustration card */
.hero-illus { position: relative; }
.hero-illus svg { width: 100%; height: auto; display:block; filter: drop-shadow(0 30px 60px rgba(120,35,70,.18)); }
.hero-illus .float-stat { position:absolute; background:#fff; border-radius:16px; box-shadow: var(--shadow); padding:13px 16px; display:flex; align-items:center; gap:12px; }
.hero-illus .float-stat .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none; }
.hero-illus .float-stat b { font-family:var(--head); font-size:17px; color:var(--ink); display:block; line-height:1; }
.hero-illus .float-stat span { font-size:11.5px; color:var(--muted); }
.hero-illus .fs1 { top: 8%; left: -16px; animation: floaty 5s ease-in-out infinite; }
.hero-illus .fs1 .ic { background: var(--grad-green); }
.hero-illus .fs2 { bottom: 10%; right: -10px; animation: floaty 6s ease-in-out infinite reverse; }
.hero-illus .fs2 .ic { background: var(--grad-sun); }
@keyframes floaty { 50% { transform: translateY(-12px); } }

/* ===========================================================
   TRUST STRIP
   =========================================================== */
.trust-strip { background: var(--ink); }
.trust-strip .container { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; padding-block: 26px; }
.trust-item { display:flex; align-items:center; gap:13px; color:#fff; }
.trust-item .ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.10); display:grid; place-items:center; flex:none; color:var(--gold-400); }
.trust-item .ic svg { width:22px; height:22px; }
.trust-item b { font-family:var(--head); font-size:14.5px; display:block; line-height:1.2; }
.trust-item span { font-size:12px; color:#c9bcd0; }

/* ===========================================================
   STEP CARDS (how it works — B2C numbered, friendly)
   =========================================================== */
.steps-row { display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; counter-reset: stp; }
.step-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 22px 24px; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s; }
.step-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.step-card .si { width:60px; height:60px; border-radius:18px; background:var(--bg-mint); color:var(--green-600); display:grid; place-items:center; margin-bottom:16px; }
.step-card .si svg { width:30px; height:30px; }
.step-card .sct { counter-increment: stp; position:absolute; top:22px; right:22px; font-family:var(--head); font-weight:800; font-size:30px; color:var(--line); }
.step-card .sct::before { content: counter(stp, decimal-leading-zero); }
.step-card h4 { font-size:17px; margin-bottom:7px; }
.step-card p { font-size:14px; color:var(--muted); line-height:1.6; }

/* ===========================================================
   FINANCING / SUBSIDY CARDS
   =========================================================== */
.finance-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.finance-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .3s, box-shadow .3s; }
.finance-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad-green); }
.finance-card.eco::before { background:var(--grad-sun); }
.finance-card.lotus::before { background:var(--grad-lotus); }
.finance-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
.finance-card .ic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; margin-bottom:16px; background:var(--grad-green); }
.finance-card.eco .ic { background:var(--grad-sun); } .finance-card.lotus .ic { background:var(--grad-lotus); }
.finance-card .ic svg { width:28px; height:28px; }
.finance-card h4 { font-size:19px; margin-bottom:9px; }
.finance-card p { font-size:14.5px; color:var(--muted); line-height:1.65; }
.finance-card .big { font-family:var(--head); font-weight:800; font-size:30px; color:var(--ink); margin:2px 0 6px; }
.finance-card .big small { font-size:14px; color:var(--muted); font-weight:600; }

/* ===========================================================
   CTA BAND
   =========================================================== */
.cta-band { background: var(--grad-green); border-radius:28px; padding: clamp(34px,5vw,60px); color:#fff; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.cta-band::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.14); top:-120px; left:-60px; }
.cta-band::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.10); bottom:-110px; right:-50px; }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; font-size:clamp(26px,3.6vw,40px); margin-bottom:12px; letter-spacing:-.5px; }
.cta-band p { color:rgba(255,255,255,.92); font-size:17px; max-width:560px; margin:0 auto 26px; }
.cta-band .btn--ghost { border-color:rgba(255,255,255,.7); }
.cta-band .actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ===========================================================
   SAVINGS / VALUE BLURB ICON LIST (reuses .benefit-list)
   =========================================================== */
.pill-tag { display:inline-block; font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--green-700); background:var(--bg-mint); padding:5px 12px; border-radius:50px; }
.pill-tag.lotus { color:var(--lotus-600); background:var(--bg-rose); }
.pill-tag.sun { color:var(--gold-500); background:#fff2e8; }

/* lotus watermark divider */
.section--mint { background: var(--bg-mint); }
.section--rose { background: var(--bg-rose); }

/* ---------- gradient page hero (subpages) ---------- */
.page-hero { background: linear-gradient(120deg, #0e1740 0%, #16245e 50%, #2f3a12 100%); background-size: cover; background-position: center; }
.page-hero__bg { display: none; }
/* real solar photo behind subpage heroes, with navy overlay for legibility */
body[data-page="residential"] .page-hero { background-image: linear-gradient(120deg, rgba(14,23,64,.93), rgba(22,36,94,.80) 55%, rgba(47,58,18,.62)), url("../photos/solar-panels-grass.jpg"); }
body[data-page="subsidy"] .page-hero { background-image: linear-gradient(120deg, rgba(14,23,64,.93), rgba(22,36,94,.80) 55%, rgba(47,58,18,.62)), url("../photos/solar-array-field.jpg"); }
body[data-page="about"] .page-hero { background-image: linear-gradient(120deg, rgba(14,23,64,.93), rgba(22,36,94,.80) 55%, rgba(47,58,18,.62)), url("../photos/solar-panels-sky.jpg"); }
.page-hero::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-120px; top:-120px;
  background: radial-gradient(circle, rgba(244,123,32,.32), transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .pill-tag { background: rgba(255,255,255,.14); color:#fff; }

/* ===========================================================
   PHOTOGRAPHIC HERO (home)
   =========================================================== */
.lhero--photo { background: var(--navy-900); padding: 0; min-height: 92svh; display: flex; align-items: center; }
.lhero--photo .lhero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lhero--photo .lhero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: heroZoomL 20s ease-in-out infinite alternate; }
@keyframes heroZoomL { to { transform: scale(1.16); } }
.lhero--photo .lhero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(14,23,64,.94) 0%, rgba(22,36,94,.82) 42%, rgba(22,36,94,.45) 100%); }
.lhero--photo::before, .lhero--photo::after { display: none; }
.lhero--photo .container { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 80px; }
.lhero__inner { max-width: 720px; }
.lhero--photo h1 { color: #fff; }
.lhero--photo .lhero__badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(6px); }
.lhero--photo p.lead { color: #e8ecfb; }
.lhero--photo .lhero__chips .c { color: #fff; }
.lhero--photo .lhero__chips .c svg { color: var(--gold-400); }

/* ===========================================================
   IMAGE + TEXT BAND
   =========================================================== */
.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,60px); align-items: center; }
.split-media .sm-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; }
.split-media .sm-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; display: block; transition: transform .7s ease; }
.split-media .sm-img:hover img { transform: scale(1.06); }
.split-media.rev .sm-text { order: -1; }
.split-media .sm-badge { position:absolute; left:18px; bottom:18px; background:#fff; border-radius:12px; padding:10px 14px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px; }
.split-media .sm-badge .ic { width:34px; height:34px; border-radius:9px; background:var(--grad-green); color:#fff; display:grid; place-items:center; flex:none; }
.split-media .sm-badge b { font-family:var(--head); font-size:14px; color:var(--ink); display:block; line-height:1; }
.split-media .sm-badge span { font-size:11.5px; color:var(--muted); }

/* photo gallery (ambient, not project claims) */
.photo-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.photo-grid .pg { border-radius:14px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); position:relative; }
.photo-grid .pg img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.photo-grid .pg:hover img { transform:scale(1.08); }
.photo-grid .pg .cap { position:absolute; inset:auto 0 0 0; padding:24px 14px 12px; background:linear-gradient(transparent,rgba(14,23,64,.85)); color:#fff; font-size:12.5px; font-family:var(--head); font-weight:600; }
@media (max-width:760px){ .photo-grid { grid-template-columns:1fr 1fr; } .split-media { grid-template-columns:1fr; } .split-media.rev .sm-text { order:0; } }
@media (max-width:460px){ .photo-grid { grid-template-columns:1fr; } }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 980px) {
  .lhero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-illus { max-width: 460px; margin-inline: auto; order: -1; }
  .trust-strip .container { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .finance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lhero { padding-top: 120px; }
  .lhero__actions .btn { width: 100%; }
  .trust-strip .container { grid-template-columns: 1fr; gap: 16px; }
  .steps-row { grid-template-columns: 1fr; }
  .hero-illus .float-stat { transform: scale(.9); }
  .hero-illus .fs1 { left: 0; } .hero-illus .fs2 { right: 0; }
}