/*
=========================================================
БЛОК «НАШИ ТЕХНОЛОГИИ»
Структура:
1. Базовые стили
2. Desktop 1400+
3. Большой desktop 1921+
4. Планшет
5. Мобильные устройства
=========================================================
*/


.technologies-list {
    color: #000000;
}
.main-technologies .technologies-list {
    display: flex;
    flex-wrap: wrap;

    width: 100%;

    margin: 0;
    padding: 0;

    justify-content: center;
    align-items: center;

    column-gap: 47px;
    row-gap: 20px;
}
.technologies-list__tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    min-height: 47px;
    padding: 0 38px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;

    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.28);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .technologies-list__tag:hover {
        box-shadow:
            0 5px 9px rgba(0, 0, 0, 0.28),
            0 0 0 3px var(--tech-border),
            0 0 16px var(--tech-ring);
    }
}
.technologies-list__tag:focus-visible {
    box-shadow:
        0 5px 9px rgba(0, 0, 0, 0.28),
        0 0 0 3px var(--tech-border),
        0 0 16px var(--tech-ring);
}
.technologies-list__tag--green {
    --tech-border: #35c997;
    --tech-ring: rgba(53, 201, 151, 0.32);

    background: #81EEC0;
}
.technologies-list__tag--yellow {
    --tech-border: #d8ca36;
    --tech-ring: rgba(216, 202, 54, 0.32);

    background: #FFFBA6;
}
.technologies-list__tag--pink {
    --tech-border: #e76898;
    --tech-ring: rgba(231, 104, 152, 0.32);

    background: #FFA5C7;
}

@media (min-width: 1400px) /*and (max-width: 1920px)*/ {

    .main-technologies {
        margin:
            clamp(
                80px,
                calc(17.008px + 4.374vw),
                100.997px
            )
            0;
    }

    .main-technologies > .inner-width {
        max-width:
            clamp(
                1143px,
                calc(243px + 62.5vw),
                1443px
            );
    }

    /*
     * Все технологии находятся в одном flex-контейнере.
     * Браузер сам переносит элементы на следующую строку.
     */
    .main-technologies .technologies-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        width: 100%;
        margin: 0;
        padding: 0;

        column-gap:
            clamp(
                47px,
                calc(9.992px + 2.57vw),
                46.336px
            );

        row-gap:
            clamp(
                20px,
                calc(4.252px + 1.094vw),
                25.249px
            );
    }

    .main-technologies .technologies-list__tag {
        min-height:
            clamp(
                47px,
                calc(9.992px + 2.57vw),
                56.336px
            );

        padding:
            0
            clamp(
                38px,
                calc(8.079px + 2.078vw),
                39.974px
            );

        border-radius:
            clamp(
                10px,
                calc(2.126px + 0.547vw),
                12.625px
            );

        font-size:
            clamp(
                20px,
                calc(4.252px + 1.094vw),
                21.249px
            );

        box-shadow:
            0
            clamp(
                5px,
                calc(1.063px + 0.273vw),
                6.312px
            )
            clamp(
                9px,
                calc(1.913px + 0.492vw),
                11.362px
            )
            rgba(0, 0, 0, .28);
    }

    .main-technologies .technologies-list__tag:focus-visible {
        box-shadow:
            0
            clamp(
                5px,
                calc(1.063px + 0.273vw),
                6.312px
            )
            clamp(
                9px,
                calc(1.913px + 0.492vw),
                11.362px
            )
            rgba(0, 0, 0, .28),

            0 0 0
            clamp(
                3px,
                calc(0.638px + 0.164vw),
                3.787px
            )
            var(--tech-border),

            0 0
            clamp(
                16px,
                calc(3.402px + 0.875vw),
                20.199px
            )
            var(--tech-ring);
    }
}
@media
    (min-width: 1400px)
    /*and (max-width: 1920px)*/
    and (hover: hover)
    and (pointer: fine) {

    .main-technologies .technologies-list__tag:hover {
        box-shadow:
            0
            clamp(
                5px,
                calc(1.063px + 0.273vw),
                6.312px
            )
            clamp(
                9px,
                calc(1.913px + 0.492vw),
                11.362px
            )
            rgba(0, 0, 0, .28),

            0 0 0
            clamp(
                3px,
                calc(0.638px + 0.164vw),
                3.787px
            )
            var(--tech-border),

            0 0
            clamp(
                16px,
                calc(3.402px + 0.875vw),
                20.199px
            )
            var(--tech-ring);
    }
}
@media (min-width: 1921px) and (min-device-width: 2200px) {

    .main-technologies {
        margin:
            clamp(
                100.997px,
                calc(-19.997192px + 6.301781vw),
                147px
            )
            0;
    }

    .main-technologies > .inner-width {
        width: 100%;

        max-width:
            clamp(
                1443px,
                calc(-292.890411px + 90.410959vw),
                2103px
            );

        margin-right: auto;
        margin-left: auto;
    }

    .main-technologies .technologies-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        width: 100%;
        margin: 0;
        padding: 0;

        column-gap:
            clamp(
                59.336px,
                calc(-10.793973px + 3.652603vw),
                70px
            );

        row-gap:
            clamp(
                25.249px,
                calc(-5.657740px + 1.609726vw),
                37px
            );
    }

    .main-technologies .technologies-list__tag {
        min-height:
            clamp(
                59.336px,
                calc(-10.793973px + 3.652603vw),
                70px
            );

        padding:
            0
            clamp(
                47.974px,
                calc(-9.957397px + 3.017260vw),
                53px
            );

        border-width:
            clamp(
                1px,
                calc(-1.630137px + 0.136986vw),
                2px
            );

        border-radius:
            clamp(
                12.625px,
                calc(-1.511986px + 0.736301vw),
                18px
            );

        font-size:
            clamp(
                25.249px,
                calc(-5.657740px + 1.609726vw),
                26px
            );

        box-shadow:
            0
            clamp(
                6.312px,
                calc(-0.757808px + 0.368219vw),
                9px
            )
            clamp(
                11.362px,
                calc(-3.466712px + 0.772329vw),
                17px
            )
            rgba(0, 0, 0, .28);
    }

    .main-technologies .technologies-list__tag:focus-visible {
        box-shadow:
            0
            clamp(
                6.312px,
                calc(-0.757808px + 0.368219vw),
                9px
            )
            clamp(
                11.362px,
                calc(-3.466712px + 0.772329vw),
                17px
            )
            rgba(0, 0, 0, .28),

            0 0 0
            clamp(
                3.787px,
                calc(-2.033493px + 0.303151vw),
                6px
            )
            var(--tech-border),

            0 0
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            )
            var(--tech-ring);
    }
}
@media
    (min-width: 1921px)
    and (hover: hover)
    and (pointer: fine) {

    .main-technologies .technologies-list__tag:hover {
        box-shadow:
            0
            clamp(
                6.312px,
                calc(-0.757808px + 0.368219vw),
                9px
            )
            clamp(
                11.362px,
                calc(-3.466712px + 0.772329vw),
                17px
            )
            rgba(0, 0, 0, .28),

            0 0 0
            clamp(
                3.787px,
                calc(-2.033493px + 0.303151vw),
                6px
            )
            var(--tech-border),

            0 0
            clamp(
                20.199px,
                calc(-2.948836px + 1.205616vw),
                29px
            )
            var(--tech-ring);
    }
}
@media (min-width: 1024px) and (max-width: 1278px) {

    .main-technologies {
        box-sizing: border-box;
    }

    .main-technologies > .inner-width {
        width: auto;
        max-width: none;

        margin-right: clamp(42px, 6vw, 76px);
        margin-left: clamp(42px, 6vw, 76px);
    }

    .main-technologies .page-section__title.center {
        display: block;
        float: none;
        position: static;

        width: 100%;
        max-width: none;

        margin: 0 auto 34px;
        padding: 0;

        transform: none;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(36px, 3.6vw, 46px);
        font-weight: 700;
        line-height: 1.15;

        text-align: center;

        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-technologies > .inner-width > div.center {
        width: 100%;
        text-align: initial;
    }

    .main-technologies .technologies-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        gap: 16px 18px;

        width: 100%;
        max-width: 1040px;

        margin: 0 auto;
        padding: 0;
    }

    .main-technologies .technologies-list__tag {
        box-sizing: border-box;
        display: inline-flex;

        min-height: 52px;

        margin: 0;
        padding: 0 28px;

        align-items: center;
        justify-content: center;

        border-radius: 12px;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.15;

        white-space: nowrap;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {

    .main-technologies > .inner-width {
        width: auto;
        max-width: none;

        margin-right: clamp(28px, 4.5vw, 44px);
        margin-left: clamp(28px, 4.5vw, 44px);
    }

    .main-technologies .page-section__title.center {
        display: block;
        float: none;
        position: static;

        width: 100%;
        max-width: none;

        margin: 0 auto 30px;
        padding: 0;

        transform: none;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(32px, 4.4vw, 40px);
        font-weight: 700;
        line-height: 1.15;

        text-align: center;

        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }

    .main-technologies > .inner-width > div.center {
        width: 100%;
        text-align: initial;
    }

    .main-technologies .technologies-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        gap: 14px;

        width: 100%;
        max-width: 820px;

        margin: 0 auto;
        padding: 0;
    }

    .main-technologies .technologies-list__tag {
        box-sizing: border-box;
        display: inline-flex;

        min-height: 48px;

        margin: 0;
        padding: 0 24px;

        align-items: center;
        justify-content: center;

        border-radius: 11px;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(16px, 2vw, 18px);
        font-weight: 700;
        line-height: 1.15;

        white-space: nowrap;
    }
}
@media (max-width: 767px) {
    .main-technologies .technologies-list {
        display: flex;
        flex-wrap: wrap;

        width: 100%;

        margin: 0;

        justify-content: center;

        gap: 10px 8px;
    }
    .main-technologies {
        box-sizing: border-box;

        margin: 40px 0;

        /* Не перекрываем общий эллипс родительского блока */
        background: transparent;
    }

    .main-technologies > .inner-width {
        width: auto;
        max-width: none;

        margin-right: 20px;
        margin-left: 20px;
    }

    .main-technologies .page-section__title.center {
        display: block;
        float: none;
        clear: both;
        position: static;

        width: 100%;
        max-width: none;

        margin: 0 0 24px;
        padding: 0;

        left: auto;
        right: auto;

        transform: none;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.3px;

        text-align: center !important;

        color: #fff;
        background: none;

        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-text-fill-color: #fff;
    }

    .main-technologies > .inner-width > div.center {
        width: 100%;
        text-align: initial;
    }

    .main-technologies .technologies-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        gap: 10px 8px;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .main-technologies .technologies-list__tag {
        box-sizing: border-box;
        display: flex;
        flex: 0 0 auto;

        width: auto;
        min-width: 0;
        min-height: 39px;
        height: 39px;

        margin: 0;
        padding: 0 10px;

        align-items: center;
        justify-content: center;

        border-radius: 8px;

        font-family: 'Manrope', 'Rubik', Arial, sans-serif;
        font-size: clamp(14px, 4vw, 16px);
        font-weight: 700;
        line-height: 1;

        text-align: center;
        white-space: nowrap;

        color: #080713;

        box-shadow:
            0 5px 10px rgba(3, 2, 12, .30);
    }

    .main-technologies .technologies-list__tag--green {
        background: #82e8c0;
    }

    .main-technologies .technologies-list__tag--yellow {
        background: #fff79a;
    }

    .main-technologies .technologies-list__tag--pink {
        background: #f59bc5;
    }
}
@media (max-width: 374px) {

    .main-technologies > .inner-width {
        margin-right: 16px;
        margin-left: 16px;
    }

    .main-technologies .page-section__title.center {
        margin-bottom: 21px;
        font-size: 24px;
    }

    .main-technologies .technologies-list {
        gap: 9px 7px;
    }

    .main-technologies .technologies-list__tag {
        min-height: 37px;
        height: 37px;

        padding: 0 7px;

        border-radius: 8px;

        font-size: 13px;
    }

    /*
     * Общий тёмный фон и эллипс принадлежат родителю.
     * Вложенные секции остаются прозрачными.
     */
    .trust-technologies-area {
        position: relative;

        isolation: isolate;
        overflow: visible;

        background: #0e0c20;
    }

    .trust-technologies-area > .page-section {
        position: relative;
        z-index: 1;

        background: transparent !important;
    }
}