/* RESS — shared stylesheet.
   Extracted from index.html so index and every product page draw from
   one source; editing the nav or a token here updates all 11 pages. */

/* ============================================================
     RESS — Industrial-precise redesign
     Design philosophy: engineering-grade dark UI, restrained
     motion, precise typography, purposeful color. No decoration
     without meaning.
     ============================================================ */

    :root {
      /* Surface — light, industrial */
      --bg: #FFFFFF;
      --bg-1: #F6F7F9;
      /* tinted section */
      --bg-2: #EEF0F4;
      --surface: #FFFFFF;
      /* card */
      --surface-2: #FAFBFC;
      /* hovered card */
      --line: rgba(11, 15, 30, .08);
      --line-strong: rgba(11, 15, 30, .14);

      /* Text */
      --text: #0B1220;
      /* near-black, cool */
      --text-mute: #4A5468;
      --text-dim: #7C869C;

      /* Accent — signal green (grid/energy). Deeper for AA on white. */
      --accent: #0F9E68;
      --accent-2: #0B7D52;
      --accent-tint: #E8F7F0;
      /* soft green pill background */
      --accent-dim: rgba(15, 158, 104, .10);
      --accent-glow: rgba(15, 158, 104, .25);

      /* Ink CTA (primary buttons + logo dark surfaces) */
      --ink: #0B1220;
      --ink-2: #182036;

      /* Legacy names kept so any nested references still resolve */
      --navy: #0B1220;
      --navy-2: #182036;
      --green: #0F9E68;
      --green-2: #0B7D52;
      --green-glow: rgba(15, 158, 104, .25);
      --white: #FFFFFF;
      --cream: #F6F7F9;
      --muted: var(--text-mute);

      /* Motion */
      --ease: cubic-bezier(.2, .7, .2, 1);
      --ease-out: cubic-bezier(.22, 1, .36, 1);
      --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

      /* Shadows for light UI (soft, precise, not floaty) */
      --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05);
      --shadow-md: 0 10px 30px rgba(11, 18, 32, .06);
      --shadow-lg: 0 30px 70px rgba(11, 18, 32, .10);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Native smooth anchors. Stays the behaviour if Lenis never loads;
     when Lenis is active it turns this off (rule below) because the
     two would fight over the same scroll. */
    html {
      scroll-behavior: smooth;
    }

    /* ── Lenis base styles (inlined rather than a 4th network request) ── */
    html.lenis,
    html.lenis body {
      height: auto;
    }

    /* Keyed on `.lenis` alone, not `.lenis-smooth`: that class is only
     present while a smooth wheel scroll is actually in flight, and any
     native smooth-scroll at all fights Lenis for the scroll position. */
    html.lenis {
      scroll-behavior: auto !important;
    }

    .lenis:not(.lenis-autoToggle).lenis-stopped {
      overflow: clip;
    }

    .lenis.lenis-smooth iframe {
      pointer-events: none;
    }

    /* Opt regions out of Lenis so they keep native inner scrolling */
    .lenis [data-lenis-prevent] {
      overscroll-behavior: contain;
    }

    body {
      font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      font-weight: 500;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

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

    .wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 32px;
    }

    ::selection {
      background: var(--accent);
      color: #04120B;
    }

    /* Subtle engineering grid over the whole page — the kind of
     detail you barely notice but that makes a page feel built. */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, rgba(11, 18, 32, .035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 18, 32, .035) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 75%);
    }

    main,
    header,
    footer {
      position: relative;
      z-index: 1;
    }

    /* ============ MOTION: content loading ============
     Reveal system used across every section:
     - IntersectionObserver adds `.in` when 8% of the element
       is in view.
     - Base reveal: 40px lift + slight scale + fade over 900ms.
       Clearly perceptible without being flashy.
     - Stagger groups: children cascade in at ~110ms intervals.
     - Reduced-motion drops the movement to a simple fade.
  */
    /* No-JS safety net: nothing may start hidden unless a script is
     running that can reveal it again. */
    html:not(.js) .reveal,
    html:not(.js) .reveal-stagger>* {
      opacity: 1 !important;
      transform: none !important;
    }

    /* When GSAP drives the reveals, CSS transitions must get out of the
     way or the two systems fight over the same properties. */
    html.gsap-on .reveal,
    html.gsap-on .reveal-stagger>* {
      transition: none !important;
      will-change: auto;
    }

    .reveal {
      opacity: 0;
      /* 28px, not 90px: a large offset can push an element sitting near the
       document end clear out of the viewport, so it never intersects and
       never reveals. It also reads better — 90px/1.4s was slow enough that
       fast scrollers watched content fade in behind them. */
      transform: translateY(28px) translateZ(0);
      will-change: transform, opacity;
      transition:
        opacity .6s var(--ease),
        transform .6s var(--ease);
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0) translateZ(0);
    }

    .reveal-stagger>* {
      opacity: 0;
      transform: translateY(28px) translateZ(0);
      will-change: transform, opacity;
      transition:
        opacity .6s var(--ease),
        transform .6s var(--ease);
    }

    .reveal-stagger.in>* {
      opacity: 1;
      transform: translateY(0) translateZ(0);
    }

    .reveal-stagger.in>*:nth-child(1) {
      transition-delay: 0ms;
    }

    .reveal-stagger.in>*:nth-child(2) {
      transition-delay: 70ms;
    }

    .reveal-stagger.in>*:nth-child(3) {
      transition-delay: 140ms;
    }

    .reveal-stagger.in>*:nth-child(4) {
      transition-delay: 210ms;
    }

    .reveal-stagger.in>*:nth-child(5) {
      transition-delay: 280ms;
    }

    .reveal-stagger.in>*:nth-child(6) {
      transition-delay: 350ms;
    }

    .reveal-stagger.in>*:nth-child(7) {
      transition-delay: 420ms;
    }

    .reveal-stagger.in>*:nth-child(8) {
      transition-delay: 490ms;
    }

    .reveal-stagger.in>*:nth-child(9) {
      transition-delay: 560ms;
    }

    .reveal-stagger.in>*:nth-child(10) {
      transition-delay: 630ms;
    }


    /* ============ HEADER ============
     Two states:
     • Rest: transparent full-width bar over the hero background.
       Logo left · nav center · CTA right.
     • Stuck (after scroll): solid blurred bar with a bottom rule.
     ============================================================ */
    .site-header {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 1200px;
      z-index: 50;
      background: rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(11, 15, 30, 0.05);
      border-radius: 100px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.4s var(--ease);
    }

    .site-header-inner {
      padding: 0 24px;
    }

    /* Stuck state: solid blurred surface */
    .site-header.stuck {
      top: 10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      border-color: var(--line);
      box-shadow: 0 8px 30px rgba(11, 18, 32, 0.08);
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      pointer-events: none;
      overflow: visible;
      z-index: 100;
    }

    .scroll-progress-bar {
      display: block;
      height: 100%;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      background: linear-gradient(90deg, var(--accent) 0%, #34D399 50%, #06B6D4 100%);
      box-shadow: 0 0 8px rgba(15, 158, 104, 0.8), 0 0 16px rgba(52, 211, 153, 0.4);
    }

    /* Where the browser supports it, drive the bar off a native scroll
     timeline — it runs on the compositor with zero per-frame JS. The
     script checks the same condition and skips its own tween when this
     applies, so only one of the two is ever in charge. */
    @supports (animation-timeline: scroll()) {
      .scroll-progress-bar {
        animation: scroll-progress linear both;
        animation-timeline: scroll(root block);
      }

      @keyframes scroll-progress {
        from {
          transform: scaleX(0);
        }

        to {
          transform: scaleX(1);
        }
      }
    }

    .nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 16px 0;
      transition: padding .4s var(--ease);
    }

    .site-header.stuck .nav {
      padding: 10px 0;
    }

    .nav .logo {
      justify-self: start;
    }

    .nav .nav-links {
      justify-self: center;
    }

    .nav .nav-cta {
      justify-self: end;
    }

    /* Hamburger button — hidden on desktop, shown on mobile */
    .nav-hamburger {
      display: none;
      justify-self: end;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      cursor: pointer;
      padding: 0;
      transition: background .25s var(--ease), border-color .25s var(--ease);
      color: var(--text);
    }

    .nav-hamburger:hover {
      background: rgba(11, 18, 32, .05);
      border-color: var(--text);
    }

    .nav-hamburger svg {
      display: block;
    }

    .nav-hamburger .icon-close {
      display: none;
    }

    .nav-hamburger[aria-expanded="true"] .icon-open {
      display: none;
    }

    .nav-hamburger[aria-expanded="true"] .icon-close {
      display: block;
    }

    /* Mobile menu overlay */
    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 49;
      background: rgba(250, 250, 247, .98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s var(--ease), visibility 0s linear .35s;
      display: flex;
      flex-direction: column;
      padding: 120px 32px 40px;
    }

    .mobile-menu.open {
      opacity: 1;
      visibility: visible;
      transition: opacity .35s var(--ease), visibility 0s linear 0s;
    }

    .mobile-menu-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
      list-style: none;
      margin-bottom: auto;
    }

    .mobile-menu-links li {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }

    .mobile-menu.open .mobile-menu-links li {
      opacity: 1;
      transform: translateY(0);
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(1) {
      transition-delay: .10s;
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(2) {
      transition-delay: .15s;
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(3) {
      transition-delay: .20s;
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(4) {
      transition-delay: .25s;
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(5) {
      transition-delay: .30s;
    }

    .mobile-menu.open .mobile-menu-links li:nth-child(6) {
      transition-delay: .35s;
    }

    .mobile-menu-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 4px;
      font-family: 'Roboto';
      font-size: 28px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -.5px;
      border-bottom: 1px solid var(--line);
      transition: color .25s var(--ease), padding-left .25s var(--ease);
    }

    .mobile-menu-links a:hover,
    .mobile-menu-links a:active {
      color: var(--accent);
      padding-left: 8px;
    }

    .mobile-menu-links a::after {
      content: "→";
      color: var(--text-dim);
      font-size: 20px;
      transition: transform .25s var(--ease), color .25s var(--ease);
    }

    .mobile-menu-links a:hover::after {
      color: var(--accent);
      transform: translateX(4px);
    }

    .mobile-menu-footer {
      padding-top: 32px;
      border-top: 1px solid var(--line);
      opacity: 0;
      transition: opacity .5s var(--ease);
    }

    .mobile-menu.open .mobile-menu-footer {
      opacity: 1;
      transition-delay: .4s;
    }

    .mobile-menu-footer .nav-cta {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 16px 24px;
      font-size: 15px;
    }

    /* Lock body scroll when menu is open */
    body.menu-open {
      overflow: hidden;
    }

    /* ============ BACK TO TOP ============
     Appears once you're a screen deep. z-index 40 keeps it under the
     header (50), the mobile menu (49) and the spec modal (80), and the
     body-state rules below take it out of the tab order entirely while
     either overlay owns the screen.
     ============================================================ */
    .to-top {
      position: fixed;
      right: clamp(16px, 2.5vw, 32px);
      bottom: clamp(16px, 2.5vw, 32px);
      z-index: 40;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ink);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, .10);
      box-shadow: 0 10px 28px rgba(11, 18, 32, .22);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px) scale(.92);
      transition: opacity .3s var(--ease), transform .3s var(--ease),
        visibility 0s linear .3s, background .25s var(--ease), box-shadow .25s var(--ease);
    }

    .to-top.is-in {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity .3s var(--ease), transform .4s var(--ease-spring),
        visibility 0s linear 0s, background .25s var(--ease), box-shadow .25s var(--ease);
    }

    .to-top:hover {
      background: var(--accent);
      box-shadow: 0 14px 32px var(--accent-glow);
    }

    .to-top:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .to-top svg {
      transition: transform .25s var(--ease);
    }

    .to-top:hover svg {
      transform: translateY(-2px);
    }

        body.menu-open .to-top {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 22px;
      color: var(--text);
      letter-spacing: -.5px;
    }

    .logo-img {
      height: 24px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
    }

    .nav-links a {
      position: relative;
      color: var(--text-mute);
      padding: 8px 14px;
      transition: color .25s var(--ease);
    }

    /* Left-to-right underline sweep */
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 4px;
      /* aligned to text, not the padded box */
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .35s var(--ease);
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .nav-cta {
      background: var(--ink);
      color: #FFFFFF;
      padding: 11px 20px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
      box-shadow: 0 6px 16px rgba(11, 18, 32, .15);
      position: relative;
      overflow: hidden;
    }

    .nav-cta::before {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transform: skewX(-25deg);
      pointer-events: none;
    }

    .nav-cta:hover::before {
      animation: shimmer-sweep 1.2s infinite;
    }

    .nav-cta:hover {
      background: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 10px 24px var(--accent-glow);
    }

    .nav-cta svg {
      transition: transform .3s var(--ease);
    }

    .nav-cta:hover svg {
      transform: translateX(3px);
    }

    /* ============ HERO — 2-column product split ============
     Left: copy stack. Right: clean product render (SVG).
     Powerwall/Enphase feel. No dashboards, no gimmicks. */
    .hero {
      position: relative;
      padding: 160px 0 120px;
      overflow: hidden;
    }

    .hero-wrap {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 clamp(24px, 4vw, 56px);
      position: relative;
      z-index: 2;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(48px, 6vw, 96px);
      align-items: center;
    }

    /* Ambient layer */
    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .hero-bg::before {
      content: "";
      position: absolute;
      top: -320px;
      right: -200px;
      width: 900px;
      height: 900px;
      background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 62%);
      filter: blur(90px);
      opacity: .5;
    }

    .hero-bg::after {
      content: "";
      position: absolute;
      bottom: -200px;
      left: -160px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle at center, rgba(11, 18, 32, .06) 0%, transparent 62%);
      filter: blur(100px);
      opacity: .6;
    }

    /* ── Left column ── */
    .hero-copy {
      max-width: 600px;
    }

    .hero .eyebrow {
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 52px;
    }

    /* Stat strip — small, clean, at the bottom of the copy column */
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      padding-top: 32px;
      border-top: 1px solid var(--line);
    }

    .hero-stat {
      padding: 0 clamp(8px, 1.4vw, 16px);
      position: relative;
    }

    .hero-stat:first-child {
      padding-left: 0;
    }

    .hero-stat+.hero-stat::before {
      content: "";
      position: absolute;
      left: 0;
      top: 15%;
      bottom: 15%;
      width: 1px;
      background: var(--line);
    }

    .hero-stat-num {
      font-family: 'Roboto';
      font-size: clamp(22px, 1.8vw, 28px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.8px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .hero-stat-num .unit {
      color: var(--accent);
      font-size: .7em;
      margin-left: 1px;
    }

    .hero-stat-label {
      font-size: 10.5px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      line-height: 1.4;
    }

    /* ── Right column: product hero ── */
    .hero-product {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 4 / 5;
      max-height: 640px;
    }

    /* Soft radial spotlight behind the product */
    .hero-product::before {
      content: "";
      position: absolute;
      top: 10%;
      left: 10%;
      right: 10%;
      bottom: 10%;
      background: radial-gradient(ellipse at center, rgba(15, 158, 104, .10) 0%, transparent 65%);
      filter: blur(30px);
    }

    /* Floor shadow under the product */
    .hero-product::after {
      content: "";
      position: absolute;
      left: 15%;
      right: 15%;
      bottom: 10%;
      height: 24px;
      background: radial-gradient(ellipse at center, rgba(11, 18, 32, .12) 0%, transparent 70%);
      filter: blur(8px);
    }

    .hero-product svg {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      max-width: 480px;
      display: block;
      filter: drop-shadow(0 40px 60px rgba(11, 18, 32, .12));
    }

    /* Optional: two floating micro-tags on the product */
    .product-tag {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 10px 14px;
      border-radius: 100px;
      box-shadow: var(--shadow-md);
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      z-index: 3;
      white-space: nowrap;
    }

    .product-tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(15, 158, 104, .18);
    }

    .product-tag.tag-top {
      top: 8%;
      right: -4%;
    }

    .product-tag.tag-bottom {
      bottom: 22%;
      left: -6%;
    }

    .product-tag em {
      font-style: normal;
      color: var(--text-dim);
      font-weight: 500;
      margin-left: 4px;
    }

    /* H1 line-break helper: force a real break between the two sentences */
    h1 br {
      display: block;
    }

    /* Eyebrow: a status pill. Precise, technical, calm. */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: .5px;
      font-size: 12px;
      text-transform: uppercase;
      margin-bottom: 26px;
      background: var(--accent-tint);
      padding: 7px 14px;
      border-radius: 100px;
      border: 1px solid rgba(15, 158, 104, .22);
    }

    .eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(15, 158, 104, .18);
      animation: pulse 2.4s ease-in-out infinite;
      will-change: transform, opacity;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.4);
        opacity: .6;
      }
    }

    h1 {
      font-family: 'Roboto';
      font-size: clamp(44px, 4.8vw, 72px);
      line-height: 1.04;
      font-weight: 700;
      letter-spacing: -2px;
      margin-bottom: 24px;
      color: var(--text);
    }

    h1 .highlight {
      background: linear-gradient(135deg, #059669 0%, #10B981 35%, #34D399 70%, #0284C7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    .hero p.lead {
      font-size: clamp(16px, 1.15vw, 18px);
      color: var(--text-mute);
      max-width: 520px;
      margin: 0 0 40px;
      line-height: 1.7;
    }

    .btn-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn-primary {
      background: var(--ink);
      color: #FFFFFF;
      padding: 15px 26px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
      box-shadow: 0 10px 24px rgba(11, 18, 32, .18);
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 80%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transform: skewX(-25deg);
      pointer-events: none;
    }

    .btn-primary:hover::before {
      animation: shimmer-sweep 1.2s infinite;
    }

    @keyframes shimmer-sweep {
      0% {
        left: -150%;
      }

      100% {
        left: 150%;
      }
    }

    .btn-primary:hover {
      background: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 16px 32px var(--accent-glow);
    }

    .btn-primary svg {
      transition: transform .25s var(--ease);
    }

    .btn-primary:hover svg {
      transform: translateX(4px);
    }

    .btn-outline {
      border: 1px solid var(--line-strong);
      color: var(--text);
      padding: 14px 24px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
    }

    .btn-outline:hover {
      transform: translateY(-2px);
      border-color: var(--accent);
      background: var(--accent-tint);
      box-shadow: var(--shadow-md);
    }

    /* Magnetic buttons: GSAP writes transform every frame, so a CSS
     transition on the same property would fight it and lag behind the
     cursor. Drop transform from the transition and let GSAP own it. */
    html.gsap-on .is-magnetic {
      transition: background .25s var(--ease), box-shadow .25s var(--ease);
    }

    /* ============ CERTIFICATION STRIP ============
     Slow marquee of the standards the range actually holds. Reads as a
     credibility bar under the hero rather than decoration — every entry
     comes straight off the datasheet.
     ============================================================ */
    .cert-strip {
      position: relative;
      padding: 16px 0;
      background: var(--bg-1);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      /* Feather both ends so items enter and leave instead of popping */
      mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    }

    .cert-track {
      display: flex;
      align-items: center;
      width: max-content;
    }

    .cert-item {
      display: inline-flex;
      align-items: center;
      gap: 26px;
      padding: 0 13px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--text-dim);
      white-space: nowrap;
    }

    .cert-item::after {
      content: "";
      flex: none;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .45;
    }


    /* ============ SECTIONS ============ */
    section {
      padding: 130px 0;
      position: relative;
    }

    .section-head {
      max-width: 720px;
      margin: 0 auto 80px;
      text-align: center;
    }

    .section-head .eyebrow {
      margin-left: auto;
      margin-right: auto;
    }

    h2 {
      font-family: 'Roboto';
      font-size: clamp(32px, 3.6vw, 50px);
      font-weight: 800;
      letter-spacing: -1.6px;
      margin-bottom: 20px;
      line-height: 1.08;
      color: var(--text);
    }

    h2 .accent {
      background: linear-gradient(135deg, #059669 0%, #0F9E68 35%, #34D399 75%, #0284C7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    .solutions-dark h2 .accent,
    .cta-banner h2 .accent {
      background: linear-gradient(135deg, #34D399 0%, #6EE7B7 45%, #38BDF8 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    .section-head p {
      color: var(--text-mute);
      font-size: 17px;
      line-height: 1.65;
    }

    /* ============ WHAT IS BESS ============
     Process explainer:
       1) Section head
       2) Day/night animated scene (charges by day, delivers by night)
       3) 3 numbered process steps
       4) 2 info cards (context / guidance)
       5) 4 feature tiles
     ============================================================ */

    /* ── The scene ───────────────────────────────────────────── */
    .bess-scene {
      max-width: 1100px;
      margin: 0 auto 64px;
      aspect-ratio: 16 / 8;
      min-height: 340px;
      background:
        radial-gradient(60% 100% at 20% 0%, rgba(52, 211, 153, .10) 0%, transparent 55%),
        linear-gradient(180deg, #F0F4FA 0%, #E4EAF3 100%);
      border: 1px solid var(--line);
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: background 3s ease;
    }

    /* Night state: cool blue background */
    .bess-scene.is-night {
      background:
        radial-gradient(60% 100% at 20% 0%, rgba(59, 130, 246, .12) 0%, transparent 55%),
        linear-gradient(180deg, #E1E7F2 0%, #D2DAE8 100%);
    }

    .bess-scene svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Phase indicator top-right */
    .bess-phase {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, .75);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      padding: 8px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }

    .bess-phase-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #F59E0B;
      /* sun/amber for day */
      box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
      transition: background .6s var(--ease), box-shadow .6s var(--ease);
    }

    .is-night .bess-phase-dot {
      background: #60A5FA;
      box-shadow: 0 0 0 4px rgba(96, 165, 250, .18);
    }

    .bess-phase-label::after {
      content: "Day cycle · Charging";
    }

    .is-night .bess-phase-label::after {
      content: "Night cycle · Delivering";
    }

    .bess-phase-label {
      color: var(--text);
    }

    /* SOC meter — inside the SVG, animated by CSS var --soc */
    .bess-scene {
      --soc: 42;
    }

    .soc-fill {
      transition: height 3s var(--ease), fill .6s var(--ease);
    }

    /* Scroll-scrubbed mode: the timings above are tuned for a slow 7s
     auto-cycle and lag badly when the user is dragging the scene
     through a scrub. Shorten them so the scene tracks the scroll. */
    html.gsap-on .bess-scene {
      transition: background .5s ease;
    }

    html.gsap-on .soc-fill {
      transition: fill .4s var(--ease);
    }

    html.gsap-on .day-only,
    html.gsap-on .night-only,
    html.gsap-on .flow-day,
    html.gsap-on .flow-night {
      transition: opacity .45s var(--ease);
    }

    /* Day/night visibility toggles */
    .day-only {
      opacity: 1;
      transition: opacity 1.2s var(--ease);
    }

    .night-only {
      opacity: 0;
      transition: opacity 1.2s var(--ease);
    }

    .is-night .day-only {
      opacity: 0;
    }

    .is-night .night-only {
      opacity: 1;
    }

    /* Sun rays gently rotate */
    @keyframes ray-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .sun-rays {
      transform-origin: 90px 90px;
      animation: ray-spin 40s linear infinite;
    }

    /* Flow-line pulses — moving dashes along the wires */
    @keyframes dash-shift {
      to {
        stroke-dashoffset: -32;
      }
    }

    .flow-line {
      stroke-dasharray: 6 6;
      animation: dash-shift 1.6s linear infinite;
    }

    /* Reverse direction for night discharge lines */
    .flow-line.reverse {
      animation-direction: reverse;
    }

    /* Hide flows that don't apply in the current phase */
    .flow-day {
      opacity: 1;
      transition: opacity 1.2s var(--ease);
    }

    .flow-night {
      opacity: 0;
      transition: opacity 1.2s var(--ease);
    }

    .is-night .flow-day {
      opacity: 0;
    }

    .is-night .flow-night {
      opacity: 1;
    }

    /* Star twinkles for night */
    @keyframes twinkle {

      0%,
      100% {
        opacity: .35;
      }

      50% {
        opacity: .85;
      }
    }

    .star {
      animation: twinkle 3s ease-in-out infinite;
    }

    /* ── Process steps ────────────────────────────────────────── */
    .bess-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto 40px;
    }

    .bess-step {
      /* Layered background:
         1) subtle grid overlay (masked to fade at the edges)
         2) tinted radial glow in the top-right corner
         3) base surface color                                  */
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }

    /* Alternate the glow corner across the 3 steps so the row
     doesn't feel repetitive. */
    .bess-step:nth-child(2) {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 0% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .bess-step:nth-child(3) {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .bess-step:hover {
      transform: translateY(-4px);
      border-color: rgba(15, 158, 104, .3);
      box-shadow: var(--shadow-md);
    }

    .bess-step-num {
      font-family: 'Roboto';
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 2px;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .bess-step-num::after {
      content: "";
      width: 32px;
      height: 1px;
      background: rgba(15, 158, 104, .3);
    }

    .bess-step h3 {
      font-family: 'Roboto';
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      letter-spacing: -.4px;
    }

    .bess-step p {
      color: var(--text-mute);
      font-size: 14.5px;
      line-height: 1.65;
    }

    /* Vertical arrow-connector between steps at desktop */
    .bess-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -16px;
      width: 16px;
      height: 2px;
      background: linear-gradient(90deg, rgba(15, 158, 104, .4), rgba(15, 158, 104, 0));
      z-index: 1;
    }

    /* ── Info cards — quieter, side-by-side context row ─── */
    .bess-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto 40px;
    }

    .info-card {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 32px;
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
      position: relative;
      overflow: hidden;
    }

    /* Alternate the glow corner on the second card */
    .info-card:nth-child(2) {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 0% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .info-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .45s var(--ease);
      z-index: 1;
    }

    .info-card:hover {
      transform: translateY(-3px);
      border-color: var(--line-strong);
      box-shadow: var(--shadow-md);
    }

    .info-card:hover::before {
      transform: scaleY(1);
    }

    .info-card-eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }

    .info-card .big {
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text);
      font-family: 'Roboto';
      line-height: 1.25;
      letter-spacing: -.4px;
    }

    .info-card p {
      color: var(--text-mute);
      font-size: 14.5px;
      line-height: 1.7;
    }

    /* ── Feature tiles ───────────────────────────────────── */
    .bess-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .bess-feature {
      background:
        linear-gradient(rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(280px 280px at 100% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    }

    /* Alternate glow corners across the 4-column row */
    .bess-feature:nth-child(2) {
      background:
        linear-gradient(rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(280px 280px at 0% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .bess-feature:nth-child(3) {
      background:
        linear-gradient(rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(280px 280px at 100% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .bess-feature:nth-child(4) {
      background:
        linear-gradient(rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(11, 18, 32, .025) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(280px 280px at 0% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .bess-feature:hover {
      transform: translateY(-3px);
      border-color: rgba(15, 158, 104, .3);
      box-shadow: var(--shadow-md);
    }

    .bess-feature-icon {
      width: 36px;
      height: 36px;
      flex: none;
      border-radius: 10px;
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bess-feature-text {
      font-size: 14px;
      color: var(--text);
      font-weight: 500;
      line-height: 1.5;
    }

    /* ============ OUR SOLUTIONS (dark, brand palette) ============
     Uses the RESS logo palette:
       navy  #201E5A  (letter marks)
       green #249446  (E-bars)
     The whole section flips to dark against the light page —
     creates a strong break between the BESS and Why RESS
     sections and gives the product tiers real presence.
     ============================================================ */
    .solutions-dark {
      background: #0A0B1F;
      color: #EDEDF7;
      position: relative;
      overflow: hidden;
    }

    /* Ambient wash: brand green glow from the top-right */
    .solutions-dark::before {
      content: "";
      position: absolute;
      top: -260px;
      right: -160px;
      width: 820px;
      height: 820px;
      background: radial-gradient(circle at center, rgba(36, 148, 70, .22) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
    }

    /* Subtle grid overlay — matches the engineering language elsewhere */
    .solutions-dark::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 80%);
    }

    .solutions-dark .wrap {
      position: relative;
      z-index: 1;
    }

    /* Section head — override colors for dark surface */
    .solutions-dark h2 {
      color: #FFFFFF;
    }

    .solutions-dark .section-head p {
      color: rgba(237, 237, 247, .7);
    }

    .solutions-dark .eyebrow {
      color: #4DBB6F;
      background: rgba(36, 148, 70, .14);
      border-color: rgba(36, 148, 70, .3);
    }

    .solutions-dark .eyebrow::before {
      background: #249446;
      box-shadow: 0 0 0 4px rgba(36, 148, 70, .22);
    }

    /* ── The cards ── */
    .sol-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .sol-card {
      background: linear-gradient(180deg, #14152F 0%, #0F1024 100%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 0;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      min-height: 340px;
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
    }

    /* Light sweep on hover — a diagonal gradient that slides across
     the card. Modern, premium, and cheap. */
    .sol-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(115deg,
          transparent 30%,
          rgba(77, 187, 111, .10) 50%,
          transparent 70%);
      transform: translateX(-100%);
      transition: transform .8s var(--ease);
      z-index: 1;
    }

    /* Pointer spotlight — consumes the --mx/--my vars the script sets.
     Sits under .sol-body (z-index 2) so text stays crisp. */
    .sol-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
          rgba(77, 187, 111, .14) 0%, transparent 70%);
      opacity: 0;
      transition: opacity .35s var(--ease);
    }

    .sol-card:hover::after {
      opacity: 1;
    }

    .sol-card:hover {
      transform: translateY(-8px);
      border-color: rgba(36, 148, 70, .45);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(36, 148, 70, .2);
    }

    .sol-card:hover::before {
      transform: translateX(100%);
    }

    /* Header illustration panel — colored, size-varying icon */
    .sol-illus {
      height: 130px;
      position: relative;
      background:
        radial-gradient(80% 100% at 50% 0%, rgba(36, 148, 70, .18) 0%, transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 100%);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Faint diagonal stripes on the illus for visual texture */
    .sol-illus::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(45deg,
          transparent 0px, transparent 22px,
          rgba(255, 255, 255, .02) 22px, rgba(255, 255, 255, .02) 24px);
    }

    .sol-illus svg {
      position: relative;
      z-index: 1;
      color: #4DBB6F;
      filter: drop-shadow(0 4px 12px rgba(36, 148, 70, .35));
      transition: transform .5s var(--ease), color .3s var(--ease);
    }

    .sol-card:hover .sol-illus svg {
      transform: scale(1.08);
      color: #6BD48C;
    }

    /* Card body */
    .sol-body {
      padding: 24px 26px 26px;
      display: flex;
      flex-direction: column;
      flex: 1;
      position: relative;
      z-index: 2;
    }

    .sol-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .sol-num {
      font-family: 'Roboto';
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 2px;
      color: #4DBB6F;
    }

    /* Scale indicator — dots representing size class */
    .sol-scale {
      display: inline-flex;
      gap: 3px;
    }

    .sol-scale span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      transition: background .3s var(--ease);
    }

    .sol-scale span.on {
      background: #249446;
    }

    .sol-card:hover .sol-scale span.on {
      box-shadow: 0 0 6px rgba(36, 148, 70, .5);
    }

    .sol-card h3 {
      font-family: 'Roboto';
      font-size: 20px;
      font-weight: 700;
      color: #FFFFFF;
      margin-bottom: 10px;
      letter-spacing: -.3px;
      line-height: 1.2;
    }

    .sol-card p {
      font-size: 14px;
      color: rgba(237, 237, 247, .65);
      line-height: 1.6;
      flex: 1;
      margin-bottom: 20px;
    }

    .sol-arrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(237, 237, 247, .55);
      transition: color .3s var(--ease), gap .3s var(--ease);
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .sol-card:hover .sol-arrow {
      color: #4DBB6F;
      gap: 12px;
    }

    .sol-arrow svg {
      transition: transform .3s var(--ease);
    }

    .sol-card:hover .sol-arrow svg {
      transform: translateX(2px);
    }

    /* ============ WHY RESS — bento grid ============
     Asymmetric grid of dark tiles. One large feature tile spans
     the width, then a mix of medium + small tiles. Each tile
     leads with a huge number/stat as the "proof" — engineering,
     not marketing.
     ============================================================ */
    .why-section {
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    /* Soft green ambient wash, muted for the light background */
    .why-section::before {
      content: "";
      position: absolute;
      top: -260px;
      left: -160px;
      width: 820px;
      height: 820px;
      background: radial-gradient(circle at center, rgba(15, 158, 104, .08) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
    }

    .why-section .wrap {
      position: relative;
      z-index: 1;
    }

    .why-bento {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(220px, auto);
      gap: 16px;
    }

    /* Tile placements — this is what makes the bento feel varied */
    .why-tile-1 {
      grid-column: span 4;
      grid-row: span 2;
    }

    /* Chemistry — big */
    .why-tile-2 {
      grid-column: span 2;
      grid-row: span 1;
    }

    /* Scalability — top-right */
    .why-tile-3 {
      grid-column: span 2;
      grid-row: span 1;
    }

    /* Service — bottom-right */
    .why-tile-4 {
      grid-column: span 6;
      grid-row: span 1;
    }

    /* CTA strip along the bottom */

    .why-tile {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(11, 18, 32, 0.08);
      border-radius: 20px;
      padding: 32px;
      position: relative;
      overflow: hidden;
      color: var(--text);
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
    }

    /* Soft accent-tint glow — different corner per tile */
    .why-tile::before {
      content: "";
      position: absolute;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle at center, rgba(15, 158, 104, .12) 0%, transparent 70%);
      filter: blur(60px);
      pointer-events: none;
      transition: opacity .5s var(--ease);
      opacity: 0.7;
    }

    .why-tile-1::before {
      top: -160px;
      right: -120px;
    }

    .why-tile-2::before {
      top: -160px;
      left: -120px;
    }

    .why-tile-3::before {
      bottom: -160px;
      right: -120px;
    }

    .why-tile-4::before {
      top: -160px;
      left: 30%;
    }

    /* Faint engineering grid overlay */
    .why-tile::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(11, 18, 32, .02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 18, 32, .02) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 85%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 40%, transparent 85%);
      transition: opacity .5s var(--ease);
    }

    .why-tile:hover {
      transform: translateY(-6px);
      border-color: rgba(15, 158, 104, 0.4);
      background: #FFFFFF;
      box-shadow: 0 20px 40px rgba(15, 158, 104, 0.08), var(--shadow-lg);
    }

    .why-tile>* {
      position: relative;
      z-index: 1;
    }

    /* Tile header — small index label */
    .why-tile-index {
      font-family: 'Roboto';
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 2.5px;
      margin-bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .why-tile-index::after {
      content: "";
      width: 32px;
      height: 1px;
      background: rgba(15, 158, 104, .35);
    }

    .why-tile h3 {
      font-family: 'Roboto';
      font-size: clamp(24px, 2.4vw, 32px);
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.8px;
      line-height: 1.15;
      margin-bottom: 14px;
    }

    .why-tile p {
      color: var(--text-mute);
      font-size: 15px;
      line-height: 1.65;
      margin-bottom: auto;
      /* pushes footer content to the bottom */
    }

    /* Big number "proof" block — the visual signature of this section */
    .why-tile-proof {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: baseline;
      gap: 16px;
      flex-wrap: wrap;
    }

    .why-tile-proof .num {
      font-family: 'Roboto';
      font-size: clamp(40px, 5vw, 64px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -2px;
      background: linear-gradient(135deg, var(--accent) 0%, #6EE7B7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .why-tile-proof .lbl {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-dim);
      line-height: 1.4;
      max-width: 180px;
    }

    /* Compact mini-stat variant for the smaller tiles */
    .why-tile-mini {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: baseline;
      gap: 12px;
    }

    .why-tile-mini .num {
      font-family: 'Roboto';
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -1px;
      color: var(--accent);
    }

    .why-tile-mini .num .unit-sm {
      font-size: .5em;
      letter-spacing: 0;
      margin-left: 5px;
    }

    /* Count-up digits must not reflow the layout as they tick */
    [data-count] {
      font-variant-numeric: tabular-nums;
    }

    .why-tile-mini .lbl {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: var(--text-dim);
      line-height: 1.4;
    }

    /* CTA tile — horizontal band that closes the section */
    .why-tile-4 {
      background:
        radial-gradient(60% 100% at 100% 50%, rgba(15, 158, 104, .10) 0%, transparent 60%),
        var(--surface);
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      padding: 36px 40px;
      min-height: auto;
    }

    .why-tile-4 .cta-text h3 {
      margin-bottom: 6px;
      font-size: 22px;
    }

    .why-tile-4 .cta-text p {
      color: var(--text-mute);
      margin: 0;
      font-size: 14.5px;
    }

    .why-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--ink);
      color: #FFFFFF;
      padding: 14px 24px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
      box-shadow: 0 8px 20px rgba(11, 18, 32, .15);
    }

    .why-cta-btn:hover {
      background: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px var(--accent-glow);
    }

    .why-cta-btn svg {
      transition: transform .25s var(--ease);
    }

    .why-cta-btn:hover svg {
      transform: translateX(3px);
    }

    /* ============ CTA — near-full-bleed hero moment ============
     Only ~16px gutter each side. Big, centered composition.
     Uses the same brand navy family as Solutions so the two
     dark sections read as bookends around the mid-page content.
     ============================================================ */
    .cta-section {
      padding: 60px 0 90px;
    }

    .cta-wrap {
      padding: 0 clamp(12px, 1.5vw, 20px);
      /* the tiny outer gutter */
    }

    .cta-banner {
      background:
        radial-gradient(50% 80% at 50% 0%, rgba(52, 211, 153, .14) 0%, transparent 60%),
        radial-gradient(50% 90% at 20% 100%, rgba(36, 148, 70, .10) 0%, transparent 60%),
        radial-gradient(50% 90% at 80% 100%, rgba(52, 211, 153, .10) 0%, transparent 60%),
        linear-gradient(180deg, #0A0B1F 0%, #06071A 100%);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 32px;
      padding: clamp(72px, 12vw, 140px) clamp(24px, 6vw, 96px);
      min-height: min(78vh, 640px);
      color: #F2F4FA;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transform: translateZ(0);
      will-change: transform, opacity;
    }

    /* Ambient engineering grid — same design language as Solutions */
    .cta-banner::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
      transform: translateZ(0);
      will-change: opacity;
    }

    /* Corner ticks — small industrial markers, like on a spec sheet */
    .cta-banner::after {
      content: "";
      position: absolute;
      inset: 24px;
      border: 1px dashed rgba(255, 255, 255, .06);
      border-radius: 20px;
      pointer-events: none;
    }

    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 820px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .cta-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #4DBB6F;
      font-weight: 600;
      letter-spacing: 1.5px;
      font-size: 12px;
      text-transform: uppercase;
      margin-bottom: 32px;
      background: rgba(36, 148, 70, .14);
      padding: 8px 16px;
      border-radius: 100px;
      border: 1px solid rgba(36, 148, 70, .3);
    }

    .cta-eyebrow::before {
      content: "";
      width: 6px;
      height: 6px;
      background: #249446;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(36, 148, 70, .22);
      animation: pulse 2.4s ease-in-out infinite;
    }

    .cta-banner h2 {
      color: #FFFFFF;
      margin-bottom: 24px;
      font-size: clamp(36px, 6vw, 82px);
      letter-spacing: -2.5px;
      line-height: 1.02;
      font-weight: 700;
      font-family: 'Roboto';
    }

    .cta-banner h2 .accent {
      background: linear-gradient(135deg, #34D399 0%, #6EE7B7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .cta-banner p {
      color: rgba(232, 234, 242, .7);
      font-size: clamp(16px, 1.3vw, 20px);
      line-height: 1.65;
      max-width: 620px;
      margin-bottom: 48px;
    }

    .cta-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .cta-banner .btn-primary {
      position: relative;
      z-index: 1;
      white-space: nowrap;
      background: #34D399;
      color: #04120B;
      padding: 18px 32px;
      font-size: 16px;
      box-shadow: 0 0 0 1px rgba(52, 211, 153, .35), 0 16px 36px rgba(52, 211, 153, .25);
    }

    .cta-banner .btn-primary:hover {
      background: #3EE1A5;
      box-shadow: 0 0 0 1px rgba(52, 211, 153, .5), 0 22px 44px rgba(52, 211, 153, .35);
    }

    .cta-secondary {
      color: rgba(232, 234, 242, .75);
      font-size: 14px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      transition: color .3s var(--ease);
    }

    .cta-secondary:hover {
      color: #34D399;
    }

    .cta-secondary svg {
      transition: transform .3s var(--ease);
    }

    .cta-secondary:hover svg {
      transform: translateX(3px);
    }

    /* Bottom trust strip inside the CTA — small proof pills */
    .cta-trust {
      position: relative;
      z-index: 1;
      margin-top: 56px;
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 12px;
      color: rgba(232, 234, 242, .5);
      letter-spacing: .5px;
    }

    .cta-trust span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .cta-trust span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #34D399;
      opacity: .7;
    }

    /* Contact routes inside the CTA banner (this section is #contact) */
    .cta-contact {
      position: relative;
      z-index: 1;
      width: 100%;
      margin-top: 48px;
      padding-top: 36px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      text-align: left;
    }

    .cta-contact-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 18px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      color: rgba(232, 234, 242, .8);
      font-size: 13.5px;
      line-height: 1.55;
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
    }

    .cta-contact-item:hover {
      background: rgba(36, 148, 70, .12);
      border-color: rgba(36, 148, 70, .35);
      color: #FFFFFF;
      transform: translateY(-2px);
    }

    .cta-contact-item svg {
      flex: none;
      margin-top: 2px;
      color: #34D399;
    }

    .cta-contact-item em {
      display: block;
      font-style: normal;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(232, 234, 242, .45);
      margin-bottom: 4px;
    }

    /* ============ FOOTER ============ */
    /* ============ FOOTER (dark, editorial, oversized wordmark) ============
     Two-block layout:
       Top: big logo hero on the left, link columns on the right.
       Bottom: fine print row, split.
     Reads as a proper closer, not a link dump.
     ==================================================================== */
    footer {
      background: #06071A;
      color: rgba(232, 234, 242, .65);
      padding: 100px 0 32px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      position: relative;
      overflow: hidden;
      transform: translateZ(0);
    }

    /* Ambient green wash from the bottom-left */
    footer::before {
      content: "";
      position: absolute;
      bottom: -200px;
      left: -160px;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle at center, rgba(36, 148, 70, .15) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
      transform: translateZ(0);
      will-change: opacity;
    }

    /* Faint engineering grid */
    footer::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(to right, rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .025) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
      transform: translateZ(0);
    }

    footer .wrap {
      position: relative;
      z-index: 1;
    }

    /* ── Row 1: FULL-WIDTH LOGO BANNER ── */
    .footer-hero {
      display: block;
      margin-bottom: 56px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .footer-logo-wrap {
      display: block;
      width: 100%;
    }

    .footer-logo-img {
      width: 100%;
      /* stretches edge-to-edge of .wrap */
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* Inline-SVG variant so we can style the navy letters + green bars
     independently. Keeps the brand green, lifts the navy to white on
     the dark footer surface. */
    .footer-logo-svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .footer-logo-svg .letter {
      fill: #FFFFFF;
    }

    /* R · S · S mark → white */
    .footer-logo-svg .accent {
      fill: #249446;
    }

    /* E bars → brand green */
    .footer-tagline {
      color: rgba(232, 234, 242, .55);
      font-size: 16px;
      line-height: 1.7;
      margin-top: 32px;
      max-width: 520px;
    }

    /* ── Row 2: nav columns + contact ── */
    .footer-top {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 64px;
      align-items: start;
    }

    /* Contact/social block — same row as nav columns now */
    .footer-contact {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    .footer-contact a {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: rgba(232, 234, 242, .7);
      font-size: 14px;
      transition: color .25s var(--ease);
      width: fit-content;
    }

    .footer-contact a:hover {
      color: #4DBB6F;
    }

    .footer-contact svg {
      color: rgba(232, 234, 242, .4);
      flex: none;
      transition: color .25s var(--ease);
    }

    .footer-contact a:hover svg {
      color: #4DBB6F;
    }

    /* Social pills */
    .social {
      display: flex;
      gap: 10px;
    }

    .social a {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(232, 234, 242, .6);
      transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
    }

    .social a:hover {
      background: rgba(36, 148, 70, .14);
      color: #4DBB6F;
      border-color: rgba(36, 148, 70, .35);
      transform: translateY(-2px);
    }

    /* Link columns */
    .footer-col h4 {
      font-family: 'Roboto';
      font-size: 11px;
      font-weight: 700;
      color: rgba(232, 234, 242, .4);
      margin-bottom: 24px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .footer-col li a {
      color: rgba(232, 234, 242, .7);
      font-size: 14.5px;
      transition: color .25s var(--ease), padding-left .25s var(--ease);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .footer-col li a::before {
      content: "";
      width: 6px;
      height: 1px;
      background: transparent;
      transition: background .25s var(--ease), width .25s var(--ease);
    }

    .footer-col li a:hover {
      color: #4DBB6F;
      padding-left: 0;
    }

    .footer-col li a:hover::before {
      background: #4DBB6F;
      width: 10px;
    }

    /* ── Bottom row: fine print ── */
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .06);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: rgba(232, 234, 242, .4);
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-bottom a {
      color: rgba(232, 234, 242, .4);
      transition: color .25s var(--ease);
    }

    .footer-bottom a:hover {
      color: #4DBB6F;
    }

    .footer-legal {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }

    /* ============ PRODUCTS ============
     Series tabs → card grid → inline full spec drawer, plus a
     side-by-side compare table built from the same DOM data.
     Palette is strictly the tokens already defined in :root —
     no new colors are introduced anywhere in this section.
     ============================================================ */
    .products-section {
      background: var(--bg-1);
      position: relative;
      overflow: hidden;
    }

    /* Ambient accent wash, mirrored from .why-section but on the right */
    .products-section::before {
      content: "";
      position: absolute;
      top: -260px;
      right: -160px;
      width: 820px;
      height: 820px;
      background: radial-gradient(circle at center, rgba(15, 158, 104, .08) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
    }

    .products-section .wrap {
      position: relative;
      z-index: 1;
    }

    /* Anchored sections must clear the fixed header when jumped to */
    section[id] {
      scroll-margin-top: 96px;
    }

    /* ── Control row: series tabs + compare toggle ── */
    .prod-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .prod-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .prod-tab {
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-mute);
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 11px 20px;
      border-radius: 100px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color .25s var(--ease), background .25s var(--ease),
        border-color .25s var(--ease), box-shadow .25s var(--ease);
    }

    .prod-tab:hover {
      color: var(--text);
      border-color: var(--line-strong);
    }

    .prod-tab .count {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
      border-radius: 100px;
      padding: 1px 7px;
      transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
    }

    .prod-tab[aria-selected="true"] {
      background: var(--ink);
      border-color: var(--ink);
      color: #FFFFFF;
      box-shadow: 0 6px 16px rgba(11, 18, 32, .15);
    }

    .prod-tab[aria-selected="true"] .count {
      color: #FFFFFF;
      background: rgba(255, 255, 255, .14);
      border-color: rgba(255, 255, 255, .18);
    }

    .prod-compare-btn {
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--line-strong);
      padding: 11px 18px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: color .25s var(--ease), background .25s var(--ease),
        border-color .25s var(--ease), box-shadow .25s var(--ease);
    }

    .prod-compare-btn:hover {
      border-color: var(--accent);
      background: var(--accent-tint);
      box-shadow: var(--shadow-sm);
    }

    .prod-compare-btn[aria-pressed="true"] {
      color: var(--accent-2);
      background: var(--accent-tint);
      border-color: rgba(15, 158, 104, .35);
    }

    .prod-compare-btn svg {
      transition: transform .3s var(--ease);
    }

    .prod-compare-btn[aria-pressed="true"] svg {
      transform: rotate(90deg);
    }

    /* ── Card grid ── */
    /* Cards in a row share a height so the "Full specification"
     rules line up. Specs open in a modal, so cards never grow. */
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    /* A lone card (Utility series) shouldn't stretch across the row */
    .prod-grid.is-single {
      grid-template-columns: minmax(0, 560px);
      justify-content: center;
    }

    .prod-grid.is-hidden {
      display: none;
    }

    /* .prod-card is a flex container, so [hidden] needs to win */
    .prod-card[hidden] {
      display: none !important;
    }

    .prod-card {
      position: relative;
      /* Same layered treatment as .bess-step: grid overlay + corner
       glow + surface. Keeps products visually in the same family. */
      background:
        linear-gradient(rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(11, 18, 32, 0.08);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
    }

    /* Alternate the glow corner so a row of cards doesn't repeat */
    .prod-card:nth-child(3n+2) {
      background:
        linear-gradient(rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 0% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        rgba(255, 255, 255, 0.95);
    }

    .prod-card:nth-child(3n+3) {
      background:
        linear-gradient(rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .02) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        rgba(255, 255, 255, 0.95);
    }

    .prod-card:hover {
      transform: translateY(-6px);
      border-color: rgba(15, 158, 104, 0.4);
      box-shadow: 0 20px 40px rgba(15, 158, 104, 0.08), var(--shadow-lg);
    }

    /* Illustration panel */
    .prod-illus {
      height: 220px;
      position: relative;
      display: block;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      padding: 0;
    }

    .prod-illus img,
    .prod-illus svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-height: none;
      max-width: none;
      object-fit: cover;
      object-position: center;
      transition: transform .5s var(--ease);
    }

    .prod-card:hover .prod-illus img,
    .prod-card:hover .prod-illus svg {
      transform: scale(1.06);
    }

    /* Card body */
    .prod-body {
      padding: 22px 24px 24px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .prod-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .prod-num {
      font-family: 'Roboto';
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 2px;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .prod-num::after {
      content: "";
      width: 24px;
      height: 1px;
      background: rgba(15, 158, 104, .3);
    }

    /* Scale indicator — same idiom as .sol-scale, light-surface colors */
    .prod-scale {
      display: inline-flex;
      gap: 3px;
    }

    .prod-scale span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--line-strong);
      transition: box-shadow .3s var(--ease);
    }

    .prod-scale span.on {
      background: var(--accent);
    }

    .prod-card:hover .prod-scale span.on {
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .prod-energy {
      font-family: 'Roboto';
      font-size: clamp(30px, 3vw, 40px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -1.6px;
      background: linear-gradient(135deg, var(--accent) 0%, #6EE7B7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
    }

    .prod-energy .u {
      font-size: .4em;
      letter-spacing: 0;
      margin-left: 4px;
    }

    .prod-model {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.2px;
      line-height: 1.35;
      margin-bottom: 5px;
    }

    .prod-sub {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-dim);
      letter-spacing: .2px;
      margin-bottom: 16px;
    }

    .prod-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }

    .prod-chip {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .7px;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .25);
      padding: 5px 10.5px 5px 18px;
      border-radius: 100px;
      position: relative;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 2px 4px rgba(15, 158, 104, 0.05);
      transition: all .25s var(--ease);
      white-space: nowrap;
    }

    .prod-chip::before {
      content: "";
      position: absolute;
      left: 7.5px;
      width: 5.5px;
      height: 5.5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 5px var(--accent);
    }

    .prod-feats {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 20px;
    }

    .prod-feats li {
      position: relative;
      padding-left: 16px;
      font-size: 13.5px;
      color: var(--text-mute);
      line-height: 1.55;
    }

    .prod-feats li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .55;
    }

    /* Spec drawer toggle */
    .prod-spec-toggle {
      margin-top: auto;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--text-dim);
      background: transparent;
      border: 0;
      border-top: 1px solid var(--line);
      padding: 16px 0 0;
      cursor: pointer;
      transition: color .25s var(--ease);
    }

    .prod-spec-toggle:hover {
      color: var(--accent);
    }

    .prod-spec-toggle .chev {
      flex: none;
      transition: transform .35s var(--ease);
    }

    .prod-spec-toggle:hover .chev {
      transform: scale(1.12);
    }

    /* The spec block stays inside each card as the single source of truth —
       the compare table is built from it and it keeps the figures crawlable
       on this page — but it is never rendered here. Readers go to the
       product's own page for the full table. */
    .prod-specs {
      display: none;
    }

    /* Spec rows: label over value, same typography as .hero-stat.
       Shared by the hidden card blocks and the product detail pages. */
    .spec-row {
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }

    .spec-row:last-child {
      border-bottom: 0;
    }

    .spec-k {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 4px;
    }

    .spec-v {
      display: block;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.5;
    }

    /* Two rows per product are marked as the headline differentiators */
    .spec-row.is-key {
      background: var(--accent-dim);
      border-bottom: 0;
      border-radius: 8px;
      margin: 4px -12px;
      padding: 10px 12px;
    }

    .spec-row.is-key .spec-v {
      color: var(--accent-2);
    }

    /* ── Compare table ── */
    .prod-compare {
      display: none;
    }

    .prod-compare.is-on {
      display: block;
    }

    .prod-compare-scroll {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      -webkit-overflow-scrolling: touch;
    }

    .prod-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      min-width: 760px;
    }

    .prod-table th,
    .prod-table td {
      padding: 13px 18px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--line);
    }

    .prod-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--bg-2);
      /* Model names are case-significant (kWh, not KWH), so the
       header keeps its literal casing — only the row-label
       column is set in caps. */
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2px;
      color: var(--text);
      white-space: nowrap;
      border-bottom: 1px solid var(--line-strong);
    }

    .prod-table thead th .th-energy {
      display: block;
      color: var(--accent-2);
      font-size: 15px;
      letter-spacing: -.3px;
      margin-bottom: 3px;
    }

    .prod-table thead th:first-child {
      left: 0;
      z-index: 3;
      font-size: 10.5px;
      letter-spacing: .9px;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .prod-table tbody th {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--surface);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .9px;
      text-transform: uppercase;
      color: var(--text-dim);
      white-space: nowrap;
      border-right: 1px solid var(--line);
    }

    .prod-table tbody td {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }

    .prod-table tbody tr:last-child th,
    .prod-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .prod-table tbody tr {
      transition: background .2s var(--ease);
    }

    .prod-table tbody tr:hover th {
      background: var(--accent-tint);
      color: var(--accent-2);
    }

    .prod-table tbody tr:hover td {
      background: var(--accent-tint);
      color: var(--text);
    }

    .prod-table tbody tr.is-key th {
      color: var(--accent);
    }

    .prod-table tbody tr.is-key td {
      color: var(--accent-2);
      font-weight: 700;
      background: var(--accent-dim);
    }

    .prod-table tbody tr.is-key:hover td {
      background: var(--accent-tint);
    }

    .prod-compare-note {
      margin-top: 16px;
      font-size: 12.5px;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .prod-compare-note::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .7;
      flex: none;
    }

    /* ============ ABOUT ============
     Rides on .solutions-dark for its surface, glow and grid so the
     brand-story moment shares the exact palette as Our Solutions.
     Only the internal layout is new.
     ============================================================ */
    .about-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(40px, 5vw, 80px);
      align-items: start;
      margin-bottom: 72px;
    }

    .about-statement {
      font-family: 'Roboto';
      font-size: clamp(24px, 2.4vw, 32px);
      font-weight: 700;
      color: #FFFFFF;
      letter-spacing: -.8px;
      line-height: 1.25;
      margin-bottom: 32px;
    }

    .about-statement .accent {
      background: linear-gradient(135deg, #34D399 0%, #6EE7B7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Founding facts — a small spec plate, same idiom as .hero-stats */
    .about-facts {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .about-fact {
      display: flex;
      align-items: baseline;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .about-fact dt {
      flex: none;
      width: 135px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(237, 237, 247, .5);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .about-fact dt svg {
      color: #34D399;
      opacity: .85;
      flex: none;
    }

    .about-fact:last-child {
      border-bottom: 0;
    }

    .about-fact dd {
      font-size: 14px;
      font-weight: 600;
      color: #EDEDF7;
      line-height: 1.5;
    }

    .about-copy p {
      color: rgba(237, 237, 247, .65);
      font-size: 15.5px;
      line-height: 1.85;
      margin-bottom: 20px;
    }

    .about-copy p:last-child {
      margin-bottom: 0;
    }

    .about-copy strong {
      color: #FFFFFF;
      font-weight: 600;
    }

    /* Vision / Mission pair */
    .about-vm {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    .about-vm-card {
      background: linear-gradient(180deg, #14152F 0%, #0F1024 100%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding: 32px 34px;
      position: relative;
      overflow: hidden;
      transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
    }

    .about-vm-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, #4DBB6F 0%, #249446 100%);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .45s var(--ease);
    }

    .about-vm-card:hover {
      transform: translateY(-4px);
      border-color: rgba(36, 148, 70, .45);
      box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    }

    .about-vm-card:hover::before {
      transform: scaleY(1);
    }

    .about-vm-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .about-vm-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #4DBB6F;
      margin-bottom: 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .about-vm-label::after {
      content: "";
      width: 28px;
      height: 1px;
      background: rgba(36, 148, 70, .4);
    }

    .about-vm-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(36, 148, 70, .14);
      border: 1px solid rgba(36, 148, 70, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #34D399;
      flex-shrink: 0;
      transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
    }

    .about-vm-card:hover .about-vm-icon {
      transform: scale(1.08) rotate(3deg);
      background: rgba(52, 211, 153, .22);
      border-color: rgba(52, 211, 153, .5);
      color: #6EE7B7;
    }

    .about-vm-card p {
      color: rgba(237, 237, 247, .72);
      font-size: 15px;
      line-height: 1.75;
    }

    /* Core values */
    .about-values {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .about-value {
      background: linear-gradient(180deg, #14152F 0%, #0F1024 100%);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 24px 22px;
      transition: transform .35s var(--ease), border-color .35s var(--ease);
    }

    .about-value:hover {
      transform: translateY(-3px);
      border-color: rgba(36, 148, 70, .45);
    }

    .about-value-num {
      font-family: 'Roboto';
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #4DBB6F;
      margin-bottom: 12px;
      display: block;
    }

    .about-value-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .about-value-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #34D399;
      flex-shrink: 0;
      transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
    }

    .about-value:hover .about-value-icon {
      transform: translateY(-2px) scale(1.06);
      background: rgba(36, 148, 70, .18);
      border-color: rgba(52, 211, 153, .4);
      color: #6EE7B7;
    }

    .about-value h4 {
      font-family: 'Roboto';
      font-size: 16px;
      font-weight: 700;
      color: #FFFFFF;
      letter-spacing: -.3px;
      margin-bottom: 0;
    }

    .about-value p {
      color: rgba(237, 237, 247, .6);
      font-size: 13px;
      line-height: 1.6;
    }

    /* ============ CAPABILITIES (R&D + delivery) ============
     Light section. Left rail lists R&D focus areas, right side
     walks the four-step project service as a numbered timeline.
     ============================================================ */
    .cap-section {
      background: var(--bg-1);
      position: relative;
      overflow: hidden;
    }

    .cap-section::before {
      content: "";
      position: absolute;
      bottom: -260px;
      left: -160px;
      width: 820px;
      height: 820px;
      background: radial-gradient(circle at center, rgba(15, 158, 104, .08) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
    }

    .cap-section .wrap {
      position: relative;
      z-index: 1;
    }

    .cap-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(32px, 4vw, 64px);
      align-items: stretch;
    }

    .cap-panel {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 100% 0%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 36px;
    }

    .cap-panel:nth-child(2) {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(400px 400px at 0% 100%, rgba(15, 158, 104, .08) 0%, transparent 62%),
        var(--surface);
    }

    .cap-panel-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .cap-panel-label::after {
      content: "";
      width: 28px;
      height: 1px;
      background: rgba(15, 158, 104, .3);
    }

    .cap-panel h3 {
      font-family: 'Roboto';
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.5px;
      margin-bottom: 12px;
      line-height: 1.25;
    }

    .cap-panel>p {
      color: var(--text-mute);
      font-size: 14.5px;
      line-height: 1.7;
      margin-bottom: 26px;
    }

    /* R&D focus list — two columns of ticked items */
    .cap-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
    }

    .cap-list li {
      position: relative;
      padding-left: 26px;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }

    .cap-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 17px;
      height: 17px;
      border-radius: 5px;
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
    }

    .cap-list li::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 6px;
      width: 6px;
      height: 3px;
      border-left: 1.6px solid var(--accent);
      border-bottom: 1.6px solid var(--accent);
      transform: rotate(-45deg);
    }

    /* Four-step delivery timeline */
    .cap-steps {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .cap-step {
      position: relative;
      padding: 0 0 26px 42px;
    }

    .cap-step:last-child {
      padding-bottom: 0;
    }

    /* Connector rail between step markers */
    .cap-step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 28px;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, rgba(15, 158, 104, .35), rgba(15, 158, 104, .06));
    }

    .cap-step-num {
      position: absolute;
      left: 0;
      top: 0;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .cap-step h4 {
      font-family: 'Roboto';
      font-size: 15.5px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.2px;
      margin-bottom: 6px;
      padding-top: 4px;
    }

    .cap-step p {
      color: var(--text-mute);
      font-size: 13.5px;
      line-height: 1.65;
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width:960px) {
      .site-header-inner {
        padding: 0 20px;
      }

      .nav {
        padding: 22px 0;
      }

      .site-header.stuck .nav {
        padding: 16px 0;
      }

      .hero {
        padding: 130px 0 80px;
      }

      .hero-wrap {
        padding: 0 20px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }

      .hero-copy {
        max-width: 100%;
      }

      .hero-product {
        aspect-ratio: 3 / 4;
        max-height: 520px;
        margin: 0 auto;
      }

      .hero-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding-top: 24px;
      }

      .product-tag.tag-top {
        right: 0;
      }

      .product-tag.tag-bottom {
        left: 0;
      }

      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 48px;
      }

      .footer-hero {
        margin-bottom: 40px;
        padding-bottom: 32px;
      }

      .footer-tagline {
        font-size: 14.5px;
        margin-top: 20px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .bess-scene {
        aspect-ratio: 4 / 3;
        min-height: 280px;
        margin-bottom: 40px;
      }

      .bess-steps {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .bess-step:not(:last-child)::after {
        display: none;
      }

      .bess-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .bess-features {
        grid-template-columns: repeat(2, 1fr);
      }

      .info-card {
        padding: 28px;
      }

      .bess-phase {
        top: 14px;
        right: 14px;
        padding: 6px 12px;
        font-size: 10px;
      }

      .grid-4,
      .sol-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .grid-3 {
        grid-template-columns: 1fr;
      }

      .why-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 14px;
      }

      .why-tile-1,
      .why-tile-2,
      .why-tile-3,
      .why-tile-4 {
        grid-column: span 1;
        grid-row: auto;
      }

      .why-tile {
        padding: 28px;
      }

      .why-tile-4 {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 28px;
      }

      .nav-links {
        display: none;
      }

      .nav-cta {
        display: none;
      }

      /* moved into mobile menu */
      .nav-hamburger {
        display: inline-flex;
      }

      .nav {
        grid-template-columns: 1fr auto;
      }

      /* logo + hamburger only */
      section {
        padding: 80px 0;
      }

      .section-head {
        margin-bottom: 52px;
      }

      .cta-section {
        padding: 40px 0 60px;
      }

      .cta-wrap {
        padding: 0 12px;
      }

      .cta-banner {
        border-radius: 24px;
        min-height: auto;
      }

      .cta-banner::after {
        inset: 16px;
        border-radius: 16px;
      }

      .cta-content {
        text-align: center;
      }

      .cta-eyebrow {
        margin-bottom: 24px;
      }

      .cta-banner p {
        margin-bottom: 36px;
      }

      .cta-trust {
        margin-top: 40px;
        gap: 20px;
      }

      .cta-contact {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 36px;
        padding-top: 28px;
      }

      .prod-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      .prod-grid.is-single {
        grid-template-columns: minmax(0, 1fr);
      }

      .prod-controls {
        margin-bottom: 24px;
      }

      .prod-compare-btn {
        width: 100%;
        justify-content: center;
      }

      .prod-illus {
        height: 200px;
      }

      .prod-body {
        padding: 20px;
      }

      .prod-table {
        min-width: 640px;
      }



      .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 48px;
      }

      .about-vm {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .about-vm-card {
        padding: 28px;
      }

      .about-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .cap-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .cap-panel {
        padding: 28px;
      }

      .wrap {
        padding: 0 20px;
      }
    }

    @media (max-width:520px) {

      .grid-4,
      .bess-features,
      .sol-grid,
      .prod-grid {
        grid-template-columns: 1fr;
      }

      h1 {
        font-size: 40px;
        letter-spacing: -1.4px;
      }

      .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px 0;
      }

      .hero-stat {
        padding: 12px 0;
      }

      .hero-stat+.hero-stat::before {
        display: none;
      }

      .hero-actions {
        margin-bottom: 40px;
      }

      .product-tag {
        display: none;
      }

      .stat-num {
        font-size: 24px;
      }

      .btn-primary,
      .btn-outline {
        padding: 13px 20px;
        font-size: 14px;
      }

      .trust-inner {
        gap: 20px;
      }

      .trust-logos {
        gap: 32px;
      }

      /* Tabs become a single scrollable rail rather than wrapping */
      .prod-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .prod-tab {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 13px;
      }

      .prod-energy {
        font-size: 34px;
      }

      .prod-table {
        min-width: 560px;
      }

      .prod-table th,
      .prod-table td {
        padding: 11px 14px;
      }













      .about-values {
        grid-template-columns: 1fr;
      }

      .about-fact {
        flex-direction: column;
        gap: 4px;
      }

      .about-fact dt {
        width: auto;
      }

      .cap-list {
        grid-template-columns: 1fr;
      }
    }

    /* ============ REDUCED MOTION ============
     Kill continuous/looping animations. Scroll-reveals still
     play but degrade to a simple fade (no travel, no scale) —
     users who prefer reduced motion still see content appear
     smoothly rather than snapping in. */
    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }

      .reveal,
      .reveal-stagger>* {
        transform: none !important;
        transition: opacity .5s ease !important;
      }
    }

    /* ============ AMBIENT GLOW BLOBS ============ */
    .ambient-glows {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.65;
    }

    .glow-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(140px);
      mix-blend-mode: multiply;
      will-change: transform;
    }

    .glow-1 {
      top: -10%;
      right: -10%;
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.05) 70%, transparent 100%);
      animation: float-glow-1 25s ease-in-out infinite alternate;
    }

    .glow-2 {
      top: 40%;
      left: -15%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, rgba(59, 130, 246, 0.04) 70%, transparent 100%);
      animation: float-glow-2 30s ease-in-out infinite alternate;
    }

    .glow-3 {
      bottom: -10%;
      right: 10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.03) 70%, transparent 100%);
      animation: float-glow-3 28s ease-in-out infinite alternate;
    }

    @keyframes float-glow-1 {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-80px, 60px) scale(1.1); }
      100% { transform: translate(50px, -40px) scale(0.95); }
    }

    @keyframes float-glow-2 {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(100px, -80px) scale(0.9); }
      100% { transform: translate(-60px, 90px) scale(1.15); }
    }

    @keyframes float-glow-3 {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-90px, -70px) scale(1.12); }
      100% { transform: translate(80px, 50px) scale(0.9); }
    }

    /* Stretch the "View full details" link over the whole card so the
       entire tile is clickable, while the markup stays a plain anchor. */
    .prod-spec-toggle::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .prod-card:hover .prod-spec-toggle {
      color: var(--accent);
    }

    /* ============================================================
       PRODUCT DETAIL PAGE
       Used by products/*.html. Same tokens and card language as the
       index — nothing new is introduced, the page just arranges the
       existing pieces around a real product photograph.
       ============================================================ */
    .pd-main {
      padding-top: 96px;
    }

    /* ── Breadcrumb ── */
    .pd-crumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 22px 0 0;
      font-size: 12.5px;
      color: var(--text-dim);
    }
    .pd-crumb a {
      color: var(--text-mute);
      font-weight: 600;
      transition: color .25s var(--ease);
    }
    .pd-crumb a:hover {
      color: var(--accent);
    }
    .pd-crumb svg {
      flex: none;
      opacity: .45;
    }
    .pd-crumb [aria-current] {
      color: var(--text);
      font-weight: 600;
    }

    /* ── Hero ── */
    .pd-hero {
      position: relative;
      overflow: hidden;
      padding: 40px 0 72px;
    }
    .pd-hero::before {
      content: "";
      position: absolute;
      top: -240px;
      right: -180px;
      width: 780px;
      height: 780px;
      background: radial-gradient(circle at center, rgba(15, 158, 104, .09) 0%, transparent 62%);
      filter: blur(80px);
      pointer-events: none;
    }
    .pd-hero .wrap {
      position: relative;
      z-index: 1;
    }
    .pd-hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: clamp(32px, 5vw, 72px);
      align-items: center;
    }

    .pd-series {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
      padding: 7px 15px;
      border-radius: 100px;
      margin-bottom: 22px;
    }
    .pd-series::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
    }

    .pd-hero h1 {
      font-size: clamp(30px, 4vw, 46px);
      letter-spacing: -1.6px;
      line-height: 1.08;
      margin-bottom: 14px;
    }
    .pd-energy {
      font-family: 'Roboto';
      font-size: clamp(38px, 5vw, 60px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -2px;
      background: linear-gradient(135deg, var(--accent) 0%, #6EE7B7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 20px;
    }
    .pd-energy .u {
      font-size: .4em;
      letter-spacing: 0;
      margin-left: 6px;
    }
    .pd-lede {
      font-size: 16px;
      color: var(--text-mute);
      line-height: 1.75;
      max-width: 46ch;
      margin-bottom: 26px;
    }
    .pd-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 30px;
    }

    /* Headline figures under the copy */
    .pd-keyfacts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      margin-bottom: 30px;
    }
    .pd-keyfact {
      padding: 18px 20px 0 0;
      position: relative;
    }
    .pd-keyfact+.pd-keyfact {
      padding-left: 22px;
    }
    .pd-keyfact+.pd-keyfact::before {
      content: "";
      position: absolute;
      left: 0;
      top: 20px;
      bottom: 4px;
      width: 1px;
      background: var(--line);
    }
    .pd-keyfact .k {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 6px;
    }
    .pd-keyfact .v {
      display: block;
      font-family: 'Roboto';
      font-size: 19px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.4px;
    }

    .pd-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* ── Product photograph ── */
    .pd-shot {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--line);
      background:
        radial-gradient(90% 80% at 50% 0%, var(--accent-dim) 0%, transparent 65%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
      box-shadow: var(--shadow-lg);
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pd-shot img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: clamp(18px, 3vw, 38px);
      border-radius: calc(24px + clamp(18px, 3vw, 38px) / 2);
    }
    .pd-shot-tag {
      position: absolute;
      left: 18px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-mute);
    }
    .pd-shot-tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    /* ── Highlights ── */
    .pd-highlights {
      background: var(--bg-1);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .pd-highlight-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }
    .pd-highlight {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 26px 28px;
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .pd-highlight:hover {
      transform: translateY(-3px);
      border-color: rgba(15, 158, 104, .3);
      box-shadow: var(--shadow-md);
    }
    .pd-highlight-num {
      flex: none;
      width: 30px;
      height: 30px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-tint);
      border: 1px solid rgba(15, 158, 104, .22);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
    }
    .pd-highlight p {
      font-size: 14.5px;
      color: var(--text);
      line-height: 1.65;
      font-weight: 500;
    }

    /* ── Specification ── */
    .pd-specs-panel {
      background:
        linear-gradient(rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(11, 18, 32, .028) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(500px 500px at 100% 0%, rgba(15, 158, 104, .07) 0%, transparent 62%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: clamp(24px, 3vw, 38px);
    }
    /* Columns rather than one long list, so a 25-row table reads in
       three short passes instead of a single tall scroll. */
    .pd-specs {
      columns: 3;
      column-gap: 40px;
    }
    .pd-specs .spec-row {
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      margin: 0;
      padding: 11px 0;
    }
    .pd-specs .spec-row.is-key {
      padding: 11px 12px;
      margin: 4px -12px;
    }
    .pd-specs-note {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-size: 12.5px;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pd-specs-note::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .7;
      flex: none;
    }

    /* ── Related products ── */
    .pd-related {
      background: var(--bg-1);
      border-top: 1px solid var(--line);
    }
    .pd-related-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .pd-rel {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .pd-rel:hover {
      transform: translateY(-4px);
      border-color: rgba(15, 158, 104, .3);
      box-shadow: var(--shadow-md);
    }
    .pd-rel-shot {
      aspect-ratio: 4 / 3;
      background:
        radial-gradient(80% 90% at 50% 0%, var(--accent-dim) 0%, transparent 65%),
        var(--surface-2);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .pd-rel-shot img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 14px;
      transition: transform .45s var(--ease);
    }
    .pd-rel:hover .pd-rel-shot img {
      transform: scale(1.04);
    }
    .pd-rel-body {
      padding: 18px 20px 20px;
    }
    .pd-rel-energy {
      font-family: 'Roboto';
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.8px;
      color: var(--accent-2);
      margin-bottom: 4px;
    }
    .pd-rel-energy .u {
      font-size: .5em;
      margin-left: 3px;
    }
    .pd-rel-model {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-dim);
    }
    .pd-rel-model a::after {
      content: "";
      position: absolute;
      inset: 0;
    }
    .pd-rel-model a {
      color: inherit;
    }
    .pd-rel.is-current {
      border-color: rgba(15, 158, 104, .4);
      background: var(--accent-tint);
    }
    .pd-rel.is-current .pd-rel-shot {
      background: transparent;
    }

    @media (max-width:960px) {
      .pd-main {
        /* The floating header pill is ~106px tall at this width, taller
           than the desktop bar — 76px let the breadcrumb slide under it. */
        padding-top: 112px;
      }
      .pd-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .pd-hero {
        padding: 28px 0 52px;
      }
      .pd-specs {
        columns: 2;
        column-gap: 30px;
      }
      .pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .pd-highlight-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width:520px) {
      .pd-specs {
        columns: 1;
      }
      .pd-related-grid {
        grid-template-columns: 1fr;
      }
      .pd-keyfacts {
        grid-template-columns: 1fr;
      }
      .pd-keyfact+.pd-keyfact {
        padding-left: 0;
        border-top: 1px solid var(--line);
      }
      .pd-keyfact+.pd-keyfact::before {
        display: none;
      }
      .pd-actions .btn-primary,
      .pd-actions .btn-outline {
        width: 100%;
        justify-content: center;
      }
    }