.lp-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #ffffff;
}

.lp-particles__dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  will-change: transform, opacity;
}

.lp-particles__dot--1 {
  width: 6px;
  height: 6px;
  left: 8%;
  top: 18%;
  background: #cbd5e1;
  animation: lpParticleDrift1 22s ease-in-out infinite;
}

.lp-particles__dot--2 {
  width: 4px;
  height: 4px;
  left: 22%;
  top: 72%;
  background: #94a3b8;
  animation: lpParticleDrift2 26s ease-in-out infinite;
}

.lp-particles__dot--3 {
  width: 8px;
  height: 8px;
  left: 38%;
  top: 12%;
  background: #e2e8f0;
  animation: lpParticleDrift3 20s ease-in-out infinite;
}

.lp-particles__dot--4 {
  width: 5px;
  height: 5px;
  left: 52%;
  top: 58%;
  background: #64748b;
  opacity: 0.32;
  animation: lpParticleDrift4 24s ease-in-out infinite;
}

.lp-particles__dot--5 {
  width: 3px;
  height: 3px;
  left: 64%;
  top: 28%;
  background: #94a3b8;
  animation: lpParticleDrift1 18s ease-in-out infinite reverse;
}

.lp-particles__dot--6 {
  width: 7px;
  height: 7px;
  left: 76%;
  top: 68%;
  background: #cbd5e1;
  animation: lpParticleDrift2 28s ease-in-out infinite;
}

.lp-particles__dot--7 {
  width: 4px;
  height: 4px;
  left: 88%;
  top: 22%;
  background: #94a3b8;
  animation: lpParticleDrift3 21s ease-in-out infinite reverse;
}

.lp-particles__dot--8 {
  width: 6px;
  height: 6px;
  left: 14%;
  top: 42%;
  background: #e2e8f0;
  animation: lpParticleDrift4 25s ease-in-out infinite reverse;
}

.lp-particles__dot--9 {
  width: 5px;
  height: 5px;
  left: 46%;
  top: 82%;
  background: #64748b;
  opacity: 0.35;
  animation: lpParticleDrift1 23s ease-in-out infinite;
}

.lp-particles__dot--10 {
  width: 3px;
  height: 3px;
  left: 58%;
  top: 38%;
  background: #cbd5e1;
  animation: lpParticleDrift2 19s ease-in-out infinite reverse;
}

.lp-particles__dot--11 {
  width: 9px;
  height: 9px;
  left: 72%;
  top: 8%;
  background: #e2e8f0;
  opacity: 0.38;
  animation: lpParticleDrift3 27s ease-in-out infinite;
}

.lp-particles__dot--12 {
  width: 4px;
  height: 4px;
  left: 92%;
  top: 52%;
  background: #94a3b8;
  animation: lpParticleDrift4 22s ease-in-out infinite;
}

.lp-particles__dot--13 {
  width: 5px;
  height: 5px;
  left: 28%;
  top: 8%;
  background: #94a3b8;
  animation: lpParticleDrift1 20s ease-in-out infinite reverse;
}

.lp-particles__dot--14 {
  width: 6px;
  height: 6px;
  left: 84%;
  top: 78%;
  background: #e2e8f0;
  animation: lpParticleDrift2 24s ease-in-out infinite reverse;
}

.lp-particles__dot--15 {
  width: 4px;
  height: 4px;
  left: 6%;
  top: 62%;
  background: #64748b;
  animation: lpParticleDrift3 26s ease-in-out infinite;
}

.lp-particles__dot--16 {
  width: 7px;
  height: 7px;
  left: 48%;
  top: 48%;
  background: #cbd5e1;
  opacity: 0.3;
  animation: lpParticleDrift4 29s ease-in-out infinite reverse;
}

.lp-particles__dot--17 {
  width: 5px;
  height: 5px;
  left: 44%;
  top: 40%;
  background: #94a3b8;
  animation: lpParticleDrift1 20s ease-in-out infinite;
}

.lp-particles__dot--18 {
  width: 4px;
  height: 4px;
  left: 52%;
  top: 46%;
  background: #64748b;
  animation: lpParticleDrift2 18s ease-in-out infinite reverse;
}

.lp-particles__dot--19 {
  width: 6px;
  height: 6px;
  left: 48%;
  top: 52%;
  background: #cbd5e1;
  animation: lpParticleDrift3 16s ease-in-out infinite;
}

.lp-particles__dot--20 {
  width: 3px;
  height: 3px;
  left: 56%;
  top: 42%;
  background: #94a3b8;
  animation: lpParticleDrift4 19s ease-in-out infinite reverse;
}

.lp-particles__dot--21 {
  width: 7px;
  height: 7px;
  left: 42%;
  top: 48%;
  background: #e2e8f0;
  opacity: 0.4;
  animation: lpParticleDrift1 22s ease-in-out infinite reverse;
}

.lp-particles__dot--22 {
  width: 4px;
  height: 4px;
  left: 50%;
  top: 38%;
  background: #94a3b8;
  animation: lpParticleDrift2 17s ease-in-out infinite;
}

.lp-particles__dot--23 {
  width: 5px;
  height: 5px;
  left: 54%;
  top: 54%;
  background: #e2e8f0;
  animation: lpParticleDrift3 21s ease-in-out infinite reverse;
}

.lp-particles__dot--24 {
  width: 6px;
  height: 6px;
  left: 46%;
  top: 44%;
  background: #cbd5e1;
  opacity: 0.45;
  animation: lpParticleDrift4 15s ease-in-out infinite;
}

@keyframes lpParticleDrift1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.25;
  }
  50% {
    transform: translate3d(12px, -28px, 0);
    opacity: 0.55;
  }
}

@keyframes lpParticleDrift2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(-16px, -22px, 0);
    opacity: 0.5;
  }
}

@keyframes lpParticleDrift3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate3d(8px, 24px, 0) scale(1.15);
    opacity: 0.55;
  }
}

@keyframes lpParticleDrift4 {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(-10px, 18px, 0);
    opacity: 0.48;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-particles__dot {
    animation: none;
    opacity: 0.28;
  }
}