.team-bubbles {
    position: relative;
    margin-top: 48px;
    min-height: 600px;
    padding: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.team-member {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(8px, 1vw, 12px);
    will-change: transform;
    transition: z-index .2s ease;
    max-width: clamp(190px, 17vw, 250px);
    backface-visibility: hidden;
}

.team-member.is-bouncing {
    z-index: 20 !important;
}

.team-member:hover {
    z-index: 20 !important;
    transform: translate(-50%, -22%) scale(1.03);
}

/* Пузыри менеджеров крупнее на 15% */
.team-member[data-team-manager] {
    max-width: clamp(219px, 19.55vw, 288px);
}

.bubble.team-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 19vw, 220px);
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    cursor: default;
    transform-origin: center bottom;
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #f8fafc 0%, #e7eef8 70%);
    flex-shrink: 0;
    animation: none;
}

.bubble.team-bubble:hover {
    transform: none;
}

.team-member[data-team-manager] .bubble.team-bubble {
    width: clamp(207px, 21.85vw, 253px);
}

.bubble.team-bubble::before {
    content: '';
    position: absolute;
    top: 16%;
    left: 12%;
    width: 26%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), transparent 70%);
    filter: blur(1px);
    pointer-events: none;
    z-index: 3;
}

.bubble.team-bubble::after {
    content: '';
    position: absolute;
    top: 26%;
    right: 22%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    pointer-events: none;
    filter: blur(3px);
    z-index: 3;
}

.bubble.team-bubble .foam-run {
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    display: none;
}

.bubble.team-bubble .team-bubble-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
    z-index: 0;
    pointer-events: none;
}

.bubble.team-bubble .team-bubble-photo img,
.bubble.team-bubble .team-bubble-photo video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.bubble.team-bubble .team-bubble-photo video {
    background: #ebebe5;
    pointer-events: none;
}

.team-member-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, .5vw, 5px);
    max-width: 100%;
    padding: 0 6px;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 9px rgba(255, 255, 255, .9);
    opacity: 0;
    transition: opacity .3s ease;
}

.team-member.is-bouncing .team-member-info {
    opacity: 1;
}

.team-member-info h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 600;
    line-height: 1.10;
    letter-spacing: -.01em;
    color: #0f172a;
}

.team-member-info .team-bubble-role {
    margin: 0;
    font-size: clamp(7px, .6vw, 8px);
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: var(--blue);
    font-weight: 600;
}

.team-member-info .team-bubble-traits {
    margin: 0;
    font-size: clamp(8px, .75vw, 9px);
    line-height: 1.35;
    color: rgba(15, 23, 42, .72);
}

.team-note {
    margin-top: clamp(48px, 5vw, 60px);
    font-size: 13px;
    color: #6c6259;
    text-align: left;
}

.team-note a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s;
}

.team-note a:hover {
    color: var(--blue-l);
}

/* На устройствах без курсора (тач) подписи всегда видимы */
@media (hover: none) {
    .team-member-info {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .team-bubbles {
        min-height: auto;
    }

    .team-member {
        max-width: min(80vw, 320px);
    }

    .team-member[data-team-manager] {
        max-width: min(92vw, 368px);
    }

    .team-member:hover {
        transform: translate(-50%, -50%) scale(1.03) !important;
    }

    .team-member-info {
        max-width: min(80vw, 280px);
    }
}