.lbc-wrap {
    --lbc-ring: #e9eff6;
    --lbc-active: #214774;
    --lbc-heading: #17172c;
    --lbc-text: #4d5263;
    --lbc-button: #17172c;
    --lbc-bg: #ffffff;
    --lbc-spin-duration: 58s;
    --lbc-visual-size: 610px;
    --lbc-ring-size: 460px;
    --lbc-orbit-radius: 230px;
    --lbc-orbit-offset: -230px;
    --lbc-node-size: 122px;
    --lbc-node-half: -61px;
    --lbc-center-size: 294px;
    width: 100%;
    background: var(--lbc-bg);
    color: var(--lbc-text);
    font-family: inherit;
}

.lbc-wrap *,
.lbc-wrap *::before,
.lbc-wrap *::after {
    box-sizing: border-box;
}

.lbc-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.12fr) minmax(350px, .88fr);
    align-items: center;
    gap: clamp(42px, 6vw, 100px);
}

.lbc-visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.lbc-orbit {
    position: relative;
    width: var(--lbc-visual-size);
    height: var(--lbc-visual-size);
    isolation: isolate;
}

.lbc-rotator {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform-origin: 50% 50%;
    animation: lbcOrbitSpin var(--lbc-spin-duration) linear infinite;
}

.lbc-orbit:hover .lbc-rotator,
.lbc-orbit:focus-within .lbc-rotator,
.lbc-orbit:hover .lbc-node-face,
.lbc-orbit:focus-within .lbc-node-face {
    animation-play-state: paused;
}

.lbc-ring {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: var(--lbc-ring-size);
    height: var(--lbc-ring-size);
    border: 24px solid var(--lbc-ring);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 1px rgba(33, 71, 116, .02);
}

.lbc-ring::before,
.lbc-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lbc-ring::before {
    inset: 22px;
    border: 1px solid rgba(33, 71, 116, .08);
}

.lbc-ring::after {
    inset: -35px;
    border: 1px solid rgba(33, 71, 116, .055);
}

.lbc-center {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: var(--lbc-center-size);
    height: var(--lbc-center-size);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 60px rgba(19, 32, 54, .09), 0 2px 10px rgba(19, 32, 54, .05);
    text-align: center;
}

.lbc-center::after {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(33, 71, 116, .1);
    border-radius: inherit;
    pointer-events: none;
}

.lbc-center img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 225px;
    max-height: 112px;
    object-fit: contain;
}

.lbc-center strong {
    position: relative;
    z-index: 1;
    color: var(--lbc-heading);
    font-size: 28px;
    line-height: 1.1;
}

.lbc-node {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: var(--lbc-node-size);
    height: var(--lbc-node-size);
    margin: var(--lbc-node-half);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: rotate(var(--lbc-angle)) translateY(var(--lbc-orbit-offset)) rotate(var(--lbc-angle-reverse));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lbc-node-face {
    display: block;
    width: 100%;
    height: 100%;
    animation: lbcOrbitCounterSpin var(--lbc-spin-duration) linear infinite;
}

.lbc-node-inner {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 13px 34px rgba(17, 31, 52, .14), 0 2px 8px rgba(17, 31, 52, .06);
    transition: transform .3s cubic-bezier(.2, .75, .25, 1), border-color .25s ease, box-shadow .25s ease;
}

.lbc-node-inner::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color .25s ease;
}

.lbc-node img {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    max-height: 68px;
    object-fit: contain;
    transition: transform .3s ease;
}

.lbc-node-name {
    color: var(--lbc-heading);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.lbc-node:hover .lbc-node-inner,
.lbc-node:focus-visible .lbc-node-inner {
    transform: scale(1.055);
    box-shadow: 0 18px 42px rgba(17, 31, 52, .18), 0 3px 10px rgba(17, 31, 52, .07);
}

.lbc-node:focus-visible {
    outline: none;
}

.lbc-node:focus-visible .lbc-node-inner {
    border-color: var(--lbc-active);
}

.lbc-node.is-active .lbc-node-inner {
    border-color: var(--lbc-active);
    transform: scale(1.07);
    box-shadow: 0 18px 44px rgba(33, 71, 116, .23), 0 3px 10px rgba(17, 31, 52, .08);
}

.lbc-node.is-active .lbc-node-inner::after {
    border-color: rgba(33, 71, 116, .22);
}

.lbc-node.is-active img {
    transform: scale(1.035);
}

.lbc-node.is-spotlight .lbc-node-inner {
    animation: lbcNodeSpotlight 2.6s cubic-bezier(.22, .8, .2, 1) both;
}

.lbc-node.is-spotlight .lbc-node-inner::after {
    border-color: rgba(33, 71, 116, .16);
}

.lbc-node.is-spotlight img {
    animation: lbcNodeLogoPop 2.6s cubic-bezier(.22, .8, .2, 1) both;
}

.lbc-content {
    position: relative;
    min-width: 0;
    min-height: 430px;
    padding: 18px 0;
}

.lbc-panel {
    animation: lbcPanelIn .42s cubic-bezier(.2, .75, .25, 1) both;
}

.lbc-panel[hidden] {
    display: none !important;
}

.lbc-overview-panel {
    max-width: 760px;
}

.lbc-overview-title {
    margin: 0 0 58px;
    color: var(--lbc-heading);
    font-size: clamp(40px, 6.2vw, var(--lbc-overview-title-size, 108px));
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .77;
    text-transform: uppercase;
}

.lbc-overview-description {
    max-width: 760px;
    font-size: clamp(12px, 1.35vw, var(--lbc-overview-text-size, 20px));
    line-height: 1.65;
}


.lbc-overview-instruction {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
    margin-top: 24px;
    padding: 9px 14px;
    border: 1px solid rgba(33, 71, 116, .13);
    border-radius: 16px;
    background: rgba(233, 239, 246, .52);
    color: var(--lbc-active);
    font-size: var(--lbc-instruction-size, 13px);
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.lbc-overview-instruction-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(17, 31, 52, .08);
}

.lbc-overview-instruction-icon svg {
    width: 15px;
    height: 15px;
}

.lbc-panel-logo {
    display: flex;
    align-items: center;
    min-height: 115px;
    margin: 0 0 28px;
}

.lbc-panel-logo img {
    display: block;
    width: auto;
    max-width: min(100%, 455px);
    max-height: 125px;
    object-fit: contain;
    object-position: left center;
}

.lbc-panel > h2:not(.screen-reader-text) {
    max-width: 620px;
    margin: 0 0 24px;
    color: var(--lbc-heading);
    font-size: clamp(40px, 4vw, 70px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .98;
}

.lbc-description {
    max-width: 640px;
    color: var(--lbc-text);
    font-size: clamp(17px, 1.45vw, 21px);
    line-height: 1.72;
}

.lbc-description p {
    margin: 0 0 1em;
}

.lbc-description p:last-child {
    margin-bottom: 0;
}

.lbc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    margin-top: 34px;
    padding: 15px 24px;
    border: 1px solid var(--lbc-button);
    border-radius: 2px;
    background: var(--lbc-button);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

.lbc-button svg {
    width: 19px;
    height: 19px;
    transition: transform .25s ease;
}

.lbc-button:hover,
.lbc-button:focus-visible {
    background: transparent;
    color: var(--lbc-button) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17, 31, 52, .12);
}

.lbc-button:hover svg,
.lbc-button:focus-visible svg {
    transform: translateX(4px);
}

@keyframes lbcOrbitSpin {
    to { transform: rotate(360deg); }
}

@keyframes lbcOrbitCounterSpin {
    to { transform: rotate(-360deg); }
}

@keyframes lbcPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lbcNodeSpotlight {
    0%, 100% {
        transform: scale(1);
        border-color: #fff;
        box-shadow: 0 13px 34px rgba(17, 31, 52, .14), 0 2px 8px rgba(17, 31, 52, .06);
    }
    22% {
        transform: scale(1.12);
        border-color: rgba(33, 71, 116, .88);
        box-shadow: 0 0 0 10px rgba(33, 71, 116, .14), 0 0 28px rgba(33, 71, 116, .24), 0 18px 44px rgba(17, 31, 52, .18);
    }
    58% {
        transform: scale(1.08);
        border-color: rgba(33, 71, 116, .58);
        box-shadow: 0 0 0 6px rgba(33, 71, 116, .10), 0 0 20px rgba(33, 71, 116, .18), 0 15px 38px rgba(17, 31, 52, .16);
    }
}

@keyframes lbcNodeLogoPop {
    0%, 100% { transform: scale(1); }
    22% { transform: scale(1.07); }
    58% { transform: scale(1.04); }
}

@media (max-width: 1180px) {
    .lbc-wrap {
        --lbc-visual-size: 510px;
        --lbc-ring-size: 382px;
        --lbc-orbit-radius: 191px;
        --lbc-orbit-offset: -191px;
        --lbc-node-size: 103px;
        --lbc-node-half: -51.5px;
        --lbc-center-size: 240px;
    }

    .lbc-layout {
        grid-template-columns: minmax(450px, 1fr) minmax(320px, .9fr);
        gap: 36px;
    }

    .lbc-center {
        padding: 30px;
    }

    .lbc-center img {
        max-width: 182px;
        max-height: 88px;
    }

    .lbc-node-inner {
        padding: 13px;
    }

    .lbc-node img {
        max-width: 86px;
        max-height: 58px;
    }

    .lbc-panel-logo img {
        max-width: min(100%, 390px);
        max-height: 108px;
    }
}

@media (max-width: 900px) {
    .lbc-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .lbc-content {
        min-height: 0;
        padding: 0;
        text-align: center;
    }

    .lbc-overview-panel {
        max-width: 720px;
        margin: 0 auto;
        text-align: left;
    }

    .lbc-overview-title {
        margin-bottom: 38px;
        font-size: clamp(40px, 13vw, min(var(--lbc-overview-title-size, 108px), 88px));
    }

    .lbc-panel-logo {
        justify-content: center;
        margin-bottom: 22px;
    }

    .lbc-panel-logo img {
        object-position: center;
    }

    .lbc-panel > h2:not(.screen-reader-text),
    .lbc-description {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 560px) {
    .lbc-wrap {
        --lbc-visual-size: 390px;
        --lbc-ring-size: 286px;
        --lbc-orbit-radius: 143px;
        --lbc-orbit-offset: -143px;
        --lbc-node-size: 86px;
        --lbc-node-half: -43px;
        --lbc-center-size: 184px;
    }

    .lbc-orbit {
        max-width: 100%;
    }

    .lbc-ring {
        border-width: 15px;
    }

    .lbc-center {
        padding: 22px;
    }

    .lbc-center::after {
        inset: 7px;
    }

    .lbc-center img {
        max-width: 142px;
        max-height: 66px;
    }

    .lbc-node-inner {
        padding: 9px;
        border-width: 3px;
    }

    .lbc-node img {
        max-width: 72px;
        max-height: 47px;
    }

    .lbc-overview-panel {
        text-align: left;
    }

    .lbc-overview-title {
        margin-bottom: 30px;
        font-size: clamp(40px, 20vw, min(var(--lbc-overview-title-size, 108px), 74px));
    }

    .lbc-overview-instruction {
        font-size: min(var(--lbc-instruction-size, 13px), 13px);
        gap: 8px;
        padding: 8px 12px;
    }

    .lbc-overview-instruction-icon {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }

    .lbc-overview-title {
    }

    .lbc-overview-description {
        font-size: min(var(--lbc-overview-text-size, 20px), 16px);
        line-height: 1.65;
    }


    .lbc-overview-instruction {
        align-items: flex-start;
        margin-top: 20px;
        border-radius: 14px;
        font-size: min(var(--lbc-instruction-size, 13px), 13px);
        text-align: left;
    }

    .lbc-panel-logo {
        min-height: 82px;
        margin-bottom: 18px;
    }

    .lbc-panel-logo img {
        max-width: min(100%, 310px);
        max-height: 88px;
    }

    .lbc-panel > h2:not(.screen-reader-text) {
        font-size: clamp(36px, 12vw, 54px);
    }

    .lbc-description {
        font-size: 16px;
        line-height: 1.65;
    }

    .lbc-button {
        width: 100%;
        margin-top: 26px;
    }
}

@media (max-width: 390px) {
    .lbc-wrap {
        --lbc-visual-size: 320px;
        --lbc-ring-size: 232px;
        --lbc-orbit-radius: 116px;
        --lbc-orbit-offset: -116px;
        --lbc-node-size: 70px;
        --lbc-node-half: -35px;
        --lbc-center-size: 150px;
    }

    .lbc-center {
        padding: 17px;
    }

    .lbc-center img {
        max-width: 116px;
        max-height: 54px;
    }

    .lbc-node-inner {
        padding: 6px;
    }

    .lbc-node img {
        max-width: 60px;
        max-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lbc-rotator,
    .lbc-node-face,
    .lbc-panel,
    .lbc-node-inner,
    .lbc-node img,
    .lbc-button,
    .lbc-button svg {
        animation: none !important;
        transition: none !important;
    }
}