/* =========================================================================
   SURYONIX ENERGY - CORE STYLESHEET
   =========================================================================
   Structure of this file:
     1.  Design tokens (:root)      <- change brand colours HERE and nowhere else
     2.  Reset and base elements
     3.  Layout helpers
     4.  Reusable components (buttons, cards, section headers)
     5.  Site sections, in the order they appear in index.html
     6.  Footer
     7.  Floating WhatsApp widget

   Responsive rules live in responsive.css, loaded after this file.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   -------------------------------------------------------------------------
   Every colour below was sampled from the company logo. See
   docs/DESIGN_SYSTEM.md for how each value was derived and which part of the
   logo it came from. If the logo changes, this block is the only place that
   needs editing.
   ========================================================================= */

:root {

  /* --- Brand colours ---------------------------------------------------- */
  --color-primary:        #0B2A47;  /* Deep navy - wordmark + feather outlines */
  --color-primary-deep:   #061B2F;  /* Darker navy - footer                    */
  --color-primary-soft:   #14395C;  /* Lifted navy - cards on dark sections    */
  --color-secondary:      #1E5F94;  /* Peacock blue - peacock body             */
  --color-accent:         #F2B02A;  /* Solar gold - sun rays. ACTIONS ONLY.    */
  --color-accent-light:   #F3CE42;  /* Gold highlight - outer petals           */
  --color-accent-tint:    #FDF2D9;  /* Pale gold wash - subsidy panel          */
  --color-teal:           #2F7B7F;  /* Feather eyes                            */
  --color-sage:           #498668;  /* Feather edges - use sparingly           */

  /* --- Neutrals --------------------------------------------------------- */
  --color-ink:            #16212B;  /* Headings                                */
  --color-body:           #4A5568;  /* Body text - 7.53:1 on white             */
  --color-muted:          #77848F;  /* Captions, hints                         */
  --color-line:           #E2E7EC;  /* Hairline borders                        */
  --color-surface:        #FFFFFF;  /* Default page background                 */
  --color-surface-alt:    #F4F7F9;  /* Alternating section background          */

  /* --- Text on dark backgrounds ----------------------------------------- */
  --color-on-dark:        #FFFFFF;
  --color-on-dark-muted:  #B9C7D6;

  /* --- CONTRAST WARNING -------------------------------------------------
     White text on --color-accent scores 1.91:1 and FAILS WCAG AA.
     Navy on gold scores 7.67:1 and passes AAA.
     Gold buttons therefore always use navy text. Do not change this
     without re-checking contrast.
     --------------------------------------------------------------------- */
  --color-on-accent:      var(--color-primary);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Fluid type scale. clamp(min, preferred, max) so sizes adapt without
     needing a media query for every step. */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  --text-xl:   clamp(1.35rem, 1vw + 1rem, 1.6rem);
  --text-2xl:  clamp(1.7rem, 2.4vw + 1rem, 2.4rem);
  --text-3xl:  clamp(2.1rem, 4vw + 1rem, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Vertical padding applied to every <section>. One value to rebalance
     the whole page's rhythm. */
  --section-padding: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Shape and depth -------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 42, 71, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 42, 71, 0.08);
  --shadow-lg: 0 18px 48px rgba(11, 42, 71, 0.14);

  /* --- Layout ----------------------------------------------------------- */
  --container-width: 1160px;
  --container-pad:   clamp(1.25rem, 4vw, 2.5rem);
  --header-height:   116px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.35s;
}


/* =========================================================================
   2. RESET AND BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Anyone who has asked their OS to reduce motion gets no smooth scrolling
   and no scroll-triggered animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-body);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 500;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-secondary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary); }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

/* Every interactive element must show a visible keyboard focus ring. */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Screen-reader-only text: present in the accessibility tree, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   3. LAYOUT HELPERS
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-padding);
  position: relative;
}

/* Sticky header would otherwise cover a section heading when an anchor link
   jumps to it. This offsets the scroll target by the header height. */
.section,
#hero {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

.section--alt  { background: var(--color-surface-alt); }
.section--dark { background: var(--color-primary); }

.section--dark h2,
.section--dark h3 { color: var(--color-on-dark); }
.section--dark p  { color: var(--color-on-dark-muted); }


/* --- Section header block ------------------------------------------------ */

.section-header {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

/* The eyebrow carries the ray motif taken from the logo's sunburst.
   The rays are drawn with a repeating conic gradient rather than an image
   so they inherit the accent colour automatically. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 0l1.2 5.4L12 7l-1.2-1.6zM12 24l-1.2-5.4L12 17l1.2 1.6zM0 12l5.4-1.2L7 12l-1.6 1.2zM24 12l-5.4 1.2L17 12l1.6-1.2zM3.5 3.5l4.3 3.4L7 7.8 3.6 7.9zM20.5 20.5l-4.3-3.4L17 16.2l3.4 4.3zM20.5 3.5l-3.4 4.3L16.2 7l4.3-3.4zM3.5 20.5l3.4-4.3L7.8 17l-4.3 3.4z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 0l1.2 5.4L12 7l-1.2-1.6zM12 24l-1.2-5.4L12 17l1.2 1.6zM0 12l5.4-1.2L7 12l-1.6 1.2zM24 12l-5.4 1.2L17 12l1.6-1.2zM3.5 3.5l4.3 3.4L7 7.8 3.6 7.9zM20.5 20.5l-4.3-3.4L17 16.2l3.4 4.3zM20.5 3.5l-3.4 4.3L16.2 7l4.3-3.4zM3.5 20.5l3.4-4.3L7.8 17l-4.3 3.4z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.section--dark .eyebrow { color: var(--color-accent-light); }

.section-lead {
  font-size: var(--text-lg);
  color: var(--color-body);
  max-width: 42rem;
}

.section-header--center .section-lead { margin-inline: auto; }
.section--dark .section-lead { color: var(--color-on-dark-muted); }


/* =========================================================================
   4. REUSABLE COMPONENTS
   ========================================================================= */

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Primary CTA. Navy on gold - see the contrast warning in the token block. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--primary:hover {
  background: var(--color-accent-light);
  color: var(--color-on-accent);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-line);
}
.btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Outline button placed on a navy section. */
.btn--outline-light {
  background: transparent;
  color: var(--color-on-dark);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--outline-light:hover {
  border-color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
}

.btn--block { width: 100%; }
.btn--lg    { padding: 1.1rem 2rem; font-size: var(--text-base); }

/* Text link styled as a forward action. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
}
.link-action::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease);
}
.link-action:hover::after { transform: translateX(4px); }


/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: 100%;
}

.card__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-tint);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 22px; height: 22px; }

.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card p  { font-size: var(--text-sm); }

/* Generic responsive grid. Column count is decided by available width
   rather than by breakpoint, so it degrades smoothly on any screen. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}


/* --- Illustrations -------------------------------------------------------
   Custom SVG scenes in images/illustrations/. Drawn in the brand palette,
   so they need no colour overrides here.

   They carry their own painted background (a cream sky), which is why the
   text inside them stays readable regardless of the section behind. The
   flow diagram carries a white card instead. Any NEW illustration must do
   the same - a transparent SVG with dark text becomes unreadable if the
   surrounding surface ever changes.

   Label text inside these files is real SVG <text>, not paths, so it stays
   selectable and searchable. It does not scale down gracefully on small
   screens, which is why responsive.css caps how small they may render.
   ------------------------------------------------------------------------ */

.illustration {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* The flow diagram is wider than it is tall and already has its own white
   card drawn in, so it needs no container background. */
.illustration--flow {
  background: transparent;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}


/* --- Image placeholder ---------------------------------------------------
   Used until the client supplies photography. Deliberately looks like a
   reserved slot rather than a broken image. Replace the whole element with
   an <img> when real photos arrive - see docs/CONTENT_GUIDE.md.
   ------------------------------------------------------------------------ */

.img-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      135deg,
      var(--color-surface-alt) 0 12px,
      #EDF1F4 12px 24px
    );
  border: 1px dashed #C8D2DA;
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-4);
}


/* =========================================================================
   5. SITE SECTIONS
   ========================================================================= */

/* --- 5.1 Header / navigation -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
/* The mark is wider than it is tall, so it is sized on width. It carries
   its own transparent background and needs no container. */
.brand img { height: 92px; width: auto; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0; }

.nav__link {
  display: block;
  padding: 0.5rem 0.6rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-body);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--color-primary); }

/* Applied by js/script.js as the visitor scrolls - see initScrollSpy(). */
.nav__link.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.header-cta { flex: none; margin-left: var(--space-3); }

/* The nav panel carries its own CTA for the mobile menu. On desktop the
   header already shows .header-cta, so this one must stay hidden or BOTH
   render at once. responsive.css reveals it below 820px. */
.nav > .btn { display: none !important; }

/* Hamburger. Hidden on desktop, revealed in responsive.css. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(4px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg) translateY(-1px); }


/* --- 5.2 Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

/* Signature element: the logo's sunburst, abstracted and anchored behind
   the form. Drawn as an SVG in index.html so it scales cleanly. */
.hero__rays {
  position: absolute;
  top: 50%; right: -8%;
  transform: translateY(-50%);
  width: min(760px, 78vw);
  opacity: 0.14;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-4);
}

.hero h1 {
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
  max-width: 15ch;
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--color-on-dark-muted);
  max-width: 34rem;
  margin-bottom: var(--space-5);
}

.hero__points { display: grid; gap: var(--space-3); }
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-on-dark);
}
.hero__points svg {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 2px;
  color: var(--color-accent);
}


/* --- 5.3 Consultation form ----------------------------------------------- */

.lead-form {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}

.lead-form__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.lead-form__sub {
  font-size: var(--text-sm);
  color: var(--color-body);
  margin-bottom: var(--space-5);
}

.field { margin-bottom: var(--space-4); }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.field .optional {
  font-weight: 400;
  color: var(--color-muted);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  padding: 0.8rem 0.9rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--color-muted); }
.field input:hover  { border-color: #C8D2DA; }
.field input:focus  { border-color: var(--color-secondary); outline: none; box-shadow: 0 0 0 3px rgba(30, 95, 148, 0.12); }

/* Phone field with a fixed +91 prefix so the visitor types 10 digits only. */
.input-prefix {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.input-prefix:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(30, 95, 148, 0.12);
}
.input-prefix__code {
  display: grid;
  place-items: center;
  padding-inline: 0.85rem;
  background: var(--color-surface-alt);
  border-right: 1.5px solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-body);
}
.input-prefix input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
}

/* Bill amount chips. Radio inputs visually replaced by tappable pills -
   one tap instead of a keyboard. See docs/FORM_GUIDE.md. */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.chip span {
  display: block;
  padding: 0.6rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-body);
  background: var(--color-surface);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip span:hover { border-color: var(--color-secondary); color: var(--color-primary); }
.chip input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Validation messaging. Errors state what is wrong and how to fix it. */
.field__error {
  display: none;
  font-size: var(--text-xs);
  color: #B3261E;
  margin-top: var(--space-2);
}
.field.has-error input,
.field.has-error .input-prefix { border-color: #B3261E; }
.field.has-error .field__error { display: block; }

.form-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-3);
}

/* Success state, revealed by script.js after a successful submission. */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-5) var(--space-2);
}
.form-success.is-visible { display: block; }
.form-success__mark {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-primary);
}
.form-success__mark svg { width: 28px; height: 28px; }

.form-error-banner {
  display: none;
  background: #FDECEA;
  border: 1px solid #F3C0BA;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: #8C1D18;
  margin-bottom: var(--space-4);
}
.form-error-banner.is-visible { display: block; }


/* --- 5.4 Why go solar ---------------------------------------------------- */

.benefit-card h3 { display: flex; align-items: center; gap: var(--space-3); }


/* --- 5.5 Why choose us --------------------------------------------------- */

/* Numbered list is used here because the reasons are a set, not a sequence -
   so no numbers. Cards sit on the navy section with a lifted surface. */
.reason-card {
  background: var(--color-primary-soft);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: 100%;
}
.reason-card h3 {
  font-size: var(--text-lg);
  color: var(--color-on-dark);
  margin-bottom: var(--space-2);
}
.reason-card p { font-size: var(--text-sm); color: var(--color-on-dark-muted); }
.reason-card__icon { color: var(--color-accent); margin-bottom: var(--space-4); }
.reason-card__icon svg { width: 26px; height: 26px; }


/* --- 5.6 How solar works -------------------------------------------------
   The five-stage sequence is now a single SVG illustration rather than a
   row of cards - see .illustration above. Only the honesty note below it
   is styled here.
   ------------------------------------------------------------------------ */

/* Honest note about on-grid behaviour during outages. Deliberately
   prominent rather than buried. */
.notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5);
}
.notice svg { flex: none; width: 24px; height: 24px; color: var(--color-teal); }
.notice p { font-size: var(--text-sm); margin: 0; }
.notice strong { color: var(--color-ink); }


/* --- 5.7 Solutions ------------------------------------------------------- */

.solution {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.solution:first-of-type { border-top: 0; padding-top: 0; }

/* Let the grid columns shrink below their content's intrinsic width, so the
   wide illustration scrolls inside its own box (see responsive.css) instead
   of stretching the whole column and pushing the page sideways on phones. */
.solution__body,
.solution__media { min-width: 0; }

/* Alternate the image side so the page does not read as a stack of
   identical rows. */
.solution:nth-child(even) .solution__media { order: -1; }

.solution__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-3);
}
.solution__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.solution__list li {
  font-size: var(--text-xs);
  color: var(--color-body);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
}


/* --- 5.8 Process --------------------------------------------------------- */

/* Numbers ARE meaningful here: this is a real sequence the customer moves
   through, so the ordinal carries information. */
.process { position: relative; display: grid; gap: var(--space-5); }

.process__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.process__num {
  position: relative;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Vertical rail linking the steps. */
.process__step:not(:last-child) .process__num::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: calc(100% + var(--space-5) - 14px);
  margin-top: 7px;
  background: var(--color-line);
  transform: translateX(-50%);
}

.process__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.process__body p  { font-size: var(--text-sm); }


/* --- 5.9 Calculator (coming soon) ---------------------------------------- */

.coming-soon {
  text-align: center;
  border: 1px dashed #C8D2DA;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.badge-soon {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-accent-tint);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  margin-bottom: var(--space-4);
}


/* --- 5.10 Products ------------------------------------------------------- */

/* Brand names are plain text, never logos. Displaying manufacturer marks
   would imply a dealership relationship that has not been established. */
.brand-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.brand-list li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
}


/* --- 5.11 Subsidy -------------------------------------------------------- */

.subsidy-panel {
  background: var(--color-accent-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.subsidy-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}
.subsidy-table th,
.subsidy-table td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid rgba(11, 42, 71, 0.12);
  font-size: var(--text-sm);
}
.subsidy-table th {
  font-weight: 600;
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subsidy-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-primary);
}
.subsidy-table tr:last-child td { border-bottom: 0; }

.subsidy-points { display: grid; gap: var(--space-4); }
.subsidy-points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.subsidy-points b {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
}

/* Subsidy application steps. Horizontal on desktop, stacked on mobile. */
.steps-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-5);
}
.steps-flow li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.85rem;
}
.steps-flow li::after {
  content: "\2192";
  color: var(--color-accent);
  font-weight: 700;
}
.steps-flow li:last-child::after { content: none; }

.disclaimer {
  font-size: var(--text-xs);
  color: var(--color-body);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.disclaimer strong { color: var(--color-ink); }


/* --- 5.12 FAQ ------------------------------------------------------------
   Built on native <details>/<summary>. Accessible and keyboard-operable
   with no JavaScript at all.
   ------------------------------------------------------------------------ */

.faq { display: grid; gap: var(--space-3); max-width: 52rem; margin-inline: auto; }

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-secondary);
  border-bottom: 2px solid var(--color-secondary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-4px, -4px); }

.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
}


/* --- 5.13 Final CTA ------------------------------------------------------ */

.final-cta {
  text-align: center;
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
}
.final-cta h2 { color: var(--color-on-dark); }
.final-cta p  { color: var(--color-on-dark-muted); max-width: 40rem; margin-inline: auto; }
.final-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}


/* =========================================================================
   6. FOOTER
   ========================================================================= */

.site-footer {
  background: var(--color-primary-deep);
  color: var(--color-on-dark-muted);
  padding-block: var(--space-8) var(--space-5);
  font-size: var(--text-sm);
}

.site-footer a { color: var(--color-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

/* Footer lockup mirrors the header: mark plus text, no white disc.
   The previous version placed the full circular logo on navy, which read
   as a white blob. */
.footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.footer__lockup img { height: 88px; width: auto; }
.footer__text { display: flex; flex-direction: column; gap: 3px; }
.footer__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-on-dark);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
/* Tagline on the navy footer: same italic treatment as elsewhere, in the
   bright hero gold (legible on dark), centred under the wordmark. */
.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-accent-light);
  line-height: 1.15;
  text-align: center;
}
.footer__lockup:hover .footer__name { color: var(--color-accent); }
.footer__brand p { font-size: var(--text-sm); max-width: 26rem; }

.footer h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: var(--space-4);
}

.footer__list { display: grid; gap: var(--space-2); }

.footer__person { margin-bottom: var(--space-4); }
.footer__person strong { display: block; color: var(--color-on-dark); font-weight: 600; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }


/* =========================================================================
   7. FLOATING WHATSAPP WIDGET
   -------------------------------------------------------------------------
   Two contacts, so the button opens a chooser rather than dialling one
   person. Numbers come from js/config.js.
   ========================================================================= */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.wa__panel {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  width: 260px;
}
.wa__panel.is-open { display: block; }

.wa__panel h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}
.wa__panel p { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-3); }

.wa__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-bottom: var(--space-2);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wa__person:hover { border-color: #25D366; background: #F3FBF6; }
.wa__person span { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.wa__person small { font-size: var(--text-xs); color: var(--color-muted); }

.wa__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #25D366;
  color: #05331A;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.wa__toggle svg { width: 22px; height: 22px; }


/* =========================================================================
   8. SCROLL REVEAL
   -------------------------------------------------------------------------
   Elements marked data-reveal fade up once when scrolled into view.
   Disabled entirely for reduced-motion users by the media query in
   section 2, and by a guard in script.js.
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}


/* =========================================================================
   9. TAGLINE  "Energy, Reimagined"
   -------------------------------------------------------------------------
   Header: a quiet strapline locked under the wordmark - much smaller than
   the name, uppercase and letter-spaced so it reads as a secondary line.
   Hero: a more prominent brand statement set in the display face.
   ========================================================================= */

/* The wordmark + strapline stack as one column beside the mark. */
.brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brand__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  /* Same gold hue as the hero tagline, deepened to an amber so it stays
     legible on the white header - hero gold on white is only ~1.9:1.
     This is the light-background variant of the brand gold. */
  color: #A6780F;
  line-height: 1.15;
  white-space: nowrap;
  display: block;
  width: 100%;
  text-align: center;
}

/* Hero: a brand line set between the eyebrow and the headline. */
.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-accent-light);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
}


/* =========================================================================
   10. TRUST / CREDENTIALS
   -------------------------------------------------------------------------
   BESCOM & PM Surya Ghar empanelment. A small shield-check badge on the
   navy sections, and a fuller callout in the subsidy section where it is
   most persuasive.
   ========================================================================= */

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0.55rem 0.95rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-pill);
}
.trust-badge svg { width: 19px; height: 19px; flex: none; }

/* On the navy hero and Why-us sections. */
.trust-badge--dark {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(243, 206, 66, 0.38);
  color: var(--color-on-dark);
}
.trust-badge--dark svg { color: var(--color-accent-light); }

/* Subsidy section: a fuller callout on the white background. */
.vendor-callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-accent-tint);
  border: 1px solid #F0DCA8;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}
.vendor-callout svg { flex: none; width: 28px; height: 28px; color: var(--color-teal); }
.vendor-callout p { font-size: var(--text-sm); margin: 0; }
.vendor-callout strong { color: var(--color-ink); }

/* Quiet credential line in the footer. */
.footer__cred {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-light);
}
.footer__cred svg { width: 17px; height: 17px; flex: none; }


/* =========================================================================
   11. HOW-IT-WORKS FLOW
   -------------------------------------------------------------------------
   A row of five stages on desktop; stacks vertically on phones so every
   stage stays visible and legible without horizontal scrolling. Replaces
   the single wide SVG that previously had to be swiped.
   ========================================================================= */

.flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0 auto var(--space-6);
  padding: 0;
  max-width: 920px;
}

.flow__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.flow__icon {
  width: 72px; height: 72px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-primary);
}
.flow__icon svg { width: 34px; height: 34px; }

.flow__text { display: flex; flex-direction: column; gap: 2px; }
.flow__title { font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.flow__sub   { font-size: var(--text-xs); color: var(--color-muted); }

/* Arrow between steps, aligned with the icon circles rather than the text. */
.flow__arrow {
  flex: none;
  align-self: flex-start;
  margin-top: 24px;
  color: var(--color-accent);
  display: flex;
}
.flow__arrow svg { width: 24px; height: 24px; }

/* Phones: a clean vertical flow - icon beside its label, arrows pointing down. */
@media (max-width: 640px) {
  .flow {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    max-width: 340px;
  }
  .flow__step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-4);
  }
  .flow__text { gap: 3px; }
  .flow__title { font-size: var(--text-base); }
  .flow__sub   { font-size: var(--text-sm); }
  .flow__arrow {
    align-self: center;
    margin: 0;
    transform: rotate(90deg);
  }
}