.section.battery-hero { background: #ffffff; background-image: none; overflow: hidden; padding-top: 194px; }
.battery-hero .hero-container { padding-top: 0; }
.battery-hero .hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 0; align-items: center; min-height: 720px; }
.battery-hero .hero-text-wrapper { position: relative; z-index: 2; padding: 20px 0 30px; }
.battery-hero h1.heading { margin: 0 0 28px; font: 650 clamp(60px, 5.55vw, 92px)/1.015 Inter, sans-serif; letter-spacing: -.062em; color: #172a30; }
.battery-hero h1 .hero-span { color: var(--battery-essentials-green); }
.battery-hero .text-box { max-width: 520px; }
.battery-hero .paragraph { margin: 0; font-size: 19px; line-height: 1.55; color: #555; }
.battery-hero .hero-buttons-wrapper { gap: 14px; margin-top: 28px; }
.battery-hero .hero-buttons-wrapper .button { font-size: 16px; padding: 17px 26px; }
.battery-hero .social-proof { margin-top: 54px; }
.battery-stage { min-width: 0; width: calc(100% + 105px); height: 740px; margin-left: -20px; position: relative; align-self: center; }
.battery-canvas { width: 100%; height: 100%; display: block; }
.battery-canvas[hidden], .battery-fallback[hidden], .battery-controls[hidden] { display: none; }
.battery-fallback { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.battery-controls { position: absolute; right: 12%; bottom: 26px; display: flex; gap: 8px; z-index: 3; }
.battery-controls button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ddd; background: #ffffffcc; color: #666; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.battery-controls button:hover { background: #f5f5f5; color: var(--battery-essentials-green); }
.battery-play { display: none; }
.battery-stage[data-paused="true"] .battery-pause { display: none; }
.battery-stage[data-paused="true"] .battery-play { display: block; }
[data-page-id="home"] .hero-grid { position: relative; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); min-height: 960px; }
[data-page-id="home"] .hero-text-wrapper { align-self: start; padding-top: 32px; }
[data-page-id="home"] .battery-hero h1.heading { width: 115%; max-width: 880px; font-size: clamp(96px, 10.1vw, 152px); line-height: .95; letter-spacing: -.065em; font-weight: 650; margin-bottom: 36px; }
[data-page-id="home"] .battery-stage { position: absolute; z-index: 3; top: -36px; right: -40px; width: 61%; height: 900px; margin: 0; pointer-events: none; }
[data-page-id="home"] .battery-controls { right: 26%; bottom: 22px; pointer-events: auto; }
[data-page-id="home"] .hero-buttons-wrapper { position: relative; z-index: 4; }
[data-page-id="business"] .battery-hero h1.heading { font-size: clamp(50px, 4.4vw, 73px); line-height: 1.06; }
@media (max-width: 1199px) {
  .section.battery-hero { padding-top: 174px; }
  .battery-hero .hero-grid { min-height: 650px; }
  .battery-hero h1.heading { font-size: clamp(56px, 6.1vw, 73px); }
  .battery-stage { height: 660px; width: calc(100% + 45px); margin-left: 0; }
  .battery-controls { bottom: 34px; right: 12%; }
  [data-page-id="home"] .hero-grid { min-height: 910px; }
  [data-page-id="home"] .battery-hero h1.heading { font-size: clamp(78px, 10.5vw, 126px); }
  [data-page-id="home"] .battery-stage { top: -26px; right: -70px; width: 60%; height: 850px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  [data-page-id="home"] .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  [data-page-id="home"] .hero-text-wrapper { display: contents; }
  [data-page-id="home"] .battery-hero h1.heading { width: 100%; grid-row: 1; }
  [data-page-id="home"] .text-box { grid-row: 2; }
  [data-page-id="home"] .hero-buttons-wrapper { grid-row: 3; }
  [data-page-id="home"] .battery-stage { position: relative; top: auto; right: auto; grid-row: 4; width: 100%; height: 850px; margin: 28px 0 0; }
}
@media (max-width: 767px) {
  .section.battery-hero { padding-top: 156px; }
  .battery-hero .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .battery-hero .hero-text-wrapper { display: contents; }
  .battery-hero h1.heading { grid-row: 1; font-size: clamp(48px, 10.5vw, 76px); letter-spacing: -.055em; line-height: 1.04; margin-bottom: 0; }
  .battery-hero .text-box { grid-row: 2; max-width: 540px; margin-top: 24px; }
  .battery-hero .hero-buttons-wrapper { grid-row: 3; margin-top: 24px; }
  .battery-hero .paragraph { font-size: 16px; line-height: 1.6; }
  .battery-stage { grid-row: 4; height: clamp(400px, 110vw, 610px); width: calc(100% + 24px); margin: 0 -12px; }
  .battery-hero .social-proof { margin-top: 32px; }
  .battery-controls { right: 20px; bottom: 36px; }
  [data-page-id="business"] .battery-hero h1.heading { font-size: clamp(42px, 8vw, 64px); }
  [data-page-id="home"] .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  [data-page-id="home"] .battery-hero h1.heading { width: 100%; max-width: 100%; font-size: clamp(64px, 13.5vw, 100px); line-height: .96; letter-spacing: -.055em; margin-bottom: 0; }
  [data-page-id="home"] .battery-stage { position: relative; top: auto; right: auto; grid-row: 4; width: calc(100% + 36px); height: clamp(450px, 125vw, 740px); margin: 18px -18px 0; }
  [data-page-id="home"] .battery-controls { right: 24px; bottom: 36px; }
}
@media (max-width: 379px) {
  .battery-hero h1.heading { font-size: 44px; }
  .battery-hero .hero-buttons-wrapper { flex-wrap: wrap; }
  .battery-hero .hero-buttons-wrapper .button { padding: 14px 18px; font-size: 14px; }
  .battery-stage { height: 400px; }
  [data-page-id="home"] .battery-hero h1.heading { font-size: clamp(52px, 16vw, 59px); }
  [data-page-id="home"] .battery-stage { height: 450px; }
}

@media (min-width: 1200px) { [data-page-id="business"] .battery-stage { height: 830px; } }
@media (min-width: 768px) and (max-width: 1199px) { [data-page-id="business"] .battery-stage { height: 740px; } }