/* ── Integration orbit ─────────────────────────────────────── */
.integration-orbit {
    --integration-card-size: clamp(88px, 7vw, 108px);
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 7vw, 112px) 0;
    background: var(--dark-bg);
    color: var(--white);
}

.integration-orbit--light {
    background: var(--off-white);
    color: var(--color-black);
}

.integration-orbit,
.integration-orbit * {
    box-sizing: border-box;
}

.integration-orbit__inner {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

.integration-orbit__stage {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 48vw, 650px);
}

.integration-orbit__copy {
    position: absolute;
    top: 47%;
    left: 50%;
    z-index: 3;
    width: min(500px, 40vw);
    text-align: center;
    transform: translate(-50%, -50%);
}

.integration-orbit__title {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--white);
    font-size: clamp(
        var(--font-size-4xl),
        3vw,
        var(--font-size-5xl)
    );
    font-weight: var(--font-lightbold);
    line-height: 1.08;
    letter-spacing: var(--letter-spacing-tight);
    text-wrap: balance;
}

.integration-orbit__title-highlight {
    color: var(--green);
}

.integration-orbit--light .integration-orbit__title {
    color: var(--color-black);
}

.integration-orbit__description {
    max-width: 560px;
    margin: 18px auto 0;
    color: var(--text-dim);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-body);
    text-wrap: balance;
}

.integration-orbit--light .integration-orbit__description {
    color: var(--color-gray);
}

.integration-orbit__logos {
    position: absolute;
    inset: 0;
}

.integration-orbit__item {
    position: absolute;
    top: var(--orbit-y);
    left: var(--orbit-x);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    transform: translate(-50%, -50%);
}

/* Invisible outer container */
.integration-orbit__card {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--integration-card-size);
    height: var(--integration-card-size);
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    transition: transform 0.25s ease;
}

/* The only visible ring */
.integration-orbit__logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 25%;
    overflow: visible;
    background: var(--off-white);
    border: 1px solid var(--green);
    border-radius: 50%;
    box-shadow: none;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Abaci bead attached to the visible ring */
.integration-orbit__logo-wrap::after {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 17%;
    z-index: 3;
    width: 12px;
    height: 12px;
    background: var(--green);
    border: 2px solid var(--color-bg-section);
    border-radius: 50%;
    pointer-events: none;
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.integration-orbit__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.integration-orbit__fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--green);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
}

.integration-orbit__item.has-image-error .integration-orbit__logo {
    display: none;
}

.integration-orbit__item.has-image-error .integration-orbit__fallback {
    display: flex;
}

.integration-orbit__item:hover .integration-orbit__card,
.integration-orbit__item:focus-within .integration-orbit__card {
    transform: translateY(-5px);
}

.integration-orbit__item:hover,
.integration-orbit__item:focus-within {
    z-index: 4;
}

.integration-orbit__item:hover .integration-orbit__logo-wrap,
.integration-orbit__item:focus-within .integration-orbit__logo-wrap {
    border-color: var(--green);
    box-shadow: 0 0 18px var(--light-green-border);
    transform: scale(1.05);
}

.integration-orbit__item:hover .integration-orbit__logo-wrap::after,
.integration-orbit__item:focus-within .integration-orbit__logo-wrap::after {
    transform: scale(1.15);
}

.integration-orbit__label {
    position: absolute;
    top: calc(100%);
    left: 50%;
    width: max-content;
    max-width: 160px;
    padding: 5px 8px;
    color: var(--white);
    background: var(--dark-bg);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius);
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -3px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.integration-orbit--light .integration-orbit__label {
    color: var(--color-black);
    background: var(--white);
    border-color: var(--color-border);
}

.integration-orbit__item:hover .integration-orbit__label,
.integration-orbit__item:focus-within .integration-orbit__label {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Desktop positions */
.integration-orbit__item:nth-child(1) {
    --orbit-x: 34%;
    --orbit-y: 10%;
}

.integration-orbit__item:nth-child(2) {
    --orbit-x: 50%;
    --orbit-y: 8%;
}

.integration-orbit__item:nth-child(3) {
    --orbit-x: 66%;
    --orbit-y: 10%;
}

.integration-orbit__item:nth-child(4) {
    --orbit-x: 20%;
    --orbit-y: 28%;
}

.integration-orbit__item:nth-child(5) {
    --orbit-x: 80%;
    --orbit-y: 28%;
}

.integration-orbit__item:nth-child(6) {
    --orbit-x: 84%;
    --orbit-y: 50%;
}

.integration-orbit__item:nth-child(7) {
    --orbit-x: 20%;
    --orbit-y: 70%;
}

.integration-orbit__item:nth-child(8) {
    --orbit-x: 42%;
    --orbit-y: 70%;
}

.integration-orbit__item:nth-child(9) {
    --orbit-x: 58%;
    --orbit-y: 70%;
}

.integration-orbit__item:nth-child(10) {
    --orbit-x: 80%;
    --orbit-y: 70%;
}

.integration-orbit__item:nth-child(11) {
    --orbit-x: 34%;
    --orbit-y: 89%;
}

.integration-orbit__item:nth-child(12) {
    --orbit-x: 58%;
    --orbit-y: 89%;
}

/* Entrance animation */
.integration-orbit.is-enhanced .integration-orbit__copy,
.integration-orbit.is-enhanced .integration-orbit__item {
    opacity: 0;
}

.integration-orbit.is-enhanced .integration-orbit__copy {
    transform: translate(-50%, -46%);
}

.integration-orbit.is-enhanced.is-visible .integration-orbit__copy {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.integration-orbit.is-enhanced.is-visible .integration-orbit__item {
    opacity: 1;
    transition:
        opacity 0.45s ease
        calc(var(--integration-index) * 45ms);
}

/* Tablet keeps the same orbit composition */
@media (max-width: 1099px) {
    .integration-orbit {
        --integration-card-size: clamp(70px, 10vw, 88px);
        padding: clamp(64px, 8vw, 88px) 0;
    }

    .integration-orbit__inner {
        padding: 0 clamp(18px, 3vw, 32px);
    }

    .integration-orbit__stage {
        min-height: clamp(520px, 72vw, 620px);
    }

    .integration-orbit__copy {
        width: min(440px, 46vw);
    }

    .integration-orbit__title {
        font-size: clamp(
            var(--font-size-4xl),
            4vw,
            var(--font-size-5xl)
        );
    }

    .integration-orbit__description {
        margin-top: 14px;
        font-size: var(--font-size-lg);
    }

    .integration-orbit__item:nth-child(1) {
        --orbit-x: 31%;
        --orbit-y: 10%;
    }

    .integration-orbit__item:nth-child(2) {
        --orbit-x: 50%;
        --orbit-y: 7%;
    }

    .integration-orbit__item:nth-child(3) {
        --orbit-x: 69%;
        --orbit-y: 10%;
    }

    .integration-orbit__item:nth-child(4) {
        --orbit-x: 16%;
        --orbit-y: 28%;
    }

    .integration-orbit__item:nth-child(5) {
        --orbit-x: 84%;
        --orbit-y: 28%;
    }

    .integration-orbit__item:nth-child(6) {
        --orbit-x: 88%;
        --orbit-y: 50%;
    }

    .integration-orbit__item:nth-child(7) {
        --orbit-x: 16%;
        --orbit-y: 70%;
    }

    .integration-orbit__item:nth-child(8) {
        --orbit-x: 39%;
        --orbit-y: 70%;
    }

    .integration-orbit__item:nth-child(9) {
        --orbit-x: 61%;
        --orbit-y: 70%;
    }

    .integration-orbit__item:nth-child(10) {
        --orbit-x: 84%;
        --orbit-y: 70%;
    }

    .integration-orbit__item:nth-child(11) {
        --orbit-x: 31%;
        --orbit-y: 89%;
    }

    .integration-orbit__item:nth-child(12) {
        --orbit-x: 61%;
        --orbit-y: 89%;
    }
}

/* Small tablet keeps the same orbit composition */
@media (max-width: 767px) {
    .integration-orbit {
        --integration-card-size: clamp(54px, 12vw, 68px);
        padding: 58px 0;
    }

    .integration-orbit__inner {
        padding: 0 14px;
    }

    .integration-orbit__stage {
        min-height: clamp(500px, 105vw, 590px);
    }

    .integration-orbit__copy {
        top: 46%;
        width: min(340px, 58vw);
    }

    .integration-orbit__title {
        font-size: clamp(
            var(--font-size-3xl),
            5.4vw,
            var(--font-size-4xl)
        );
    }

    .integration-orbit__description,
    .integration-orbit__label {
        display: none;
    }

    .integration-orbit__logo-wrap {
        width: 74%;
        height: 74%;
        padding: 15%;
    }

    .integration-orbit__logo-wrap::after {
        right: -2px;
        bottom: 14%;
        width: 8px;
        height: 8px;
        border-width: 1px;
    }

    .integration-orbit__item:nth-child(1) {
        --orbit-x: 26%;
        --orbit-y: 9%;
    }

    .integration-orbit__item:nth-child(2) {
        --orbit-x: 50%;
        --orbit-y: 6%;
    }

    .integration-orbit__item:nth-child(3) {
        --orbit-x: 74%;
        --orbit-y: 9%;
    }

    .integration-orbit__item:nth-child(4) {
        --orbit-x: 12%;
        --orbit-y: 27%;
    }

    .integration-orbit__item:nth-child(5) {
        --orbit-x: 88%;
        --orbit-y: 27%;
    }

    .integration-orbit__item:nth-child(6) {
        --orbit-x: 90%;
        --orbit-y: 49%;
    }

    .integration-orbit__item:nth-child(7) {
        --orbit-x: 12%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(8) {
        --orbit-x: 38%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(9) {
        --orbit-x: 62%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(10) {
        --orbit-x: 88%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(11) {
        --orbit-x: 28%;
        --orbit-y: 89%;
    }

    .integration-orbit__item:nth-child(12) {
        --orbit-x: 62%;
        --orbit-y: 89%;
    }
}

/* Mobile keeps the same orbit composition */
@media (max-width: 479px) {
    .integration-orbit {
        --integration-card-size: clamp(46px, 15vw, 54px);
        padding: 48px 0;
    }

    .integration-orbit__inner {
        padding: 0 8px;
    }

    .integration-orbit__stage {
        min-height: 510px;
    }

    .integration-orbit__copy {
        width: 58%;
    }

    .integration-orbit__title {
        font-size: clamp(
            var(--font-size-2xl),
            7vw,
            var(--font-size-4xl)
        );
        line-height: 1.06;
    }

    .integration-orbit__logo-wrap {
        width: 76%;
        height: 76%;
        padding: 15%;
    }

    .integration-orbit__logo-wrap::after {
        right: -2px;
        bottom: 13%;
        width: 7px;
        height: 7px;
    }

    .integration-orbit__fallback {
        font-size: var(--font-size-md);
    }

    .integration-orbit__item:nth-child(1) {
        --orbit-x: 22%;
        --orbit-y: 9%;
    }

    .integration-orbit__item:nth-child(2) {
        --orbit-x: 50%;
        --orbit-y: 6%;
    }

    .integration-orbit__item:nth-child(3) {
        --orbit-x: 78%;
        --orbit-y: 9%;
    }

    .integration-orbit__item:nth-child(4) {
        --orbit-x: 11%;
        --orbit-y: 26%;
    }

    .integration-orbit__item:nth-child(5) {
        --orbit-x: 89%;
        --orbit-y: 26%;
    }

    .integration-orbit__item:nth-child(6) {
        --orbit-x: 89%;
        --orbit-y: 49%;
    }

    .integration-orbit__item:nth-child(7) {
        --orbit-x: 11%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(8) {
        --orbit-x: 37%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(9) {
        --orbit-x: 63%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(10) {
        --orbit-x: 89%;
        --orbit-y: 69%;
    }

    .integration-orbit__item:nth-child(11) {
        --orbit-x: 24%;
        --orbit-y: 89%;
    }

    .integration-orbit__item:nth-child(12) {
        --orbit-x: 62%;
        --orbit-y: 89%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .integration-orbit *,
    .integration-orbit *::before,
    .integration-orbit *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}