.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  animation: blobFloat 12s ease-in-out infinite alternate;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: rgba(232,21,10,0.07);
  top: -10%;
  left: -15%;
  animation-duration: 14s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: rgba(232,21,10,0.05);
  bottom: 5%;
  right: -10%;
  animation-duration: 11s;
  animation-delay: -5s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.025);
  top: 40%;
  left: 50%;
  animation-duration: 18s;
  animation-delay: -3s;
}

@keyframes blobFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.06); }
}