/* Soft floating medical bubbles inspired by the supplied reference, scoped to home. */
[data-home-page] > .hero { position: relative; isolation: isolate; overflow: hidden; }
[data-home-page] > .hero > .container { position: relative; z-index: 1; }
[data-home-page] .home-hero-medical-floats {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    pointer-events: none; user-select: none;
}
[data-home-page] .home-medical-float {
    position: absolute; display: flex; justify-content: center; align-items: center;
    width: var(--bubble-size, 64px); height: var(--bubble-size, 64px);
    box-sizing: border-box; border-radius: 50%; color: #d8fff5;
    border: 1px solid rgba(230, 255, 251, .58);
    background: radial-gradient(circle at 28% 23%, rgba(255, 255, 255, .35), transparent 57%), rgba(177, 246, 229, .19);
    box-shadow: 0 4px 22px rgba(12, 83, 143, .1), inset 0 0 16px rgba(233, 255, 249, .15);
    animation: home-medical-float 9s ease-in-out infinite;
    will-change: transform;
}
[data-home-page] .home-medical-float svg {
    width: 55%; height: 55%; overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(23, 110, 156, .13));
}
[data-home-page] .home-medical-float--heart { --bubble-size: 78px; top: 14%; right: auto; left: 8%; bottom: auto; animation-duration: 6.8s; animation-delay: 0s; opacity: 0.83; }
[data-home-page] .home-medical-float--pulse { --bubble-size: 69px; top: 63%; right: auto; left: 5%; bottom: auto; animation-duration: 8.6s; animation-delay: -4s; opacity: 0.83; }
[data-home-page] .home-medical-float--stethoscope { --bubble-size: 81px; top: 24%; right: 7%; left: auto; bottom: auto; animation-duration: 7.8s; animation-delay: -3s; opacity: 0.83; }
[data-home-page] .home-medical-float--pill { --bubble-size: 74px; top: 65%; right: 5%; left: auto; bottom: auto; animation-duration: 7.4s; animation-delay: -6s; opacity: 0.83; }
[data-home-page] .home-medical-float--kit { --bubble-size: 52px; top: 75%; right: auto; left: 28%; bottom: auto; animation-duration: 9.2s; animation-delay: -2s; opacity: 0.55; }
[data-home-page] .home-medical-float--cross { --bubble-size: 52px; top: 12%; right: 28%; left: auto; bottom: auto; animation-duration: 7s; animation-delay: -5s; opacity: 0.56; }
[data-home-page] .home-medical-float--clipboard { --bubble-size: 54px; top: 78%; right: 28%; left: auto; bottom: auto; animation-duration: 8.8s; animation-delay: -7s; opacity: 0.5; }
[data-home-page] .home-medical-float--shield { --bubble-size: 48px; top: 11%; right: auto; left: 30%; bottom: auto; animation-duration: 8s; animation-delay: -1s; opacity: 0.48; }
@keyframes home-medical-float {
    0%, 100% { transform: translate3d(-9px, 12px, 0) rotate(-7deg); }
    50% { transform: translate3d(15px, -24px, 0) rotate(9deg); }
}
@media (max-width: 767px) {
    /* Keep mobile bubbles gently moving, with a shorter travel range than desktop. */
    [data-home-page] .home-medical-float { animation-name: home-medical-float-mobile; }
    /* Give the blue hero breathing room for three lower decorative bubbles. */
    [data-home-page] > .hero { padding-bottom: 140px; }
    /* Edges and subdued opacity protect the text and search controls on phones. */
    [data-home-page] .home-medical-float--heart { --bubble-size: 49px; top: 17%; right: auto; left: -10px; opacity: 0.55; }
    [data-home-page] .home-medical-float--pulse { --bubble-size: 55px; top: 45%; right: auto; left: -18px; opacity: 0.55; }
    [data-home-page] .home-medical-float--stethoscope { --bubble-size: 55px; top: 37%; right: -17px; left: auto; opacity: 0.55; }
    [data-home-page] .home-medical-float--pill { --bubble-size: 48px; top: 74%; right: 22px; left: auto; opacity: 0.55; }
    [data-home-page] .home-medical-float--kit { --bubble-size: 42px; top: 75%; right: auto; left: 6%; opacity: 0.39; }
    [data-home-page] .home-medical-float--cross { --bubble-size: 42px; top: 15%; right: 17%; left: auto; opacity: 0.36; }
    [data-home-page] .home-medical-float--clipboard { --bubble-size: 40px; top: 76%; right: 43%; left: auto; opacity: 0.35; }
    [data-home-page] .home-medical-float--shield { --bubble-size: 36px; top: 12%; right: auto; left: 35%; opacity: 0.32; }
    @keyframes home-medical-float-mobile {
        0%, 100% { transform: translate3d(-4px, 5px, 0) rotate(-4deg); }
        50% { transform: translate3d(7px, -11px, 0) rotate(5deg); }
    }
}
@media (prefers-reduced-motion: reduce) {
    [data-home-page] .home-medical-float { animation: none; will-change: auto; }
}