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

*, *::before, *::after { box-sizing: border-box; }
html, body {
  /* Prevent any horizontal page scroll / scrollbar.
     `clip` (not `hidden`) avoids creating a scroll container,
     so position:sticky on descendants keeps working. */
  overflow-x: clip;
  max-width: 100%;
}
body { font-family: 'Manrope', sans-serif; margin: 0; background: linear-gradient(135deg, #F3FBF3 0%, #E6F5E8 45%, #D7EDDA 100%); }


/* ─── Navbar ──────────────────────────────────────────── */

#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(67,175,67,0.40);
  /* box-shadow: 0 1px 0 rgba(67,175,67,0.08), 0 6px 20px rgba(17,24,39,0.05); */

  box-shadow: 0 6px 20px rgba(17,24,39,0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
}
#navbar.menu-open { border-color: rgba(67,175,67,0.55); }

.nav-inner {
  height: 85px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: relative;
}

.logo {
  flex-shrink: 0;
  user-select: none;
  display: flex;
  align-items: center;
}
.logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* Perfectly centred nav — unaffected by logo/icon widths */
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 30px;
}
.highlight-nav-text{
  color:#43af43!important;
}

/* ─── <picture> must never affect layout ────────────────────
   Images are wrapped in <picture> to serve WebP with a fallback. But <picture>
   is display:inline by default, so it silently becomes a new box between an
   <img> and its parent — collapsing any height:100% or percentage height on
   that <img>, which then measures ZERO and paints nothing.
   `display: contents` removes the wrapper from the box tree entirely, so every
   <img> lays out exactly as if <picture> were not there. One rule, and the
   whole class of bug is gone site-wide. */
picture { display: contents; }

.nav-item {
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1B1E1B;
  cursor: pointer;
  border-radius: 20px;
  white-space: nowrap;
  background: transparent;
  transition: background 0.18s;
  user-select: none;
  /* Nav items are a mix of <div> (mega-menu triggers) and <a> (Home, About Us,
     Contact Us). The anchors would otherwise carry the browser's default
     underline. This lives here, next to .nav-item — NOT in about.css, which
     index.html does not load. */
  text-decoration: none;
}
/* CSS :hover handles non-panel items; .active persists while panel is open */
.nav-item:hover,
.nav-item.active { background: #CBDCCB; color:#43AF43 }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #1B1E1B;
  transition: background 0.18s;
}
.icon-btn:hover { background: #CBDCCB; }


/* ─── Mobile hamburger + drawer (shared) ───────────────── */
.nav-toggle {
  display: none;                 /* shown only on mobile via media query */
  margin-left: auto;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
  transition: background 0.2s ease;
}
.nav-toggle:hover { background: #CBDCCB; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: #1B1E1B;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 85px; left: 0; right: 0;
  z-index: 1001;
  background: rgba(255,255,255,0.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 20px 40px rgba(17,24,39,0.10);
  padding: 8px 22px 22px;
  max-height: calc(100vh - 85px);
  overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}
.m-link, .m-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 15px 8px;
  font-family: inherit; font-size: 16px; font-weight: 600; color: #1B1E1B;
  text-decoration: none; background: transparent; border: none;
  border-bottom: 1px solid rgba(17,24,39,0.07); cursor: pointer;
}
.m-link:hover, .m-acc:hover { color: #43AF43; }
.m-acc svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.3s ease; }
.m-acc.is-open svg { transform: rotate(180deg); color: #43AF43; }
.m-acc.is-open { color: #43AF43; }
/* Accordion body — grid-rows 0fr→1fr animates height with no fixed value */
.m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.m-sub.is-open { grid-template-rows: 1fr; }
.m-sub-inner { overflow: hidden; }
.m-sub-inner a {
  display: block; padding: 12px 8px 12px 22px;
  font-size: 15px; font-weight: 500; color: #4B5563; text-decoration: none;
}
.m-sub-inner a:hover { color: #43AF43; }

/* .nav-center is absolutely centred, so it does NOT reserve space for the logo —
   it will happily slide underneath it. With 6 items (Home, About Us, Battery,
   Automotive, Road, Contact Us) the row is ~800px wide, which needs a ~1250px
   viewport to clear the logo. Tighten it below that so it still fits.
   (Kept at 1250px rather than retuned when Blog was dropped — the row now has
   more headroom than it needs, which errs on the safe side.) */
@media (max-width: 1250px) and (min-width: 1081px) {
  .nav-center { gap: 16px; }
  .nav-item { padding: 6px 9px; font-size: 15px; }
}

/* Switch to hamburger on tablet/mobile.
   Raised from 900px → 1080px: below ~1080 even the tightened 7-item row
   overlaps the logo, so hand over to the drawer before that can happen. */
@media (max-width: 1080px) {
  .nav-center { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1081px) {
  .mobile-menu { display: none; }   /* never render the drawer on desktop */
}


/* ─── Page dim overlay (active while mega-menu is open) ─── */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;                 /* under navbar (1000) + mega-wrap (999) */
  background: rgba(8, 12, 9, 0.45);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
  transition: opacity 0.25s ease;
}
/* #navbar gets .menu-open from the mega-menu JS; overlay is a later sibling */
#navbar.menu-open ~ .page-overlay {
  opacity: 1;
  pointer-events: auto;
}


/* ─── Mega Menu ───────────────────────────────────────── */

/*
  Zero-height fixed ribbon – panels hang below via absolute positioning.
  pointer-events is managed by JS to prevent invisible click-blocking.
*/
.mega-wrap {
  position: fixed;
  top: 85px; left: 0; right: 0;
  height: 0;
  overflow: visible;
  z-index: 999;
  pointer-events: none;
}

/* Single shared container – only opens/closes once */
.mega-panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #e5e7eb;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  visibility: hidden;
  /* visibility delay on close so fade-out finishes before element hides */
  transition: opacity 0.22s ease,
              transform 0.22s ease,
              visibility 0s linear 0.22s;
}
.mega-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.22s ease,
              transform 0.22s ease,
              visibility 0s linear 0s;
}

/*
  CSS Grid stack: all three content sections share the same grid cell (row 1, col 1).
  Grid height = tallest child. Because all three sections share identical structure,
  they are always the same height — no JS measurement needed. Sections cross-fade in place.
*/
.mega-stack {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.mega-content {
  grid-row: 1;
  grid-column: 1;
  padding: 32px 60px 36px;
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  display: flex;
  justify-content: center;
}
.mega-content.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ─── Inner grid (identical across all three panels) ─── */
/*
  Columns: [img 1]  [img 2]  [img 3]  [1px divider]  [links 220px]
*/
.mega-grid {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: fit-content;
  max-width: 100%;
}

.mega-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  margin: 10px 6px;
}
/* When a column links to a product page, the wrapping <a> must inherit the
   column's centred layout (an inline anchor would left-align its contents). */
.mega-col > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.mega-img {
  width: auto;
  max-width: 270px;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
  /* background: #f0f0f0; */
  display: block;
}

.mega-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #1B1E1B;
  margin-bottom: 7px;
  line-height: 1.2;
}

.mega-learn {
  font-size: 13px;
  font-weight: 500;
  color: #1B1E1B;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s;
}
.mega-learn:hover { color: #555; }

.mega-rule {
  background: #d1d5db;
  width: 1px;
  align-self: stretch;
  flex: 0 0 auto;
}

/* Right-side stacked links — fixed width keeps all panels symmetric */
.mega-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 340px;
  padding-left: 12px;
  padding-top: 4px;
}

.mega-aside-link {
  font-size: 32px;
  font-weight: 600;
  color: #1B1E1B;
  cursor: pointer;
  overflow-wrap: break-word;
  line-height: 1.3;
  transition: color 0.15s;
}
.mega-aside-link:hover { color: #555; }


/* ─── Hero Slider ─────────────────────────────────────────── */

:root {
  --slider-ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --slider-ease-inout:  cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --content-ease:       cubic-bezier(0.22, 1.00, 0.36, 1.00);
  --slide-duration:     1300ms;
  --autoplay-ms:        5000;
}

/* ── Section container ──────────────────────── */
.hero-slider {
  position: relative;
  width: 100%;
  /* Subtract the navbar. This block also carries `margin-top: 85px` to clear
     the fixed navbar, so a plain `height: 100vh` would make the hero occupy
     100vh + 85px — i.e. its bottom 85px would always sit below the fold.
     That went unnoticed while every banner had nothing but sky down there,
     but the Drishya SIDS and MLFF banners carry their feature strips along
     the bottom edge and were losing them. Sizing to the space that is
     actually on screen keeps every hero identical AND fully visible. */
  height: calc(100vh - 85px);
  min-height: 600px;
  margin-top: 85px;           /* clear fixed navbar */
  overflow: hidden;
  background: #080c0f;        /* visible if image loads slowly */
  outline: none;
  user-select: none;
}
.hero-slider:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: -4px;
}

/* ── Viewport (stacking context) ────────────── */
.slider-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ── Individual slide ───────────────────────── */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--slide-duration) var(--slider-ease-inout);
}
.slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
/* Outgoing slide sits on top while fading out */
.slide.is-leaving {
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* ── Background image + zoom ────────────────── */
.slide-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  /* Inactive: slightly zoomed out, ready to grow */
  transform: scale(1.07) translate3d(0,0,0);
}

/* When active: zoom to neutral over a longer window = cinematic feel */
.slide.is-active .slide-img {
  transform: scale(1) translate3d(0,0,0);
  transition: transform calc(var(--slide-duration) + 4000ms) var(--slider-ease-out);
}
/* When leaving: gently zoom away */
.slide.is-leaving .slide-img {
  transform: scale(1.04) translate3d(0,0,0);
  transition: transform var(--slide-duration) var(--slider-ease-inout);
}

/* Dual-layer gradient overlay for max text legibility */
.slide-overlay {
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(
      105deg,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.42) 48%,
      rgba(0,0,0,0.14) 100%
    ),
    linear-gradient(
      to top,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.00) 55%
    ); */
}

/* ── Slide content ──────────────────────────── */
.slide-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 9% 88px;
  max-width: 905px;
}

/* ── Content element defaults (hidden until animated in) ── */
.slide-eyebrow,
.slide-headline,
.slide-desc,
.slide-ctas { opacity: 0; }

/* ── Staggered entry animations (fire when is-entering is set) ── */
.slide.is-entering .slide-eyebrow {
  animation: hsContentUp  0.75s var(--content-ease) 0.12s both;
}
.slide.is-entering .slide-headline {
  animation: hsHeadlineUp 0.88s var(--content-ease) 0.28s both;
}
.slide.is-entering .slide-desc {
  animation: hsContentUp  0.76s var(--content-ease) 0.50s both;
}
.slide.is-entering .slide-ctas {
  animation: hsContentUp  0.76s var(--content-ease) 0.68s both;
}

/* Pill eyebrow badge */
.slide-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
}
/* Trademark mark raised above the word (superscript inside the flex pill) */
.slide-eyebrow .tm {
  align-self: flex-start;        /* sit at the top of the line */
  font-size: 0.6em;
  line-height: 1;
  /* margin-left: 1px; */
  letter-spacing: 0.04em;
}

/* Large headline */
.slide-headline {
  margin: 0 0 26px;
  font-size: clamp(32px, 5.2vw, 55px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #ffffff;
  text-shadow: 0 4px 48px rgba(0,0,0,0.28);
}

/* Supporting description */
.slide-desc {
  margin: 0 0 42px;
  font-size: clamp(14px, 1.6vw, 17.5px);
  font-weight: 400;
  line-height: 1.72;
  color: rgba(255,255,255,0.78);
  max-width: 500px;
}

/* ── CTA row ────────────────────────────────── */
.slide-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Primary CTA — solid white fill */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  background: #43af43;
  color: #ffffff;
  will-change: transform;
  transition: all 0.3s ease;
}
.cta-primary:hover {
  background: #3a9e3a;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(67,175,67,0.40);
}
.cta-primary:active { transform: translateY(0); }

/* Secondary CTA — glassmorphism ghost */
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: transform;
  transition: all 0.3s ease;
}
/* Arrow icon that slides right on hover */
.cta-secondary::after {
  content: '→';
  display: inline-block;
  font-style: normal;
  transition: transform 0.28s var(--content-ease);
}
.cta-secondary:hover {
  background: rgba(255,255,255,0.19);
  border-color: rgba(255,255,255,0.52);
  transform: translateY(-2px);
}
.cta-secondary:hover::after { transform: translateX(5px); }
.cta-secondary:active { transform: translateY(0); }

/* ── Arrow navigation ───────────────────────── */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: background   0.26s ease,
              border-color 0.26s ease,
              transform    0.22s var(--content-ease);
}
.slider-arrow:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.58);
  transform: translateY(-50%) scale(1.09);
}
.slider-arrow:active { transform: translateY(-50%) scale(0.96); }
.slider-arrow:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
}

.slider-prev { left: 30px; }
.slider-next { right: 30px; }

/* ── Dot pagination ─────────────────────────── */
.slider-dots {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 9px;
}

.slider-dot {
  height: 6px;
  width: 6px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,0.36);
  cursor: pointer;
  will-change: width, background;
  /* Springy expand animation via cubic-bezier with slight overshoot */
  transition: width    0.48s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.30s ease;
}
.slider-dot.is-active {
  width: 28px;
  background: #ffffff;
}
.slider-dot:hover:not(.is-active) {
  background: rgba(255,255,255,0.62);
}
.slider-dot:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Autoplay progress bar ──────────────────── */
.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.10);
  z-index: 20;
}
.slider-progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.58);
  transform-origin: left center;
}

/* ── Keyframe animations ────────────────────── */
@keyframes hsContentUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes hsHeadlineUp {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Responsive — tablet ────────────────────── */
@media (max-width: 960px) {
  .slide-content {
    padding: 0 6% 76px;
  }
  .slider-prev { left: 18px; }
  .slider-next { right: 18px; }
  .slider-arrow { width: 46px; height: 46px; }
}

/* ── Responsive — mobile ────────────────────── */
@media (max-width: 600px) {
  /* Same navbar subtraction as the base rule — 100svh here would push the
     hero 85px below the fold again on phones. */
  .hero-slider { min-height: calc(100svh - 85px); }

  /* Reposition content to bottom third for mobile */
  .slide-content {
    padding: 0 6% 80px;
    max-width: 100%;
    justify-content: flex-end;
  }

  /* Stronger bottom gradient for mobile legibility */
  .slide-overlay {
    background:
      linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.42) 55%,
        rgba(0,0,0,0.00) 100%
      );
  }

  /* Hide arrows on mobile — swipe is primary */
  .slider-arrow { display: none; }

  .slider-dots { bottom: 22px; }

  .cta-primary,
  .cta-secondary {
    padding: 12px 24px;
    font-size: 13px;
  }

  .slide-desc { max-width: 100%; }
}


/* ─── Feature Cards (Tesla-style dual card) ───────────────── */

.feature-cards {
  width: 100%;
  padding: clamp(72px, 10vh, 130px) 24px;   /* shared section rhythm (matches Customers) */
  /* GREEN section — deeper premium gradient + brand radial glows (white cards pop) */
  background:
    radial-gradient(60% 50% at 10% -5%,  rgba(67,175,67,0.18) 0%, transparent 55%),
    radial-gradient(55% 48% at 100% 108%, rgba(67,175,67,0.12) 0%, transparent 55%),
    linear-gradient(135deg, #F3FBF3 0%, #E6F5E8 45%, #D7EDDA 100%);
}

/* Centred container, capped at 1440px */
.feature-cards-inner {
   width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two equal columns */
  gap: 32px;
}

/* ── Individual card ────────────────────────── */
.feature-card {
  position: relative;
  display: flex;
  align-items: center;          /* vertically centre text block */
  min-height: 250px;
  padding: 8px 52px;
  border-radius: 10px;
  background: #f4f4f4;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.4s var(--content-ease),
              box-shadow 0.4s var(--content-ease);

  /* Scroll-reveal initial state */
  opacity: 0;
  transform: translateY(36px);
}

/* Revealed state (added by IntersectionObserver) */
.feature-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--content-ease),
              transform 0.7s var(--content-ease);
}

/* Lift on hover — overrides reveal transition once visible */
.feature-card.is-revealed:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(17, 24, 39, 0.14);
}

/* ── Left text column ───────────────────────── */
.feature-card-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 60%;
}

.feature-card-title {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #43AF43;  /* brand accent */
}

.feature-card-desc {
  margin: 0 0 30px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #4B5563;
}

/* ── CTA button ─────────────────────────────── */
.feature-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: #43af43;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  will-change: transform;
  transition: all 0.3s ease;
}
.feature-card-btn:hover {
  transform: translateY(-2px);
  background: #3a9e3a;
  box-shadow: 0 8px 22px rgba(67,175,67,0.40);
}
.feature-card-btn:active { transform: translateY(0); }

/* ── Right media column ─────────────────────── */
/* Full-bleed: image fills the right portion edge-to-edge
   (touches the top, bottom and right of the card). */
.feature-card-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 37%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;       /* let hover pass through to the card */
}

.feature-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  will-change: transform;
  transform-origin: center right;
  transition: transform 0.5s var(--content-ease);
}
/* Image zoom when card is hovered */
.feature-card:hover .feature-card-img {
  transform: scale(1.06);
}

/* ── Responsive — tablet ────────────────────── */
@media (max-width: 1024px) {
  .feature-cards { padding: 64px 20px; }
  .feature-cards-inner { gap: 20px; }
  .feature-card { padding: 36px 40px; min-height: 260px; }
  .feature-card-title { font-size: 42px; }
  .feature-card-desc  { font-size: 20px; }
  .feature-card-text  { max-width: 64%; }
  .feature-card-media { width: 40%; }
}

/* ── Responsive — mobile ────────────────────── */
@media (max-width: 720px) {
  .feature-cards { padding: 56px 16px; }
  .feature-cards-inner {
    grid-template-columns: 1fr;   /* stack vertically */
    gap: 20px;
  }
  .feature-card {
    min-height: 300px;
    padding: 32px 28px;
  }
  .feature-card-text { max-width: 60%; }
  .feature-card-title { font-size: 34px; }
  .feature-card-desc  { font-size: 17px; margin-bottom: 24px; }
  .feature-card-media { width: 44%; }
  .feature-card-btn { padding: 15px 28px; }
}


/* ─── Horizontal Showcase (scroll-driven, pinned) ─────────── */

/* Outer wrapper — its height (set by JS) defines the scroll
   distance during which the section stays pinned. */
.showcase {
  /* Narrower → more premium (bigger peek of the next card) */
  --sc-card-w: clamp(300px, 76vw, 1040px);
  /* Almost full-height: the heading now lives above the pinned panel,
     so the card only needs to clear small top/bottom breathing room. */
  --sc-card-h: clamp(420px, calc(100vh - 140px), 880px);
  --sc-gap: 24px;
  --sc-radius: 22px;

  position: relative;
  width: 100%;
  /* WHITE section — clean canvas so the dark product cards stand out */
  background:
    radial-gradient(72% 52% at 50% -8%, rgba(67,175,67,0.05) 0%, transparent 60%),
    #ffffff;
}

/* Pinned panel — sticks to the viewport while the wrapper scrolls past */
.showcase-sticky {
  position: sticky;
  top: 20px;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(72% 52% at 50% -8%, rgba(67,175,67,0.05) 0%, transparent 60%),
    #ffffff;   /* matches .showcase so the pinned panel blends */
  display: flex;
  flex-direction: column;
}

/* ── Section intro (normal flow, above the pinned panel) ── */
.showcase-intro {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 56px 44px;
}
.showcase-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #43AF43;                 /* brand accent */
  margin-bottom: 14px;
}
/* Short accent rule before the label */
.showcase-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: #43AF43;
  border-radius: 2px;
}

.showcase-heading {
  margin: 0;
  max-width: 950px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: #1B1E1B;
}

/* ── Viewport + track ───────────────────────── */
.showcase-viewport {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;       /* clips the wide track → no page scrollbar */
}

.showcase-track {
  display: flex;
  column-gap: var(--sc-gap);
  padding: 0 32px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ── Card ───────────────────────────────────── */
.sc-card {
  position: relative;
  flex: 0 0 var(--sc-card-w);
  width: var(--sc-card-w);
  height: var(--sc-card-h);
  border-radius: var(--sc-radius);
  overflow: hidden;
  background: #0f172a;
  will-change: transform;
  /* Inactive cards rest slightly smaller (coverflow depth) */
  transform: scale(0.93) translate3d(0, 0, 0);
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-user-drag: none;
  user-select: none;
}
.sc-card.is-active {
  transform: scale(1) translate3d(0, 0, 0);
}

/* ── Background image + subtle active zoom ──── */
.sc-card-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0f172a;
}
.sc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform;
  transform: scale(1.02) translate3d(0, 0, 0);
  transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sc-card.is-active .sc-card-img {
  transform: scale(1.12) translate3d(0, 0, 0);
}

/* Bottom-left readability gradient */
.sc-card-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.34) 38%,
      rgba(0,0,0,0.00) 68%
    ),
    linear-gradient(
      to right,
      rgba(0,0,0,0.42) 0%,
      rgba(0,0,0,0.00) 55%
    );
}

/* ── Content (bottom-left) ──────────────────── */
.sc-card-content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 0 clamp(40px, 6vh, 64px) clamp(40px, 5vw, 72px);
  max-width: 640px;
}
.sc-title {
  margin: 0 0 12px;
  font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
  /* title/subtitle always visible (so peeking card reads); active replays a rise */
  transform: translate3d(0, 0, 0);
}
.sc-subtitle {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.7vw, 16px);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  max-width: 460px;
  transform: translate3d(0, 0, 0);
}

/* "Trusted By" strip (used on the Angad slide) */
.sc-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  transform: translate3d(0, 0, 0);
}
.sc-trust-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.sc-trust-name {
  font-size: clamp(17px, 1.9vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

/* Active replays a gentle upward rise (no opacity → no flash on peek→active) */
.sc-card.is-active .sc-title    { animation: scRise 0.7s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.sc-card.is-active .sc-subtitle { animation: scRise 0.7s cubic-bezier(0.22,1,0.36,1) 0.16s both; }
.sc-card.is-active .sc-trust    { animation: scRise 0.7s cubic-bezier(0.22,1,0.36,1) 0.24s both; }

/* CTA only appears on the active card (fades + rises in) */
.sc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  background: #43af43;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: all 0.3s ease;
  will-change: transform;
}
.sc-card.is-active .sc-cta {
  animation: scCtaIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.30s both;
}
.sc-cta:hover {
  background: #3a9e3a;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 22px rgba(67,175,67,0.40);
}
.sc-cta:active { transform: translate3d(0, 0, 0); }

/* ── Floating arrows (centred within the viewport) ──── */
.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #1B1E1B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  opacity: 1;
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              opacity 0.4s ease,
              background 0.25s ease;
}
.showcase-arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
}
.showcase-arrow:active { transform: translateY(-50%) scale(0.95); }

/* Hidden at the track ends — smooth fade + scale, no placeholder */
.showcase-arrow.is-hidden {
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
  pointer-events: none;
}
.showcase-arrow:focus-visible {
  outline: 2px solid #43AF43;
  outline-offset: 3px;
}
.showcase-arrow-prev { left: 24px; }
.showcase-arrow-next { right: 24px; }

/* ── Keyframes ──────────────────────────────── */
@keyframes scRise {
  from { transform: translate3d(0, 26px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes scCtaIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .showcase {
    --sc-card-w: clamp(300px, 82vw, 900px);
    --sc-card-h: clamp(420px, calc(100vh - 72px), 860px);
  }
  .showcase-intro { padding: 64px 24px 36px; }
  .showcase-arrow { width: 46px; height: 46px; }
}
@media (max-width: 720px) {
  .showcase {
    --sc-card-w: 86vw;
    --sc-card-h: clamp(420px, calc(100vh - 60px), 760px);
    --sc-gap: 16px;
  }
  .showcase-track { padding: 0 16px; }
  .showcase-intro { padding: 48px 16px 28px; }
  /* Arrows hidden on mobile — native swipe scroll is primary */
  .showcase-arrow { display: none; }
}

/* ── Reduced motion: kill auto-zoom & big scale shifts ── */
@media (prefers-reduced-motion: reduce) {
  .sc-card,
  .sc-card.is-active { transform: scale(1) translate3d(0,0,0); }
  .sc-card-img,
  .sc-card.is-active .sc-card-img { transition: none; transform: scale(1.04); }
  .sc-card.is-active .sc-title,
  .sc-card.is-active .sc-subtitle,
  .sc-card.is-active .sc-trust { animation: none; }
  .sc-card.is-active .sc-cta { animation: none; opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   ABOUT US
════════════════════════════════════════════════════════════ */
.about {
  width: 100%;
  padding: clamp(72px, 11vh, 140px) 24px;
  /* GREEN section — deeper gradient + stronger ambient brand glow */
  background:
    radial-gradient(90% 62% at 100% 0%, rgba(67,175,67,0.18) 0%, transparent 55%),
    radial-gradient(60% 50% at 0% 100%, rgba(67,175,67,0.10) 0%, transparent 58%),
    linear-gradient(135deg, #F3FBF3 0%, #E6F5E8 45%, #D7EDDA 100%);
  color: #1B1E1B;
}
.about-inner {  width: min(1440px, calc(100% - 64px)); margin: 0 auto; }

/* ── Two-column intro ───────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
}

.about-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #43AF43;
}
.about-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: #43AF43; border-radius: 2px;
}

.about-title {
  margin: 18px 0 22px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: #1B1E1B;
}
.about-lead {
  margin: 0 0 18px;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500; line-height: 1.55; color: #1B1E1B;
}
.about-body {
  margin: 0 0 32px;
  font-size: 16px; line-height: 1.7; color: #4B5563;
  max-width: 630px;
}

/* CTA — brand pill */
.about-cta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  color: #ffffff; background: #43af43;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  will-change: transform;
  transition: all 0.3s ease;
}
.about-cta svg { transition: transform 0.3s ease; }
.about-cta:hover {
  background: #3a9e3a;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(67,175,67,0.40);
}
.about-cta:hover svg { transform: translateX(4px); }

/* ── Visual ─────────────────────────────────── */
.about-media { position: relative; }
.about-media-glow {
  position: absolute; inset: auto -8% -10% auto;
  width: 70%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle, rgba(67,175,67,0.28), transparent 70%);
  filter: blur(50px); z-index: 0;
}
.about-media-img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(17,24,39,0.16);
}

/* ── Vision · Mission · Values ──────────────── */
.about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(48px, 7vh, 88px);
  padding: clamp(32px, 4.5vh, 52px) clamp(24px, 3vw, 44px);
  /* background: #f6f8f7;                 very light panel */
  background:linear-gradient(135deg, rgba(67,175,67,0.13), rgba(67,175,67,0.03));
  /* border: 1px solid #ececec; */
  border-radius: 8px;
}
.about-value {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-inline: clamp(22px, 2.6vw, 44px);
}
.about-value:first-child { padding-left: 0; }
.about-value:last-child  { padding-right: 0; }
/* Vertical separator centred in the gap between items */
/* .about-value + .about-value { border-left: 1px solid #e5e7eb; } */
.about-value + .about-value { border-left: 1px solid #43af43; }

/* Top row: icon chip + title side-by-side */
.about-value-top {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin-bottom: 14px;
}
.about-value-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background-color: #43AF43;
  color: #ffffff;
  /* background: linear-gradient(135deg, rgba(67,175,67,0.13), rgba(67,175,67,0.03));
  border: 1px solid rgba(67,175,67,0.24); */
  transition: background 0.3s ease, color 0.3s ease,
              transform 0.3s var(--content-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}
.about-value-icon svg { width: 23px; height: 23px; }
.about-value-title {
  margin: 0;
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #43af43;
}
.about-value-text {
  margin: 0;
  font-size: 15px; font-weight: 400; line-height: 1.6; color: #4B5563;
}

/* Hover: icon fills solid green + lifts */
.about-value:hover .about-value-icon {
  background: #43af43;
  border-color: #43af43;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(67,175,67,0.30);
}

/* ── Scroll reveal (uses the global [data-reveal] observer) ── */
.about [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--content-ease), transform 0.7s var(--content-ease);
}
.about [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-media { order: -1; }                 /* image on top */
  .about-media-img { aspect-ratio: 16 / 10; }
  /* Stack: separators become horizontal rules between items */
  .about-values { grid-template-columns: 1fr; }
  .about-value { padding-inline: 0; padding-top: 28px; }
  .about-value:first-child { padding-top: 0; }
  .about-value + .about-value { border-left: none; border-top: 1px solid #e5e7eb; }
}

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


/* ═══════════════════════════════════════════════════════════
   OUR CUSTOMERS — auto logo marquee
════════════════════════════════════════════════════════════ */
.customers {
  width: 100%;
  padding: clamp(72px, 10vh, 130px) 0;
  /* ELEVATED HIGHLIGHT section — soft neutral-green tint so white tiles pop */
  background:
    radial-gradient(80% 55% at 50% -8%, rgba(67,175,67,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #F4F8F6 0%, #E8F1EB 100%);
  text-align: left;
  overflow: hidden;
}

/* ── Header (matches the About section: left-aligned) ── */
.customers-head {
  width: min(1440px, calc(100% - 64px));
  margin: 0 auto;
  padding-left:20px;
  text-align: left;
}
.customers-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #43AF43;
}
.customers-eyebrow::before {
  content: ''; width: 28px; height: 2px; background: #43AF43; border-radius: 2px;
}
.customers-title {
  margin: 18px 0 22px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: #1B1E1B;
}
.customers-sub {
  margin: 0;
  max-width: 540px;
  font-size: 16px; line-height: 1.7; color: #4B5563;
}
.customers [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--content-ease), transform 0.7s var(--content-ease);
}
.customers [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ── Marquee viewport ───────────────────────── */
.marquee {
  margin-top: clamp(32px, 5vh, 56px);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 30px;          /* room for card lift + shadow (not clipped) */
}

/* The track holds the set twice; -50% lines the duplicate up exactly */
.marquee-track {
  display: flex;
  width: max-content;
  animation: customers-marquee 38s linear infinite;
  will-change: transform;
}
@keyframes customers-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Logo card ──────────────────────────────── */
/* Every logo sits in an identical fixed-size box, so mismatched logo
   dimensions never break the row. Equal horizontal margin on EVERY
   card (incl. trailing) keeps spacing uniform across the seam → -50%
   still loops seamlessly. */
.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;       /* centre logo H + V */
  gap: 10px;
  width: 220px;
  height: 120px;
  padding: 24px;
  margin-inline: 16px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(17,24,39,0.06);
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #9aa3af;                /* muted "grayscale" default */
  transition: transform 0.35s var(--content-ease),
              box-shadow 0.35s ease,
              border-color 0.35s ease,
              color 0.3s ease;
}
.logo-glyph { width: 26px; height: 26px; flex: 0 0 auto; transition: transform 0.35s var(--content-ease); }
/* Real image logos: never stretch/crop, always contained & centred.
   Always shown in full colour. */
.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.35s var(--content-ease);
}

.logo-item:hover {
  transform: translateY(-6px);                 /* lift */
  border-color: #d7dde3;
  box-shadow: 0 18px 38px rgba(17,24,39,0.12); /* deeper shadow */
  color: #1B1E1B;                              /* grayscale → colour */
}
.logo-item:hover img {
  transform: scale(1.08);          /* logo scales slightly */
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .logo-item { width: 180px; height: 104px; padding: 20px; margin-inline: 12px; font-size: 16px; }
  .logo-glyph { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .logo-item { width: 150px; height: 92px; padding: 16px; margin-inline: 10px; gap: 8px; font-size: 14px; }
  .logo-glyph { width: 20px; height: 20px; }
}

/* Reduced motion: hold the logos still (still visible, just no scroll) */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; transform: none; }
  .customers [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — info panel  +  Earth CTA card
════════════════════════════════════════════════════════════ */
.footer {
  width: 100%;
  padding: clamp(40px, 6vh, 72px) clamp(16px, 4vw, 48px) clamp(24px, 4vh, 40px);
  /* DARK premium finish — charcoal-green gradient with an overhead brand glow */
  background:
    radial-gradient(70% 80% at 50% -10%, rgba(67,175,67,0.20) 0%, transparent 55%),
    linear-gradient(160deg, #0d2017 0%, #0a190f 55%, #07120b 100%);
}
.footer-shell {
  /* max-width: 1280px; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

/* ── LEFT: information panel ─────────────────── */
.footer-panel {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 28px;
  padding: clamp(28px, 3.4vw, 48px);
  display: flex;
  flex-direction: column;
}
.footer-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: 335px; display: block; }

/* Social icons — vertical stack, top-right */
.footer-socials { display: flex; flex-direction: column; gap: 10px; }
.footer-social {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #4B5563; background: #ffffff; border: 1px solid #e5e7eb;
  will-change: transform;
  transition: transform 0.3s var(--content-ease), color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.footer-social svg { width: 18px; height: 18px; }
.footer-social:hover {
  transform: translateY(-3px);
  color: #fff; background: #43AF43; border-color: #43AF43;
  box-shadow: 0 8px 20px rgba(67,175,67,0.3);
}

.footer-about {
  margin: 22px 0 30px;
  max-width: 380px;
  font-size: 15px; line-height: 1.65; color: #4B5563;
}

.footer-cols {
  /* Two columns since the Resources column (Blogs only) was dropped — there is
     no blog page. Bump this back to 3 if a third column ever returns. */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  margin-top: auto;
}
.footer-col-title {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: #9ca3af;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 14.5px; font-weight: 500; color: #4B5563; text-decoration: none;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s var(--content-ease);
}
.footer-links a:hover { color: #43AF43; transform: translateX(4px); }

/* ── RIGHT: Earth CTA card ──────────────────── */
.footer-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: clamp(30px, 3.4vw, 52px);
  background: #060b14;                 /* base behind the Earth */
  box-shadow: 0 30px 70px rgba(6,11,20,0.35);
}
/* Earth media — slightly oversized so the parallax never reveals edges */
.footer-cta-media { position: absolute; inset: 0; z-index: 0; }
.footer-earth {
  position: absolute; left: 0; top: -8%;
  width: 100%; height: 116%;
  object-fit: cover; object-position: center 30%;
  will-change: transform;
  /* Fade the image into the card so it blends rather than hard-edging */
  -webkit-mask-image: radial-gradient(125% 100% at 50% 18%, #000 55%, transparent 100%);
          mask-image: radial-gradient(125% 100% at 50% 18%, #000 55%, transparent 100%);
}
/* Ambient EV-green glow around the Earth horizon */
.footer-earth-glow {
  position: absolute; left: 50%; bottom: -22%; transform: translateX(-50%);
  width: 130%; height: 70%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(67,175,67,0.45) 0%, rgba(67,175,67,0.12) 35%, transparent 68%);
  filter: blur(46px);
  mix-blend-mode: screen;
}
/* Dark overlay for text legibility (stronger toward the bottom-left) */
.footer-cta-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4,8,14,0.88) 0%, rgba(4,8,14,0.45) 42%, rgba(4,8,14,0.10) 75%),
    linear-gradient(to right, rgba(4,8,14,0.55), transparent 60%);
}
.footer-cta-content { position: relative; z-index: 3; max-width: 460px; color: #fff; }
.footer-cta-title {
  margin: 0 0 14px;
  font-size: clamp(26px, 2.8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: #fff;
}
.footer-cta-text {
  margin: 0 0 28px;
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; color: rgba(255,255,255,0.78);
}
.footer-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Buttons — same language as the site's CTAs */
.fbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 8px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  will-change: transform;
  transition: all 0.3s ease;
}
.fbtn svg { transition: transform 0.3s ease; }
.fbtn--primary { background: #43af43; color: #ffffff; box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08); }
.fbtn--primary:hover { transform: translateY(-2px); background: #3a9e3a; box-shadow: 0 8px 22px rgba(67,175,67,0.40); }
.fbtn--primary:hover svg { transform: translateX(4px); }
.fbtn--ghost { color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); }
.fbtn--ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); }

/* ── Bottom bar ─────────────────────────────── */
.footer-bottom {
  /* max-width: 1280px; */
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(22px, 2.4vw, 34px);
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13.5px; color: #6b7280;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: #6b7280; text-decoration: none; transition: color 0.2s ease; }
.footer-legal a:hover { color: #43AF43; }

/* ── Reveal initial states (JS only) ── */
.js .footer [data-fr] { opacity: 0; transform: translate3d(0, 30px, 0); will-change: transform, opacity; }
.js .footer-links li,
.js .footer-cta-content > * { opacity: 0; transform: translate3d(0, 18px, 0); }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 940px) {
  .footer-shell { grid-template-columns: 1fr; }
  .footer-cta { order: -1; min-height: 340px; }   /* CTA card first on tablet/mobile */
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .footer-cta-actions { flex-direction: column; align-items: stretch; }
  .fbtn { justify-content: center; }
  .footer-bottom { border-radius: 20px; flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .footer [data-fr],
  .js .footer-links li,
  .js .footer-cta-content > * { opacity: 1; transform: none; }
  .footer-earth { transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   VISUAL HIERARCHY & DEPTH
   Elevated card surfaces, floating shadows, button prominence,
   and a premium dark footer. Paint/shadow only — no changes to
   layout, spacing, positioning or existing keyframe animations.
════════════════════════════════════════════════════════════ */

/* ── Feature cards: white elevated surface on the green section ── */
.feature-card {
  background: #ffffff;
  box-shadow:
      inset 0 0 0 1px rgba(67,175,67,0.10),
      0 16px 36px -16px rgba(16,44,28,0.20),
      0 2px 6px rgba(16,44,28,0.05);
}
/* Smooth the shadow on hover (adds box-shadow to the reveal transition;
   durations/easing/positions all unchanged) */
.feature-card.is-revealed {
  transition: opacity 0.7s var(--content-ease),
              transform 0.7s var(--content-ease),
              box-shadow 0.5s var(--content-ease);
}
.feature-card.is-revealed:hover {
  box-shadow:
      inset 0 0 0 1px rgba(67,175,67,0.20),
      0 30px 56px -20px rgba(16,44,28,0.28),
      0 0 44px -14px rgba(67,175,67,0.22);
}

/* ── Product cards: lift the dark image cards off the white canvas ── */
.sc-card {
  box-shadow: 0 34px 64px -26px rgba(8,20,14,0.45);
}

/* ── Vision/Mission/Values: white elevated "highlight" panel ── */
.about-values {
  background: #ffffff;
  box-shadow:
      inset 0 0 0 1px rgba(67,175,67,0.08),
      0 24px 54px -28px rgba(16,44,28,0.22),
      0 2px 8px rgba(16,44,28,0.05);
}

/* ── Customer logo tiles: soft green-tint cards that lift off the section ── */
.logo-item {
  background: linear-gradient(180deg, #FAFEFB 0%, #F1FAF3 100%);
  border-color: rgba(67,175,67,0.18);
  box-shadow: 0 18px 34px -16px rgba(16,44,28,0.20), 0 2px 6px rgba(16,44,28,0.05);
}
.logo-item:hover {
  border-color: rgba(67,175,67,0.40);
  box-shadow:
      0 24px 44px -18px rgba(16,44,28,0.20),
      0 0 32px -12px rgba(67,175,67,0.24);
}
/* Unify mismatched logos (some ship with baked-in black/coloured boxes):
   mute to a cohesive grayscale wall via blend + grayscale, full colour on hover.
   `multiply` melts white/light logo backgrounds into the tile. */
.logo-item img {
  filter: grayscale(1);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transition: transform 0.35s var(--content-ease),
              filter 0.35s ease, opacity 0.35s ease;
}
.logo-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  mix-blend-mode: normal;
}

/* ── Primary buttons: more presence + polished green glow ── */
.cta-primary,
.feature-card-btn,
.about-cta,
.sc-cta,
.fbtn--primary {
  box-shadow: 0 10px 24px -8px rgba(67,175,67,0.45), 0 2px 6px rgba(16,44,28,0.10);
}
.cta-primary:hover,
.feature-card-btn:hover,
.about-cta:hover,
.sc-cta:hover,
.fbtn--primary:hover {
  box-shadow: 0 16px 34px -10px rgba(67,175,67,0.55), 0 0 28px -8px rgba(67,175,67,0.42);
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — premium dark theme
════════════════════════════════════════════════════════════ */

/* Info panel → dark glass card */
.footer-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.09);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 24px 56px -32px rgba(0,0,0,0.65);
}
/* Logo is multi-colour with black text → white it out so it reads on dark */
.footer-logo img { filter: brightness(0) invert(1); }

.footer-about { color: rgba(255,255,255,0.60); }
.footer-col-title { color: rgba(255,255,255,0.46); }

.footer-links a { color: rgba(255,255,255,0.72); }
.footer-links a:hover { color: #6BD46B; }   /* brighter brand green for dark bg */

/* Social buttons → dark chips, green fill on hover (unchanged transform) */
.footer-social {
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

/* Bottom bar → dark glass pill */
.footer-bottom {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.58);
}
.footer-legal a { color: rgba(255,255,255,0.58); }
.footer-legal a:hover { color: #6BD46B; }