/* =========================================================
   BUHSERVICE KRG
   Базовая дизайн-система сайта
   ========================================================= */


/* =========================================================
   1. ПЕРЕМЕННЫЕ
   ========================================================= */

:root {
    --color-primary: #1769e0;
    --color-primary-dark: #0d4fae;
    --color-primary-light: #eaf3ff;

    --color-accent: #19a974;

    --color-dark: #142033;
    --color-heading: #172235;
    --color-text: #526174;
    --color-muted: #7b8798;

    --color-background: #ffffff;
    --color-background-soft: #f6f8fb;
    --color-border: #e4e9f0;

    --color-footer: #111c2e;
    --color-footer-text: #aeb9c8;

    --container-width: 1240px;

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 24px;

    --shadow-small:
        0 4px 16px rgba(24, 39, 75, 0.06);

    --shadow-medium:
        0 14px 40px rgba(24, 39, 75, 0.10);

    --transition:
        0.2s ease;
}


/* =========================================================
   2. СБРОС И БАЗА
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--color-text);
    background: var(--color-background);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

button {
    border: 0;
}


/* =========================================================
   3. ОБЩИЙ КОНТЕЙНЕР
   ========================================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* =========================================================
   4. КНОПКИ
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border: 1px solid transparent;
    border-radius: var(--radius-small);

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    color: #ffffff;
    background: var(--color-primary);

    box-shadow:
        0 8px 20px rgba(23, 105, 224, 0.20);
}

.button--primary:hover {
    background: var(--color-primary-dark);

    box-shadow:
        0 10px 24px rgba(23, 105, 224, 0.27);
}

.button--secondary {
    color: var(--color-heading);
    background: #ffffff;
    border-color: var(--color-border);
}

.button--secondary:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}


/* =========================================================
   5. ВЕРХНЯЯ СТРОКА ШАПКИ
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    background: #ffffff;
}

.header-top {
    color: #667487;
    background: var(--color-background-soft);

    border-bottom: 1px solid var(--color-border);

    font-size: 13px;
}

.header-top__inner {
    min-height: 38px;

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

    gap: 20px;
}

.header-location {
    display: flex;
    align-items: center;

    gap: 8px;
}

.header-location__icon {
    color: var(--color-accent);

    font-size: 10px;
}

.header-top__links {
    display: flex;
    align-items: center;

    gap: 24px;
}

.header-top__links a {
    transition: color var(--transition);
}

.header-top__links a:hover {
    color: var(--color-primary);
}


/* =========================================================
   6. ОСНОВНАЯ ШАПКА
   ========================================================= */

.header-main {
    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--color-border);
}

.header-main__inner {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 32px;
}


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

.site-logo {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 12px;
}

.site-logo__mark,
.footer-logo__mark {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #55a0ff
        );

    border-radius: 12px;

    font-size: 23px;
    font-weight: 800;

    box-shadow:
        0 7px 18px rgba(23, 105, 224, 0.20);
}

.site-logo__text,
.footer-logo__text {
    display: flex;
    flex-direction: column;

    line-height: 1.2;
}

.site-logo__text strong {
    color: var(--color-heading);

    font-size: 18px;
    letter-spacing: -0.3px;
}

.site-logo__text small {
    margin-top: 4px;

    color: var(--color-muted);

    font-size: 11px;
}


/* =========================================================
   8. ОСНОВНОЕ МЕНЮ
   ========================================================= */

.main-navigation {
    margin-left: auto;
}

.main-navigation__list {
    display: flex;
    align-items: center;

    gap: 5px;
}

.main-navigation__link {
    position: relative;

    display: block;

    padding: 12px 10px;

    color: #435166;

    font-size: 14px;
    font-weight: 600;

    transition: color var(--transition);
}

.main-navigation__link:hover,
.main-navigation__link.is-active {
    color: var(--color-primary);
}

.main-navigation__link::after {
    content: "";

    position: absolute;
    right: 10px;
    bottom: 5px;
    left: 10px;

    height: 2px;

    background: var(--color-primary);

    border-radius: 10px;

    transform: scaleX(0);

    transition: transform var(--transition);
}

.main-navigation__link:hover::after,
.main-navigation__link.is-active::after {
    transform: scaleX(1);
}


/* =========================================================
   9. ДЕЙСТВИЯ В ШАПКЕ
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}

.header-account {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #435166;

    font-size: 14px;
    font-weight: 600;

    transition: color var(--transition);
}

.header-account:hover {
    color: var(--color-primary);
}

.header-account__icon {
    font-size: 17px;
}

.header-consultation {
    min-height: 44px;

    padding-inline: 17px;

    font-size: 13px;
}


/* =========================================================
   10. МОБИЛЬНАЯ КНОПКА
   ========================================================= */

.mobile-menu-button {
    width: 44px;
    height: 44px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    background: transparent;

    border: 1px solid var(--color-border);
    border-radius: 9px;

    cursor: pointer;
}

.mobile-menu-button span {
    width: 20px;
    height: 2px;

    display: block;

    background: var(--color-heading);

    border-radius: 5px;
}

.mobile-navigation {
    background: #ffffff;

    border-bottom: 1px solid var(--color-border);

    box-shadow: var(--shadow-small);
}

.mobile-navigation__list {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;

    padding: 12px 0 20px;
}

.mobile-navigation__list a {
    display: block;

    padding: 12px 4px;

    color: #435166;

    font-weight: 600;
}

.mobile-navigation__list a.is-active {
    color: var(--color-primary);
}

.mobile-navigation__separator {
    height: 1px;

    margin: 8px 0;

    background: var(--color-border);
}


/* =========================================================
   11. ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */

.site-main {
    min-height: 500px;
}


/* =========================================================
   12. HERO — ПЕРВЫЙ ЭКРАН
   ========================================================= */

.hero {
    position: relative;

    overflow: hidden;

    padding: 100px 0 110px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(23, 105, 224, 0.10),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -130px;

    background:
        rgba(23, 105, 224, 0.06);

    border-radius: 50%;
}

.hero__inner {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, 0.55fr);

    align-items: center;

    gap: 80px;
}

.hero__content {
    max-width: 760px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 20px;

    padding: 7px 12px;

    color: var(--color-primary);

    background: var(--color-primary-light);

    border-radius: 999px;

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

.hero__title {
    margin-bottom: 24px;

    color: var(--color-heading);

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;

    letter-spacing: -2.4px;
}

.hero__title span {
    display: block;

    margin-top: 8px;

    color: var(--color-primary);
}

.hero__description {
    max-width: 690px;

    margin-bottom: 34px;

    color: #5c697b;

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

.hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


/* =========================================================
   13. HERO — ИНФОРМАЦИОННАЯ КАРТОЧКА
   ========================================================= */

.hero__info {
    position: relative;

    padding: 38px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #17283f,
            #102039
        );

    border-radius: var(--radius-large);

    box-shadow:
        0 25px 60px rgba(16, 32, 57, 0.22);
}

.hero__info::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -18px;
    right: -18px;

    background:
        rgba(255, 255, 255, 0.05);

    border-radius: 50%;
}

.hero__info-label {
    margin-bottom: 14px;

    color: #82b7ff;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero__info strong {
    display: block;

    margin-bottom: 14px;

    font-size: 27px;
    line-height: 1.25;
}

.hero__info p:last-child {
    margin-bottom: 0;

    color: #c5cfdd;

    font-size: 15px;
}


/* =========================================================
   14. FOOTER
   ========================================================= */

.site-footer {
    color: var(--color-footer-text);

    background: var(--color-footer);
}

.site-footer__main {
    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        0.8fr
        1fr;

    gap: 60px;

    padding-top: 70px;
    padding-bottom: 65px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}

.footer-logo__text strong {
    color: #ffffff;

    font-size: 18px;
}

.footer-logo__text small {
    margin-top: 4px;

    color: #8796aa;

    font-size: 11px;
}

.footer-company__description {
    max-width: 300px;

    margin-bottom: 0;

    color: #9ba9ba;

    font-size: 14px;
}

.footer-title {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 15px;
}

.footer-list {
    display: grid;

    gap: 10px;
}

.footer-list a {
    color: #9ba9ba;

    font-size: 14px;

    transition: color var(--transition);
}

.footer-list a:hover {
    color: #ffffff;
}

.footer-contact {
    display: flex;
    flex-direction: column;

    margin-bottom: 13px;

    font-size: 14px;
}

.footer-contact__label {
    margin-bottom: 2px;

    color: #75869c;

    font-size: 12px;
}

.button--footer {
    margin-top: 12px;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.13);
}

.button--footer:hover {
    background: rgba(255, 255, 255, 0.14);
}


/* =========================================================
   15. НИЖНЯЯ ЧАСТЬ FOOTER
   ========================================================= */

.site-footer__bottom {
    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom-inner {
    min-height: 76px;

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

    gap: 30px;
}

.site-footer__bottom p {
    margin: 0;

    color: #77879b;

    font-size: 12px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 20px;
}

.footer-legal a {
    color: #77879b;

    font-size: 12px;

    transition: color var(--transition);
}

.footer-legal a:hover {
    color: #ffffff;
}


/* =========================================================
   16. ПЛАНШЕТ
   ========================================================= */

@media (max-width: 1100px) {

    .main-navigation {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .mobile-menu-button {
        display: flex;
    }

    .hero__inner {
        grid-template-columns: 1fr 360px;

        gap: 45px;
    }

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

        gap: 45px;
    }
}


/* =========================================================
   17. НЕБОЛЬШИЕ ПЛАНШЕТЫ
   ========================================================= */

@media (max-width: 850px) {

    .header-top__links {
        display: none;
    }

    .header-consultation {
        display: none;
    }

    .hero {
        padding: 75px 0;
    }

    .hero__inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .hero__content {
        max-width: 720px;
    }

    .hero__info {
        max-width: 600px;
    }
}


/* =========================================================
   18. ТЕЛЕФОН
   ========================================================= */

@media (max-width: 600px) {

    .container {
        width: min(
            calc(100% - 28px),
            var(--container-width)
        );
    }

    .header-top__inner {
        min-height: 34px;
    }

    .header-location {
        font-size: 11px;
    }

    .header-main__inner {
        min-height: 70px;

        gap: 10px;
    }

    .site-logo__mark {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 20px;
    }

    .site-logo__text strong {
        font-size: 15px;
    }

    .site-logo__text small {
        display: none;
    }

    .header-account {
        width: 42px;
        height: 42px;

        justify-content: center;

        border: 1px solid var(--color-border);
        border-radius: 9px;
    }

    .header-account span:last-child {
        display: none;
    }

    .hero {
        padding: 55px 0 65px;
    }

    .hero__eyebrow {
        margin-bottom: 16px;

        font-size: 11px;
    }

    .hero__title {
        margin-bottom: 20px;

        font-size: clamp(27px, 7.5vw, 38px);

        letter-spacing: -1.6px;
    }

    .hero__description {
        margin-bottom: 28px;

        font-size: 16px;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero__info {
        padding: 28px;

        border-radius: 18px;
    }

    .hero__info strong {
        font-size: 23px;
    }

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

        gap: 38px;

        padding-top: 50px;
        padding-bottom: 45px;
    }

    .site-footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;

        padding-top: 24px;
        padding-bottom: 24px;
    }

    .footer-legal {
        justify-content: flex-start;

        gap: 12px 18px;
    }
}