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

.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
}

.shape-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--gold-100), transparent 70%);
  top: -250px;
  left: -200px;
  animation: floatMarble 22s ease-in-out infinite;
}

.shape-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--navy-50), transparent 70%);
  bottom: -150px;
  right: -100px;
  animation: floatMarble 28s ease-in-out infinite reverse;
}

.shape-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--gold-50), transparent 70%);
  top: 45%;
  left: 60%;
  animation: floatMarble 32s ease-in-out infinite;
}

@keyframes floatMarble {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(25px, -35px) scale(1.06); }
  50% { transform: translate(-18px, 22px) scale(0.94); }
  75% { transform: translate(12px, 28px) scale(1.02); }
}