.bubbles { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bubble { position: absolute; bottom: -140px; border-radius: 50%; background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25); animation: bubbleRise linear infinite; }
@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-115vh) scale(1.15); opacity: 0; }
}
.bubble.x1  { left: 5%;  width: 40px;  height: 40px;  animation-duration: 16s; animation-delay: 0s; }
.bubble.x2  { left: 15%; width: 20px;  height: 20px;  animation-duration: 11s; animation-delay: 2s; }
.bubble.x3  { left: 25%; width: 50px;  height: 50px;  animation-duration: 20s; animation-delay: 4s; }
.bubble.x4  { left: 35%; width: 26px;  height: 26px;  animation-duration: 13s; animation-delay: 1s; }
.bubble.x5  { left: 45%; width: 60px;  height: 60px;  animation-duration: 24s; animation-delay: 6s; }
.bubble.x6  { left: 55%; width: 18px;  height: 18px;  animation-duration: 10s; animation-delay: 3s; }
.bubble.x7  { left: 65%; width: 44px;  height: 44px;  animation-duration: 18s; animation-delay: 5s; }
.bubble.x8  { left: 75%; width: 30px;  height: 30px;  animation-duration: 14s; animation-delay: 2s; }
.bubble.x9  { left: 85%; width: 54px;  height: 54px;  animation-duration: 22s; animation-delay: 7s; }
.bubble.x10 { left: 92%; width: 22px;  height: 22px;  animation-duration: 12s; animation-delay: 4s; }