.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button--compact { min-height: 46px; padding-inline: 18px; font-size: 13px; }
.button--primary { color: var(--white); background: var(--brand); }
.button--primary:hover { background: var(--brand-deep); }
.button--light { color: var(--brand); background: var(--white); }
.button--ghost-light { color: var(--white); border: 1px solid rgba(255,255,255,.35); background: transparent; }
.button--secondary { color: var(--brand); border: 1px solid var(--border); background: var(--white); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand__mark { width: 37px; height: 37px; object-fit: contain; }
.brand__copy { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 22px; font-weight: 700; letter-spacing: .015em; }
.brand__tagline { margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }

.site-header { position: relative; z-index: 20; color: var(--white); }
.site-header__inner { min-height: 84px; display: flex; align-items: center; gap: 34px; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 32px); margin-left: auto; }
.site-nav a { color: rgba(255,255,255,.84); text-decoration: none; font-size: 13px; font-weight: 600; }
.site-nav a:hover { color: var(--white); }
.site-header__actions { display: flex; align-items: center; gap: 18px; }
.header-phone { color: var(--white); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.menu-toggle { display: none; width: 44px; height: 44px; margin-left: auto; border-radius: 10px; background: rgba(255,255,255,.10); cursor: pointer; }
.menu-toggle span { display: block; width: 21px; height: 2px; margin: 4px auto; background: var(--white); }
.mobile-menu { position: absolute; left: 0; right: 0; top: 72px; padding: 18px 4vw 30px; background: var(--brand-deep); box-shadow: 0 25px 40px rgba(0,0,40,.28); }
.mobile-menu__nav { display: grid; gap: 18px; }
.mobile-menu__nav > a:not(.button) { color: var(--white); text-decoration: none; font-weight: 600; }
.mobile-menu__phone { margin-top: 6px; }

/* =========================================================
   FOOTER
   Компоновка соответствует утверждённому макету:
   логотип + три навигационные колонки + контакты.
   ========================================================= */

.site-footer {
    padding:
        30px
        0
        0;

    color:
        rgba(255, 255, 255, .72);

    background:
        #07145f;

    border-top:
        1px solid
        rgba(255, 255, 255, .35);
}


/*
 * В макете содержимое футера немного уже,
 * чем основная рабочая область страницы.
 */

.site-footer > .shell {
    width:
        min(88%, 1800px);
}


/* =========================================================
   ОСНОВНАЯ СЕТКА
   ========================================================= */

.site-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(250px, 1.35fr)
        minmax(150px, .78fr)
        minmax(150px, .78fr)
        minmax(150px, .78fr)
        minmax(250px, 1.15fr);

    gap:
        clamp(28px, 3.2vw, 64px);

    align-items: start;
}


/* =========================================================
   ЛОГОТИП
   ========================================================= */

.site-footer .brand--footer {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin: 0;

    color: #ffffff;

    text-decoration: none;
}


.site-footer .brand--footer .brand__mark {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;
}


.site-footer .brand--footer .brand__name {
    color: #ffffff;

    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}


.site-footer .brand--footer .brand__tagline {
    margin-top: 5px;

    color:
        rgba(255, 255, 255, .72);

    font-size: 7.5px;
    font-weight: 500;

    letter-spacing: .14em;
    text-transform: uppercase;
}


/* Описание компании */

.site-footer__description {
    max-width: 285px;

    margin:
        16px
        0
        0;

    color:
        rgba(255, 255, 255, .72);

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   СОЦИАЛЬНЫЕ СЕТИ
   ========================================================= */

.site-footer__socials {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 10px;
}


.site-footer__social {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    margin: 0;

    color: #ffffff;

    text-decoration: none;

    opacity: .92;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.site-footer__social:hover {
    opacity: 1;

    transform:
        translateY(-1px);
}


.site-footer__social svg {
    width: 22px;
    height: 22px;

    fill: currentColor;
}


.site-footer__vk {
    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.08em;
}


/* =========================================================
   НАВИГАЦИОННЫЕ КОЛОНКИ
   ========================================================= */

.site-footer__column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.site-footer h3 {
    margin:
        0
        0
        12px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0;
}


.site-footer__column a {
    display: block;

    margin: 0;

    padding:
        3px
        0;

    color:
        rgba(255, 255, 255, .72);

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;

    text-decoration: none;

    transition:
        color .2s ease;
}


.site-footer__column a:hover {
    color: #ffffff;
}


/* =========================================================
   КОНТАКТЫ
   ========================================================= */

.site-footer__contacts {
    min-width: 0;
}


.site-footer__contact {
    display: grid;

    grid-template-columns:
        27px
        minmax(0, 1fr);

    gap: 10px;

    align-items: start;

    margin:
        0
        0
        10px;

    color: #ffffff;

    text-decoration: none;
}


.site-footer__contact > svg {
    width: 22px;
    height: 22px;

    margin-top: 1px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.site-footer__contact-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.site-footer__contact-copy strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    white-space: nowrap;
}


.site-footer__contact-copy small {
    color:
        rgba(255, 255, 255, .58);

    font-size: 9px;
    line-height: 1.3;

    white-space: nowrap;
}


/* =========================================================
   КНОПКА СВЯЗИ
   ========================================================= */

.site-footer__cta-row {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 8px;
}


.site-footer__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    margin-left: -3px;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


.site-footer__cta-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-footer__cta-icon-image {
    display: block;

    width: 22px;
    height: 22px;

    object-fit: contain;

    opacity: .82;
}


.site-footer__button {
    min-height: 38px;

    display: inline-flex;

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

    margin: 0;

    padding:
        8px
        18px;

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, .38);

    border-radius: 5px;

    background:
        transparent;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}


.site-footer__button:hover {
    color: #07145f;

    border-color: #ffffff;

    background: #ffffff;
}


/* =========================================================
   НИЖНЯЯ СТРОКА
   ========================================================= */

.site-footer__bottom {
    display: flex;

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

    gap: 30px;

    margin-top: 24px;

    padding:
        13px
        0
        15px;

    border-top:
        1px solid
        rgba(255, 255, 255, .13);

    color:
        rgba(255, 255, 255, .55);

    font-size: 10px;
    line-height: 1.4;
}


.site-footer__legal {
    display: flex;

    align-items: center;

    gap:
        clamp(26px, 3vw, 52px);
}


.site-footer__legal a {
    margin: 0;

    color:
        rgba(255, 255, 255, .55);

    font-size: 10px;

    text-decoration: none;

    transition:
        color .2s ease;
}


.site-footer__legal a:hover {
    color: #ffffff;
}


/* =========================================================
   FOOTER — ПЛАНШЕТЫ
   ========================================================= */

@media (max-width: 1180px) {

    .site-footer {
        padding-top: 38px;
    }

    .site-footer > .shell {
        width:
            min(92%, 1000px);
    }

    .site-footer__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            36px
            60px;
    }

    .site-footer__brand-column {
        grid-column:
            1 / -1;
    }

    .site-footer__description {
        max-width: 360px;
    }
}


/* =========================================================
   FOOTER — ТЕЛЕФОНЫ
   ========================================================= */

@media (max-width: 620px) {

    .site-footer {
        padding-top: 34px;
    }

    .site-footer__grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }

    .site-footer__brand-column {
        grid-column: auto;
    }

    .site-footer__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        margin-top: 34px;

        padding-bottom: 20px;
    }

    .site-footer__legal {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }
}

@media (max-width: 1180px) {
    .site-nav, .site-header__actions { display: none; }
    .menu-toggle { display: block; }
}
@media (max-width: 760px) {
    .site-header__inner { min-height: 70px; }
    .brand__mark { width: 32px; height: 32px; }
    .brand__name { font-size: 19px; }

}
@media (max-width: 520px) {

}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ===== Header v5: proportions of accepted mockup ===== */
.site-header {
    color: var(--white);
    background: #07145f;
}

.site-header__inner {
    min-height: 82px;
    gap: 30px;
}

.site-header .brand {
    gap: 13px;
}

.site-header .brand__mark {
    width: 46px;
    height: 46px;
}

.site-header .brand__name {
    font-size: 27px;
    letter-spacing: .01em;
}

.site-header .brand__tagline {
    margin-top: 5px;
    font-size: 8.5px;
}

.site-nav {
    gap: clamp(18px, 1.9vw, 30px);
}

.site-nav a {
    font-size: 12px;
}

.site-header__actions {
    gap: 16px;
}

.header-contact-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--white);
}

.header-contact__icon {
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
}

.header-contact__icon-image {
    display: block;

    width: 22px;
    height: 22px;
}

.header-contact {
    display: grid;
    gap: 2px;
    text-align: left;
}

.header-phone {
    font-size: 13px;
    line-height: 1.1;
}

.header-contact__note {
    color: rgba(255,255,255,.66);
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
}

.button--header {
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 5px;
    color: var(--white);
    background: transparent;
}

.button--header:hover {
    color: var(--brand);
    background: var(--white);
    border-color: var(--white);
}

@media (max-width: 1180px) {
    .site-header__inner {
        min-height: 70px;
    }

    .site-header .brand__mark {
        width: 40px;
        height: 40px;
    }

    .site-header .brand__name {
        font-size: 23px;
    }
}

/* =========================================================
   CONTACT MODAL
   ========================================================= */

.contact-modal {
    width: min(92vw, 560px);
    max-height: min(88vh, 760px);

    padding: 0;

    border: 0;
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(7, 20, 95, .22);
}

.contact-modal::backdrop {
    background: rgba(4, 11, 55, .58);
    backdrop-filter: blur(3px);
}

.contact-modal__panel {
    position: relative;

    padding: 34px 36px 36px;

    overflow-y: auto;
}

.contact-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #07145f;
    background: #f4f5fb;

    font: inherit;
    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.contact-modal__header {
    padding-right: 42px;
    margin-bottom: 26px;
}

.contact-modal__eyebrow {
    margin: 0 0 8px;

    color: #000080;

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-modal__title {
    margin: 0;

    color: #07145f;

    font-size: clamp(1.65rem, 3vw, 2.15rem);
    line-height: 1.12;
}

.contact-modal__description {
    margin: 12px 0 0;

    color: #626b82;

    font-size: .95rem;
    line-height: 1.55;
}

.contact-modal__form {
    display: grid;
    gap: 17px;
}

.contact-modal__form[hidden],
.contact-modal__success[hidden] {
    display: none !important;
}

.contact-modal__field {
    display: grid;
    gap: 7px;

    color: #07145f;

    font-size: .82rem;
    font-weight: 600;
}

.contact-modal__field input,
.contact-modal__field textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid rgba(7, 20, 95, .16);
    border-radius: 11px;

    color: #171b2d;
    background: #ffffff;

    font: inherit;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.contact-modal__field textarea {
    min-height: 100px;
    resize: vertical;
}

.contact-modal__field input:focus,
.contact-modal__field textarea:focus {
    border-color: rgba(0, 0, 128, .55);

    box-shadow:
        0 0 0 3px rgba(0, 0, 128, .07);
}

.contact-modal__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;

    color: #626b82;

    font-size: .75rem;
    line-height: 1.45;
}

.contact-modal__consent input {
    margin-top: 2px;
}

.contact-modal__submit {
    width: 100%;
    margin-top: 2px;
}


@media (max-width: 600px) {

    .contact-modal {
        width: calc(100vw - 24px);

        border-radius: 19px;
    }

    .contact-modal__panel {
        padding: 28px 22px 24px;
    }

}

.contact-modal__error {
    margin: 0;

    color: #b42318;

    font-size: .8rem;
    font-weight: 600;
    line-height: 1.45;
}

.contact-modal__submit:disabled {
    cursor: wait;
    opacity: .65;
}

.contact-modal__success {
    padding: 34px 0 10px;

    text-align: center;
}

.contact-modal__success-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 0 auto 18px;

    border-radius: 50%;

    color: #000080;
    background: #f4f5fb;

    font-size: 28px;
    font-weight: 700;
}

.contact-modal__success h3 {
    margin: 0;

    color: #07145f;

    font-size: 1.6rem;
    line-height: 1.2;
}

.contact-modal__success p {
    margin: 12px auto 0;

    max-width: 390px;

    color: #626b82;

    font-size: .92rem;
    line-height: 1.55;
}

.contact-modal__success-number {
    margin-top: 20px !important;
}

.contact-modal__success-number strong {
    color: #07145f;
}

.contact-modal__success .button {
    margin-top: 26px;
}

.contact-modal__honeypot {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    left: -10000px;
    top: auto;

    opacity: 0;
    pointer-events: none;
}

/* =========================================================
   LEGAL PAGES
   Политика обработки персональных данных
   и согласие на обработку персональных данных
   ========================================================= */

.page-legal main .section {
    padding:
        clamp(48px, 4vw, 72px)
        0
        clamp(64px, 5vw, 90px);
}


.page-legal main .shell {
    width: calc(100% - 48px);
    max-width: 980px;
}


/* Хлебные крошки */

.page-legal main nav[aria-label="Хлебные крошки"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 18px;

    color: #747b8d;

    font-size: 13px;
    line-height: 1.5;
}


.page-legal main nav[aria-label="Хлебные крошки"] a {
    color: #5d6475;

    text-decoration:
        underline;

    text-underline-offset: 3px;
}


/* Метка раздела */

.page-legal main .eyebrow {
    margin-bottom: 14px;
}


/* Главный заголовок */

.page-legal main h1 {
    max-width: 820px;

    margin:
        0
        0
        20px;

    color: #11162a;

    font-size:
        clamp(1.9rem, 2.4vw, 2.7rem);

    line-height: 1.12;

    letter-spacing: -.03em;
}


/* Заголовки разделов */

.page-legal main h2 {
    margin:
        34px
        0
        12px;

    color: #11162a;

    font-size:
        clamp(1.25rem, 1.35vw, 1.55rem);

    line-height: 1.3;

    letter-spacing: -.018em;
}


/* Основной текст */

.page-legal main p,
.page-legal main li {
    color: #5b6273;

    font-size: 15px;
    line-height: 1.7;
}


.page-legal main p {
    margin:
        0
        0
        12px;
}


/* Списки */

.page-legal main ul {
    margin:
        10px
        0
        18px;

    padding-left: 24px;
}


.page-legal main li + li {
    margin-top: 5px;
}


/* Ссылки в документе */

.page-legal main a {
    color: #000080;
}


/* =========================================================
   LEGAL PAGES — MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .page-legal main .section {
        padding:
            34px
            0
            54px;
    }


    .page-legal main .shell {
       width: calc(100% - 32px);
       max-width: 980px;
    }


    .page-legal main h1 {
        font-size:
            clamp(1.75rem, 8vw, 2.25rem);
    }


    .page-legal main h2 {
        margin-top: 28px;

        font-size:
            1.25rem;
    }


    .page-legal main p,
    .page-legal main li {
        font-size: 14px;
        line-height: 1.65;
    }
}