body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(21, 128, 94, .12), transparent 30%),
        radial-gradient(circle at 88% 70%, rgba(36, 122, 170, .1), transparent 32%),
        #f4f6f7;
}

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

.tech-background::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(15, 107, 79, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 107, 79, .12) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.tech-symbols {
    position: absolute;
    width: 0;
    height: 0;
}

.tech-bubble {
    --bubble-size: 82px;
    --bubble-x: 22px;
    --bubble-y: -32px;
    --bubble-motion-offset: 0s;
    position: absolute;
    display: grid;
    width: var(--bubble-size);
    height: var(--bubble-size);
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    color: rgba(15, 107, 79, .52);
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .3) 38%, rgba(21, 128, 94, .12));
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, .65),
        0 18px 45px rgba(14, 66, 56, .13);
    backdrop-filter: blur(5px);
    animation: tech-bubble-float 9s ease-in-out infinite;
    animation-delay: calc(var(--bubble-motion-offset) + var(--motion-shift, 0s));
}

.tech-bubble::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 20%;
    width: 22%;
    height: 12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    transform: rotate(-25deg);
}

.tech-bubble svg {
    width: 54%;
    height: 54%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bubble-1 { --bubble-size: 105px; --bubble-x: 34px; --bubble-y: -42px; left: 5%; top: 12%; animation-duration: 10s; }
.bubble-2 { --bubble-size: 64px; --bubble-x: -25px; --bubble-y: -38px; --bubble-motion-offset: -5s; left: 23%; top: 72%; }
.bubble-3 { --bubble-size: 88px; --bubble-x: 28px; --bubble-y: -48px; --bubble-motion-offset: -2s; left: 42%; top: 18%; animation-duration: 12s; }
.bubble-4 { --bubble-size: 118px; --bubble-x: -36px; --bubble-y: -55px; --bubble-motion-offset: -7s; right: 7%; top: 8%; animation-duration: 14s; }
.bubble-5 { --bubble-size: 72px; --bubble-x: 22px; --bubble-y: -34px; --bubble-motion-offset: -4s; right: 26%; top: 66%; }
.bubble-6 { --bubble-size: 56px; --bubble-x: -18px; --bubble-y: -28px; --bubble-motion-offset: -1s; left: 34%; top: 48%; animation-duration: 8s; }
.bubble-7 { --bubble-size: 96px; --bubble-x: 38px; --bubble-y: -44px; --bubble-motion-offset: -9s; right: 3%; top: 44%; animation-duration: 13s; }
.bubble-8 { --bubble-size: 78px; --bubble-x: -30px; --bubble-y: -38px; --bubble-motion-offset: -3s; left: 10%; top: 83%; animation-duration: 11s; }
.bubble-9 { --bubble-size: 48px; --bubble-x: 15px; --bubble-y: -26px; --bubble-motion-offset: -6s; left: 61%; top: 34%; }
.bubble-10 { --bubble-size: 68px; --bubble-x: -26px; --bubble-y: -33px; --bubble-motion-offset: -8s; left: 77%; top: 84%; animation-duration: 10.5s; }
.bubble-11 { --bubble-size: 52px; --bubble-x: 21px; --bubble-y: -30px; --bubble-motion-offset: -4.5s; left: 52%; top: 88%; }
.bubble-12 { --bubble-size: 61px; --bubble-x: -19px; --bubble-y: -36px; --bubble-motion-offset: -7.5s; left: 18%; top: 37%; animation-duration: 9.5s; }

.app-shell {
    position: relative;
    z-index: 1;
}

.main-area {
    background: rgba(244, 247, 246, .72);
    backdrop-filter: blur(1px);
}

.topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
}

.panel,
.metric {
    background: rgba(255, 255, 255, .91);
    backdrop-filter: blur(8px);
}

.anonymous-page .main-area {
    background: rgba(244, 247, 246, .08);
    backdrop-filter: none;
}

.anonymous-page .tech-background {
    top: 72px;
    left: 245px;
    bottom: 0;
    height: auto;
    width: auto;
    overflow: hidden;
    contain: paint;
}

.anonymous-page .bubble-1 {
    top: 15%;
    --bubble-y: -24px;
}

.anonymous-page .bubble-4 {
    top: 14%;
    --bubble-y: -30px;
}

.anonymous-page .topbar {
    background: rgba(255, 255, 255, .24);
}

.login-glass-panel {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .62);
    box-shadow:
        0 22px 65px rgba(20, 65, 55, .1),
        inset 0 1px 0 rgba(255, 255, 255, .52);
    backdrop-filter: blur(2px) saturate(110%);
}

.login-glass-panel .form-control {
    background: rgba(255, 255, 255, .36);
    border-color: rgba(126, 157, 148, .48);
    backdrop-filter: blur(2px);
}

.login-glass-panel .form-control:focus {
    background: rgba(255, 255, 255, .62);
}

@media (max-width: 700px) {
    .mobile-brand {
        padding: 7px 10px;
        border-radius: 10px;
        background: #132d41;
        box-shadow: 0 8px 20px rgba(23, 37, 44, .16);
    }
}

@keyframes tech-bubble-float {
    0%, 100% {
        transform: translate3d(0, 18px, 0) rotate(-4deg);
    }
    50% {
        transform: translate3d(var(--bubble-x), var(--bubble-y), 0) rotate(7deg);
    }
}

@media (max-width: 700px) {
    .anonymous-page .tech-background {
        left: 0;
    }

    .tech-bubble {
        opacity: .58;
        transform: scale(.8);
    }

    .bubble-3,
    .bubble-6,
    .bubble-9,
    .bubble-11 {
        display: none;
    }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .anonymous-page .tech-background {
        left: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech-bubble {
        animation: none;
    }
}