@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

:root {
    --color-background: #F8F9FF;
    --color-background-secondary: #fff;
    --color-text-primary: #1C1C1C;
    --color-text-secondary: #999999;
    --color-accent: #BE2B27;
    --color-button: #1C1C1C;
    --color-button-text: #FFFFFF;
    --color-white: #FFFFFF;
}

.color-scheme-white {
    --color-background: #fff;
    --color-background-secondary: #F8F9FF;
    --color-text-primary: #1C1C1C;
    --color-text-secondary: #5f6880;
    --color-accent: #BE2B27;
    --color-button: #1C1C1C;
    --color-button-text: #FFFFFF;
}

.color-scheme-gray {
    --color-background: #E7E8F0;
    --color-background-secondary: #fff;
    --color-text-primary: #1C1C1C;
    --color-text-secondary: #5E5E5E;
    --color-accent: #BE2B27;
    --color-button: #1C1C1C;
    --color-button-text: #FFFFFF;
}

.color-scheme-dark {
    --color-background: #0D0C0DB2;
    --color-background-secondary: #fff;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A8A8A8;
    --color-accent: #BE2B27;
    --color-button: #262626;
    --color-button-text: #FFFFFF;
}

html {
    font-size: 10px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 1.6rem;
    line-height: 125%;
    font-weight: 400;
    color: var(--color-text-primary);
    background: var(--color-background);
}

@media (min-width: 1024px) {
    body {
        font-size: 2rem;
        line-height: 120%;
    }
}

h1, .h1 {
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 94%;
}

@media (min-width: 1024px) {
    h1, .h1 {
        font-size: 9.6rem;
        line-height: 85%;
    }
}

h2, .h2 {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 111%;
}

@media (min-width: 1024px) {
    h2, .h2 {
        font-size: 6.4rem;
        line-height: 117%;
    }
}

h3, .h3 {
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 81%;
}

@media (min-width: 1024px) {
    h3, .h3 {
        font-size: 4.8rem;
        line-height: 117%;
    }
}

h4, .h4 {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 117%;
}

@media (min-width: 1024px) {
    h4, .h4 {
        font-size: 4rem;
        line-height: 105%;
    }
}

h5, .h5 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 115%;
}

@media (min-width: 1024px) {
    h5, .h5 {
        font-size: 3.2rem;
        line-height: 125%;
    }
}

a {

}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 22rem;
    padding: 1rem 1.5rem;
    transition: ease-out .3s;
}

.btn:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
}

.btn-primary {
    color: var(--color-button-text);
    background-color: var(--color-button);
}

.announcement-bar {
    position: relative;
    background-color: #000000;
    color: #fff;
    z-index: 56;
}

.announcement-bar__background {
    overflow: clip;
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    top: 0;
}

.announcement-bar__background-image {
    position: absolute;
    height: 100%;
    left: -17rem;
    top: 0;
}

@media (min-width: 768px) {
    .announcement-bar__background-image {
        left: 0;
    }
}

.announcement-bar__background-image-twin {
    right: -10rem;
    left: initial;
    transform: scaleX(-1);
}

@media (min-width: 768px) {
    .announcement-bar__background-image-twin {
        right: 0;
    }
}

.announcement-bar__container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
}

@media (min-width: 768px) {
    .announcement-bar__container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 1.4rem;
    }
}

.announcement-bar__text {
    display: flex;
    gap: 0.3rem;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .announcement-bar__text {
        gap: 1rem;
        font-size: 1.5rem;
    }
}

.announcement-bar__container svg {
    display: inline-block;
}

.announcement-bar__container .btn {
    --color-button: #fff;
    --color-button-text: #1c1c1c;
    background-color: var(--color-button);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-button-text);
    padding: 0.6rem 2rem;
}

.announcement-bar__container .btn:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
}

@media (min-width: 768px) {
    .announcement-bar__container .btn {
        font-size: 1.5rem;
        padding: 0.6rem 2rem;
        line-height: 96%;
    }
}

/* Header */

.header {
    position: sticky;
    top: 0;
    z-index: 55;
    transform: translateY(0);
    transition: all .3s ease-in-out;
}

@media (min-width: 1024px) {
    .header {
        padding: 2rem 2.5rem;
    }
}

@media (min-width: 1440px) {
    .header {
        padding: 2rem 6.5rem;
    }
}

.header.inactive {
    transform: translateY(-100%);
}

.header__container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.7rem 2rem;
    background: var(--color-background);
    color: var(--color-text-primary);
    z-index: 1;
}

@media (min-width: 1024px) {
    .header__container {
        padding: 1rem 0.5rem 1rem 1.5rem;
        border-radius: 3.1rem;
        box-shadow: 0 1.6rem 3.2rem 0 rgba(22, 37, 66, 0.08);
        gap: 1.5rem;
    }
}

@media (min-width: 1440px) {
    .header__container {
        padding: 1rem 0.5rem 1rem 4rem;
        gap: 2.5rem;
    }
}

.header__container:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    left: 0;
    top: 0;
    z-index: -1;
    border-radius: 3.1rem;
    overflow: clip;
}

.header__logo {
    display: flex;
    max-width: 15rem;
}

@media (min-width: 1440px) {
    .header__logo {
        max-width: 20.5rem;
    }
}

.header__logo-link {
    display: flex;
    width: 100%;
}

.header__logo-img {
    width: 100%;
}

@media (min-width: 1024px) {
    .header__burger {
        display: none;
    }
}

.header__burger-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 100%;
    background-color: transparent;
    transition: .5s ease-in-out ;
    overflow: clip;
}

.header__burger.active .header__burger-icon {
    background-color: #1C1C1C;
    color: var(--color-white);
}

.header__burger-icon-item {
    transition: .5s;
}

.header__burger-icon-arrow {
    position: absolute;
    transform: translateX(100%);
    opacity: 0;
}

.header__burger[data-active-sub-menu] .header__burger-icon-arrow {
    transform: translateX(0);
    opacity: 1;
}

.header__burger-icon-lines {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 2rem;
    height: 1.5rem;
}

.header__burger[data-active-sub-menu] .header__burger-icon-lines {
    transform: translateX(-150%);
    opacity: 0;
}

.header__burger.active .header__burger-icon-lines {
    justify-content: center;
}

.header__burger-icon-line {
    height: 0.2rem;
    width: 100%;
    background-color: currentColor;
    border-radius: .2rem;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 1;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.header__burger.active .header__burger-icon-line {
    position: absolute;
}

.header__burger.active .header__burger-icon-lines .header__burger-icon-line:first-child {
    opacity: 0;
}

.header__burger.active .header__burger-icon-lines .header__burger-icon-line:nth-child(2) {
    transform: rotate(45deg);
}

.header__burger.active .header__burger-icon-lines .header__burger-icon-line:nth-child(3) {
    transform: rotate(-45deg);

}

.header__burger-menu {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    height: calc(100vh - 130px);
    padding: 2rem;
    background-color: var(--color-background-secondary);
    transition: all 0.2s ease-out;
    transform: translateY(-100%);
    visibility: hidden;
    overflow: clip;
    overflow-y: auto;
    z-index: -2;
}

.header__burger[data-active-sub-menu] .header__burger-menu {
    overflow-y: clip;
}

.header__burger-menu-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.header__burger.active .header__burger-menu {
    transform: translateY(0);
    visibility: visible;
}

.header__burger-menu-list {
    /*position: relative;*/
    padding: 0 3rem 0 1.5rem;
    background-color: var(--color-background);
    border-radius: 2.8rem;
}

.header__burger-menu-list:before {
    content: '';
    display: block;
    position: absolute;
    left: -1.5rem;
    top: -1rem;
    height: 100%;
    width: 100vw;
    background-color: var(--color-background-secondary);
    transform: translateX(150%);
    transition: all .5s;
    z-index: 1;
}

.header__burger-menu-list:has(.menu-item-has-children.active):before {
    transform: translateX(0);
}

.header__burger-menu-list .header__burger-menu-item:not(:last-child) {
    border-bottom: 0.1rem solid #DBE0E8;
}

.header__burger-menu-item {
    padding: 1.6rem 2rem 1.6rem 0.5rem;
}

.header__burger-menu-item:hover > .header__burger-menu-item-link {
    color: var(--color-accent);
}

.header__burger-menu-item-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
}

.header__burger-menu-item-arrow {
    position: absolute;
    right: -3.5rem;
    color: #c5c5c7;;
}

.header__burger-menu-item:hover > .header__burger-menu-item-link .header__burger-menu-item-arrow,
.header__burger-menu-item-current {
    color: var(--color-accent);
}

.header__burger-menu-sub-menu {
    background-color: var(--color-background);
    width: calc(100% - 4rem);
    top: 2rem;
    left: 2rem;
    transform: translateX(150%);
    transition: all .5s;
    overflow-y: auto;
    overflow-x: clip;
    z-index: 1;
}

.header__burger-menu-list .header__burger-menu-sub-menu {
    position: absolute;
}

.header__burger-menu-item.active > .header__burger-menu-sub-menu {
    transform: translateX(0);
}

.header__burger-menu-container .btn {
    padding: 1.8rem 1.5rem;
    font-size: 1.7rem;
    font-weight: 500;
}

.header__burger-menu-contact-label {
    font-weight: 500;
    color: #5c6379;
}

.header__burger-menu-footer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: .5rem;
}

.header__burger-menu-contact-link {
    display: flex;
    align-items: center;

    gap: 1rem
}

.header__menu {
    display: none;
}

@media (min-width: 1024px) {
    .header__menu {
        display: flex;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 144%;
    }
}

@media (min-width: 1440px) {
    .header__menu {
        font-size: 1.6rem;
    }
}

.header__actions {
    display: none;
}

@media (min-width: 1024px) {
    .header__actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
    }
}

.header__actions-languages {
    display: flex;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 120%;
}

@media (min-width: 1440px) {
    .header__actions-languages {
        font-size: 1.6rem;
    }
}

.header__actions-language {
    color: #A4A4A4;
    position: relative;
    display: flex;
    gap: 1rem;
    transition: all .3s ease-in;
}

.header__actions-language:hover {
    color: var(--color-accent);
}

.header__actions-language-current {
    color: var(--color-text-primary);
}

.header__actions-languages .header__actions-language:not(:first-child) {
    padding-left: 1rem;
}

.header__actions-languages .header__actions-language:not(:last-child):after {
    content: '';
    position: relative;
    display: block;
    height: 100%;
    top: 0;
    right: 0;
    width: 0.1rem;
    background-color: var(--color-text-primary);
}

.header__actions-account {
    transition: all .3s ease;
    cursor: pointer;
}

.header__actions-account:hover {
    color: var(--color-accent);
}

.header__actions-consult {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
}

@media (min-width: 1440px) {
    .header__actions-consult {
        font-size: 1.5rem;
        padding: 1rem 2.5rem;
    }
}

.header__menu {
    position: relative;
    padding: 0 1.5rem;
}

.header__menu-list {
    display: flex;
    gap: 1.4rem;
}

@media (min-width: 1440px) {
    .header__menu-list {
        gap: 2rem;
    }
}

.header__menu-nav .header__menu-list > .header__menu-item {
    padding: 1.5rem 0;
}

.header__menu-link {
    transition: all .3s ease-in;
}

.header__menu-item:hover > .header__menu-link,
.header__menu-item-current > .header__menu-link {
    color: var(--color-accent);
}

.header__menu-link {
    display: flex;
}

.header__menu-sub-menu {
    interpolate-size: allow-keywords;
    position: absolute;
    top: 20%;
    overflow: clip;
    transition: all .3s;
    padding: 2rem 2.5rem;
    z-index: -15;
    min-width: 15rem;
    box-shadow: 0 1.6rem 3.2rem 0 rgba(22, 37, 66, 0.08);
    height: 0;
}

.header__menu-sub-menu .header__menu-link{
    line-height: 300%;
}

.header__menu-sub-menu:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    z-index: -1;
}

.header__menu-item--has-children:hover .header__menu-sub-menu {
    top: calc(100% + 1.7rem);
    height: auto;
    z-index: 1;
}

/* Home - Main Banner */

.main-banner {

}

.main-banner__container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: clip;
}

@media (min-width: 1024px) {
    .main-banner__container {
        flex-direction: row;
        overflow: initial;
        overflow-x: clip;
    }
}

.main-banner__text-content {
    position: relative;
    padding: 3rem 2rem;
    z-index: 1;
}

@media (min-width: 1024px) {
    .main-banner__text-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: 11rem;
        padding-left: 6rem;
    }
}

.main-banner__content {
    display: flex;
    flex-direction: column;
    max-width: 30rem;
}

@media (min-width: 1024px) {
    .main-banner__content {
        max-width: 65rem;
        height: 100%;
        justify-content: center;
        gap: 2rem;
    }
}

.main-banner__platform-content {
    display: none;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .main-banner__platform-content {
        gap: 5rem;
    }
}

.main-banner__platform-content.active {
    display: flex;
}

@media (min-width: 769px) and (max-width: 1700px) {
    .main-banner__platform-title,
    .main-banner__title {
        font-size: 5rem;
    }
}

.main-banner__text {
    font-weight: 400;
    font-size: 2rem;
    line-height: 125%;
    color: #999;
    max-width: 26rem;
}

.main-banner__platform-text {

}

@media (min-width: 1024px) {
    .main-banner__platform-text {
        font-size: 3.2rem;
    }
}

.main-banner__btn {
    margin-top: 3rem;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    padding: 2rem .5rem
}

@media (min-width: 1024px) {
    .main-banner__btn {
        margin-top: 4rem;
        width: max-content;
        padding: 2rem 3.5rem;
        font-size: 2.4rem;
    }
}

.main-banner__footer {
    position: relative;
    flex-direction: column;
    gap: .5rem;
    display: none;
    bottom: 0;
    z-index: 2;
}

@media (min-width: 560px) and (max-width: 1024px) {
    .main-banner__footer {
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .main-banner__footer {
        padding: 2rem 0;
        gap: 0;
    }
}

.main-banner__footer-mobile {
    display: flex;
}

@media (min-width: 1024px) {
    .main-banner__footer-mobile {
        display: none;
    }

    .main-banner__footer-desktop {
        display: flex;
        max-width: 50rem;
    }
}

.main-banner__footer-platforms {
    display: flex;
    max-width: 56rem;
    width: 100%;
    overflow-x: clip;
    padding: 2rem 2rem;
}

@media (min-width: 1024px) {
    .main-banner__footer-platforms {
        padding: 2rem 2rem;
        transform: translateX(-2rem);
    }
}

.main-banner__footer-heading {
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 133%;
}

@media (min-width: 1024px) {
    .main-banner__footer-heading {
        text-align: left;
    }
}

.main-banner__footer-heading-main {
    color: #5f6880;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.main-banner__footer-platform.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    aspect-ratio: 1;
    padding: 1.2rem;
    border-radius: 100px;
    background-color: var(--color-background-secondary);
    /*box-shadow: 0 16px 32px -8px rgba(22, 37, 66, 0.15);*/
    box-shadow: 0 16px 10px -8px rgba(22, 37, 66, 0.15);
}

@media (min-width: 1024px) {
    .main-banner__footer-platform.swiper-slide {
        transition: scale 0.5s ease-in-out;
        scale: 1;
    }

    .main-banner__footer-platform.swiper-slide:hover {
        scale: 1.1;
        cursor: pointer;
    }

}

.main-banner__footer-platform.swiper-slide-active:before {
    content: '';
    position: absolute;
    display: flex;
    width: 120%;
    height: 120%;
    border-radius: 100%;
    opacity: .7;
    background: linear-gradient(160deg, #476dfe 6.99%, #7bd1ff 90.12%);
    -webkit-mask-image: conic-gradient(#000 0deg, transparent 360deg),
    radial-gradient(
            farthest-side,
            transparent calc(100% - 7.5px),
            #000 calc(100% - 6.5px) calc(100% - 1px),
            transparent 100%
    );
    -webkit-mask-composite: source-in;
    mask-image: conic-gradient(#000 0deg, transparent 360deg),
    radial-gradient(
            farthest-side,
            transparent calc(100% - 7.5px),
            #000 calc(100% - 6.5px) calc(100% - 1px),
            transparent 100%
    );
    mask-composite: intersect;
}

.main-banner__footer-platform.swiper-slide-active:after {
    content: '';
    position: absolute;
    display: flex;
    width: 120%;
    height: 120%;
    border-radius: 100%;
    opacity: .7;
    background: linear-gradient(160deg, #476dfe 6.99%, #7bd1ff 90.12%);
    -webkit-mask-image: conic-gradient(#000 var(--angle), transparent var(--angle)),
    radial-gradient(
            farthest-side,
            transparent calc(100% - 7.5px),
            #000 calc(100% - 6.5px) calc(100% - 1px),
            transparent 100%
    );
    -webkit-mask-composite: source-in;
    mask-image: conic-gradient(#000 var(--angle), transparent var(--angle)),
    radial-gradient(
            farthest-side,
            transparent calc(100% - 7.5px),
            #000 calc(100% - 6.5px) calc(100% - 1px),
            transparent 100%
    );
    mask-composite: intersect;
    animation: draw-smooth 5.6s linear forwards;
}

.main-banner__footer-logo {
    display: flex;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .main-banner__footer-logo {
        transition: all .5s ease-in-out;
    }
}

@keyframes draw-smooth {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

@media (min-width: 1024px) {
    .main-banner__media-content {
        display: flex;
        align-items: center;
        padding: 6rem 3rem 0 0;
    }
}

.main-banner__media-content-container {
    position: relative;
    height: 35rem;
}

@media (min-width: 1024px) {
    .main-banner__media-content-container {
        height: auto;
        transition: none;
        will-change: transform;
        /*top: -10rem;*/
    }
}

.main-banner__main-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width: 1024px) {
    .main-banner__main-image-container {

    }
}

.main-banner__main-image-container:before {
    content: '';
    position: absolute;
    display: block;
    background: linear-gradient(180deg, rgba(242, 245, 253, 0) 0%, #f7f8ff 64.37%);
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
}

@media (min-width: 1024px) {
    .main-banner__main-image-container:before {
        content: none;
    }
}

.main-banner__main-image {
    display: none;
    width: 100%;
}

@media (min-width: 1024px) {
    .main-banner__main-image {
        max-height: calc(100vh - 200px);
        height: 100%;
    }
}


.main-banner__main-image-mobile {
    position: relative;
    display: flex;
}

@media (min-width: 1024px) {
    .main-banner__main-image-mobile {
        display: none;
    }

    .main-banner__main-image:not(.main-banner__main-image-mobile) {
        display: flex;
    }

    .main-banner__main-image {

    }
}

.main-banner__orbits {
    position: absolute;
    top: -13%;
    left: -26%;
    width: 100%;
}

@media (min-width: 1024px) {
    .main-banner__orbits {
        top: -11%;
        left: initial;
        right: -2.5%;
        width: 110%;
    }
}

.main-banner__orbits svg {
    max-width: initial;
    width: 240%;
}

@media (min-width: 1024px) {
    .main-banner__orbits svg {
        width: 100%;
        height: 100%;
    }

    .main-banner__orbits svg circle {
        opacity: 0;
        animation-name: star-shine;
        animation-duration: 5s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite; /* Нескінченне зациклення */
        animation-direction: alternate;
    }
}

@keyframes star-shine {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.banner__atmosphere {
    position: absolute;
    display: flex;
    width: 200%;
    z-index: -1;
}

.banner__atmosphere svg {
    width: 100%;
}

.main-banner__satellites {
    position: absolute;
    width: 100%;
    top: 7.6rem;
    left: 12%;
    z-index: 1;
}

@media (min-width: 1024px) {
    .main-banner__satellites {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
}

.main-banner__satellite {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 4.09%, rgba(255, 255, 255, 0.38) 100%);
    box-shadow: 0 16px 32px -8px rgba(22, 37, 66, 0.15), 0 0 14px -5px #fff;
    padding: 2rem;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 1000px;
    max-width: 10rem;
    width: 100%;
    aspect-ratio: 1;
}

@media (min-width: 1024px) {
    .main-banner__satellite {
        opacity: 1;
        top: var(--pos-vert);
        left: var(--pos-hor);
        transform: translate(-50%, -50%);
        cursor: pointer;
        transition: all 1s ease-in-out;
        border: 3px solid transparent;
        background:
                linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.4) 40%) padding-box,
                linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.3) 30%) border-box;
        box-shadow:
                0px 16px 32px -8px rgba(22, 37, 66, 0.15),
                0px 0px 14px -5px #FFFFFF;
        aspect-ratio: 1;
    }

    .main-banner__satellite:hover {
        max-width: 11rem;
    }
}

.main-banner__satellite.active {
    pointer-events: auto;
    animation: orbitIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@media (min-width: 1024px) {
    .main-banner__satellite.active {
        pointer-events: initial;
        animation: none;
        max-width: 11rem;
    }
}

.main-banner__satellite.exiting {
    pointer-events: none;
    animation: orbitOut 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@media (min-width: 1024px) {
    .main-banner__satellite.exiting {
        pointer-events: initial;
        animation: none;
    }

    .main-banner__satellite-logo {
        transition: all .5s ease-in-out;
        width: 100%;
       /*height: 100%;*/
    }
}

@keyframes orbitIn {
    from {
        transform: rotate(-25deg);
        opacity: 0;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

@keyframes orbitOut {
    from {
        transform: rotate(0deg);
        opacity: 1;
    }
    to {
        transform: rotate(25deg);
        opacity: 0;
    }
}

/* Swiper Slider */

.swiper-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    margin: auto;
    margin-top: 2rem;
    width: max-content;
    padding: 0.8rem 0.5rem;
    background: linear-gradient(90deg, #fff 0%, #f0f0f0 47.12%, #fff 98.56%), #fefeff;
    box-shadow: 0 4px 16px 0 rgba(22, 37, 66, 0.1);
    border-radius: 32px;
    border: 0 solid rgba(28, 28, 28, 0.1);
}

@media (min-width: 1024px) {
    .swiper-controls {
        margin: initial;
        margin-top: 7rem;
        margin-left: auto;
        padding: 1.8rem 2.5rem;
    }
}

.swiper-pagination {
    position: relative!important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: auto;
    top: initial!important;
    bottom: initial!important;
}

@media (min-width: 1024px) {
    .swiper-pagination {
        gap: 3rem;
    }
}

.swiper-pagination .swiper-pagination-bullet {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    width: .7rem;
    height: .7rem;
    margin: 0!important;
    background: #1c1c1c;
    /*border: 1rem solid transparent;*/
}

@media (min-width: 1024px) {
    .swiper-pagination .swiper-pagination-bullet {
        width: 1.2rem;
        height: 1.2rem;
    }
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 1024px) {
    .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 1.2rem;
        height: 1.2rem;
    }
}

.swiper-pagination .swiper-pagination-bullet:before {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all .5s ease-in-out;
}

@media (min-width: 1024px) {
    .swiper-pagination .swiper-pagination-bullet:before {
        content: '';
    }
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    width: 3.9rem;
    height: 3.9rem;
}

.swiper-button-next {
    display: none!important;;
    position: relative!important;
    margin: 0;
    width: auto!important;
    height: 2rem!important;
    top: initial!important;
    bottom: initial!important;
    margin: initial!important;
    margin-left: 1.5rem!important;
    color: #1c1c1c!important;
}

@media (min-width: 1024px) {
    .swiper-button-next {
        display: block!important;
    }
}

.swiper-button-next svg {
    fill: none!important;
    color: #fff!important;
}

/* Services */

.services {
    --parent-color-background: #F8F9FF;
    --parent-color-text-primary: #1c1c1c;
    --parent-color-text-secondary: #999;
    --card-background: #e9eaf1;;
    --second-background-opacity: 0;
    --card--button-background: #1c1c1e;
    background: var(--parent-color-background);
    position: relative;
    padding: 3rem 0;
}

@media (min-width: 1024px) {
    .services {
        padding: 6rem 0;
    }
}

.services__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.6rem;
    margin: 0 auto;
    width: 100%;
    max-width: 124rem;
}

@media (min-width: 1024px) {
    .services__container {
        max-width: 184rem;
        gap: 5rem;
    }
}

/* Шапка секції */
.services__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
    max-width: 25rem;
}

@media (min-width: 1024px) {
    .services__header {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        margin-bottom: 4rem;
        max-width: 81rem;
        width: 100%;
    }
}

.services__title {
    color: var(--parent-color-text-primary);
}

@media (min-width: 1024px) {
    .services__title {

    }
}

.services__header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

@media (min-width: 1024px) {
    .services__header-info {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
        width: 100%;
    }
}

.services__icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.services__icon svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
}

@media (min-width: 1024px) {
    .services__icon svg {
        width: 4rem;
        height: 4rem;
    }
}

.services__header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

@media (min-width: 1024px) {
    .services__header-content {
        align-items: flex-start;
    }
}

.services__description {
    color: var(--parent-color-text-primary);
}

@media (min-width: 1024px) {
    .services__description {
        font-size: 1.8rem;
    }
}

.services__platforms {
    font-size: 1.2rem;
    line-height: 140%;
    color: var(--parent-color-text-secondary);
}

.services__header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-top: 2rem;
}

@media (max-width: 1023px) {
    .services__header-btn {
        padding: 0;
        color: #4a6ada;
        background: none;
    }
}

@media (min-width: 1024px) {
    .services__header-btn {
        font-size: 1.8rem;
        line-height: 133%;
        padding: 1.8rem 3rem;
        margin-top: 0;
        max-width: 20rem;
        width: 100%;
        margin-left: auto;
    }
}

.services__header-btn:hover {
    opacity: 0.85;
}

/* Слайдер / Список на мобільному */
.services__slider {
    width: 100%;
    overflow: hidden;
}

.services__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .services__wrapper {
        flex-direction: row;
        gap: 0; /* Відступи керуються через Swiper spaceBetween */
    }
}

.services__slide {
    width: 100%;
    height: auto;
}

/* Приховування карт після 4-ї на мобільному */
.services__slide.services__slide--hidden {
    display: none;
}

@media (min-width: 1024px) {
    .services__slide.services__slide--hidden {
        display: block; /* На десктопі слайдер показує всі елементи */
    }
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr; /* 4 колонки */
    gap: 20px; /* Відступ між картками */
}

/* Для мобільних адаптивів при потребі: */
@media (min-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(6, 1fr); /* Сітка з 6 рівних колонок */
    }

    .services__card:nth-child(1n) {
        grid-column: span 3
    }

    .services__card:nth-child(2n) {
        grid-column: span 3
    }

    .services__card:nth-child(3n) {
        grid-column: span 2
    }

    .services__card:nth-child(4n) {
        grid-column: span 4
    }
}


/* Картка послуги */
.services__card {
    position: relative;
    padding: 3.2rem 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    border-radius: 2.4rem;
    overflow: clip;
    background: var(--card-background);
}

@media (min-width: 1024px) {
    .services__card {
        padding: 6rem 3.2rem 0;
    }
}

.services__card-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.services__card:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #151515;
    filter: blur(54px);
    mix-blend-mode: screen;
    opacity: var(--second-background-opacity);
}

.services__card:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(31, 87, 158, 0.58) 0%, rgba(31, 87, 158, 0.26) 48%, rgba(31, 87, 158, 0) 100%);
    opacity: var(--second-background-opacity);
}

.services__grid .services__card:nth-child(3n+2):after,
.services__grid .services__card:nth-child(3n):after {
    background: radial-gradient(50% 50% at 50% 50%, rgba(128, 31, 51, 0.58) 0%, rgba(128, 31, 51, 0.26) 48%, rgba(128, 31, 51, 0) 100%);
}



.services__card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    z-index: 1;
}

.services__card-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .services__card-logos {
        margin-bottom: 2.5rem;
    }
}

.services__card-logo {
    max-height: 4rem;
    width: auto;
    object-fit: contain;
}

.services__card-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 125%;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .services__card-title {
        font-size: 4rem;
        font-weight: 500;
        margin-bottom: 2.5rem;
    }
}

.services__card-text {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 26rem;
}

@media (min-width: 1024px) {
    .services__card-text {
        max-width: 53rem;
        margin-bottom: 2rem;
    }
}

.services__card-text p {
    margin: 0;
}

.services__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2.4rem;
    background-color: var(--card--button-background);
    border: 1px solid #3b3b3b;
    border-radius: 10rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .services__card-btn {
        max-width: 21rem;
        font-size: 18px;
        font-weight: 400;
        padding: 1.5rem 2.9rem;
    }
}

.services__rating {
    display: none;
    font-size: 15px;
    line-height: 152%;
    text-align: center;
    opacity: .8;
    color: var(--parent-color-text-secondary);
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .services__rating {
        display: block;
    }
}

/* Медіа блок зображення */
.services__card-media {
    position: relative;
    width: 100%;
    margin-top: auto;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.services__card-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (min-width: 768px) {
    .services__card-image {
        max-height: 47.8rem;
        width: auto;
    }
}

.services__card-image--mobile {
    display: block;
}

@media (min-width: 768px) {
    .services__card-image--mobile {
        display: none;
    }
}

.services__card-image--desktop {
    display: none;
}

@media (min-width: 768px) {
    .services__card-image--desktop {
        display: block;
    }
}

/* Елементи керування слайдера (Десктоп) */
.services__controls {
    display: none;
}

@media (min-width: 1024px) {
    .services__controls {
        display: flex;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 47.12%, rgba(255, 255, 255, 0.08) 98.56%), #262626;
        box-shadow: 0 4px 32px 0 rgba(22, 37, 66, 0.08);
        border: 0 solid rgba(28, 28, 28, 0.1);
    }
}

.swiper-button-next svg {
    fill: none!important;
    color: #fff!important;
}

.services__pagination.swiper-pagination .swiper-pagination-bullet {
    background: #fff;
}

.services__pagination.swiper-pagination .swiper-pagination-bullet:before {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.78);
}

/* Нижній блок кнопка "Більше послуг" */
.services__footer {
    display: flex;
    justify-content: center;
    margin-top: 3.2rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .services__footer {
        display: none;
    }
}

.services__more-btn {
    width: 100%;
    max-width: 32rem;
    padding: 1.6rem 3.2rem;
    background-color: #1c1c1e;
    color: #ffffff;
    border: none;
    border-radius: 10rem;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.services__more-btn:hover {
    background-color: #333333;
}

/* Partners */

.partners {
    background: var(--color-background);
    padding: 3rem 0;
    overflow: clip;
}

@media (min-width: 1024px) {
    .partners {
        padding: 6rem 0;
    }
}

.partners__container {
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.6rem;
    overflow: clip;
}

@media (min-width: 1024px) {
    .partners__container {
        max-width: 124rem;
    }
}

.partners__track {
    position: relative;
    width: 100%;
    overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.partners__track-inner {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 4rem;
    animation: partners-scroll 22s linear infinite;
}

@media (min-width: 1024px) {
    .partners__track-inner {
        gap: 8rem;
        animation-duration: 38s;
    }
}

.partners__track:hover .partners__track-inner {
    animation-play-state: paused;
}

.partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.partners__logo {
    display: block;
    max-height: 4rem;
    width: auto;
    object-fit: contain;
    transition: filter .3s ease;
}

@media (min-width: 1024px) {
    .partners__logo {
        max-height: 6rem;
    }
}

@keyframes partners-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Client Results */

.results {
    padding: 2rem 0;
}

@media (min-width: 1024px) {
    .results {
        padding: 5rem 0;
    }
}

.results__container {
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

@media (min-width: 1024px) {
    .results__container {
        max-width: 184rem;
    }
}

.results__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin: auto;
    margin-bottom: 1.5rem;
    max-width: 34rem;
}

@media (min-width: 1024px) {
    .results__header {
        gap: 2.6rem;
        margin-bottom: 11rem;
        max-width: 60rem;
    }
}

.results__title {
    color: var(--color-text-primary);
}

.results__description {
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    max-width: 44rem;
}

@media (min-width: 1024px) {
    .results__description {
        font-size: 2rem;
        max-width: 54rem;
    }
}

.results__slider {
    width: 100%;
    overflow: hidden;
    padding-bottom: 1.5rem!important;
}

.results__slide {
    height: auto;
}

.results__card {
    position: relative;
    display: block;
    border-radius: 2.4rem;
    overflow: clip;
    text-decoration: none;
    color: #fff;
}

@media (min-width: 1024px) {
    .results__card {
        border-radius: 3.2rem;
    }
}

.results__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: clip;
}

@media (min-width: 1024px) {
    .results__card-media {
        aspect-ratio: 4 / 3.6;
    }
}

.results__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.results__card:hover .results__card-image {
    transform: scale(1.03);
}

.results__card-overlay {
    position: absolute;
    backdrop-filter: blur(6px);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    transition: backdrop-filter .6s ease;
    height: 50%;
    width: 100%;
    left: 0;
    bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
}

.results__card:hover .results__card-overlay {
    backdrop-filter: blur(15px);
}

.results__badge {
    position: absolute;
    top: 2rem;
    left: 2rem;
    padding: 0.8rem 2.6rem;
    border-radius: 10rem;
    background: rgba(28, 28, 28, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    z-index: 2;
}

@media (min-width: 1024px) {
    .results__badge {
        top: 3rem;
        left: 3rem;
    }
}

.results__card-content {
    position: absolute;
    left: 2rem;
    right: 8rem;
    bottom: 2rem;
    z-index: 2;
}

@media (min-width: 1024px) {
    .results__card-content {
        left: 3.2rem;
        right: 10rem;
        bottom: 3.2rem;
    }
}

.results__card-title {
    font-size: 2.7rem;
    margin-bottom: 0.8rem;
}

@media (min-width: 1024px) {
    .results__card-title {
        font-size: 3.6rem;
        margin-bottom: 1.2rem;
    }
}

.results__card-text {
    font-size: 1.4rem;
    line-height: 121%;
    opacity: .8;
}

@media (min-width: 1024px) {
    .results__card-text {
        font-size: 1.6rem;
    }
}

.results__card-btn {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 100%;
    background: rgba(28, 28, 28, 0.7);
    color: #fff;
    z-index: 2;
    transition: transform .3s ease, background .3s ease;
}

@media (min-width: 1024px) {
    .results__card-btn {
        right: 3.2rem;
        bottom: 3.2rem;
        width: 5.6rem;
        height: 5.6rem;
    }
}

.results__card:hover .results__card-btn {
    transform: scale(1.12);
}

.results__button-next svg {
    fill: none !important;
    color: currentColor !important;
}

.results__button-next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}


.map-svg-container use {
    transform-box: fill-box;
    transform-origin: center;
}

/* Experience (Досвід) */

.experience {
    padding: 4rem 0;
    overflow: clip;
}

@media (min-width: 1024px) {
    .experience {
        padding: 13rem 0;
    }
}

.experience__container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (min-width: 1024px) {
    .experience__container {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
        max-width: 184rem;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1350px) {
    .experience__container {
        gap: 4rem;
    }
}

/* Text block */

.experience__text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

@media (min-width: 1024px) {
    .experience__text {
        flex: 0 0 36rem;
        gap: 2.4rem;
    }
}

@media (min-width: 1500px) {
    .experience__text {
        flex: 0 0 64rem;
    }
}

.experience__title {
    font-size: 3.6rem;
    text-align: center;
    color: var(--color-text-primary);
}

@media (min-width: 1024px) {
    .experience__title {
        text-align: left;
        font-size: 4.4rem;
        line-height: 100%;
    }
}

@media (min-width: 1500px) {
    .experience__title {
        font-size: 6.4rem;
    }
}

.experience__title-accent {
    color: var(--color-accent);
}

.experience__description {
    text-align: center;
    line-height: 138%;
    color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
    .experience__description {
        text-align: left;
        font-size: 1.8rem;
        line-height: 130%;
        max-width: 48rem;
    }
}

@media (min-width: 1350px) {
    .experience__description {
        font-size: 2.0rem;
    }
}

.experience__description p {
    margin: 0;
}

.experience__description strong {
    color: var(--color-text-primary);
    font-weight: 400;
}

.experience__platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.8rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .experience__platforms {
        margin-top: 2.8rem;
        justify-content: flex-start;
    }
}

.experience__platform {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 2rem;
}


@media (min-width: 1024px) {
    .experience__platform {
        padding: 0 1.4rem;
    }

    .experience__platform:first-child {
        padding-left: 0;
    }
}

@media (min-width: 1500px) {
    .experience__platform {
        padding: 0 3.4rem;
    }
}


.experience__platform:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
    opacity: 0.4;
}

.experience__platform-logo {
    max-height: 1.5rem;
    width: auto;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .experience__platform-logo {
        max-height: 2rem;
    }
}

@media (min-width: 1500px) {
    .experience__platform-logo {
        max-height: 3.5rem;
    }
}

.experience__note {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    margin: auto;
    margin-top: 1.8rem;
    max-width: 21.5rem;
}

@media (min-width: 1024px) {
    .experience__note {
        margin: initial;
        margin-top: 2.8rem;
    }
}

.experience__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    background: rgba(114, 127, 199, 0.12);
    color: var(--color-accent, #727FC7);
}

.experience__note-text {
    font-size: 1.4rem;
    line-height: 140%;
    color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
    .experience__note-text {
        line-height: 144%;
    }
}

.experience__note-text-accent {
    color: #6a86f1;
}

/* Visual block (map + stats) */

.experience__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.experience__map-wrapper {
    display: none;
}

.experience__map-container {
    width: 100%;
}

@media (min-width: 1024px) {
    .experience__map-container {
        position: relative;
        height: 100%;
    }
}

.experience__map-container svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (min-width: 1024px) {
    .experience__map-container svg {
       position: absolute;
        width: 100%;
        top: 13%;
    }
}

.experience__map-container use {
    transform-box: fill-box;
    transform-origin: center;
}

.experience__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

@media (min-width: 1024px) {
    .experience__stats {
        gap: 2rem;
    }
}

@media (min-width: 1350px) {
    .experience__stats {
        gap: 3rem;
    }
}

.experience__stat--map {
    display: none;
}

@media (min-width: 1024px) {
    .experience__visual {
        display: flex;
        column-gap: 3rem;
        row-gap: 2rem;
        align-items: flex-end;
        width: 100%;
    }

    .experience__map-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .experience__stats {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .experience__stat--map {
        display: flex;
        align-self: center;
        justify-self: center;
        z-index: 2;
        border: 0.1rem solid var(--color-accent, #727FC7);
    }
}

.experience__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.6rem;
    border: 1.22px solid #e3e8f2;
    background: var(--color-background-secondary, #fff);
}


@media (min-width: 1024px) {
    .experience__stat {
        min-width: 18rem;
        max-width: 18rem;
        min-height: 250px;
        margin-top: 4rem;
        width: 100%;
        padding: 2rem;
        padding-top: 0;
    }
}

@media (min-width: 1350px) {
    .experience__stat {
        min-width: 24rem;
        max-width: 24rem;
        min-height: 300px;
        padding: 2.4rem;
        padding-top: 0;
    }
}

@media (min-width: 1650px) {
    .experience__stat {
        min-width: 27.6rem;
        max-width: 27.6rem;
        min-height: 320px;
        padding: 4rem;
        padding-top: 0;
    }
}

@media (min-width: 1024px) {
    .experience__stat--map {
        grid-row-start: span 2;

    }

    .experience__stat--roky {
        grid-row-start: span 2;
        align-self: center;
        margin-top: -80%;
    }
}

.experience__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
}

@media (min-width: 1024px) {
    .experience__stat-icon {
        width: 6.9rem;
        height: 6.9rem;
        transform: translateY(-50%);
    }
}

@media (min-width: 1350px) {
    .experience__stat-icon {
        width: 8.9rem;
        height: 8.9rem;
    }
}

.experience__stat-icon--green {
    background: rgba(220, 238, 227, 0.8);
    color: #2ab155;
}

.experience__stat-icon--blue {
    background: rgba(226, 230, 253, 0.9);
    color: #476dfe;
}

.experience__stat-icon--purple {
    background: rgba(235, 230, 248, 0.8);
    color: #7243f0;
}

.experience__stat-icon--orange {
    background: rgba(247, 231, 224, 0.8);
    color: #f37931;
}

.experience__stat-value {
    font-size: 2.8rem;
    line-height: 100%;
}

@media (min-width: 1024px) {
    .experience__stat-value {
        font-size: 4.5rem;
    }
}

@media (min-width: 1350px) {
    .experience__stat-value {
        font-size: 6rem;
    }
}

@media (min-width: 1650px) {
    .experience__stat-value {
        font-size: 8rem;
    }
}

.experience__stat--map .experience__stat-value {
    color: #22c55e;
}

.experience__stat--oborot .experience__stat-value {
    color: #3b82f6;
}

.experience__stat--brendy .experience__stat-value {
    color: #8b5cf6;
}

.experience__stat--roky .experience__stat-value {
    color: #f97316;
}

.experience__stat-label {
    font-size: 1.3rem;
    line-height: 140%;
    color: var(--color-text-secondary);
    max-width: 11rem;
}

@media (min-width: 1024px) {
    .experience__stat-label {
        font-size: 2rem;
        max-width: 15rem;
    }
}

@media (min-width: 1350px) {
    .experience__stat-label {
        font-size: 2.2rem;
        max-width: 17rem;
    }
}


/* Client Testimonials (Відгуки) — замінює весь старий блок "Client Testimonials" */

.testimonials {
    padding: 2rem 0;
}

@media (min-width: 1024px) {
    .testimonials {
        padding: 5rem 0;
    }
}

.testimonials__container {
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

@media (min-width: 1024px) {
    .testimonials__container {
        max-width: 192rem;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1440px) {
    .testimonials__container {
        padding: 0 6.4rem;
    }
}

/* Header */

.testimonials__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin: 0 auto 2rem;
    max-width: 34rem;
}

@media (min-width: 1024px) {
    .testimonials__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        text-align: left;
        gap: 4rem;
        margin: 0 0 12rem;
        max-width: none;
    }
}

.testimonials__header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .testimonials__header-text {
        align-items: flex-start;
        gap: 1.4rem;
    }
}

.testimonials__title {
    color: var(--color-text-primary);
    line-height: 115%;
}

@media (min-width: 1024px) {
    .testimonials__title {
        max-width: 75rem;
        line-height: 100%;
    }
}

.testimonials__description {
    font-size: 1.5rem;
    line-height: 140%;
    color: var(--color-text-secondary);
}

.testimonials__description br {
    display: none;
}

@media (min-width: 1024px) {
    .testimonials__description {
        font-size: 2rem;
        line-height: 120%;
        max-width: 60rem;
    }

    .testimonials__description br {
        display: inline;
    }
}

/* Tabs (тільки десктоп) */

.testimonials__tabs {
    display: none;
}

@media (min-width: 1024px) {
    .testimonials__tabs {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        padding: 0.4rem;
        border-radius: 10rem;
        background: #ecedf3;
        box-shadow: inset 0 0 0 0.1rem #e3e5ee;
    }
}

.testimonials__tabs-indicator {
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 0;
    width: 0;
    border-radius: 10rem;
    background: #fff;
    box-shadow: 0 0.2rem 0.8rem rgba(22, 37, 66, 0.1);
}

.testimonials__tabs.is-ready .testimonials__tabs-indicator {
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.testimonials__tab {
    position: relative;
    z-index: 1;
    padding: 1.1rem 2rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 120%;
    color: var(--color-text-secondary);
    background: none;
    border: 0;
    border-radius: 10rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.testimonials__tab:hover,
.testimonials__tab.is-active {
    color: var(--color-text-primary);
}

/* Panels */

.testimonials__panels {
    position: relative;
}

.testimonials__panel {
    display: none;
}

/* Мобільний: одна панель з усіма відгуками */
.testimonials__panel--mobile {
    display: block;
}

@media (min-width: 1024px) {
    .testimonials__panel--mobile {
        display: none;
    }

    .testimonials__panel.is-active {
        display: block;
    }
}

/* Slider */

.testimonials__slider {
    margin: -1rem -1rem 0;
    padding: 1rem;
    overflow: hidden;
}

.testimonials__slide {
    height: auto;
}

.testimonials__controls {
    margin-top: 1.8rem;
}

@media (min-width: 1024px) {
    .testimonials__controls {
        margin-top: 5.2rem;
    }
}

.testimonials__button-next svg {
    fill: none !important;
    color: currentColor !important;
}

.testimonials__button-next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Grid (слайд у режимі "Усі відгуки") */

.testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media (min-width: 1024px) {
    .testimonials__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Режим "Всі відгуки": слайдер (2 колонки) + статична колонка зі статистикою */

.testimonials__all {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media (min-width: 1024px) {
    .testimonials__all {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .testimonials__all > .testimonials__slider {
        grid-column: span 2;
        min-width: 0;
    }

    .testimonials__panel--all .testimonials__slider {
        margin: -1rem;
    }

    .testimonials__panel--all .testimonials__controls {
        margin-top: 6.2rem;
    }
}

.testimonials__grid {
    height: 100%;
}

/* Мобільний слайд: відео або 2 текстові відгуки один під одним */

.testimonials__stack {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.testimonials__stack .testimonials__review {
    flex: 0 0 auto;
}

.testimonials__col {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    min-width: 0;
}

/* Спільний вигляд білих карток */

.testimonials__review,
.testimonials__rating,
.testimonials__launches,
.testimonials__quote {
    border-radius: 2.4rem;
    background: var(--color-background-secondary, #fff);
    border: 0.1rem solid #e3e8f2;
    box-shadow: 0 0.4rem 1.6rem rgba(22, 37, 66, 0.04);
}

/* Video card */

.testimonials__video {
    position: relative;
    width: 100%;
    aspect-ratio: 358 / 455;
    border-radius: 1rem;
    overflow: clip;
    color: #fff;
    background: #1c1c1c;
}

@media (min-width: 1024px) {
    .testimonials__video {
        border-radius: 2.4rem;
        aspect-ratio: 581 / 738;
    }

    .testimonials__video[data-video] {
        cursor: pointer;
    }
}

.testimonials__video-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonials__video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}

.testimonials__video-author {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    text-align: right;
}

@media (min-width: 1024px) {
    .testimonials__video-author {
        top: 3rem;
        right: 3.2rem;
    }
}

.testimonials__video-name {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 120%;
}

@media (min-width: 1024px) {
    .testimonials__video-name {
        font-size: 1.6rem;
    }
}

.testimonials__video-role {
    font-size: 1rem;
    line-height: 120%;
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 1024px) {
    .testimonials__video-role {
        font-size: 1.2rem;
    }
}

.testimonials__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    color: #fff;
    background: rgba(28, 28, 28, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.testimonials__video-play::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;

    background: conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.4) 120deg,
            rgba(255, 255, 255, 0.4) 140deg,
            rgba(255, 255, 255, 0) 160deg,
            rgba(255, 255, 255, 0) 180deg,
            rgba(255, 255, 255, 0) 250deg,
            rgba(255, 255, 255, 00.6) 300deg,
            rgba(255, 255, 255, 0.6) 330deg,
            rgba(255, 255, 255, 0) 360deg
    );

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.testimonials__video-play svg {
    width: 1.4rem;
    height: 1.4rem;
}

@media (min-width: 1024px) {
    .testimonials__video-play {
        width: 6.4rem;
        height: 6.4rem;
    }

    .testimonials__video-play svg {
        width: 2.4rem;
        height: 2.4rem;
    }

    .testimonials__video:hover .testimonials__video-play {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--color-accent);
    }
}

.testimonials__video-quote {
    position: absolute;
    left: 3.4rem;
    right: 2.4rem;
    bottom: 3rem;
    z-index: 2;
    font-size: 1.5rem;
    line-height: 125%;
    max-width: 28.5rem;
}

@media (min-width: 1024px) {
    .testimonials__video-quote {
        left: 4.8rem;
        right: auto;
        bottom: 4rem;
        max-width: 46rem;
        font-size: 2rem;
        line-height: 120%;
    }
}

.testimonials__video-player {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    background: #000;
}

.testimonials__video.is-playing .testimonials__video-player {
    display: block;
}

.testimonials__video-player iframe,
.testimonials__video-player video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Review card */

.testimonials__review {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    padding: 1.9rem 2rem 1.8rem;
    border-radius: 2rem;
}

@media (min-width: 1024px) {
    .testimonials__review {
        padding: 3rem 3.1rem 2.8rem;
        border-radius: 2.4rem;
    }
}

.testimonials__review-content {
    position: relative;
    flex: 1 1 auto;
    max-width: 22rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .testimonials__review-content {
        max-width: 38rem;
    }
}

.testimonials__review-header {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding-right: 2rem;
}

@media (min-width: 1024px) {
    .testimonials__review-header {
        gap: 2.5rem;
        padding-right: 3rem;
    }
}

.testimonials__review-avatar {
    position: relative;
    flex-shrink: 0;
    width: 4.2rem;
    height: 4.2rem;
}

@media (min-width: 1024px) {
    .testimonials__review-avatar {
        width: 6.8rem;
        height: 6.8rem;
    }
}

.testimonials__review-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

.testimonials__review-badge {
    position: absolute;
    right: -0.4rem;
    bottom: -0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 0.2rem 0.8rem rgba(22, 37, 66, 0.12);
}

@media (min-width: 1024px) {
    .testimonials__review-badge {
        right: -1rem;
        bottom: -1rem;
        width: 3.6rem;
        height: 3.6rem;
    }
}

.testimonials__review-badge svg {
    width: 1.2rem;
    height: 1.2rem;
}

@media (min-width: 1024px) {
    .testimonials__review-badge svg {
        width: 2rem;
        height: 2rem;
    }
}

.testimonials__review-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

@media (min-width: 1024px) {
    .testimonials__review-info {
        gap: 0.4rem;
    }
}

.testimonials__review-name {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-primary);
}

@media (min-width: 1024px) {
    .testimonials__review-name {
        font-size: 1.8rem;
    }
}

.testimonials__review-role {
    font-size: 1rem;
    line-height: 120%;
    color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
    .testimonials__review-role {
        font-size: 1.6rem;
    }
}

.testimonials__review-quote-icon {
    position: absolute;
    top: 1rem;
    right: 0;
    color: #2ab155;
}

.testimonials__review-quote-icon svg {
    display: block;
    width: 1.1rem;
    height: auto;
}

@media (min-width: 1024px) {
    .testimonials__review-quote-icon {
        top: 1.3rem;
    }

    .testimonials__review-quote-icon svg {
        width: 1.6rem;
    }
}

.testimonials__review-text {
    display: -webkit-box;
    margin-top: 1.8rem;
    font-size: 1.1rem;
    line-height: 165%;
    color: var(--color-text-primary);
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .testimonials__review-text {
        margin-top: 3rem;
        font-size: 1.8rem;
        line-height: 145%;
    }
}

.testimonials__review-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding: 0.8rem 1.2rem;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-primary);
    cursor: pointer;
    background: #fff;
    border: 0.1rem solid #e9ecf3;
    border-radius: 10rem;
    box-shadow: 0 0.2rem 0.8rem rgba(22, 37, 66, 0.08);
    transition: color 0.3s ease, box-shadow 0.3s ease;
}

.testimonials__review-btn svg {
    width: 1.2rem;
    height: 1.2rem;
}

@media (min-width: 1024px) {
    .testimonials__review-btn {
        gap: 1rem;
        margin-top: 2rem;
        padding: 1.2rem 1.6rem;
        font-size: 1.4rem;
    }

    .testimonials__review-btn svg {
        width: 1.6rem;
        height: 1.6rem;
    }
}

.testimonials__review-btn:hover {
    color: var(--color-accent);
    box-shadow: 0 0.4rem 1.2rem rgba(22, 37, 66, 0.14);
}

/* Rating card */

.testimonials__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 270 1 0;
    padding: 2.4rem;
    text-align: center;
}

.testimonials__rating-stars {
    display: flex;
    gap: 0.6rem;
    color: #ffc42b;
}

.testimonials__rating-stars svg {
    width: 2.4rem;
    height: 2.4rem;
}

.testimonials__rating-value {
    margin-top: 1rem;
    font-size: 6.4rem;
    font-weight: 500;
    line-height: 100%;
    color: #2b2b2b;
}

.testimonials__rating-value-max {
    color: var(--color-text-secondary);
}

.testimonials__rating-caption {
    margin-top: 1rem;
    font-size: 1.6rem;
    line-height: 120%;
    color: #5f6880;
}

.testimonials__rating-caption-accent {
    font-weight: 500;
    color: #f37931;
}

.testimonials__rating-avatars {
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
}

.testimonials__rating-avatar {
    width: 3.2rem;
    height: 3.2rem;
    margin-left: -0.6rem;
    border: 0.2rem solid #fff;
    border-radius: 100%;
    object-fit: cover;
}

.testimonials__rating-avatar:first-child {
    margin-left: 0;
}

.testimonials__rating-more {
    display: flex;
    align-items: center;
    height: 3.2rem;
    margin-left: -0.6rem;
    padding: 0 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #f37931;
    background: #fdeee4;
    border-radius: 10rem;
}

/* Launches card */

.testimonials__launches {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 277 1 0;
    padding: 2.3rem 3.1rem 4rem;
}

@media (min-width: 1024px) {
    .testimonials__launches {
        gap: 1rem;
    }
}

.testimonials__launches-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    background: #e4e8fd;
    color: #4c67f9;
}

.testimonials__launches-content {
    display: flex;
    flex-direction: column;
}

.testimonials__launches-value {
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 100%;
    color: var(--color-text-primary);
}

.testimonials__launches-title {
    margin-top: 0.6rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-primary);
}

.testimonials__launches-text {
    max-width: 26rem;
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 150%;
    color: var(--color-text-secondary);
}

/* Quote card */

.testimonials__quote {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    flex: 149 1 0;
    padding: 2.4rem 3rem;
}

.testimonials__quote-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    background: #ece8f9;
    color: #7243f0;
}

.testimonials__quote-text {
    max-width: 25rem;
    font-size: 1.6rem;
    line-height: 155%;
    color: var(--color-text-secondary);
}

/* Modal (повний текст відгуку) */

.testimonials__modal {
    position: fixed;
    inset: 0;
    width: calc(100% - 3.2rem);
    max-width: 60rem;
    margin: auto;
    padding: 3rem 2.4rem 2.8rem;
    color: var(--color-text-primary);
    background: #fff;
    border: 0;
    border-radius: 2.4rem;
    box-shadow: 0 1.6rem 3.2rem rgba(22, 37, 66, 0.2);
}

@media (min-width: 1024px) {
    .testimonials__modal {
        padding: 4rem;
    }
}

.testimonials__modal::backdrop {
    background: rgba(13, 12, 13, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.testimonials__modal-close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    color: var(--color-text-primary);
    background: #ecedf3;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    transition: color 0.3s ease;
}

.testimonials__modal-close:hover {
    color: var(--color-accent);
}

.testimonials__modal-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 5rem;
}

.testimonials__modal-name {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 120%;
}

.testimonials__modal-role {
    font-size: 1.6rem;
    line-height: 120%;
    color: var(--color-text-secondary);
}

.testimonials__modal-text {
    margin-top: 2.4rem;
    font-size: 1.8rem;
    line-height: 145%;
}

/* Блог */

.blog {
    padding: 4rem 0;
}

@media (min-width: 1024px) {
    .blog {
        padding: 7rem 0;
    }
}

.blog__container {
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

@media (min-width: 1024px) {
    .blog__container {
        max-width: 192rem;
        padding: 0 2.5rem;
    }
}

@media (min-width: 1440px) {
    .blog__container {
        padding: 0 6.4rem;
    }
}

/* Header */

.blog__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-bottom: 2.4rem;
}

@media (min-width: 1024px) {
    .blog__header {
        gap: 2.2rem;
        margin-bottom: 11.8rem;
    }
}

.blog__title {
    color: var(--color-text-primary);
}

.blog__description {
    font-size: 1.5rem;
    line-height: 140%;
    color: var(--color-text-secondary);
    max-width: 32rem;
}

@media (min-width: 1024px) {
    .blog__description {
        font-size: 2rem;
        line-height: 130%;
        max-width: 52rem;
    }
}

/* Slider */

.blog__slider {
    margin: -1rem -1rem 0;
    padding: 1rem;
    overflow: hidden;
}

.blog__slide {
    height: auto;
}

/* Card — зображення на всю картку, текст накладений зверху на градієнт
   (той самий принцип, що й .results__video у секції відгуків) */

.blog__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 358 / 536;
    border-radius: 1rem;
    overflow: clip;
    color: #fff;
    text-decoration: none;
    background: #1c1c1c;
}

@media (min-width: 1024px) {
    .blog__card {
        aspect-ratio: 581 / 911;
    }
}

.blog__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog__card:hover .blog__card-image {
    transform: scale(1.05);
}

.blog__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 32%, rgba(0, 0, 0, 0) 55%);
    transition: opacity 0.4s ease;
}

.blog__card:hover .blog__card-overlay {
    opacity: 0.85;
}

.blog__card-arrow {
    align-self: flex-end;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    color: #fff;
    background: rgba(28, 28, 28, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 100%;
    transform: translate(-1rem, 0rem);
    transition: transform 0.35s ease, background 0.35s ease;
}

@media (min-width: 1024px) {
    .blog__card-arrow {
        width: 8rem;
        height: 8rem;
        transform: translate(-2rem, 0rem);
    }
}

.blog__card-arrow svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 1024px) {
    .blog__card-arrow svg {
        width: 1.8rem;
        height: 1.8rem;
    }
}

.blog__card:hover .blog__card-arrow {
    transform: translate(-1rem, -1rem);
    background: var(--color-accent);
}

@media (min-width: 1024px) {
    .blog__card-arrow svg {
        .blog__card:hover .blog__card-arrow {
            transform: translate(-0.6rem, -1.6rem);
            background: var(--color-accent);
        }
    }
}

.blog__card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

@media (min-width: 1024px) {
    .blog__card-content {

    }
}

.blog__card-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 2.8rem 1.5rem;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.4);
    transition: backdrop-filter .6s ease;
    height: 50%;
    width: 100%;
}

@media (min-width: 1024px) {
    .blog__card-text-group {
        gap: 2.2rem;
        padding: 6rem 3rem;
    }
}

.blog__card:hover .blog__card-text-group {
    backdrop-filter: blur(15px);
}

.blog__card-title {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 95%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .blog__card-title {
        font-size: 4rem;
    }
}

.blog__card-text {
    font-size: 1.4rem;
    line-height: 145%;
    color: rgba(255, 255, 255, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .blog__card-text {
        font-size: 2rem;
        line-height: 120%;
    }
}

/* Footer: controls + button */

.blog__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    margin-top: 1.8rem;
}

@media (min-width: 1024px) {
    .blog__footer {
        flex-direction: row;
        justify-content: flex-end;
        gap: 2.4rem;
        margin-top: 5.2rem;
    }
}

.blog__controls.swiper-controls {
    margin: 0;
}

@media (min-width: 1024px) {
    .blog__controls.swiper-controls {
        margin: 0;
    }
}

.blog__archive-btn {
    display: none;
}

@media (min-width: 1024px) {
    .blog__archive-btn {
        display: inline-flex;
        padding: 1.8rem 3rem;
        font-size: 1.8rem;
        font-weight: 400;
        max-width: 29rem;
        width: 100%;
    }
}

.blog__button-next svg {
    fill: none !important;
    color: currentColor !important;
}

.blog__button-next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Підстраховка: якщо базовий swiper.css чомусь не підключений — ці класи
   Swiper додає сам, коли слайдів менше або стільки ж, скільки влазить в один екран. */
.blog__button-next.swiper-button-lock,
.blog__pagination.swiper-pagination-lock {
    display: none !important;
}

/* Пагінація та стрілка блокуються Swiper одночасно (та сама умова показу/приховування),
   тож досить перевірити одну з них, щоб сховати всю пігулку-обгортку .blog__controls,
   а не лишати порожній фон без вмісту. */
.blog__controls:has(.swiper-pagination-lock) {
    display: none;
}


/* Відео для вашого бізнесу */

.videos {
    padding: 4rem 0;
}

@media (min-width: 1024px) {
    .videos {
        padding: 7rem 0;
    }
}

.videos__container {
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 1.6rem;
}

@media (min-width: 1024px) {
    .videos__container {
        max-width: 100%;
        padding: 0;
    }
}

/* Header лишається в межах звичайної ширини контейнера навіть на десктопі,
   де сам слайдер розтягнутий на всю ширину екрана (для ефекту "підглядання" країв) */

.videos__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-bottom: 1.4rem;
}

@media (min-width: 1024px) {
    .videos__header {
        gap: 2.6rem;
        margin-bottom: 10.8rem;
        padding: 0 2.5rem;
    }
}

.videos__title {
    color: var(--color-text-primary);
}

.videos__description {
    font-size: 1.5rem;
    line-height: 140%;
    color: var(--color-text-secondary);
    max-width: 32rem;
}

@media (min-width: 1024px) {
    .videos__description {
        font-size: 2rem;
        line-height: 130%;
        max-width: 54rem;
    }
}

/* Слайдер:
   - Мобільний: Swiper з модулем Grid (rows:2) — на слайді видно одразу
     дві картки одна під одною, свайп/пагінація перемикають наступну пару.
   - Десктоп (від 1024px): активний слайд по центру, сусідні — частково
     видимі по боках (Swiper: centeredSlides), по одній картці на слайд. */

.videos__slider {
    width: 100%;
    padding: 1rem 0;
}

.videos__slide {
    height: auto;
}

/* Card — зображення на всю картку, текст і кнопка Play накладені зверху
   на градієнт (той самий принцип, що й .results__video у секції відгуків).
   Кнопка Play: по центру зображення на мобільному, у нижньому правому куті
   на десктопі (як стрілка в картках блогу).
   Текст — знизу зліва, з відступом праворуч на десктопі, щоб не наїжджати
   на кнопку в куті (на мобільному кнопка по центру, тож відступ не потрібен). */

.videos__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 358 / 245;
    border-radius: 2.4rem;
    overflow: clip;
    color: #fff;
    background: #1c1c1c;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .videos__card {
        aspect-ratio: 990 / 550;
    }
}

.videos__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.videos__card:hover .videos__card-image {
    transform: scale(1.05);
}

.videos__card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 70%);
    transition: opacity 0.4s ease;
}

.videos__card:hover .videos__card-overlay {
    opacity: 0.9;
}

.videos__card-play {
    /* Мобільний: кнопка по центру зображення */
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding: 0;
    color: #fff;
    background: rgba(28, 28, 28, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

@media (min-width: 1024px) {
    .videos__card-play {
        width: 3.6rem;
        height: 3.6rem;
    }
}

.videos__card-play::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;

    background: conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.4) 120deg,
            rgba(255, 255, 255, 0.4) 140deg,
            rgba(255, 255, 255, 0) 160deg,
            rgba(255, 255, 255, 0) 180deg,
            rgba(255, 255, 255, 0) 250deg,
            rgba(255, 255, 255, 00.6) 300deg,
            rgba(255, 255, 255, 0.6) 330deg,
            rgba(255, 255, 255, 0) 360deg
    );

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.videos__card-play svg {
    margin-left: 0.15rem;
    width: 1rem;
}

@media (min-width: 1024px) {
    .videos__card-play svg {
        width: initial;
    }
    /* Десктоп: кнопка переїжджає в нижній правий кут (як стрілка в картках блогу) */
    .videos__card-play {
        top: auto;
        left: auto;
        right: 4.4rem;
        bottom: 4.4rem;
        width: 8.4rem;
        height: 8.4rem;
        transform: none;
    }

    .videos__card-play svg {
        width: 2rem;
        height: 2rem;
    }

    .videos__card:hover .videos__card-play {
        transform: scale(1.1);
    }
}

.videos__card:hover .videos__card-play {
    background: var(--color-accent);
}

.videos__card-content {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 26rem;
}

@media (min-width: 1024px) {
    .videos__card-content {
        left: 5.2rem;
        right: 8rem; /* залишає місце для кнопки Play в нижньому правому куті */
        bottom: 5.2rem;
        gap: 2.6rem;
        max-width: 60rem;
    }
}

.videos__card-title {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 106%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .videos__card-title {
        font-size: 4rem;
        line-height: 95%;
    }
}

.videos__card-text {
    /* Мобільний: опису немає (тільки заголовок + тривалість) */
    display: none;
}

@media (min-width: 1024px) {
    .videos__card-text {
        display: -webkit-box;
        font-size: 2rem;
        line-height: 120%;
        color: rgba(248, 249, 255, 0.8);
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.videos__card-duration {
    font-size: 1.3rem;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 1024px) {
    .videos__card-duration {
        font-size: 1.5rem;
    }
}

.videos__card-player {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    background: #000;
}

.videos__card.is-playing .videos__card-player {
    display: block;
}

.videos__card.is-playing .videos__card-play,
.videos__card.is-playing .videos__card-content {
    display: none;
}

.videos__card-player video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Footer: controls + button.
   Мобільний: видно тільки пагінацію (вона знову функціональна — керує
   парами карток через Grid). Стрілка ховається на мобільному глобальним
   правилом .swiper-button-next з основного стилю сайту — тут додатково
   нічого робити не треба. Кнопка "Більше відео" — лише для десктопу. */

.videos__footer {
    display: flex;
    justify-content: center;
    margin-top: 0;
    padding: 0 1.6rem;
}

.videos__archive-btn {
    display: none;
}

@media (min-width: 1024px) {
    .videos__footer {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 3.5rem;
        margin-top: 6rem;
        padding: 0 2.5rem;
    }

    .videos__footer .swiper-controls {
        margin-top: 0;
    }

    .videos__archive-btn {
        display: inline-flex;
    }
}

@media (min-width: 1440px) {
    .videos__footer {
        padding: 0 6.4rem;
    }
}

.videos__archive-btn {
    padding: 1.4rem 2.4rem;
    font-size: 1.5rem;
}

@media (min-width: 1024px) {
    .videos__archive-btn {
        padding: 1.8rem 3rem;
        font-size: 1.6rem;
        max-width: 29rem;
        width: 100%;
    }
}

.videos__button-next svg {
    fill: none !important;
    color: currentColor !important;
}

.videos__button-next.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.videos__button-next.swiper-button-lock,
.videos__pagination.swiper-pagination-lock {
    display: none !important;
}

.videos__controls:has(.swiper-pagination-lock) {
    display: none;
}

/* Контактна форма (Free Consultation) */

.contact {
    /* Світлий стан за замовчуванням — ці змінні анімує GSAP при скролі (contact.js),
       той самий принцип, що й .services. Картка форми (.contact__form-card)
       навмисно НЕ використовує ці змінні — вона завжди світла. */
    --contact-bg: #F8F9FF;
    --contact-text-primary: #1c1c1c;
    --contact-text-secondary: #5f6880;
    --contact-icon-bg: #2b2b2e;
    --contact-icon-color: #ffffff;
    --contact-glow-opacity: 0;

    position: relative;
    background: var(--contact-bg);
    overflow: clip;
    padding: 5rem 0;
}

@media (min-width: 1024px) {
    .contact {
        padding: 12rem 0;
    }
}

.contact__light-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* ховаємо частини променя, що виходять за межі */
    background-color: #0d0c0e; /* дуже темний фон, той самий, що й кінцевий стан секції */
    opacity: var(--contact-glow-opacity); /* проявляється синхронно зі скролом — керує GSAP у contact.js */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.contact__light-beam {
    position: absolute;
    width: 600%;
    height: 1%;
    border-radius: 50%;
    transform: rotate(-167deg) translateY(0);
    background: linear-gradient(90deg, rgba(140, 25, 95, 0) 0%, rgba(155, 30, 105, 0.7) 20%, rgba(235, 185, 155, 0.95) 50%, /* Яскравий теплий центр */ rgba(140, 25, 95, 0.65) 80%, rgba(140, 25, 95, 0) 100%);
    filter: blur(45px);
    mix-blend-mode: screen;
    opacity: 0.9;
    top: 9%;
}

@media (min-width: 1024px) {
    .contact__light-beam {
        width: 140%;
        height: 10%;
        transform: rotate(-162deg) translateY(-134%);
        background: linear-gradient(90deg, rgba(140, 25, 95, 0) 0%, rgba(155, 30, 105, 0.7) 20%, rgba(235, 185, 155, 0.95) 50%, /* Яскравий теплий центр */ rgba(140, 25, 95, 0.65) 80%, rgba(140, 25, 95, 0) 100%);
        filter: blur(45px);
        mix-blend-mode: screen;
        opacity: 0.9;
        top: initial;
    }
}

/* Додатковий тонкий яскравий серединний шар для об'єму */
.contact__light-beam::after {
    content: "";
    position: absolute;
    inset: 25% 20%;
    border-radius: 50%;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 230, 210, 0.7) 50%,
            transparent 100%
    );
    filter: blur(15px);
}

.contact__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0;
}

@media (min-width: 1024px) {
    .contact__container {
        flex-direction: row;
        justify-content: space-between;
        gap: 6rem;
        max-width: 184rem;
        padding: 0 2.5rem;
    }
}

/* Left column */

.contact__info {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 0 2.5rem;
}

@media (min-width: 1024px) {
    .contact__info {
        padding: 0 ;
        padding-top: 8rem;
        flex: 0 0 46rem;
        gap: 2.5rem;
    }
}

.contact__overline {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #308fc2;
}

@media (min-width: 1024px) {
    .contact__overline {
        font-size: 1.6rem;
    }
}

.contact__title {
    font-size: 3.8rem;
    color: var(--contact-text-primary);
    transition: color 0.3s ease;
}

.contact__description {
    font-size: 1.6rem;
    line-height: 145%;
    color: var(--contact-text-secondary);
    max-width: 42rem;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .contact__description {
        font-size: 2.2rem;
        max-width: 43rem;
    }
}

.contact__benefits {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 1.2rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .contact__benefits {
        gap: 3rem;
        margin-top: 17rem;
    }
}

.contact__benefit {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.contact__benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 100%;
    color: var(--contact-icon-color);
    background: var(--contact-icon-bg);
    transition: background 0.3s ease, color 0.3s ease;
}

@media (min-width: 1024px) {
    .contact__benefit-icon {
        width: 8rem;
        height: 8rem;
    }
}

.contact__benefit-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact__benefit-title {
    font-size: 1.7rem;
    line-height: 130%;
    color: var(--contact-text-primary);
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .contact__benefit-title {
        font-size: 2.2rem;
    }
}

.contact__benefit-desc {
    font-size: 1.4rem;
    line-height: 135%;
    color: var(--contact-text-secondary);
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .contact__benefit-desc {
        font-size: 1.8rem;
    }
}

/* Right column: form card — завжди світла, незалежно від теми секції */

.contact__form-card {
    width: 100%;
    padding: 2.4rem 2.5rem;
    background: transparent;
    box-shadow: 0 3.2rem 6rem rgba(15, 15, 20, 0.25);
}

@media (min-width: 1024px) {
    .contact__form-card {
        flex: 1 1 auto;
        padding: 4.8rem;
        padding-top: 12.5rem;
        border-radius: 2rem;
        max-width: 103.6rem;
        background: #ffffff;
        border-radius: 2.4rem;
        box-shadow: 0 3.2rem 6rem rgba(15, 15, 20, 0.25);
    }
}

.contact__form-header {
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .contact__form-header {
        max-width: 44rem;
        margin-bottom: 5rem;
    }
}

.contact__form-title {
    color: #fff;
    margin-bottom: 0.6rem;
    line-height: 142%;
}

@media (min-width: 1024px) {
    .contact__form-title {
        color: #1c1c1c;
        font-size: 3.2rem;
        line-height: 125%;
        margin-bottom: 2rem;
    }
}

.contact__form-subtitle {
    font-size: 1.5rem;
    line-height: 140%;
    color: #999;
}

@media (min-width: 1024px) {
    .contact__form-subtitle {
        font-size: 1.6rem;
    }
}

/* --- Contact Form 7: поля вводу --- */

.contact__form-row {
    margin-bottom: 1.6rem;
}

.contact__form-row .wpcf7-form-control-wrap {
    display: block;
}

.contact__form-row .wpcf7-form-control.wpcf7-text,
.contact__form-row .wpcf7-form-control.wpcf7-email,
.contact__form-row .wpcf7-form-control.wpcf7-tel,
.contact__form-row .wpcf7-form-control.wpcf7-select {
    width: 100%;
    padding: 1.6rem 2rem;
    font-family: inherit;
    font-size: 1.5rem;
    color: #fff;
    background: transparent;
    border: 0.1rem solid transparent;
    border-radius: 1.4rem;
    transition: border-color 0.2s ease;
}

@media (min-width: 1024px) {
    .contact__form-row .wpcf7-form-control.wpcf7-text,
    .contact__form-row .wpcf7-form-control.wpcf7-email,
    .contact__form-row .wpcf7-form-control.wpcf7-tel,
    .contact__form-row .wpcf7-form-control.wpcf7-select {
        color: #1c1c1c;
        background: #eceef5;
    }
}

.contact__form-row .wpcf7-form-control.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2rem center;
    cursor: pointer;
}

.contact__form-row .wpcf7-form-control::placeholder {
    color: #999;
}

.contact__form-row .wpcf7-form-control:focus {
    outline: none;
    border-color: #4c67f9;
}

.contact__form-row  option {
    color: #000;
}

.contact__form-row .wpcf7-form-control.wpcf7-not-valid {
    border-color: #d43f3f;
}

.contact__form-row .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: #d43f3f;
}

.contact__form-label {
    display: block;
    font-size: 1.8rem;
    color: #fff;
}

@media (min-width: 1024px) {
    .contact__form-label {
        color: #1c1c1c;
        font-size: 2.2rem;
    }
}

/* --- Платформи: чекбокси CF7 у вигляді "пігулок" --- */

.contact__platforms.wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .contact__platforms.wpcf7-form-control.wpcf7-checkbox {
        gap: 2rem;
    }
}

.contact__platforms .wpcf7-list-item {
    margin: 0;
}

.contact__platforms .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    padding: 1.8rem 2.2rem;
    font-size: 1.4rem;
    color: #fff;
    background: transparent;
    border-radius: 10rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

@media (min-width: 1024px) {
    .contact__platforms .wpcf7-list-item-label {
        color: #1c1c1c;
        background: #eceef5;
    }
}

.contact__platforms input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.contact__platforms input[type="checkbox"]:checked + .wpcf7-list-item-label {
    background: #0076ff;
}

@media (min-width: 1024px) {
    .contact__platforms input[type="checkbox"]:checked + .wpcf7-list-item-label {
        color: #ffffff;
        background: #1c1c1c;
    }
}

.contact__platforms input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
    outline: 0.2rem solid #4c67f9;
    outline-offset: 0.2rem;
}

/* --- Кнопка відправки --- */

.contact__form-submit.wpcf7-form-control.wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.8rem;
    font-family: inherit;
    font-size: 1.7rem;
    font-weight: 500;
    color: #fff;
    background: #0076ff;
    border: 0;
    border-radius: 10rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

@media (min-width: 1024px) {
    .contact__form-submit.wpcf7-form-control.wpcf7-submit {
        margin-top: 4rem;
        font-size: 1.8rem;
        font-weight: 400;
        background: #1c1c1c;
    }
}

.contact__form-submit.wpcf7-form-control.wpcf7-submit:hover {
    background: var(--color-accent, #BE2B27);
}

.contact .wpcf7-spinner {
    margin-left: 1rem;
}

.contact__form-legal {
    margin-top: -2.6rem;
    font-size: 1.3rem;
    line-height: 140%;
    color: #999;
}

@media (min-width: 1024px) {
    .contact__form-legal {
        font-size: 1.8rem;
        margin-top: -1.8rem;
    }
}

/* CF7: успішна/помилкова відправка форми */

.contact .wpcf7-response-output {
    margin-top: 1.6rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    border-radius: 1.2rem;
}

.contact form.sent .wpcf7-response-output {
    color: #1a7a3c;
    background: #e6f6ec;
    border: 0.1rem solid #bfe8cd;
}

.contact form.invalid .wpcf7-response-output,
.contact form.failed .wpcf7-response-output,
.contact form.aborted .wpcf7-response-output {
    color: #b00;
    background: #fbe9e9;
    border: 0.1rem solid #f3c6c6;
}

/* Footer */

.footer {
    /* Той самий темний тон, що й кінцевий стан секцій .services / .contact —
       без видимого шва між ними. */
    background: #1c1c1c;
    color: #9da2b5;
    padding: 5rem 0 2.4rem;
}

@media (min-width: 1024px) {
    .footer {
        padding: 6rem 0 3rem;
    }
}

.footer__container {
    position: relative;
    width: 100%;
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 2.5rem;
}

@media (min-width: 1024px) {
    .footer__container {
        max-width: 184rem;
        padding: 0 2.5rem;
    }
}

/* Верхній блок: бренд + два меню.
   Мобільний порядок = порядок у HTML (бренд, Послуги, Про нас).
   Десктоп: бренд переноситься праворуч через order, без дублювання розмітки. */

.footer__top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .footer__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 4rem;
        padding-bottom: 0;
    }
}

/* Brand (лого + контакти) */

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

@media (min-width: 1024px) {
    .footer__brand {
        order: 3;
        align-items: flex-end;
        text-align: right;
        gap: 4rem;
        flex-shrink: 0;
    }
}

.footer__logo-link {
    display: inline-flex;
    max-width: 25rem;
}

@media (min-width: 1024px) {
    .footer__logo-link {
        max-width: 30rem;
    }
}

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

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    .footer__contacts {
        align-items: flex-end;
        gap: 3.6rem;
    }
}

.footer__contact-email {
    font-size: 1.5rem;
    color: #fff;
    transition: color 0.2s ease;
}

@media (min-width: 1024px) {
    .footer__contact-email {
        font-size: 1.8rem;
    }
}

.footer__contact-email:hover {
    color: #9da2b5;
}

.footer__contact-phone {
    font-size: 2.8rem;
    font-weight: 500;
    color: #ffffff;
    transition: color 0.2s ease;
}

@media (min-width: 1024px) {
    .footer__contact-phone {
        font-size: 3rem;
    }
}

@media (min-width: 1400px) {
    .footer__contact-phone {
        font-size: 3.8rem;
    }
}

.footer__contact-phone:hover {
    color: #9da2b5;
}

/* Меню */

.footer__menu-group-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;

}

@media (min-width: 1024px) {
    .footer__menu-group-container {
        flex-direction: row;
        max-width: 115rem;
        width: 100%;
        gap: 8rem;
    }
}

@media (min-width: 1350px) {
    .footer__menu-group-container {
        justify-content: space-between;
        gap: 2rem;
    }
}

.footer__menu-group {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    .footer__menu-group {
        gap: 4rem;
    }
}

.footer__menu-title {
    font-size: 2.2rem;
    font-weight: 500;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .footer__menu-title {
        font-size: 2.8rem;
    }
}

.footer__menu-columns {
    display: flex;
    gap: 2.4rem;
}

@media (min-width: 1024px) {
    .footer__menu-columns {
        gap: 2.2rem;
        justify-content: space-between;
        flex-direction: column;
    }
}

@media (min-width: 1350px) {
    .footer__menu-columns {
        flex-direction: row;
        gap: 4rem;
    }
}

@media (min-width: 1600px) {
    .footer__menu-columns {
        gap: clamp(2rem, 14rem, 14rem);
        justify-content: space-between;
    }
}

.footer__menu-column {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

@media (min-width: 1024px) {
    .footer__menu-column {
        gap: 2.2rem;
        width: initial;
    }
}

.footer__menu-item {
    line-height: 130%;
}

.footer__menu-link {
    font-size: 1.4rem;
    line-height: 125%;
    color: #9da2b5;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .footer__menu-link {
        font-size: 2rem;
        line-height: 100%;
    }
}

.footer__menu-link:hover {
    color: #ffffff;
}

/* Соцмережі */

.footer__social {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0;
}

@media (min-width: 1024px) {
    .footer__social {
        padding: 4rem 0;
    }
}

.footer__social-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
}

@media (min-width: 1024px) {
    .footer__social-container {
        flex-direction: row;
        gap: 6.4rem;
    }
}

.footer__social-label {
    font-size: 2rem;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .footer__social-label {
        font-size: 2.8rem;
    }
}

.footer__social-list {
    display: flex;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .footer__social-list {
        gap: 2rem;
    }
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    transition: transform 0.2s ease;
}

@media (min-width: 1024px) {
    .footer__social-link {
        width: 3.3rem;
        height: 3.3rem;
    }
}

.footer__social-link:hover {
    transform: translateY(-0.2rem);
}

.footer__social-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Нижній рядок: копірайт + юридичні посилання */

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-top: 4rem;
}

@media (min-width: 1024px) {
    .footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        gap: 1.2rem;
    }
}

.footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1.2rem;
    font-size: 1.3rem;
}

@media (min-width: 1024px) {
    .footer__legal {
        gap: 0.6rem 1.2rem;
    }
}

.footer__copyright {
    color: #8a8a8a;
    font-size: 1.2rem;
    line-height: 145%;
}

@media (min-width: 1024px) {
    .footer__copyright {
        font-size: 1.8rem;
        line-height: 156%;
    }
}

.footer__credit {
    color: #4a4a4a;
    font-size: 1.2rem;
}

@media (min-width: 1024px) {
    .footer__credit {
        font-size: 1.8rem;
    }
}

.footer__policies {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    order: -1; /* мобільний: угода/політика йдуть ПЕРЕД копірайтом */
    padding-right: 6.4rem; /* місце під кнопку "наверх" праворуч */
    font-size: 1.3rem;
}

@media (min-width: 1024px) {
    .footer__policies {
        font-size: 1.6rem;
    }
}

.footer__policy-link {
    color: #8a8a8a;
    transition: color 0.2s ease;
}

.footer__policy-link:hover {
    color: #ffffff;
}

@media (min-width: 1024px) {
    .footer__bottom .footer__policies {
        order: 2;
        flex-direction: row;
        gap: 2.4rem;
        padding-right: 0;
    }
}

/* Кнопка "наверх" */

/* Кнопка "наверх": два екземпляри в розмітці (десктоп/мобільний),
   кожен прив'язаний до свого реального сусіднього блоку, а не до
   довільних фіксованих координат — так вона завжди на потрібному місці
   незалежно від висоти контенту над чи під нею. */

.footer__to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    padding: 0;
    color: #fff;
    background: transparent;
    border-radius: 100%;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer__to-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;

    background: conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0.4) 120deg,
            rgba(255, 255, 255, 0.4) 140deg,
            rgba(255, 255, 255, 0) 160deg,
            rgba(255, 255, 255, 0) 180deg,
            rgba(255, 255, 255, 0) 250deg,
            rgba(255, 255, 255, 00.6) 300deg,
            rgba(255, 255, 255, 0.6) 330deg,
            rgba(255, 255, 255, 0) 360deg
    );

    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.footer__to-top:hover {
    background: var(--color-accent, #BE2B27);
    border-color: var(--color-accent, #BE2B27);
}

/* Мобільний варіант: усередині .footer__policies (яке саме position:relative),
   праворуч, по вертикальному центру цього блока. */

.footer__to-top--bottom {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.footer__to-top--bottom:hover {
    transform: translateY(-50%) translateY(-0.2rem);
}

/* Десктопний варіант: сидить на роздільній лінії .footer__top */

.footer__to-top--top {
    display: none;
}

@media (min-width: 1024px) {
    .footer__to-top--bottom {
        display: none;
    }

    .footer__to-top--top {
        position: relative;
        display: flex;
        width: 10.6rem;
        height: 10.6rem;
    }

    .footer__to-top--top:hover {
        transform: translateY(-10%) translateY(-0.3rem);
    }
}

.footer__to-top svg {
    width: 1.5rem;
}

@media (min-width: 1024px) {
    .footer__to-top svg {
        width: 3rem;
    }
}

/* Попап "Безкоштовна консультація" */

.popup-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.6rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.popup-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 12, 0.6);
    -webkit-backdrop-filter: blur(0.6rem);
    backdrop-filter: blur(0.6rem);
    cursor: pointer;
}

.popup-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 44rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 2.4rem;
    box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.35);
    transform: translateY(1.6rem) scale(0.98);
    transition: transform 0.3s ease;
}

.popup-modal.is-open .popup-modal__dialog {
    transform: translateY(0) scale(1);
}

@media (min-width: 1024px) {
    .popup-modal__dialog {
        max-width: 76rem;
        border-radius: 3.2rem;
    }
}

.popup-modal__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    color: #1c1c1c;
    background: #eceef5;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.popup-modal__close:hover {
    color: #fff;
    background: var(--color-accent, #BE2B27);
    transform: rotate(90deg);
}

@media (min-width: 1024px) {
    .popup-modal__close {
        top: 3.2rem;
        right: 3.2rem;
        width: 4.8rem;
        height: 4.8rem;
    }
}

.popup-modal__content {
    padding: 3.2rem 2.4rem;
}

@media (min-width: 1024px) {
    .popup-modal__content {
        padding: 6.4rem;
        padding-right: 8rem; /* місце під кнопку закриття в кутку */
    }
}

.popup-modal__overline {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent, #BE2B27);
}

.popup-modal__title {
    color: #1c1c1c;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 115%;
}

@media (min-width: 1024px) {
    .popup-modal__title {
        font-size: 3.6rem;
    }
}

.popup-modal__description {
    margin-top: 1.2rem;
    font-size: 1.5rem;
    line-height: 145%;
    color: #999;
}

@media (min-width: 1024px) {
    .popup-modal__description {
        margin-top: 1.6rem;
        font-size: 1.6rem;
    }
}

.popup-modal__form {
    margin-top: 2.4rem;
}

@media (min-width: 1024px) {
    .popup-modal__form {
        margin-top: 3.2rem;
    }
}

/* --- Поля CF7 --- */

.popup-modal__form-row {
    margin-bottom: 1.6rem;
}

.popup-modal__form-row .wpcf7-form-control-wrap {
    display: block;
}

.popup-modal__form-row .wpcf7-form-control.wpcf7-text,
.popup-modal__form-row .wpcf7-form-control.wpcf7-email,
.popup-modal__form-row .wpcf7-form-control.wpcf7-tel {
    width: 100%;
    padding: 1.6rem 2rem;
    font-family: inherit;
    font-size: 1.5rem;
    color: #1c1c1c;
    background: #eceef5;
    border: 0.1rem solid transparent;
    border-radius: 1.4rem;
    transition: border-color 0.2s ease;
}

.popup-modal__form-row .wpcf7-form-control::placeholder {
    color: #999;
}

.popup-modal__form-row .wpcf7-form-control:focus {
    outline: none;
    border-color: #4c67f9;
}

.popup-modal__form-row .wpcf7-form-control.wpcf7-not-valid {
    border-color: #d43f3f;
}

.popup-modal__form-row .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: #d43f3f;
}

.popup-modal__form-legal {
    margin-bottom: 1.6rem;
    font-size: 1.3rem;
    line-height: 140%;
    color: #999;
}

/* --- Кнопка відправки --- */

.popup-modal__submit.wpcf7-form-control.wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.8rem;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    background: #1c1c1c;
    border: 0;
    border-radius: 10rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.popup-modal__submit.wpcf7-form-control.wpcf7-submit:hover {
    background: var(--color-accent, #BE2B27);
}

.popup-modal .wpcf7-spinner {
    margin-left: 1rem;
}

.popup-modal .wpcf7-response-output {
    margin-top: 1.6rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    border-radius: 1.2rem;
}

.popup-modal form.sent .wpcf7-response-output {
    color: #1a7a3c;
    background: #e6f6ec;
    border: 0.1rem solid #bfe8cd;
}

.popup-modal form.invalid .wpcf7-response-output,
.popup-modal form.failed .wpcf7-response-output,
.popup-modal form.aborted .wpcf7-response-output {
    color: #b00;
    background: #fbe9e9;
    border: 0.1rem solid #f3c6c6;
}

/* Поки модалка відкрита — сторінка позаду не скролиться (клас вішає popup.js) */
body.has-open-modal {
    overflow: hidden;
}

/* Плаваюча кнопка зв'язку */

.messenger-widget {
    position: fixed;
    right: 1.6rem;
    bottom: 1.6rem;
    z-index: 998;
    display: flex;
    align-items: center;
    box-shadow: 0 16px 32px -8px rgba(22, 37, 66, 0.15), 0 0 14px -5px #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 4.09%, rgba(255, 255, 255, 0.76) 100%);
    padding: .5rem;
    border-radius: 4rem;
}

@media (min-width: 1024px) {
    .messenger-widget {
        right: 3.2rem;
        bottom: 3.2rem;
    }
}

/* Панель з іконками — ховається позаду кнопки (негативний margin),
   тому кнопка завжди візуально "накриває" її правий заокруглений край
   і в згорнутому стані панель повністю не видно: немає білого кільця
   навколо кнопки, лишається рівно той самий круглий вигляд. */

.messenger-widget__items {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 0;
    height: 5.6rem;
    /*margin-right: -2.8rem; !* половина діаметра кнопки — ховається позаду неї *!*/
    padding: 0;
    overflow: hidden;
    background: rgba(255,255,255, .3);
    border-radius: 10rem 0 0 10rem;
    box-shadow: 0 1.2rem 3.2rem rgba(22, 37, 66, 0.18);
    opacity: 0;
    transition:
            max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease;
}

.messenger-widget:hover .messenger-widget__items,
.messenger-widget.is-open .messenger-widget__items {
    max-width: 40rem;
    padding: 0 3.6rem 0 1.2rem; /* праве поле резервує місце під кнопку, що лежить зверху */
    opacity: 1;
    margin-right: -2rem;
}

.messenger-widget__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    opacity: 0;
    transform: scale(0.4) translateX(1rem);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0s;
}

/* Іконки з'являються по черзі зліва направо, із затримкою на кожну —
   саме це й дає "гарну" анімацію розгортання, а не миттєву появу всіх одразу. */
.messenger-widget:hover .messenger-widget__item,
.messenger-widget.is-open .messenger-widget__item {
    opacity: 1;
    transform: scale(1) translateX(0);
    transition-delay: calc(var(--mw-i, 0) * 0.05s + 0.1s);
}

.messenger-widget__item--viber { background: #7360f2; }
.messenger-widget__item--telegram { background: #29a9eb; }
.messenger-widget__item--whatsapp { background: #25d366; }
.messenger-widget__item--messenger {
    background: linear-gradient(135deg, #a535e6 0%, #e53e8f 50%, #ffb13d 100%);
}

.messenger-widget__item:hover {
    transform: scale(1.1) translateX(0) !important;
}

/* Кнопка-перемикач (слухавка) */

.messenger-widget__toggle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 100%;
    background: var(--color-accent, #BE2B27);
    box-shadow: 0 1.2rem 2.4rem rgba(190, 43, 39, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.messenger-widget__toggle:hover {
    transform: scale(1.05);
}

.messenger-widget.is-open .messenger-widget__toggle {
    transform: rotate(135deg); /* слухавка "лягає" по діагоналі, натякаючи на закриття — як хрестик */
}

@media (hover: hover) {
    .messenger-widget.is-open .messenger-widget__toggle {
        transform: none; /* на десктопі, де працює hover, обертання не потрібне — панель і так ховається при відведенні миші */
    }
}