#geo-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #080808;
}

#geo-bg .geo-square,
#geo-bg .geo-circle,
#geo-bg .geo-triangle {
  position: absolute;
  width: 44px;
  height: 44px;
  opacity: 0.22;
  will-change: transform;
  animation: geo-drift 18s ease-in-out infinite;
}

#geo-bg .geo-square {
  background: linear-gradient(145deg, #1a1a1a, #404040);
  border: 1px solid rgba(167, 139, 250, 0.08);
}

#geo-bg .geo-circle {
  background: #a78bfa;
  border-radius: 50%;
  opacity: 0.18;
}

#geo-bg .geo-triangle {
  background: #e9e0ff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  opacity: 0.14;
}

#geo-bg .geo-square:nth-child(1) { left: 8%; top: 12%; animation-duration: 22s; animation-delay: -2s; }
#geo-bg .geo-circle:nth-child(2) { left: 72%; top: 18%; animation-duration: 19s; animation-delay: -5s; }
#geo-bg .geo-triangle:nth-child(3) { left: 45%; top: 8%; animation-duration: 24s; animation-delay: -8s; }
#geo-bg .geo-square:nth-child(4) { left: 85%; top: 55%; animation-duration: 20s; animation-delay: -3s; }
#geo-bg .geo-circle:nth-child(5) { left: 22%; top: 68%; animation-duration: 26s; animation-delay: -11s; }
#geo-bg .geo-triangle:nth-child(6) { left: 58%; top: 78%; animation-duration: 21s; animation-delay: -6s; }

@keyframes geo-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(28px, -22px) rotate(120deg) scale(1.15); }
  66% { transform: translate(-18px, 16px) rotate(240deg) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  #geo-bg .geo-square,
  #geo-bg .geo-circle,
  #geo-bg .geo-triangle {
    animation: none;
  }
}