/* ============================================================
   Ensonergy - stealth-mode site
   Edit design tokens below; --volt is the accent everywhere.
   ============================================================ */

:root {
  --bg: #05070e;
  --bg-soft: #070a14;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-strong: rgba(255, 255, 255, 0.055);
  --line: rgba(233, 238, 247, 0.09);
  --line-strong: rgba(233, 238, 247, 0.18);
  --ink: #e9eef7;
  --muted: #93a0b5;
  --muted-dim: #64708a;
  --volt: #2fd6a3;
  --volt-bright: #8ff5cd;
  --volt-deep: #12a57b;
  --volt-glow: rgba(47, 214, 163, 0.35);
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  /* width of the page gutters on wide screens; the right one holds .viz-rail */
  --rail-l: 44px;
  --rail-r: 330px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--volt); color: #04241a; }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 4px; }

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
}

/* ---------- background ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(900px 480px at 72% -8%, rgba(47, 214, 163, 0.09), transparent 65%),
    radial-gradient(700px 500px at -10% 30%, rgba(47, 214, 163, 0.045), transparent 60%),
    linear-gradient(rgba(233, 238, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 238, 247, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, black 30%, transparent 78%);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(4, 7, 14, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
  transition: height 0.3s ease;
}

.nav.scrolled .nav-inner { height: 74px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-bolt {
  position: relative;
  display: block;
  width: 30px;
  height: 41px;
  flex-shrink: 0;
}

.brand-bolt img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bolt-ghost {
  /* colored outline render of the mark - always visible; the charge fills it */
  opacity: 1;
}

.bolt-live {
  clip-path: inset(96% 0 0 0);
  transition: clip-path 0.2s ease-out;
  filter: drop-shadow(0 0 6px rgba(47, 214, 163, 0.4));
}

body.is-full .bolt-live { filter: drop-shadow(0 0 10px rgba(47, 214, 163, 0.75)); }

.brand-word {
  display: block;
  height: 21px;
  width: auto;
}

.nav-links { display: flex; gap: 30px; }

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  transition: color 0.25s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--volt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

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

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(47, 214, 163, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(47, 214, 163, 0); }
}

@media (max-width: 560px) {
  .nav-links { display: none; }
}

/* ---------- scroll stage: sticky brand + sticky lattice ---------- */

.scroll-stage {
  position: relative;
  padding: 118px 0 96px;
}

/* Same geometry as .container so the hero and technology block line up
   with every section below the marquee - one left margin for the whole page. */
.stage-inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
}

/* The lattice rail is pinned to the viewport for the whole page, so it keeps
   lithiating all the way to the footer. The brand charges in the nav only. */
.viz-rail { display: none; }

.hero-block { padding-top: 6px; }

.tech-block { margin-top: clamp(90px, 12vh, 150px); }

.stage-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.hint-rule { width: 26px; height: 1px; background: rgba(47, 214, 163, 0.5); flex: none; }

.halo {
  position: absolute;
  inset: -46px;
  pointer-events: none;
  background: radial-gradient(ellipse at 55% 38%, rgba(47, 214, 163, 0.075), transparent 62%);
}

/* --- wide screens: both rails pinned in the viewport gutters --- */
@media (min-width: 1200px) {
  body { padding-left: var(--rail-l); padding-right: var(--rail-r); }

  /* The page content stops short of the right gutter, but the bar spans the
     full window so the nav links reach the far right and align with the
     pinned lattice below them. That ties the animation into the page instead
     of leaving it floating in an empty margin. The brand keeps the page's
     left margin, so it still lines up with everything below. */
  .nav { padding-left: var(--rail-l); padding-right: 0; }
  .nav-inner { max-width: none; padding-right: 24px; }

  .viz-rail {
    display: block;
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 302px;
    z-index: 40;
  }
}

/* --- narrower screens: no room for a pinned rail, so the lattice runs inline
       between the hero and Technology, and is dragged rather than scrolled --- */
@media (max-width: 1199px) {
  .viz-rail {
    display: block;
    position: relative;   /* contain .halo, which is absolutely positioned */
    max-width: 380px;
    margin: 56px auto 0;
  }

  /* The lattice no longer follows scroll at this size, so the cue would lie. */
  .stage-hint { display: none; }

  /* The bar is fixed at every width, but here content scrolls under it
     immediately, so keep it opaque from the start instead of waiting for
     the .scrolled class. */
  .nav {
    background: rgba(4, 7, 14, 0.92);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: var(--line);
  }

  .tech-block { margin-top: 64px; }
}

@media (max-width: 900px) {
  .viz-rail { max-width: 100%; }
  .tech-block { margin-top: 56px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 130px 0 90px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px at var(--mx, 70%) var(--my, 30%), rgba(47, 214, 163, 0.06), transparent 65%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--volt);
  animation: ping 2.2s ease-out infinite;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 22px 0;
}

.accent {
  background: linear-gradient(100deg, var(--volt-bright), var(--volt) 55%, var(--volt-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 560px;
}

.cta-row {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.btn-primary {
  background: var(--volt);
  color: #04241a;
  box-shadow: 0 4px 24px rgba(47, 214, 163, 0.22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(47, 214, 163, 0.38);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: rgba(47, 214, 163, 0.55);
  background: rgba(47, 214, 163, 0.06);
}

/* ---------- hero battery ---------- */

.hero-viz {
  position: relative;
  justify-self: center;
}

.big-batt { position: relative; width: 216px; }

.bb-glow {
  position: absolute;
  inset: -46px;
  background: radial-gradient(closest-side, rgba(47, 214, 163, 0.3), transparent 72%);
  opacity: 0.3;
  z-index: 0;
  transition: opacity 0.3s ease;
}

.bb-cap {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 17px;
  margin: 0 auto 7px;
  border-radius: 9px 9px 3px 3px;
  background: rgba(233, 238, 247, 0.16);
}

.bb-shell {
  position: relative;
  z-index: 1;
  height: 330px;
  border: 2px solid var(--line-strong);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.4);
}

.bb-inner {
  position: absolute;
  inset: 9px;
  border-radius: 21px;
  overflow: hidden;
}

.bb-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4%;
  background: linear-gradient(180deg, var(--volt-bright), var(--volt) 34%, var(--volt-deep));
  box-shadow: 0 0 40px rgba(47, 214, 163, 0.45);
  transition: height 0.25s ease-out;
  overflow: hidden;
}

.bb-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 14px 3px rgba(220, 255, 138, 0.85);
}

.bb-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.13) 0 12px, transparent 12px 24px);
  animation: stripes 1.15s linear infinite;
}

@keyframes stripes {
  to { transform: translateX(34px); }
}

.bubble {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: bubble 3.4s ease-in infinite;
}

.bu1 { left: 28%; animation-delay: 0s; }
.bu2 { left: 55%; animation-delay: 1.1s; width: 4px; height: 4px; }
.bu3 { left: 74%; animation-delay: 2s; }

@keyframes bubble {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.8; }
  100% { transform: translateY(-280px); opacity: 0; }
}

.bb-ticks { position: absolute; inset: 0; pointer-events: none; }

.bb-ticks i {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1px;
  background: rgba(233, 238, 247, 0.09);
}

.bb-ticks i:nth-child(1) { bottom: 20%; }
.bb-ticks i:nth-child(2) { bottom: 40%; }
.bb-ticks i:nth-child(3) { bottom: 60%; }
.bb-ticks i:nth-child(4) { bottom: 80%; }

.bb-readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  z-index: 2;
}

.bb-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.3s ease;
}

.bb-num em {
  font-style: normal;
  font-size: 26px;
  margin-left: 2px;
  color: var(--volt);
  transition: color 0.3s ease;
}

.bb-hint {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}

.bb-readout.inv .bb-num,
.bb-readout.inv .bb-num em { color: #04241a; }
.bb-readout.inv .bb-hint { color: rgba(4, 36, 26, 0.75); }

.bb-caption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--muted-dim);
}

body.is-full .bb-fill { box-shadow: 0 0 60px rgba(47, 214, 163, 0.75); }
body.is-full .bb-cap { background: var(--volt); box-shadow: 0 0 18px var(--volt-glow); }

/* electrons drifting around the battery */

.e {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 12px 2px rgba(47, 214, 163, 0.55);
  opacity: 0.5;
  animation: drift 14s ease-in-out infinite;
}

.e1 { top: 6%; left: -14%; animation-duration: 13s; }
.e2 { top: 24%; right: -18%; animation-duration: 17s; animation-delay: -4s; }
.e3 { top: 52%; left: -22%; animation-duration: 15s; animation-delay: -8s; width: 4px; height: 4px; }
.e4 { top: 74%; right: -12%; animation-duration: 12s; animation-delay: -2s; }
.e5 { top: 90%; left: -6%; animation-duration: 18s; animation-delay: -10s; width: 4px; height: 4px; }
.e6 { top: -4%; right: -4%; animation-duration: 16s; animation-delay: -6s; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(16px, -24px); }
  50% { transform: translate(-10px, -6px); }
  75% { transform: translate(10px, 16px); }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  animation: cue 2.4s ease-in-out infinite;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.scroll-cue:hover { color: var(--volt); border-color: rgba(47, 214, 163, 0.5); }

@keyframes cue {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

@media (max-height: 700px) {
  .scroll-cue { display: none; }
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  padding: 15px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 30s linear infinite;
}

.mq-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}

.mq-group span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8894a8;
  white-space: nowrap;
}

.mq-group i {
  font-style: normal;
  font-size: 8px;
  color: rgba(233, 238, 247, 0.22);
}

.mq-group .mq-red {
  color: var(--volt);
  background: rgba(47, 214, 163, 0.07);
  border: 1px dashed rgba(47, 214, 163, 0.4);
  border-radius: 5px;
  padding: 4px 12px;
}

@keyframes marq {
  to { transform: translateX(-50%); }
}

/* ---------- sections ---------- */

.section { padding: 112px 0; }

.section-head { max-width: 730px; margin-bottom: 56px; }

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: 16px;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(47, 214, 163, 0.55);
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.h2-muted { color: var(--muted-dim); }

.section-lede {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- tech cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 214, 163, 0.35);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
}

.card-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(47, 214, 163, 0.09);
  border: 1px solid rgba(47, 214, 163, 0.28);
  color: var(--volt);
  margin-bottom: 20px;
}

.card-icon svg { width: 20px; height: 20px; }

.card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--muted);
}

.card-redacted {
  border-style: dashed;
  border-color: rgba(47, 214, 163, 0.3);
  background: linear-gradient(180deg, rgba(47, 214, 163, 0.04), rgba(255, 255, 255, 0.012));
}

.redacted-lines {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}

.redacted {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 3px 10px;
  border-radius: 4px;
  color: transparent;
  background: repeating-linear-gradient(90deg, #191f2e 0 9px, #131826 9px 18px);
  user-select: none;
  cursor: help;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.25s ease;
}

.redacted::after {
  content: attr(data-reveal);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--volt);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.redacted:hover { background: #10141f; }
.redacted:hover::after { opacity: 1; }

.card-note {
  margin-top: 16px;
  font-size: 12.5px !important;
  color: var(--muted-dim) !important;
}

/* ---------- stats ---------- */

.stats-wrap {
  border-block: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 74px 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.stat { border-left: 1px solid var(--line); padding-left: 30px; }
.stat:first-child { border-left: none; padding-left: 0; }

.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--volt);
  text-shadow: 0 0 32px rgba(47, 214, 163, 0.35);
}

.stat p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 270px;
}

/* ---------- why join ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 48px;
}

.why-num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--volt);
}

.why-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.why-item h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-top: 12px;
  letter-spacing: -0.01em;
}

.why-item p:last-child {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- careers ---------- */

.jobs { margin-top: 6px; }

.job {
  display: grid;
  grid-template-columns: 1fr auto 26px;
  gap: 26px;
  align-items: center;
  padding: 26px 8px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease;
}

.job:last-of-type { border-bottom: 1px solid var(--line); }

.job:hover { background: linear-gradient(90deg, rgba(47, 214, 163, 0.045), transparent 70%); }

.job h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.job:hover h3 { color: var(--volt); }

.job-main p {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 560px;
}

.job-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tag {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.tag-team {
  color: var(--volt);
  border-color: rgba(47, 214, 163, 0.35);
  background: rgba(47, 214, 163, 0.06);
}

.job-arrow {
  color: var(--muted-dim);
  transition: transform 0.25s ease, color 0.25s ease;
}

.job:hover .job-arrow {
  color: var(--volt);
  transform: translate(3px, -3px);
}

/* a second contact line sits tight under the first */
.careers-note + .careers-note { margin-top: 8px; }

.careers-note {
  margin-top: 30px;
  font-size: 14.5px;
  color: var(--muted);
}

.careers-note a { color: var(--volt); text-decoration: none; }
.careers-note a:hover { text-decoration: underline; }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); margin-top: 40px; }

.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  padding-block: 52px 20px;
}

.foot-brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.foot-mark { height: 26px; width: auto; }
.foot-word { height: 13px; width: auto; opacity: 0.92; }

.foot-tag { margin-top: 10px; font-size: 13.5px; color: var(--muted-dim); }

.foot-col-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 9px;
}

.foot-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.foot-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  transition: color 0.25s ease;
}

.foot-links a:hover { color: var(--volt); }

.foot-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 18px 36px;
  font-size: 12.5px;
  color: var(--muted-dim);
}

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.visible { opacity: 1; transform: none; }

.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }

.cards .card:nth-child(2) { transition-delay: 0.08s; }
.cards .card:nth-child(3) { transition-delay: 0.16s; }
.cards .card:nth-child(4) { transition-delay: 0.24s; }

.why-grid .why-item:nth-child(2) { transition-delay: 0.08s; }
.why-grid .why-item:nth-child(3) { transition-delay: 0.16s; }
.why-grid .why-item:nth-child(4) { transition-delay: 0.24s; }

.jobs .job:nth-child(2) { transition-delay: 0.06s; }
.jobs .job:nth-child(3) { transition-delay: 0.12s; }
.jobs .job:nth-child(4) { transition-delay: 0.18s; }
.jobs .job:nth-child(5) { transition-delay: 0.24s; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { padding-top: 120px; }
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-viz { justify-self: center; }
  .big-batt { width: 178px; }
  .bb-shell { height: 268px; }
  .bb-num { font-size: 46px; }
  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats { grid-template-columns: 1fr; gap: 32px; }
  .stat { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .stat:first-child { border-top: none; padding-top: 0; }
  .job { grid-template-columns: 1fr; gap: 14px; padding: 24px 4px; }
  .job-tags { justify-content: flex-start; }
  .job-arrow { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .e, .bubble, .pulse-dot, .scroll-cue, .bb-fill::after {
    animation: none;
  }
  .bb-fill { transition: none; }
}