.hero-lines{
  position: relative;
  overflow: hidden;

  /* регулируйте прозрачноcть линий одной переменной (0..1) */
  --lines-opacity: .15;

  /* толщина линии */
  --lines-w: 0.5px;

  /* цвет линии (белый) */
  --lines-rgb: 255,255,255;
}

.hero-lines::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background: transparent;

  /* Горизонтали + вертикали (без фона), прозрачность берём из переменной */
  background-image:
    /* H1 */
    linear-gradient(
      to bottom,
      transparent calc(140/600 * 100% - var(--lines-w)),
      rgba(var(--lines-rgb), var(--lines-opacity)) 0,
      rgba(var(--lines-rgb), var(--lines-opacity)) calc(140/600 * 100% + var(--lines-w)),
      transparent 0
    ),
    /* H2 */
    linear-gradient(
      to bottom,
      transparent calc(320/600 * 100% - var(--lines-w)),
      rgba(var(--lines-rgb), calc(var(--lines-opacity) * .75)) 0,
      rgba(var(--lines-rgb), calc(var(--lines-opacity) * .75)) calc(320/600 * 100% + var(--lines-w)),
      transparent 0
    ),
    /* H3 */
    linear-gradient(
      to bottom,
      transparent calc(470/600 * 100% - var(--lines-w)),
      rgba(var(--lines-rgb), var(--lines-opacity)) 0,
      rgba(var(--lines-rgb), var(--lines-opacity)) calc(470/600 * 100% + var(--lines-w)),
      transparent 0
    ),

    /* V1 */
    linear-gradient(
      to right,
      transparent calc(470/1000 * 100% - var(--lines-w)),
      rgba(var(--lines-rgb), var(--lines-opacity)) 0,
      rgba(var(--lines-rgb), var(--lines-opacity)) calc(470/1000 * 100% + var(--lines-w)),
      transparent 0
    ),
    /* V2 (до низа как в исходнике можно ограничить, но проще пусть будет на всю высоту) */
    linear-gradient(
      to right,
      transparent calc(780/1000 * 100% - var(--lines-w)),
      rgba(var(--lines-rgb), calc(var(--lines-opacity) * .55)) 0,
      rgba(var(--lines-rgb), calc(var(--lines-opacity) * .55)) calc(780/1000 * 100% + var(--lines-w)),
      transparent 0
    );

  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero-lines > *{
  position: relative;
  z-index: 2;
}

/* Ripple при входе курсора: сплошной полупрозрачный белый круг из точки входа */
.btn-accent .elementor-button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-accent .elementor-button::after{
  content: "";
  position: absolute;

  /* точка старта задаётся JS */
  left: var(--px, 50%);
  top:  var(--py, 50%);

  /* базовый “пузырь”, который потом масштабируется */
  width: 20px;
  height: 20px;
  border-radius: 999px;

  background: rgba(255,255,255,.30); /* можно .50 если надо ярче */

  pointer-events: none;

  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
}

.btn-accent .elementor-button.is-rippling::after{
  animation: accentRipple .85s ease-out;
}

@keyframes accentRipple{
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(var(--ripple-scale, 30)); opacity: 0; }
}
