/* Homepage hero: abstract electrical infrastructure visual. */
.hero-visual {
  isolation: isolate;
  min-height: 570px;
  background: #102d42;
  border-left-color: #385263;
}

.hero-grid {
  opacity: .34;
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

.hero-abstract {
  overflow: hidden;
  background: radial-gradient(circle at 65% 46%, #1b4b68 0, #12344b 26%, #102d42 65%);
}

.energy-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(216, 235, 74, .38);
  border-radius: 50%;
}
.orbit-one { width: 510px; height: 510px; right: -104px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 56px rgba(255,255,255,.028); }
.orbit-two { width: 350px; height: 350px; right: -24px; top: 50%; transform: translateY(-50%); border-color: rgba(255,255,255,.25); }
.orbit-three { width: 190px; height: 190px; right: 56px; top: 50%; transform: translateY(-50%); border-color: rgba(216, 235, 74, .7); }

.energy-core {
  position: absolute;
  z-index: 2;
  width: 86px;
  height: 86px;
  right: 108px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #d8eb4a 0 7%, #326078 8% 14%, #153b53 15% 48%, rgba(216,235,74,.6) 49% 51%, transparent 52%);
  box-shadow: 0 0 0 15px rgba(216,235,74,.06), 0 0 55px rgba(216,235,74,.23);
}

.energy-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(216,235,74,.85));
}
.line-one { width: 280px; right: 146px; top: 34%; transform: rotate(153deg); }
.line-two { width: 220px; right: 150px; top: 57%; transform: rotate(22deg); }
.line-three { width: 170px; right: 150px; top: 69%; transform: rotate(-42deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.38)); }
.energy-node { position:absolute; z-index:3; width:9px; height:9px; border-radius:50%; background:#d8eb4a; box-shadow:0 0 0 5px rgba(216,235,74,.1),0 0 18px rgba(216,235,74,.55); }
.node-one { right: 386px; top: 27%; }.node-two { right: 324px; top: 67%; }.node-three { right: 230px; top: 76%; }.node-four { right: 117px; top: 25%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.08); }.node-five { right: 66px; top: 62%; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.08); }

@media (max-width: 900px) {
  .hero-visual { min-height: 440px; }
  .orbit-one { right: -150px; }
  .energy-core { right: 16vw; }
}

@media (max-width: 560px) {
  .hero-visual { min-height: 350px; }
  .orbit-one { width: 380px; height: 380px; right: -100px; }
  .orbit-two { width: 270px; height: 270px; right: -48px; }
  .orbit-three { width: 150px; height: 150px; right: 15px; }
  .energy-core { width: 64px; height: 64px; right: 62px; }
  .line-one { width: 200px; right: 96px; }.line-two { width: 160px; right: 98px; }.line-three { width: 120px; right: 100px; }
  .node-one { right: 264px; }.node-two { right: 226px; }.node-three { right: 155px; }.node-four { right: 54px; }.node-five { right: 17px; }
}