/* ② dotted stroke */
.mesh__stroke{
  fill:none;
  stroke:#35d6ff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:0 10;
  animation:march 2s linear infinite;
  opacity:.7;
}
@keyframes march{ to{ stroke-dashoffset:-10px; } }




/* ① marching mesh lines – sit at the TOP of .hero */
.hero-mesh{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;        /* banner height */
  overflow:hidden;
  z-index:0;           /* behind h1 + buttons */
  pointer-events:none;
}

/* ③ wave that matches the hero gradient */
.hero-wave{
  width:100%; height:120px;   /* = viewBox height */
  display:block; line-height:0;
}


#heroWave{
  background-color: black;
}