/* Home only. The existing navigation, commercial text and forms are retained. */
.hero-title-mobile { display: none; }
.hero.hero-electric,
.hero.hero-electric * {
  -webkit-user-select: none;
  user-select: none;
}
.hero.hero-electric {
  isolation: isolate;
  background: #030303;
  min-height: 100vh;
  min-height: 100svh;
}
.hero-electric .electric-environment {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #030303;
}
.electric-environment canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease;
}
.hero-electric[data-electric-state="ready"] canvas { opacity: 1; visibility: visible; }
.electric-fallback {
  position: absolute;
  inset: 0;
  opacity: 1;
  background: radial-gradient(ellipse at 70% 33%, #39070955, transparent 40%);
  transition: opacity .8s ease;
}
.electric-fallback svg { width: 100%; height: 100%; visibility: hidden; }
.hero-electric[data-electric-state="fallback"] .electric-fallback svg { visibility: visible; }
.hero-electric[data-electric-state="ready"] .electric-fallback { opacity: 0; }
.hero-electric::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, #03030338 68%, #030303 100%),
    radial-gradient(ellipse at 13% 77%, #030303dd 0%, #03030366 30%, transparent 62%);
}
.hero-electric .hero-content {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--site-header-height) + clamp(150px, 22vh, 280px));
  padding-bottom: clamp(34px, 5vh, 72px);
  pointer-events: none;
}
.hero-electric .hero-copy { max-width: 780px; }
.hero-electric .display {
  max-width: 780px;
  font-size: clamp(36px, 3.5vw, 64px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.hero-electric .hero-copy p {
  max-width: 560px;
  margin-top: 24px;
  font-size: clamp(16px, 1.1vw, 20px);
  color: #c3c1c1;
}
.hero-electric .hero-actions { margin-top: 28px; }
.hero-electric .hero-actions a { pointer-events: auto; }
.hero-electric .btn-outline-light {
  background: #06060680;
  border-color: #ffffff40;
  backdrop-filter: blur(8px);
}
.hero-electric .btn-outline-light:hover { background: #fff; }
.hero-electric .hero-meta {
  margin-top: clamp(30px, 4.5vh, 56px);
  border-color: #ffffff24;
}
.hero-electric .hero-meta div { padding-top: 18px; }
.hero-electric .hero-meta strong { font-weight: 600; color: #e4e2e2; }
.hero-electric .hero-meta span { color: #aaa7a7; }
.electric-controls {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  top: calc(var(--site-header-height) + 20px);
  display: flex;
  gap: 8px;
}
.electric-control {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  color: #bcb9b9;
  background: #03030388;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.hero-electric[data-electric-state="ready"] .electric-control { display: inline-flex; }
.hero-electric .electric-control[hidden] { display: none; }
.electric-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.electric-grip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 92px;
  height: 72px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero-electric[data-electric-state="ready"] .electric-grip { display: block; }
.electric-grip:focus-visible { outline: 1px solid #fa555b; outline-offset: 3px; background: #e31c2610; }
.electric-grip.is-pointer-focus:focus-visible { outline: none; background: transparent; }
.electric-grip.is-dragging, .hero-electric.is-cable-dragging { cursor: grabbing; }
.electric-grip[aria-disabled="true"] { cursor: default; }
.electric-control:hover { color: #fff; border-color: #ffffff66; }
.electric-control svg { width: 15px; height: 15px; }
.electric-control .electric-play { display: none; }
.electric-control[aria-pressed="true"] .electric-pause { display: none; }
.electric-control[aria-pressed="true"] .electric-play { display: block; }
.hero-electric + .section-intro {
  background: linear-gradient(#030303, #111 75%, #171717);
  color: #f5f3ed;
  padding-top: clamp(50px, 5vw, 90px);
  padding-bottom: clamp(58px, 6vw, 100px);
}
/* The opening text must remain readable even if scripts/WebGL fail. */
.hero-electric .reveal { opacity: 1; transform: none; }
@media (min-width: 1800px) {
  .hero-electric .hero-copy, .hero-electric .display { max-width: 970px; }
}
@media (max-width: 800px) {
  .hero-electric .hero-copy, .hero-electric .display { max-width: 640px; }
  .hero-electric .display { font-size: clamp(33px, 5vw, 46px); }
  .hero-electric .hero-content { padding-top: calc(var(--site-header-height) + 220px); }
}
@media (max-width: 600px) {
  .hero-electric .hero-content {
    justify-content: center;
    padding-top: max(calc(var(--site-header-height) + 220px), 43svh);
    padding-bottom: max(44px, 8svh);
  }
  .hero-electric .hero-copy { width: 100%; text-align: center; }
  .hero-electric .hero-title-desktop,
  .hero-electric .hero-copy > p,
  .hero-electric .hero-meta,
  .hero-electric .hero-actions .btn-outline-light { display: none; }
  .hero-electric .hero-title-mobile { display: block; }
  .hero-electric .display {
    margin-inline: auto;
    max-width: 360px;
    font-family: "Nunito Hero", ui-rounded, "Arial Rounded MT Bold", sans-serif;
    font-size: clamp(32px, 8.8vw, 43px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: #f5f1ee;
  }
  .hero-electric .hero-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .hero-electric .hero-actions .btn-red {
    width: min(100%, 320px);
    min-height: 56px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: "Nunito Hero", ui-rounded, sans-serif;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .hero-electric::before {
    background: linear-gradient(180deg, transparent 27%, #03030390 44%, #030303ee 76%, #030303 100%);
  }
  .electric-controls { top: calc(var(--site-header-height) + 10px); }
  .electric-control { width: 34px; height: 34px; }
  .electric-grip { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-electric canvas, .hero-electric .electric-fallback { transition: none; }
  .hero-electric + .section-intro { scroll-behavior: auto; }
}