* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

:root {
    --dark-blue: #001666;
    --pink: #FF79AE;
    --blue-gray: #B8D6E2;
    --gray: #535353;
}

body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #000;
}

.container {
    max-width: 1592px;
    padding: 0 40px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

.btn {
    position: relative;
    appearance: none;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    padding: 0 20px;
    height: 54px;
    justify-content: center;
    align-items: center;
    border-radius: 35px;
    background: var(--pink);
    color: #E5F8FF;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    border: 4px solid transparent;
    overflow: hidden;
    transition: color .3s ease;
    /* z-index: 0 створює контекст накладання, щоб ::after (z-index:-1)
       лягав ПОВЕРХ фону кнопки, але ПІД текстом */
    z-index: 0;
}

/* Заливка, що розходиться пігулкою від центру */
.btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    /* коло: квадрат зі стороною 120% ширини кнопки (padding-% рахується від ширини),
       border-radius 50% робить його круглим, overflow:hidden обріже зайве */
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    background: #fff;
    border-radius: 50%;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
    z-index: -1;
}

.btn:hover, .btn:focus {
    color: var(--pink);
}

.btn:hover::after, .btn:focus::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Варіант на темному фоні: біла кнопка з рожевою заливкою */
.btn.btn-white {
    background: #fff;
    border: 4px solid #FFF;
    color: var(--dark-blue);
}

.btn.btn-white::after {
    background: var(--pink);
}

.btn.btn-white:hover, .btn.btn-white:focus {
    color: #fff;
}

.header {
    display: flex;
    align-items: center;
    position: fixed;
    max-width: calc(1592px - 80px);
    width: calc(100% - 80px);
    padding: 10px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 64px;
    background: var(--dark-blue);
    box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(7.5px);
    transition: border-radius .35s ease-in-out, max-height .35s ease-in-out;
    z-index: 10;
}

.header-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
}

.header-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-logo {
    margin-left: 38px;
}

.header-logo img {
    width: 104px;
    height: 54px;
}

.btn-burger {
    appearance: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    margin-right: 38px;
    display: none;
}

.header-nav {
    margin: 0 auto;
}

.header-nav ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-nav ul a {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    padding: 16px 12px;
    transition: all .2s;
    border-radius: 43px;
    cursor: pointer;
}

.header-nav ul a:hover,
.header-nav ul a.current,
.header-nav ul li.current-menu-item > a,
.header-nav ul li.current_page_item > a,
.header-nav ul li.current-menu-ancestor > a,
.header-nav ul li.current_page_ancestor > a,
.header-nav ul li.current-page-ancestor > a,
.header-nav ul li.current_page_parent > a {
    background: #152A77;
}

/* Мовний перемикач: слот фіксованого розміру, пігулка випадає поверх контенту,
   тому висота хедера не змінюється при розгортанні */
.lang {
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 20px;
}

.lang-list {
    position: absolute;
    top: 0;
    left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    border-radius: 40px;
    border: 2px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
}

.lang-list a {
    text-decoration: none;
    color: var(--pink);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    transition: background-color .2s, color .2s;
}

.lang-list a:hover {
    background: var(--pink);
    color: #fff;
}

/* Активна мова — некликабельна і без hover-ефекту */
.lang-list li.current a {
    pointer-events: none;
    cursor: default;
}

/* Ховаємо всі мови крім активної, поки нема наведення */
.lang-list li:not(.current) {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .3s ease, margin-top .3s ease, margin-bottom .3s ease, opacity .2s ease;
}

/* Наведення (або фокус з клавіатури) — розгортаємо пігулку з усіма мовами */
.lang-list:hover,
.lang-list:focus-within {
    background: #152A77;
    border-color: #152A77;
}

.lang-list:hover li:not(.current),
.lang-list:focus-within li:not(.current) {
    max-height: 60px;
    margin-top: 10px;
    opacity: 1;
    pointer-events: auto;
}

.social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 170px;
    height: 54px;
    background: #152A77;
    border-radius: 43px;
}

.social a {
    display: flex;
    transition: all .2s;
}

.social a:hover, .social a:focus {
    transform: scale(1.25);
}

.header .btn {
    margin-left: 40px;
}

@media (max-width: 1150px) {
    body.is-menu::after {
        content: '';
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(5px);
        transition: all .9s ease-in-out;
        z-index: 9;
    }

    .header {
        flex-direction: column;
        gap: 40px;
        overflow: hidden;
        max-height: 74px;
        padding: 14px 20px 20px;
        /* закриття: спочатку згортається висота, потім бордер-радіус */
        transition: max-height .35s ease-in-out, border-radius .2s ease-in-out .35s;
    }

    .header-wrapper {
        opacity: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 498px;
        /* закриття: зникає миттєво, не чекаючи згортання хедера */
        transition: none;
    }

    .header.is-menu .header-wrapper {
        opacity: 1;
        pointer-events: initial;
        /* відкриття: зʼявляється лише після того, як меню розгорнулось (~0.7s) */
        transition: opacity .3s ease-in-out .6s;
    }

    .header-logo {
        margin-left: 28px;
    }

    .header-logo img {
        width: 85px;
        height: 44px;
    }

    .header-logo-wrapper {
        width: 100%;
        gap: 20px;
        z-index: 1;
        background: var(--dark-blue);
    }

    .btn-burger {
        display: block;
        margin-right: 28px;
    }

    .header.is-menu {
        border-radius: 37px;
        max-height: 618px;
        height: 100%;
        /* відкриття: спочатку розгортається висота, потім бордер-радіус */
        transition: border-radius .2s ease-in-out, max-height .35s ease-in-out .35s;
    }

    .header-nav {
        order: 1;
    }

    .header-nav ul {
        flex-direction: column;
        gap: 26px;
    }

    .header-nav ul a {
        padding: 0;
        background: transparent;
        font-size: 28px;
        text-transform: uppercase;
        font-weight: 700;
        font-family: "Oswald", sans-serif;
    }

    .header-nav ul a:hover,
    .header-nav ul a.current,
    .header-nav ul li.current-menu-item > a,
    .header-nav ul li.current_page_item > a,
    .header-nav ul li.current-menu-ancestor > a,
    .header-nav ul li.current_page_ancestor > a,
    .header-nav ul li.current-page-ancestor > a,
    .header-nav ul li.current_page_parent > a {
        background: transparent;
        color: var(--pink);
    }

    .header .btn {
        order: 2;
        margin: auto 0 0;
    }

    .social {
        order: 3;
    }

    .lang {
        order: 4;
        position: absolute;
        margin: 0;
        right: 29px;
        bottom: 26px;
        width: 40px;
        height: 80px;
        z-index: 1;
    }

    .lang-list {
        padding: 3px;
    }

    .lang-list a {
        width: 30px;
        min-width: 30px;
        height: 30px;
        font-size: 14px;
    }

    /* Модифікатор: пігулка розгортається знизу вгору (напр. у футері) */
    .lang-list--up {
        top: auto;
        bottom: 0;
        flex-direction: column-reverse;
    }

    .lang-list--up:hover li:not(.current),
    .lang-list--up:focus-within li:not(.current) {
        margin-top: 0;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .header {
        width: calc(100% - 40px);
        padding: 14px 20px 20px;
        max-height: 74px;
    }

    .header-logo img {
        width: 85px;
        height: 44px;
    }

    .header-logo {
        margin-left: 20px;
    }

    .btn-burger {
        margin-right: 20px;
    }
}

@media (max-width: 400px) {
    .social {
        margin-right: auto;
    }

    .lang {
        right: 20px;
    }
}

.hero {
    position: relative;
    background-size: contain;
    background-image: url("../images/hero-bg.webp");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-color: #fff;
    height: 100dvh;
    max-height: 1080px;
    min-height: 1080px;
    border-radius: 0 0 60px 60px;
    z-index: 2;
    overflow: hidden;
}

.hero .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 898px;
    z-index: 1;
}

.hero-content h1 {
    color: var(--dark-blue);
    font-family: "Oswald", sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.hero-content h1 b {
    color: var(--pink);
    display: block;
}

.hero-content p {
    font-size: 26px;
    font-weight: 400;
    max-width: 754px;
}

.hero-content p b {
    color: var(--pink);
    font-weight: 600;
}

.hero-content .btn {
    max-width: fit-content;
    padding: 0 52px;
}

.hero-image {
    width: 862px;
    height: 963px;
    margin-right: -104px;
    margin-left: -154px;
    margin-top: auto;
}

@media (max-width: 1515px) {
    .hero {
        min-height: 768px;
        max-height: 768px;
        background-position: bottom right;
    }

    .hero .container {
        justify-content: space-between;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content {
        max-width: 768px;
    }

    .hero-content p {
        font-size: 20px;
    }

    .hero-image {
        width: 606px;
        height: 675px;
        margin-right: 0;
        margin-left: 0;
        margin-top: auto;
    }
}

@media (max-width: 1240px) {
    .hero-image {
        width: 500px;
        height: 558px;
        margin-left: -62px;
    }

    .hero-content {
        gap: 20px;
    }

    .hero-content h1 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .hero {
        border-radius: 0 0 30px 30px;
    }

    .hero .container {
        align-items: flex-start;
    }

    .hero-content {
        margin-top: 173px;
        max-width: 468px;
        min-width: 468px;
    }

    .hero-content p {
        max-width: 427px;
    }

    .hero-image {
        width: 100%;
        max-width: 528px;
        height: auto;
    }
}

@media (max-width: 850px) {
    .hero {
        max-height: initial;
        min-height: initial;
        height: initial;
        background-position: bottom center;
        background-size: 165%;
    }

    .hero .container {
        flex-direction: column;
        gap: 22px;
    }

    .hero-content {
        min-width: initial;
    }

    .hero-content, .hero-content p {
        max-width: initial;
        text-align: center;
    }

    .hero-content .btn {
        margin: 0 auto;
    }

    .hero-image {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero {
        background-size: 240%;
        background-position: bottom right;
    }

    .hero-content h1 {
        font-size: 30px;
    }

    .hero-image {
        max-width: 428px;
        max-height: 478px;
    }
}

@media (max-width: 380px) {
    .hero-content {
        margin-top: 150px;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .hero-content p {
        font-size: 16px;
    }
}

.people-come {
    position: relative;
    background: url("../images/people-come-bg.webp") no-repeat center;
    background-size: cover;
    margin-top: -57px;
    padding-top: 165px;
    padding-bottom: 210px;
    z-index: 1;
}

.people-come .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.people-come-chat {
    width: 636px;
    height: 900px;
    border-radius: 53px;
    border: 15px solid #B1BDE0;
    background: #FFF;
    box-shadow: 60px 0 40.8px 0 rgba(0, 0, 0, 0.25);
}

.people-come-chat header {
    display: flex;
    align-items: center;
    gap: 17px;
    background: #F0FBFF;
    padding: 14px;
    border-radius: 40px 40px 0 0;
}

.people-come-chat header img {
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: block;
}

.people-come-chat p {
    color: var(--dark-blue);
    font-size: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.people-come-chat p::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--pink);
    display: block;
    border-radius: 100%;
}

.people-come-chat ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 28px;
    padding: 28px 20px 67px 28px;
    overflow: hidden;
}

.people-come-chat ul li {
    border-radius: 30px 30px 0 30px;
    background: var(--pink);
    padding: 18px 26px;
    font-size: 20px;
    color: #fff;
}

.people-come-chat ul li:nth-child(1), .people-come-chat ul li:nth-child(2) {
    width: 454px;
}

.people-come-chat ul li:nth-child(5), .people-come-chat ul li:nth-child(6) {
    width: 404px;
}

/* Стартовий стан для анімації появи: повідомлення сховані праворуч */
.people-come-chat ul li {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity .5s ease, transform .5s ease;
}

/* Кінцевий стан — JS додає .is-visible почергово (зі stagger) */
.people-come-chat ul li.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.people-come-content {
    max-width: 744px;
}

.people-come-content h2 {
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 54px;
}

.people-come-content h2 b {
    color: var(--pink);
}

.people-come-content p {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 26px;
    color: #fff;
}

.people-come-content svg {
    width: 174px;
    min-width: 174px;
    height: 62px;
}

.people-come-text {
    margin-top: 74px;
    color: #454545;
    font-size: 20px;
    padding: 20px 28px;
    background: #fff;
    border-radius: 30px 30px 30px 0;
}

.people-come-content-icon--mobile, .people-come-text--mobile {
    display: none;
}

@media (max-width: 1515px) {
    .people-come .container {
        gap: 74px;
    }

    .people-come-chat ul li {
        font-size: 18px;
    }

    .people-come-chat {
        border: 8px solid #B1BDE0;
        width: 530px;
        height: 859px;
    }

    .people-come-chat header {
        border-radius: 46px 46px 0 0;
        padding: 14px 24px;
    }

    .people-come-content h2 {
        font-size: 42px;
    }
}

@media (max-width: 1240px) {
    .people-come-content h2 {
        font-size: 36px;
        margin-bottom: 30px;
    }

    .people-come-content p {
        font-size: 20px;
        gap: 22px;
    }

    .people-come-text {
        padding: 20px;
    }

    .people-come-chat header img {
        width: 36px;
        min-width: 36px;
        height: 36px;
    }

    .people-come-chat p {
        font-size: 16px;
    }

    .people-come-chat ul li {
        padding: 10px;
        font-size: 16px;
        border-radius: 15px 15px 0 15px;
    }

    .people-come-chat ul li:nth-child(1), .people-come-chat ul li:nth-child(2) {
        width: 321px;
    }

    .people-come-chat ul li:nth-child(3), .people-come-chat ul li:nth-child(4) {
        width: 353px;
    }

    .people-come-chat ul li:nth-child(5), .people-come-chat ul li:nth-child(6) {
        width: 308px;
    }

    .people-come-chat ul {
        padding: 16px 14px 30px;
        width: 432px;
    }

    .people-come-chat {
        height: fit-content;
        width: fit-content;
    }

    .people-come-text {
        margin-top: 40px;
    }
}

@media (max-width: 1024px) {
    .people-come-content {
        max-width: 430px;
    }

    .people-come {
        padding: 81px 0 90px;
        margin-top: -30px;
    }

    .people-come-content-icon {
        display: none;
    }

    .people-come-content-icon--mobile {
        display: block;
    }

    .people-come-content svg {
        width: 37px;
        min-width: 37px;
        height: 36px;
    }

    .people-come-chat header {
        border-radius: 22px 22px 0 0;
    }

    .people-come-chat {
        border-radius: 30px;
    }

    .people-come .container {
        gap: 66px;
    }

    .people-come-chat ul {
        gap: 22px;
        max-width: 430px;
        width: 100%;
    }
}

@media (max-width: 850px) {
    .people-come .container {
        flex-direction: column-reverse;
        gap: 32px;
    }

    .people-come-content {
        text-align: center;
        max-width: 500px;
    }

    .people-come-content svg, .people-come-text {
        display: none;
    }

    .people-come-text.people-come-text--mobile {
        display: block;
        margin-top: 20px;
        border-radius: 15px 15px 15px 0;
    }

    .people-come-chat ul {
        width: 430px;
    }
}

@media (max-width: 768px) {
    .people-come-content h2 {
        font-size: 30px;
    }

    .people-come {
        padding: 92px 0 155px;
    }

    .people-come-content p {
        max-width: 345px;
        margin: 0 auto;
    }
}

@media (max-width: 500px) {
    .people-come-chat ul {
        width: 100%;
    }

    .people-come-chat {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .people-come-chat ul li:nth-child(1), .people-come-chat ul li:nth-child(2),
    .people-come-chat ul li:nth-child(5), .people-come-chat ul li:nth-child(6) {
        width: calc(100% - 30px);
    }

    .people-come-chat ul li:nth-child(3), .people-come-chat ul li:nth-child(4) {
        width: 100%;
    }

    .people-come-chat ul li {
        font-size: 14px;
    }

    .people-come-chat ul {
        gap: 15px;
    }
}

.brand-marketing {
    position: relative;
    border-radius: 60px;
    background: #fff;
    z-index: 2;
    padding: 140px 0;
    margin-top: -70px;
}

.brand-problems {
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    margin-bottom: 140px;
}

.brand-problems-left {
    position: relative;
    background: url(../images/brand-problems-image.webp) no-repeat center;
    background-size: cover;
    padding: 78px 60px 60px;
    z-index: 1;
    max-width: 782px;
}

.brand-problems-left::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 22, 102, 0.70);
    backdrop-filter: blur(3.5px);
    z-index: -1;
}

.brand-problems h2 {
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.brand-problems h2 b {
    color: var(--pink);
}

.brand-problems p {
    color: #fff;
}

.brand-problems-right {
    background: var(--dark-blue);
    padding: 88px 64px;
}

.brand-problems-right ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.brand-problems-right li {
    max-width: 603px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand-problems-right li::before {
    content: '';
    width: 16px;
    min-width: 16px;
    height: 16px;
    background: var(--blue-gray);
    border-radius: 100%;
}

.brand-impact {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.brand-impact-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.brand-impact-header h2 {
    color: var(--dark-blue);
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    max-width: 626px;
}

.brand-impact-header h2 b {
    color: var(--pink);
}

.brand-impact-header p {
    color: var(--gray);
    font-size: 26px;
    max-width: 798px;
    margin-top: 25px;
}

.brand-impact-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    list-style-type: none;
}

.brand-impact-card {
    padding: 26px;
    min-height: 552px;
    max-width: 460px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
}

.brand-impact-card span {
    color: var(--pink);
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 120px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 51px;
    margin-top: 41px;
    display: block;
}

.brand-impact-card p {
    font-size: 26px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.brand-impact-card small {
    display: block;
    color: #B5B5B5;
    margin-top: auto;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
}

.brand-impact-card:nth-child(1) {
    background: url(../images/brand-impact-bg-1.webp) no-repeat center;
    background-size: cover;
}

.brand-impact-card:nth-child(2) {
    background: url(../images/brand-impact-bg-2.webp) no-repeat center;
    background-size: cover;
}

.brand-impact-card:nth-child(3) {
    background: url(../images/brand-impact-bg-3.webp) no-repeat center;
    background-size: cover;
}

@media (max-width: 1515px) {
    .brand-problems-left {
        max-width: initial;
        flex: 1;
    }

    .brand-problems-right {
        flex: 1;
    }

    .brand-problems h2, .brand-impact-header h2 {
        font-size: 42px;
    }

    .brand-impact-header h2 {
        min-width: 340px;
    }

    .brand-impact-header {
        align-items: center;
    }

    .brand-impact-header p {
        font-size: 20px;
        margin: 0;
    }

    .brand-impact-card span {
        font-size: 100px;
    }

    .brand-impact-card p {
        font-size: 24px;
    }
}

@media (max-width: 1240px) {
    .brand-problems h2, .brand-impact-header h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .brand-marketing {
        padding: 40px 0;
        border-radius: 30px;
        margin-top: -40px;
    }

    .brand-problems-left {
        padding: 87px 57px;
    }

    .brand-problems-right {
        padding: 87px 40px;
    }

    .brand-problems-right li {
        font-size: 16px;
    }

    .brand-problems {
        margin-bottom: 60px;
    }

    .brand-impact-card span {
        font-size: 90px;
        margin-bottom: 33px;
        margin-top: 23px;
    }

    .brand-impact-card p {
        font-size: 16px;
    }

    .brand-impact-card small {
        font-size: 12px;
    }

    .brand-impact-list {
        gap: 22px;
    }

    .brand-impact-card {
        min-height: 380px;
        padding: 18px 20px;
        flex: 1;
    }
}

@media (max-width: 992px) {
    .brand-impact-card span {
        font-size: 75px;
    }
}

@media (max-width: 850px) {
    .brand-problems {
        flex-direction: column;
    }

    .brand-problems-left {
        padding: 68px 20px;
        text-align: center;
    }

    .brand-problems-right {
        padding: 46px 20px;
    }

    .brand-problems-right ul {
        gap: 22px;
    }

    .brand-problems-right li {
        max-width: initial;
    }

    .brand-impact-header {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .brand-impact-header h2 {
        max-width: initial;
    }

    .brand-impact-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .brand-impact-card {
        min-width: calc(100% / 2 - 11px);
        max-width: 370px;
    }

}

@media (max-width: 768px) {
    .brand-problems {
        border-radius: 15px;
    }

    .brand-problems h2 {
        font-size: 30px;
    }

    .brand-marketing {
        padding: 20px 0 60px;
    }

    .brand-impact-list {
        flex-direction: column;
        align-items: center;
    }

    .brand-impact-card {
        min-width: initial;
        max-width: 300px;
        border-radius: 15px;
    }

    .brand-impact-card span {
        font-size: 90px;
    }
}

@media (max-width: 350px) {
    .brand-problems h2 {
        font-size: 28px;
    }

    .brand-problems p {
        font-size: 18px;
    }
}

.brand-development {
    background: url(../images/brand-development-bg.webp) no-repeat center;
    background-size: cover;
    margin-top: -52px;
    padding-top: 194px;
    padding-bottom: 190px;
}

.brand-development .container {
    display: flex;
    gap: 50px;
}

.brand-development-content {
    max-width: 620px;
}

.brand-development-content h2 {
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.brand-development-content h2 b {
    color: var(--pink);
}

.brand-development-content p {
    color: #fff;
    margin-bottom: 10px;
}

.brand-development-content-btn {
    margin-top: 20px;
}

.brand-development-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 42px 30px;
    max-width: 853px;
}

.brand-development-links a {
    cursor: pointer;
    appearance: none;
    border-radius: 38px;
    background: var(--pink);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 3px 3px 3px 20px;
    color: #FFF;
    font-family: "Nunito Sans", sans-serif;
    font-size: 30px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    height: fit-content;
    min-width: 241px;
}

.brand-development-links-icon {
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-blue);
    transition: all .2s;
}

.brand-development-links a:hover .brand-development-links-icon, .brand-development-links a:focus .brand-development-links-icon:focus {
    transform: rotate(45deg) scale(1.12);
}

.brand-development-content-btn--mobile {
    display: none;
}

@media (max-width: 1515px) {
    .brand-development-content h2 {
        font-size: 42px;
    }

    .brand-development-content {
        min-width: 450px;
    }
}

@media (max-width: 1240px) {
    .brand-development-content h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .brand-development {
        padding: 138px 0 110px;
        margin-top: -30px;
    }

    .brand-development-content h2 {
        font-size: 36px;
    }

    .brand-development-content .btn {
        margin-top: 30px;
    }

    .brand-development-links {
        gap: 30px;
        flex-direction: column;
        justify-content: flex-start;
    }

    .brand-development-content {
        min-width: 300px;
        max-width: 468px;
    }

    .brand-development-links a {
        width: fit-content;
        text-wrap: nowrap;
    }
}

@media (max-width: 850px) {
    .brand-development {
        padding: 95px 0 90px;
    }

    .brand-development .container {
        flex-direction: column;
        gap: 40px;
    }

    .brand-development-content {
        max-width: fit-content;
        text-align: center;
    }

    .brand-development-content h2 {
        font-size: 30px;
    }

    .brand-development-content .btn {
        display: none;
    }

    .brand-development-links {
        align-items: center;
    }

    .brand-development-content-btn--mobile {
        display: flex;
        width: fit-content;
        margin: 10px auto 0;
    }
}

@media (max-width: 450px) {
    .brand-development-links a {
        font-size: 20px;
        white-space: wrap;
    }

    .brand-development-content {
        min-width: initial;
    }
}

.clients {
    margin-top: -60px;
    padding-top: 100px;
    padding-bottom: 75px;
    border-radius: 60px 60px 0 0;
    background: #fff;
}

.clients h2 {
    color: var(--dark-blue);
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 54px;
}

.clients-list {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 1515px) {
    .clients h2 {
        font-size: 42px;
    }

    .clients-list img {
        max-height: 110px;
    }

    .clients-list {
        gap: 39px;
        flex-wrap: wrap;
        justify-content: space-around;
    }
}

@media (max-width: 1240px) {
    .clients h2 {
        font-size: 36px;
    }

    .clients-list img {
        max-height: 103px;
        max-width: 185px;
    }
}

@media (max-width: 1024px) {
    .clients {
        padding: 60px 0 35px;
        margin-top: -30px;
        border-radius: 30px 30px 0 0;
    }

    .clients h2 {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .clients {
        padding: 30px 0 25px;
    }

    .clients-list img {
        max-height: 65px;
        max-width: 127px;
    }
}

.result {
    position: relative;
    z-index: 2;
    border-radius: 60px;
    background: #FFF;
    padding: 75px 0 157px;
    overflow: hidden;
}

.result h2 {
    color: var(--dark-blue);
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 21px;
}

.result b {
    color: var(--pink);
}

.sub-header {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-bottom: 97px;
}

.sub-header .btn {
    min-width: 293px;
}

.sub-header p {
    max-width: 873px;
    color: var(--gray);
}

.result-card-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.result-list {
    display: flex;
    gap: 46px;
    overflow-x: auto; /* Вмикаємо горизонтальний скрол */
    scroll-behavior: smooth; /* Робимо прокрутку плавною */
    /* Ефект слайдера: фіксація (клікінг) карток при гортанні */
    scroll-snap-type: x mandatory;
    /* Приховуємо стандартний нативний скролбар */
    scrollbar-width: none; /* Для Firefox */
    /*
     * overflow-x: auto змушує браузер рахувати overflow-y як auto,
     * через що 3D-ефекти карток (perspective, translateZ, rotateY при hover)
     * обрізаються по вертикалі. Даємо запас відступами та компенсуємо margin,
     * щоб не зсувати сусідні блоки.
     */
    padding-block: 60px;
    margin-block: -60px;
    /*
     * Full-bleed: виходимо за межі .container на всю ширину секції,
     * щоб край контейнера (padding 40px) не обрізав картки.
     * padding/scroll-padding-inline тримають першу картку під заголовком.
     */
    margin-inline: calc(50% - 50vw);
    padding-inline: max(40px, calc(50vw - 756px));
    scroll-padding-inline: max(40px, calc(50vw - 756px));
}

.result-list::-webkit-scrollbar {
    display: none;
}

/* Свайп мишкою: курсор-«рука», під час перетягування блокуємо виділення тексту */
.result-list {
    cursor: grab;
}

.result-list.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto; /* під час drag скрол має бути миттєвим, без smooth */
    scroll-snap-type: none; /* snap не заважає тягнути */
    user-select: none;
}

.result-card {
    list-style-type: none;
    /* Точка привязки для ефекту слайдера */
    scroll-snap-align: start;
    /* Не даємо flex стискати картки — тримають повну ширину, зайве йде у скрол */
    flex-shrink: 0;
}

.result-card:nth-child(1) .result-card-front {
    background: url(../images/result-card-image-1.webp) no-repeat center;
    background-size: cover;
}

.result-card:nth-child(2) .result-card-front {
    background: url(../images/result-card-image-2.webp) no-repeat center;
    background-size: cover;
}

.result-card:nth-child(3) .result-card-front {
    background: url(../images/result-card-image-3.webp) no-repeat center;
    background-size: cover;
}

.result-card:nth-child(4) .result-card-front {
    background: url(../images/result-card-image-4.webp) no-repeat center;
    background-size: cover;
}

.result-card:nth-child(5) .result-card-front {
    background: url(../images/result-card-image-5.webp) no-repeat center;
    background-size: cover;
}

.result-card-front {
    position: relative;
    border-radius: 30px;
    width: 488px;
    min-height: 603px;
    z-index: 1;
}

.result-card-inner {
    -webkit-transform: translateY(-50%) scale(0.96);
    transform: translateY(-50%) scale(0.96);
    top: 50%;
    padding: 26px;
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 1px solid transparent;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.result-card-front, .result-card-back {
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.result-card-front::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background: rgba(0, 22, 102, 0.80);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.result-card-front span {
    color: var(--pink);
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.result-card-front p {
    color: #fff;
    text-align: center;
}

.result-card-front strong {
    color: var(--pink);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: block;
    margin-top: 20px;
}

.result-card-wrapper:hover .result-card-front,
.result-card-wrapper:hover .result-card-back {
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.result-card-back {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 100%;*/
    background: url(../images/result-card-back-bg.webp) no-repeat center;
    background-size: cover;
    border-radius: 30px;
    padding: 26px;
    width: 488px;
    min-height: 603px;
    z-index: 1;
}

.result-card-wrapper .result-card-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.result-card-wrapper .result-card-front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.result-card-wrapper.is-flipped .result-card-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.result-card-wrapper.is-flipped .result-card-front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.result-card-wrapper {
    cursor: pointer;
}

.result-card-back ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.result-card-back ul li {
    display: flex;
    gap: 14px;
}

.result-card-back-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-card-back ul li p {
    color: #DFE2E5;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.result-card-back ul li p b {
    color: var(--pink);
    font-weight: 700;
}

.result-btn--mobile {
    display: none;
}

@media (max-width: 1515px) {
    .result h2 {
        font-size: 42px;
    }
}

@media (max-width: 1240px) {
    .result h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .result {
        padding: 35px 0 78px;
        border-radius: 0 0 30px 30px;
    }

    .result h2 {
        margin-bottom: 30px;
    }

    .sub-header {
        margin-bottom: 60px;
    }

    .result-card-inner {
        padding: 16px;
    }

    .result-card-front span {
        font-size: 20px;
    }

    .result-card-front p {
        font-size: 16px;
    }

    .result-card-back ul li p {
        font-size: 13px;
    }

    .result-card-front, .result-card-back {
        width: 300px;
        min-height: 380px;
        border-radius: 15px;
    }

    .result-card-front::before, .result-card-front::after {
        border-radius: 15px;
    }

    .result-list {
        gap: 54px;
    }
}

@media (max-width: 850px) {
    .result h2 {
        text-align: center;
    }

    .sub-header .btn {
        display: none;
    }

    .sub-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .result-list {
        gap: 30px
    }
    
    .result-btn--mobile {
        display: block;
        margin: 50px auto 0;
    }
}

@media (max-width: 768px) {
    .result {
        padding: 25px 0 40px;
    }
}

.brand-diagnostic {
    position: relative;
    background: url(../images/form-section-bg.webp) no-repeat center;
    background-size: cover;
    padding: 200px 0 217px;
    margin-top: -64px;
    /*
     * z-index: -1 ховав усю секцію за іншими шарами, тому кліки по радіо
     * не доходили. Робимо z-index нижчим за .result (щоб та лишалась зверху
     * своїм заокругленим краєм), але не відʼємним — секція знову клікабельна.
     */
    z-index: 1;
}

.quiz {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.20);
    min-height: 669px;
    margin-bottom: 140px;
}

.quiz-info {
    border-radius: 30px;
    background: var(--dark-blue);
    padding: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    max-width: 676px;
}

.quiz-info h2 {
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-top: 127px;
}

.quiz-info h2 b {
    color: var(--pink);
}

.quiz-info p {
    font-size: 26px;
    color: #fff;
    margin-bottom: auto;
}

.quiz-content {
    padding: 30px 47px 30px 0;
    max-width: 709px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.quiz-content-line {
    color: #C8C8C8;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 30px;
}

.quiz-content-line .quiz-progress-bar {
    position: relative;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.20);
    height: 6px;
    width: 100%;
    display: block;
    margin-top: 10px;
}

.quiz-content-line .quiz-progress-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 10px;
    width: var(--quiz-progress, 1%);
    background: var(--pink);
    transition: width .3s ease;
}

.quiz-content-line.hidden {
    display: none;
}

.quiz-content-title {
    color: var(--pink);
    font-family: 'Oswald', sans-serif;
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}

.quiz-content-answ p {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 26px;
}

.quiz-content-radio {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quiz-radio {
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: block;
    padding: 16px 20px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.20);
    cursor: pointer;
    transition: all .2s;
}

.quiz-radio input[type="radio"] {
    display: none;
}

.quiz-radio:has(input[type="radio"]:checked) {
    background: var(--pink);
}

.quiz-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}

.quiz-next {
    margin-left: auto;
}

.quiz-btn:disabled {
    pointer-events: none;
    opacity: 0.5;
}

.quiz-btn {
    padding: 16px 30px;
}

.quiz-btn.hidden {
    display: none;
}

.quiz-content-answ.hidden {
    display: none;
}

.quiz-content-point {
    color: var(--pink);
    font-family: "Oswald", sans-serif;
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}

.quiz-content-total-title {
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}

.quiz-content-total.hidden {
    display: none;
}

.quiz-content-total {
    margin-bottom: 40px;
}

.quiz-content-total p {
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
}

.quiz-content-total-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
}

.quiz-content-total-list li {
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.10);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-content-total-header {
    display: flex;
    align-items: center;
    gap: 26px;
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.quiz-content-total-list-point {
    padding: 10px 20px;
    border-radius: 33px;
    background: #FB7979;
}

.quiz-content-total-list-point.green {
    background: #0BC321;
}

.quiz-content-total-list-point.yellow {
    background: #FFAD2A;
}

.quiz-content-total-list li p {
    color: #fff;
    font-size: 16px;
}

.quiz-content-total-list-low.hidden {
    display: none;
}

.quiz-content-total-list-low a {
    text-decoration: none;
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 10px 20px;
    border-radius: 35px;
    border: 1px solid #FFF;
    display: block;
    width: fit-content;
    transition: all .2s;
}

.quiz-content-total-list-low a:hover, .quiz-content-total-list-low a:focus {
    background: #fff;
    color: var(--dark-blue);
}

@media (max-width: 1240px) {
    .quiz-info h2 {
        font-size: 36px;
    }
}

@media (max-width: 1024px) {
    .brand-diagnostic {
        padding: 110px 0 100px;
        margin-top: -30px;
    }

    .quiz {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .quiz-info {
        padding: 40px 60px;
        gap: 30px;
        max-width: initial;
    }

    .quiz-info h2 {
        margin: 0;
    }

    .quiz-content {
        max-width: initial;
        padding: 0 60px 30px;
    }

    .quiz-content-title, .quiz-content-point {
        font-size: 36px;
    }

    .quiz-content-radio {
        margin-bottom: 115px;
    }

    .quiz-content-total-title {
        font-size: 30px;
    }

    .quiz-content-total p {
        margin-bottom: 30px;
    }

    .quiz-content-total {
        margin-bottom: 40px;
    }
}

@media (max-width: 850px) {
    .quiz-info h2 {
        font-size: 30px;
    }

    .quiz {
        gap: 30px;
    }

    .quiz-info {
        padding: 20px;
        border-radius: 15px;
    }

    .quiz-content {
        padding: 0 20px 20px;
    }
}

@media (max-width: 768px) {
    .quiz {
        border-radius: 15px;
    }

    .brand-diagnostic {
        padding: 90px 0;
    }

    .quiz-content-radio {
        margin-bottom: 80px;
    }

    .quiz-content-point {
        font-size: 30px;
    }

    .quiz-content-total-title {
        font-size: 20px;
    }

    .quiz-content-total p {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .quiz-content-total-list li {
        padding: 20px 10px;
        border-radius: 15px;
    }

    .quiz-content-total {
        margin-bottom: 30px;
    }

    .quiz-content-total-header {
        font-size: 20px;
    }

    .quiz-content-total-list-point {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .quiz-buttons {
        flex-direction: column;
        gap: 30px;
    }

    .quiz-buttons > * {
        width: 100%;
    }
}

@media (max-width: 410px) {
    .quiz-content-total-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.feedback {
    display: flex;
    gap: 32px;
}

.feedback-form {
    padding: 46px;
    border-radius: 30px;
    background: #FFF;
}

.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #143852;
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.is-error {
    background: #c0392b;
}

.feedback-form-title {
    color: var(--dark-blue);
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 40px;
}

.feedback-form input, .feedback-form textarea {
    appearance: none;
    outline: none;
    border: 2px solid #F8F8F8;
    border-radius: 20px;
    background: #F8F8F8;
    padding: 18px 26px;
    color: #000;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: all .2s;
    width: 100%;
    margin-bottom: 20px;
}

.feedback-form input.error, .feedback-form textarea.error {
    border: 2px solid #e05252;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e05252;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: -14px;
    margin-bottom: 12px;
}

.field-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e05252;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.feedback-form input::placeholder, .feedback-form textarea::placeholder {
    color: #919191;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.feedback-form input:focus, .feedback-form textarea:focus {
    border: 2px solid var(--pink);
}

.feedback-form textarea {
    height: 127px;
    resize: none;
}

.feedback-form-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feedback-form-item p {
    color: #868686;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}

.feedback-form-item p b {
    display: block;
    color: var(--gray);
    font-weight: 500;
}

.feedback-form-btn {
    margin: 40px auto 0;
}

.feedback-telegram {
    position: relative;
    border-radius: 30px;
    background: url(../images/fedback-telegram-bg.webp) no-repeat center;
    background-size: cover;
    padding: 77px 56px 46px;
    overflow: hidden;
    max-width: 804px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.feedback-telegram::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background: rgba(0, 22, 102, 0.70);
    backdrop-filter: blur(3.5px);
    pointer-events: none;
}

.feedback-telegram h2 {
    color: #FFF;
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.feedback-telegram h2 b {
    color: var(--pink);
}

.feedback-telegram p {
    color: #fff;
    margin-bottom: 20px;
}

.feedback-telegram-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    border-radius: 35px;
    background: var(--blue-gray);
    min-width: 220px;
    padding: 0 24px;
    height: 54px;
    justify-content: center;
    white-space: nowrap;
    color: #4A4A4A;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
    margin-top: auto;
    transition: all .2s;
    z-index: 1;
    overflow: hidden;
}

.feedback-telegram-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    /* коло: квадрат зі стороною 120% ширини кнопки (padding-% рахується від ширини),
       border-radius 50% робить його круглим, overflow:hidden обріже зайве */
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    background: #fff;
    border-radius: 50%;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
    z-index: -1;
}

.feedback-telegram-btn:hover::after, .feedback-telegram-btn:focus::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

@media (max-width: 1515px) {
    .feedback-telegram h2 {
        font-size: 42px;
    }
}

@media (max-width: 1240px) {
    .feedback-telegram h2 {
        font-size: 36px;
    }

    .feedback-telegram {
        max-width: 440px;
    }
}

@media (max-width: 1024px) {
    .feedback {
        flex-direction: column-reverse;
    }

    .feedback-telegram {
        max-width: initial;
        padding: 77px 60px 58px;
    }

    .feedback-telegram h2 {
        margin-bottom: 30px;
    }

    .feedback-telegram .feedback-telegram-btn {
        margin-top: 131px;
    }
}

@media (max-width: 860px) {
    .feedback-telegram h2 {
        font-size: 30px;
    }

    .feedback {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .feedback-telegram {
        padding: 40px 20px;
        text-align: center;
        border-radius: 15px;
    }

    .feedback-telegram .feedback-telegram-btn {
        margin: 54px auto 0;
    }

    .feedback-form {
        border-radius: 15px;
        padding: 46px 20px;
    }

    .feedback-form-btn {
        margin: 48px auto 0;
    }
}

.consultation {
    position: relative;
    padding: 140px 0;
    margin-top: -78px;
    margin-bottom: -61px;
    background: #fff;
    border-radius: 60px;
    z-index: 2;
    overflow: hidden;
}

.consultation .container {
    display: flex;
    align-items: center;
    gap: 49px;
}

.consultation-content {
    max-width: 678px;
}

.consultation-content h2 {
    color: var(--dark-blue);
    font-family: "Oswald", sans-serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.consultation-content h2 b {
    color: var(--pink);
}

.consultation-content p {
    max-width: 571px;
    color: var(--gray);
    margin-bottom: 20px;
}

.consultation-content .btn {
    margin-top: 30px;
    max-width: fit-content;
}

.consultation-content-footer {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 43px;
}

.consultation-content-footer p {
    font-style: italic;
    color: var(--gray);
    max-width: 371px;
    margin: 0;
}

.consultation-content-footer a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4A4A4A;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: all .2s;
}

.consultation-content-footer a svg {
    width: 22px;
    min-width: 22px;
    height: 26px;
}

.consultation-images {
    display: flex;
    max-width: 815px;
}

.consultation-content-footer a:hover, .consultation-content-footer a:focus {
    color: var(--pink);
}

.consultation-image-left, .consultation-image-right {
    width: 315px;
    height: 624px;
    border-radius: 30px;
    display: block;
    position: relative;
    object-fit: cover;
    z-index: 1;
}

.consultation-image-center {
    position: relative;
    border: 24px solid #FFF;
    width: 315px;
    height: 624px;
    border-radius: 30px;
    object-fit: cover;
    z-index: 2;
}

.consultation-image-left, .consultation-image-right {
    transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Стартовий стан: бічні зображення сховані рівно за центральним
   (translateX 100% = ширина одного зображення, тобто позиція центру) */
.consultation-image-left {
    transform: translateX(100%) scale(0.95);
}

.consultation-image-right {
    transform: translateX(-100%) scale(0.95);
}

/* Кінцевий стан — JS додає .is-visible на .consultation-images */
.consultation-images.is-visible .consultation-image-left {
    transform: translate(85px, -36px) scale(1);
}

.consultation-images.is-visible .consultation-image-right {
    transform: translate(-85px, 36px) scale(1);
}

@media (max-width: 1515px) {
    .consultation-content h2 {
        font-size: 42px;
    }
}

@media (max-width: 1385px) {
    .consultation-images {
        max-width: 705px;
    }
    
    .consultation-content h2 {
        font-size: 36px;
    }

    .consultation-image-center, .consultation-image-left, .consultation-image-right {
        width: 272px;
        height: 539px;
    }
}

@media (max-width: 1240px) {
    .consultation .container {
        flex-direction: column-reverse;
    }

    .consultation-images {
        max-width: initial;
    }

    .consultation-image-left, .consultation-image-right {
        border-radius: 15px;
    }

    .consultation-images.is-visible .consultation-image-left {
        transform: translate(60px, -28px) scale(1);
    }

    .consultation-images.is-visible .consultation-image-right {
        transform: translate(-60px, -28px) scale(1);
    }

    .consultation-content {
        max-width: 884px;
    }

    .consultation-content p {
        max-width: initial;
    }

    .consultation-content-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 52px;
    }

    .consultation-content-buttons > *, .consultation-content .btn {
        margin: 0;
    }

    .consultation-content .btn {
        text-wrap: nowrap;
        min-width: 260px;
    }
}

@media (max-width: 1024px) {
    .consultation {
        padding: 77px 0 70px;
        border-radius: 30px;
        margin-top: -30px;
    }

    .consultation-content p {
        font-size: 16px;
    }

    .consultation-content-footer {
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .consultation {
        padding: 38px 0 40px;
    }

    .consultation-image-center {
        border: 12px solid #FFF;
    }

    .consultation-image-center, .consultation-image-left, .consultation-image-right {
        width: 161px;
        height: 319px;
    }

    .consultation-images.is-visible .consultation-image-left {
        transform: translate(32px, -19px) scale(1);
    }

    .consultation-images.is-visible .consultation-image-right {
        transform: translate(-32px, -19px) scale(1);
    }

    .consultation-content h2 {
        font-size: 30px;
    }
    
    .consultation-content {
        text-align: center;
    }

    .consultation-content-buttons {
        flex-direction: column;
        margin-top: 45px;
        gap: 30px;
    }

    .consultation-content-footer {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 420px) {
    .consultation-image-center, .consultation-image-left, .consultation-image-right {
        width: 114px;
        height: 226px;
    }
}

.footer {
    padding: 114px 0 20px;
    background: var(--dark-blue);
}

.footer-logo {
    text-decoration: none;
    display: block;
    margin: 0 auto 29px;
    width: fit-content;
}

.footer-logo img {
    width: 216px;
    height: 112px;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.footer-socials a {
    text-decoration: none;
    transition: all .2s;
}

.footer-socials a:hover, .footer-socials a:focus {
    transform: scale(1.12);
}

.footer span {
    color: #6A759E;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: block;
    margin-top: 41px;
}

@media (max-width: 1024px) {
    .footer{
        margin-top: -30px;
    }
}