/* Variant: Bubbles — floating bubbles for every service and product. Light. */
:root {
  --bg: #f5f8ff; --surface: #ffffff; --muted: #eaf0fb; --ink: #121a33; --ink-2: #546080; --line: #dde5f3;
  --accent: #2f56e0; --accent-ink: #ffffff; --accent-soft: #e1e8ff; --green-soft: #ffe2ec; --amber-soft: #fff0d0;
  --night: #121a33; --night-2: #1d2848;
  color-scheme: light;
}
.bbs { position: relative; height: clamp(22rem, 38vw, 30rem); }
.bb { position: absolute; display: grid; place-items: center; padding: 0.6rem; border-radius: 50%; color: #ffffff; font-weight: 650; text-align: center; line-height: 1.15; box-shadow: inset -10px -14px 30px rgba(0, 0, 0, 0.12), inset 10px 10px 24px rgba(255, 255, 255, 0.35), 0 24px 40px -24px rgba(18, 26, 51, 0.45); }
.bb--1 { left: 26%; top: 18%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #6f8cff, #2f56e0); font-size: clamp(1rem, 1.8vw, 1.375rem); }
.bb--2 { left: 4%; top: 4%; width: 23%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ffa08f, #f2545b); font-size: 0.875rem; }
.bb--3 { right: 6%; top: 6%; width: 25%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #c4a7ff, #7a4fe8); font-size: 0.875rem; }
.bb--4 { right: 2%; top: 44%; width: 24%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ffd77a, #f5a524); color: #3a2400; font-size: 0.875rem; }
.bb--5 { left: 2%; top: 48%; width: 22%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #8fd8ff, #2b8fd6); font-size: 0.875rem; }
.bb--6 { left: 22%; bottom: 0; width: 20%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ff9ad0, #e0479a); font-size: 0.8125rem; }
.bb--7 { left: 46%; bottom: 2%; width: 17%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #a8c6ff, #5b83f0); font-size: 0.6875rem; }
.bb--8 { left: 64%; bottom: 12%; width: 14%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #ffc2a8, #ff7a45); font-size: 0.625rem; }
.bb--9 { left: 64%; top: 2%; width: 12%; aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #d7c6ff, #9b7bff); font-size: 0.5625rem; }
@media (prefers-reduced-motion: no-preference) {
  .bb { animation: bb-float 7s ease-in-out infinite; }
  .bb--2 { animation-delay: -1s; animation-duration: 8s; } .bb--3 { animation-delay: -2s; } .bb--4 { animation-delay: -3s; animation-duration: 6.5s; }
  .bb--5 { animation-delay: -4s; } .bb--6 { animation-delay: -5s; animation-duration: 9s; } .bb--7 { animation-delay: -1.5s; } .bb--8 { animation-delay: -2.5s; } .bb--9 { animation-delay: -3.5s; }
  @keyframes bb-float { 50% { translate: 0 -12px; } }
}
.tile--dark .focus strong { color: #a9bcff; }
.product__visual--water { background: #e1e8ff; } .product__visual--jobs { background: #ffe2ec; } .product__visual--food { background: #fff0d0; }