.benefits {
    position: relative;
    width: 100%;
    margin-top: 80px;
    overflow: hidden;
}

.benefits__svg {
    display: block;
    width: 100%;
    height: auto;
}

.benefits__tooltip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.benefits__tooltip--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.benefits__mobile {
    display: none;
}

@media (max-width: 768px) {
    .benefits__svg {
        display: none;
    }

    .benefits__mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: 100%;
    }

    .benefits__mobile-title {
        font-size: 2.5rem;
        line-height: 1.4;
        font-weight: 500;
        color: var(--black);
    }

    .benefits__mobile-title-accent {
        color: var(--orange);
    }

    .benefits__mobile-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .benefits__mobile-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .benefits__mobile-label {
        font-size: 1.75rem;
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--black);
    }

    .benefits__mobile-tooltip {
        font-size: 12px;
        line-height: 1.5;
        color: var(--black);
        padding: 17px 23px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 3px;
    }
}

@media (max-width: 1024px) {
    .benefits__svg > text {
        font-size: 2.5rem;
    }

    .benefits__text {
        font-size: 1.75rem;
    }

    .benefits__tooltip text {
        font-size: 20px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .benefits__svg {
        height: 45rem;
    }

    .benefits__title {
        transform: translate(0, 80px);
    }

    .benefits__group[data-id="1"] {
        transform: translate(400px, -40px);
    }
    .benefits__group[data-id="2"] {
        transform: translate(700px, 60px);
    }
    .benefits__group[data-id="3"] {
        transform: translate(60px, 160px);
    }
    .benefits__group[data-id="4"] {
        transform: translate(700px, 240px);
    }

    .benefits__group[data-id="0"] {
        transform: translate(60px, 500px);
    }
    .benefits__group[data-id="6"] {
        transform: translate(550px, 600px);
    }
    .benefits__group[data-id="5"] {
        transform: translate(350px, 700px);
    }

    .benefits__tooltip { display: none; }
}