/* ======= Light Hero Background — flowing wave dots + curved RGB cursor trail (lightweight, fast) ======= */
.hero {
  background-image: none;
  overflow: hidden;
}

.hero-live-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 34%, rgba(13,66,255,0.18), transparent 55%),
              radial-gradient(ellipse at 85% 80%, rgba(13,66,255,0.14), transparent 55%),
              var(--color-secondary);
}

.hero-live-bg svg {
  width: 100%;
  height: 100%;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* cursor trail dots - curve-shaped, RGB color-cycling glow */
.hlb-trail-dot {
  animation: hlbRgbCycle 1.6s linear infinite;
  filter: drop-shadow(0 0 3px currentColor);
}

@keyframes hlbRgbCycle {
  0%   { fill: #ff4d4d; }
  33%  { fill: #4dff88; }
  66%  { fill: #4d9dff; }
  100% { fill: #ff4d4d; }
}

@media (max-width: 767px) {
  .hero-live-bg { opacity: .8; }
}

/* ===== Request Here button - text stays put, background blinks through colours ===== */
.hlb-glow-btn {
  background-size: 300% 300%;
  background-image: linear-gradient(60deg, #ff3b3b, #ff9d3b, #ffe93b, #3bff6a, #3bd4ff, #6a3bff, #ff3b8f, #ff3b3b);
  border: none;
  animation: hlbBtnGlow 5s linear infinite;
  box-shadow: 0 0 12px rgba(255,255,255,0.35);
}
@keyframes hlbBtnGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ===== remove the large empty gutters on very wide screens ===== */
@media (min-width: 1600px) {
  .container { max-width: 1500px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1780px; }
}