:root {
  --bg: #f6f3ec;
  --text: #0e0e0e;
  --accent: #f49f09;
  --muted: #6e6b63;
  --watermark: #ada89c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ==================================================
   HERO — ТОЧНО ПОД ТЕКУЩИЙ HTML
   Основа макета Figma: 1440 × 810
   ================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto+Condensed:wght@700;900&family=Rubik+One&display=swap");

.hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 720px;
    margin: 0;
    overflow: hidden;
    background: #f6f3ec;
    color: #0e0e0e;
}


/* ---------- ФОНОВАЯ НАДПИСЬ ---------- */

.hero__watermark {
    position: absolute;
    left: 16.8vw;
    top: 9.1vh;
    width: 66.3vw;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 11.875vw;
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.025em;
    white-space: nowrap;
    color: #ada89c;
    opacity: 0.22;
    z-index: 1;
}


/* ---------- ВЕРХ ---------- */

.hero__header {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.hero__delivery {
    position: absolute;
    left: 1.45vw;
    top: 2.2vh;
    width: 10vw;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 0.83vw;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

    .hero__delivery::after {
        content: "";
        display: block;
        width: 3vw;
        height: 1px;
        margin-top: 0.7vh;
        background: rgba(14, 14, 14, 0.85);
    }

.hero__logo {
    position: absolute;
    left: 9.93vw;
    top: 0.62vh;
    width: 5.07vw;
    height: auto;
    z-index: 15;
}

.hero__nav {
    position: absolute;
    left: 70.35vw;
    top: 3.45vh;
    display: flex;
    align-items: center;
    gap: 2.35vw;
    font-family: "Inter", sans-serif;
    font-size: 0.83vw;
    font-weight: 600;
    z-index: 20;
    pointer-events: auto;
}

    .hero__nav a {
        color: #0e0e0e;
        text-decoration: none;
        white-space: nowrap;
    }

        .hero__nav a:last-child {
            display: flex;
            align-items: center;
            gap: 1.25vw;
            margin-left: 0.65vw;
            padding: 1.75vh 1.5vw;
            border: 1px solid #0e0e0e;
        }

            .hero__nav a:last-child span:last-child {
                font-size: 1.25vw;
            }


/* ---------- МЕТКА СПРАВА ---------- */

.hero__region {
    position: absolute;
    left: 87.08vw;
    top: 16.3vh;
    width: 7.3vw;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 0.83vw;
    font-weight: 700;
    line-height: 1.25;
    z-index: 8;
}

    .hero__region::after {
        content: "";
        display: block;
        width: 3.9vw;
        height: 1px;
        margin-top: 0.7vh;
        background: rgba(14, 14, 14, 0.85);
    }


/* ==================================================
   ЗАГОЛОВКИ
   ================================================== */

.hero__title {
    position: absolute;
    margin: 0;
    font-family: "Rubik One", sans-serif;
    font-weight: 400;
    letter-spacing: -0.04em;
    z-index: 3;
}

.hero__title--left {
    left: 0.9vw;
    top: 31.85vh;
    width: 47.1vw;
    font-size: 8.89vw;
    line-height: 1.08;
    color: #0e0e0e;
}

.hero__title--right {
    left: 66.18vw;
    top: 45.3vh;
    width: 33.5vw;
    font-size: 6.67vw;
    line-height: 0.98;
    color: #f49f09;
    z-index: 2;
}


/* ==================================================
   ЩИТ
   ================================================== */

.hero__panel {
    position: absolute;
    left: 38.2vw;
    top: 24.57vh;
    width: 37.7vw;
    height: 62.6vh;
    object-fit: contain;
    z-index: 5;
}


/* ==================================================
   ТЕКСТ СЛЕВА
   ================================================== */

.hero__copy {
    position: absolute;
    left: 5vw;
    top: 57.4vh;
    width: 33vw;
    z-index: 7;
}

    .hero__copy h3 {
        margin: 0 0 1.5vh;
        font-family: "Roboto Condensed", sans-serif;
        font-size: 2.02vw;
        font-weight: 700;
        line-height: 1.1;
    }

    .hero__copy p {
        margin: 0;
        max-width: 33vw;
        font-family: "Inter", sans-serif;
        font-size: 1.04vw;
        line-height: 1.4;
    }


/* ---------- Основная кнопка ---------- */

.hero__primary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 21.25vw;
    margin-top: 1.2vh;
    padding: 1.8vh 1.55vw;
    background: #f49f09;
    color: #0e0e0e;
    font-family: "Inter", sans-serif;
    font-size: 0.97vw;
    font-weight: 600;
    text-decoration: none;
}

    .hero__primary span:last-child {
        margin-left: 2.5vw;
        font-size: 1.2vw;
    }


/* ==================================================
   ТЕКСТ СПРАВА
   ================================================== */

.hero__side-copy {
    position: absolute;
    left: 77.92vw;
    top: 73.33vh;
    width: 21.5vw;
    z-index: 7;
}

    .hero__side-copy h3 {
        margin: 0 0 1vh;
        font-family: "Roboto Condensed", sans-serif;
        font-size: 2.22vw;
        font-weight: 700;
        line-height: 0.95;
    }

    .hero__side-copy p {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 0.97vw;
        line-height: 1.42;
        color: #6e6b63;
    }


/* ==================================================
   НИЖНИЕ ПРЕИМУЩЕСТВА
   ================================================== */

.hero__benefits {
    position: absolute;
    left: 2.08vw;
    right: 2.08vw;
    top: 89.63vh;
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    column-gap: 5vw;
    padding: 2.45vh 2.8vw 0;
    border-top: 1px solid rgba(14, 14, 14, 0.45);
    z-index: 8;
}

.benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.97vw;
}

.benefit__icon {
    flex: 0 0 auto;
    width: 1.95vw;
    height: 1.95vw;
    border: 1px solid #0e0e0e;
}

.benefit h4 {
    margin: 0 0 0.45vh;
    font-family: "Inter", sans-serif;
    font-size: 0.83vw;
    font-weight: 600;
    line-height: 1.2;
}

.benefit p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 0.76vw;
    line-height: 1.2;
    color: #6e6b63;
}


/* ---------- Стрелка вниз ---------- */

.hero__scroll {
    position: absolute;
    right: 3.2vw;
    bottom: 2.8vh;
    width: 1.8vw;
    height: 1.8vw;
    z-index: 20;
    text-decoration: none;
}

    .hero__scroll::before {
        content: "↓";
        display: block;
        color: #0e0e0e;
        font-size: 2vw;
        line-height: 1;
    }


/* ==================================================
   Небольшая страховка для низких экранов
   ================================================== */

@media (max-aspect-ratio: 4 / 3) {

    .hero {
        min-height: 810px;
        height: 810px;
    }
}
/* =========================================
   ТОЧЕЧНЫЕ ПРАВКИ HERO
   ========================================= */

/* 1) ЩИТ ДОЛЖЕН БЫТЬ ПОЗАДИ ТЕКСТА */
.hero__panel {
    z-index: 2 !important;
    left: 41vw !important;
    top: 28vh !important;
    width: 32vw !important;
    height: auto !important;
}

.hero__title,
.hero__copy,
.hero__side-copy,
.hero__benefits,
.hero__scroll,
.hero__header,
.hero__region {
    z-index: 8 !important;
}

/* Правая оранжевая надпись поверх щита */
.hero__title--right {
    z-index: 6 !important;
}

/* Левая чёрная надпись тоже поверх */
.hero__title--left {
    z-index: 7 !important;
}


/* 2) ЛОГОТИП ПО ОДНОЙ ЛИНИИ С ВЕРХНИМИ ЭЛЕМЕНТАМИ */
.hero__logo {
    top: 18px !important;
    left: 145px !important;
    width: 92px !important;
    height: auto !important;
}

.hero__delivery {
    top: 16px !important;
}

.hero__nav {
    top: 28px !important;
}


/* 3) СЕРАЯ НАДПИСЬ "ТОЧКА ТОКА" —
   увеличить расстояние между буквами */
.hero__watermark {
    letter-spacing: 0.03em !important;
    font-size: 10.8vw !important;
    opacity: 0.20 !important;
}


/* 4) ИКОНКИ В НИЖНЕМ БЛОКЕ — НОРМАЛЬНЫЕ */
.benefit__icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
}

/* 1-я иконка — документ / проект */
.hero__benefits .benefit:nth-child(1) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3.75h7l3.25 3.25v13.25H7V3.75Z' stroke='%230e0e0e' stroke-width='1.6'/%3E%3Cpath d='M14 3.75V7h3.25' stroke='%230e0e0e' stroke-width='1.6'/%3E%3Cpath d='M9 11.25h6M9 14.25h6M9 17.25h4.5' stroke='%230e0e0e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2-я иконка — шестерёнка / настройка */
.hero__benefits .benefit:nth-child(2) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 8.75a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M19.25 13.25v-2.5l-1.86-.52a5.77 5.77 0 0 0-.52-1.25l.95-1.67-1.77-1.77-1.67.95c-.4-.22-.82-.39-1.25-.52L12.75 4h-2.5l-.52 1.86c-.43.13-.85.3-1.25.52l-1.67-.95-1.77 1.77.95 1.67c-.22.4-.39.82-.52 1.25L4 10.75v2.5l1.86.52c.13.43.3.85.52 1.25l-.95 1.67 1.77 1.77 1.67-.95c.4.22.82.39 1.25.52L10.25 20h2.5l.52-1.86c.43-.13.85-.3 1.25-.52l1.67.95 1.77-1.77-.95-1.67c.22-.4.39-.82.52-1.25l1.72-.42Z' stroke='%230e0e0e' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3-я иконка — доставка / коробка */
.hero__benefits .benefit:nth-child(3) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 8.25 12 4.75l7 3.5v7.5l-7 3.5-7-3.5v-7.5Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M5 8.25 12 12l7-3.75M12 12v7.25' stroke='%230e0e0e' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* =========================================
   HERO — ФИНАЛЬНЫЕ ТОЧЕЧНЫЕ ПРАВКИ
   ========================================= */

/* 1) ЩИТ — чуть левее */
.hero__panel {
    left: 35.8vw !important;
    top: 27.5vh !important;
    width: 33.5vw !important;
    z-index: 2 !important;
}

/* 2) УБРАТЬ ПРАВЫЙ ТЕКСТОВЫЙ БЛОК ПОЛНОСТЬЮ */
.hero__side-copy {
    display: none !important;
}

/* 3) ЛОГОТИП ЧУТЬ ЛЕВЕЕ */
.hero__logo {
    left: 130px !important;
    top: 18px !important;
    width: 92px !important;
    height: auto !important;
}

/* 4) ЛЕВЫЙ ВЕРХНИЙ ТЕКСТ ОТЦЕНТРОВАТЬ */
.hero__delivery {
    left: 20px !important;
    top: 14px !important;
    width: 120px !important;
    text-align: center !important;
}

    .hero__delivery::after {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 48px !important;
    }

/* 5) СЕРЫЙ WATERMARK — пусть останется чуть свободнее */
.hero__watermark {
    letter-spacing: 0.035em !important;
}

/* =========================================
   НИЖНИЕ ИКОНКИ
   ========================================= */

/* Убираем старые наложения / псевдоэлементы */
.benefit__icon::before,
.benefit__icon::after {
    content: none !important;
    display: none !important;
}

/* Убираем старые бордеры/заливки и ставим нормальный размер */
.benefit__icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    min-width: 42px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 30px 30px !important;
}

/* 1 — документ */
.hero__benefits .benefit:nth-child(1) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3.75h7l3.25 3.25v13.25H7V3.75Z' stroke='%230e0e0e' stroke-width='1.6'/%3E%3Cpath d='M14 3.75V7h3.25' stroke='%230e0e0e' stroke-width='1.6'/%3E%3Cpath d='M9 11.25h6M9 14.25h6M9 17.25h4.5' stroke='%230e0e0e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2 — шестерёнка */
.hero__benefits .benefit:nth-child(2) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 8.75a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M19.25 13.25v-2.5l-1.86-.52a5.77 5.77 0 0 0-.52-1.25l.95-1.67-1.77-1.77-1.67.95c-.4-.22-.82-.39-1.25-.52L12.75 4h-2.5l-.52 1.86c-.43.13-.85.3-1.25.52l-1.67-.95-1.77 1.77.95 1.67c-.22.4-.39.82-.52 1.25L4 10.75v2.5l1.86.52c.13.43.3.85.52 1.25l-.95 1.67 1.77 1.77 1.67-.95c.4.22.82.39 1.25.52L10.25 20h2.5l.52-1.86c.43-.13.85-.3 1.25-.52l1.67.95 1.77-1.77-.95-1.67c.22-.4.39-.82.52-1.25l1.72-.42Z' stroke='%230e0e0e' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3 — коробка / доставка */
.hero__benefits .benefit:nth-child(3) .benefit__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 8.25 12 4.75l7 3.5v7.5l-7 3.5-7-3.5v-7.5Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M5 8.25 12 12l7-3.75M12 12v7.25' stroke='%230e0e0e' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* =========================================
   FIX: HEADER + НИЖНИЕ ИКОНКИ
   ========================================= */


/* 1. ДОСТАВКА — НА ОДНУ ЛИНИЮ С КАТАЛОГ / КОНТАКТЫ */
.hero__delivery {
    left: 24px !important;
    top: 28px !important;
    width: 125px !important;
    text-align: left !important;
    line-height: 1.05 !important;
}

    /* линия под "доставка..." */
    .hero__delivery::after {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 8px !important;
        width: 48px !important;
    }


/* ЛОГОТИП рядом, но не накладывается */
.hero__logo {
    left: 145px !important;
    top: 16px !important;
    width: 72px !important;
    height: auto !important;
}


/* Навигация остаётся на этой же визуальной линии */
.hero__nav {
    top: 28px !important;
}


/* =========================================
   2. СТАРЫЕ ИКОНКИ — УБИРАЕМ ПОЛНОСТЬЮ
   ========================================= */

.benefit__icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    background: none !important;
    border: none !important;
}


/* Сама карточка преимущества */
.benefit {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    column-gap: 16px !important;
    align-items: start !important;
}


    /* Новая иконка */
    .benefit::before {
        content: "" !important;
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 34px 34px !important;
    }


/* 01 — проектирование */
.hero__benefits .benefit:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3.5h7l3.5 3.5v13.5H7V3.5Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M14 3.5V7h3.5' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M9 11h6M9 14h6M9 17h4' stroke='%230e0e0e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* 02 — сборка / проверка */
.hero__benefits .benefit:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='3.2' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='M19.2 13.3v-2.6l-1.8-.5a6.5 6.5 0 0 0-.6-1.3l1-1.6-1.9-1.9-1.6 1a6.5 6.5 0 0 0-1.3-.6L12.5 4h-2.6l-.5 1.8a6.5 6.5 0 0 0-1.3.6l-1.6-1-1.9 1.9 1 1.6a6.5 6.5 0 0 0-.6 1.3l-1.8.5v2.6l1.8.5c.1.5.3.9.6 1.3l-1 1.6 1.9 1.9 1.6-1c.4.3.8.5 1.3.6l.5 1.8h2.6l.5-1.8c.5-.1.9-.3 1.3-.6l1.6 1 1.9-1.9-1-1.6c.3-.4.5-.8.6-1.3l1.8-.5Z' stroke='%230e0e0e' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* 03 — доставка */
.hero__benefits .benefit:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 8 12 4.5 19 8v8l-7 3.5L5 16V8Z' stroke='%230e0e0e' stroke-width='1.5'/%3E%3Cpath d='m5 8 7 3.5L19 8M12 11.5v8' stroke='%230e0e0e' stroke-width='1.4'/%3E%3C/svg%3E");
}


/* Чтобы текст преимущества начинался ровно */
.benefit > div:not(.benefit__icon) {
    grid-column: 2 !important;
}
/* =========================================
   МИКРОПРАВКИ
   ========================================= */

/* 1) ЩИТ — чуть правее */
.hero__panel {
    left: 37.2vw !important;
}

/* 2) УБРАТЬ ВТОРУЮ МАЛЕНЬКУЮ СТРЕЛКУ */
.hero__scroll {
    font-size: 0 !important;
    color: transparent !important;
}

    .hero__scroll::after {
        content: none !important;
        display: none !important;
    }
/* ==========================================================
   CATALOG
   ========================================================== */

.catalog {
    position: relative;
    width: 100%;
    min-height: 1720px;
    background: #f6f3ec;
    color: #0e0e0e;
    overflow: hidden;
}


/* Верхние подписи */

.catalog__eyebrow {
    position: absolute;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #0e0e0e;
}

.catalog__eyebrow--left {
    top: 28px;
    left: 30px;
    font-size: 12px;
}

    .catalog__eyebrow--left::after {
        content: "";
        display: block;
        width: 58px;
        height: 1px;
        margin-top: 8px;
        background: rgba(14,14,14,.7);
    }


.catalog__eyebrow--right {
    top: 27px;
    right: 40px;
    font-size: 10px;
    line-height: 13px;
}

    .catalog__eyebrow--right::after {
        content: "";
        display: block;
        width: 46px;
        height: 1px;
        margin-top: 14px;
        background: rgba(14,14,14,.55);
    }


/* Большой watermark */

.catalog__watermark {
    position: absolute;
    top: 365px;
    left: 28px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 128px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #b2ada1;
    opacity: .17;
}

/* Заголовок */

.catalog__title {
    position: absolute;
    left: 28px;
    margin: 0;
    font-family: "Rubik One", sans-serif;
    font-weight: 400;
    letter-spacing: -0.04em;
}

.catalog__title--black {
    top: 100px;
    font-size: 138px;
    line-height: 128px;
    color: #0e0e0e;
}

.catalog__title--orange {
    top: 252px;
    font-size: 118px;
    line-height: 112px;
    color: #f49f09;
}


/* Описание справа */

.catalog__description {
    position: absolute;
    top: 380px;
    right: 16px;
    width: 400px;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 28px;
}


/* ==========================================================
   КАРТОЧКИ
   ========================================================== */

.catalog__cards {
    position: absolute;
    top: 550px;
    left: 28px;
    right: 26px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}


.catalog-card {
    position: relative;
    height: 650px;
    border: 1px solid rgba(194,189,176,.7);
    border-radius: 20px;
    overflow: hidden;
    background: #f6f3ec;
}


.catalog-card--accent {
    border: 2px solid #f49f09;
    background: linear-gradient( 180deg, rgba(244,159,9,.12), rgba(244,159,9,.03) );
}


/* большие цифры */

.catalog-card__number {
    position: absolute;
    top: 35px;
    left: 15px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 180px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    color: #b2ada1;
    opacity: .23;
}


/* техническое изображение щита */

.catalog-card__shield {
    position: absolute;
    top: 225px;
    left: 50%;
    transform: translateX(-50%);
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.shield-drawing {
    position: relative;
    border: 2px solid #4f4e49;
    background: transparent;
    box-shadow: 8px -5px 0 -6px #77746c;
}


    .shield-drawing::before {
        content: "";
        position: absolute;
        left: -17px;
        top: 0;
        height: 100%;
        border-left: 1px dashed #77746c;
    }


    .shield-drawing::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -18px;
        border-bottom: 1px dashed #77746c;
    }


.shield-drawing--small {
    width: 100px;
    height: 112px;
}

.shield-drawing--medium {
    width: 125px;
    height: 115px;
}

.shield-drawing--wide {
    width: 165px;
    height: 118px;
}

.shield-drawing--tall {
    width: 125px;
    height: 158px;
}

.shield-drawing--large {
    width: 145px;
    height: 176px;
}


.shield-drawing__door {
    position: absolute;
    inset: 8px;
    border: 1px solid #77746c;
}


.shield-drawing__door--double::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #77746c;
}


.shield-drawing__handle {
    position: absolute;
    width: 4px;
    height: 15px;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #4f4e49;
    border-radius: 1px;
}


/* контент карточки */

.catalog-card h3 {
    position: absolute;
    top: 420px;
    left: 18px;
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 38px;
    font-weight: 900;
    line-height: 42px;
}


.catalog-card__line {
    position: absolute;
    top: 478px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: rgba(14,14,14,.55);
}


.catalog-card h4 {
    position: absolute;
    top: 496px;
    left: 18px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}


.catalog-card p {
    position: absolute;
    top: 544px;
    left: 18px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 19px;
    color: #6e6b63;
}


.catalog-card__more {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(14,14,14,.45);
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0e0e0e;
}


    .catalog-card__more span:last-child {
        font-size: 26px;
        font-weight: 400;
    }


/* ==========================================================
   CTA ПЛАШКА
   ========================================================== */

.catalog-cta {
    position: absolute;
    left: 28px;
    right: 28px;
    top: 1255px;
    height: 455px;
    background: #0e0e0e;
    border-radius: 10px;
    overflow: hidden;
}


.catalog-cta__question {
    position: absolute;
    left: 560px;
    top: -40px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 520px;
    font-weight: 900;
    line-height: 1;
    color: #f7f6f0;
    opacity: .08;
}


.catalog-cta__title {
    position: absolute;
    left: 38px;
    top: 70px;
}


.catalog-cta__white {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 86px;
    font-weight: 900;
    line-height: .9;
    color: #f7f6f0;
}


.catalog-cta__orange {
    margin-top: 15px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 80px;
    font-weight: 900;
    line-height: .9;
    color: #f49f09;
}


.catalog-cta__right {
    position: absolute;
    top: 74px;
    left: 61%;
    width: 33%;
}


    .catalog-cta__right p {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 29px;
        color: #f7f6f0;
    }


.catalog-cta__button {
    margin-top: 30px;
    height: 74px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f49f09;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color: #0e0e0e;
}


    .catalog-cta__button span:last-child {
        font-size: 30px;
        font-weight: 400;
    }


.catalog-cta__time {
    margin-top: 26px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #f7f6f0;
}


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

@media (max-width: 1100px) {

    .catalog {
        min-height: auto;
        padding: 80px 25px;
    }

    .catalog__eyebrow,
    .catalog__watermark,
    .catalog__description {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    .catalog__title {
        position: relative;
        left: auto;
        top: auto;
    }

    .catalog__title--black {
        font-size: 90px;
        line-height: 1;
    }

    .catalog__title--orange {
        font-size: 80px;
        line-height: 1;
    }

    .catalog__description {
        margin-top: 40px;
    }

    .catalog__cards {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 60px;
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-cta {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin-top: 40px;
    }
}
/* СКИДКА 10% */

.catalog-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    background: #f49f09;
    color: #0e0e0e;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
/* ==========================================================
   CONTACTS
   ========================================================== */

.contacts {
    position: relative;
    width: 100%;
    min-height: 900px;
    overflow: hidden;
    background: #f6f3ec;
    color: #0e0e0e;
}


/* Фоновое слово */

.contacts__watermark {
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(0);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 220px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -0.03em;
    color: #b2ada1;
    opacity: .15;
    white-space: nowrap;
}


/* Верхние маленькие подписи */

.contacts__eyebrow {
    position: absolute;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #0e0e0e;
}


.contacts__eyebrow--left {
    top: 28px;
    left: 32px;
    font-size: 12px;
}


    .contacts__eyebrow--left::after {
        content: "";
        display: block;
        width: 64px;
        height: 1px;
        margin-top: 9px;
        background: rgba(14,14,14,.65);
    }


.contacts__eyebrow--right {
    top: 28px;
    right: 40px;
    font-size: 10px;
    line-height: 13px;
}


/* Большой заголовок */

.contacts__title {
    position: absolute;
    left: 28px;
    margin: 0;
    font-family: "Rubik One", sans-serif;
    font-weight: 400;
    letter-spacing: -0.04em;
}


.contacts__title--black {
    top: 90px;
    font-size: 116px;
    line-height: 108px;
    color: #0e0e0e;
}


.contacts__title--orange {
    top: 198px;
    font-size: 108px;
    line-height: 100px;
    color: #f49f09;
}


/* Текст под заголовком */

.contacts__intro {
    position: absolute;
    top: 355px;
    left: 38px;
    width: 590px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 19px;
    line-height: 28px;
    color: #0e0e0e;
}


/* ==========================================================
   КАРТОЧКИ
   ========================================================== */

.contacts__cards {
    position: absolute;
    top: 500px;
    left: 35px;
    right: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}


.contact-card {
    position: relative;
    height: 340px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}


    .contact-card:hover {
        transform: translateY(-4px);
    }


.contact-card--telegram {
    border: 1px solid rgba(194,189,176,.7);
    background: rgba(250,249,244,.72);
    color: #0e0e0e;
}


    .contact-card--telegram:hover {
        box-shadow: 0 16px 40px rgba(0,0,0,.08);
    }


.contact-card--phone {
    background: #0e0e0e;
    color: #faf9f4;
}


    .contact-card--phone:hover {
        box-shadow: 0 16px 45px rgba(0,0,0,.18);
    }


/* Иконки */

.contact-card__icon {
    position: absolute;
    top: 26px;
    left: 28px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: "Inter", sans-serif;
}


.contact-card__icon--telegram {
    border: 2px solid #0e0e0e;
    color: #0e0e0e;
}


.contact-card__icon--phone {
    border: 2px solid #faf9f4;
    color: #faf9f4;
}


/* Подпись типа связи */

.contact-card__type {
    position: absolute;
    top: 31px;
    left: 98px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
}


.contact-card--telegram .contact-card__type {
    color: #6e6b63;
}


.contact-card--phone .contact-card__type {
    color: #faf9f4;
}


/* Заголовки */

.contact-card h3 {
    position: absolute;
    top: 95px;
    left: 28px;
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 45px;
}


.contact-card--phone h3 {
    top: 125px;
}


/* Telegram */

.contact-card__handle {
    position: absolute;
    top: 205px;
    left: 28px;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #f49f09;
}


.contact-card p {
    position: absolute;
    left: 28px;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 21px;
}


.contact-card--telegram p {
    top: 244px;
    width: 320px;
    color: #6e6b63;
}


/* QR */

.contact-card__qr {
    position: absolute;
    top: 14px;
    right: 9px;
    width: 294px;
    height: 309px;
}


    .contact-card__qr img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }


/* Телефон */

.contact-card__phone {
    position: absolute;
    top: 205px;
    left: 28px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #f49f09;
}


.contact-card--phone p {
    top: 255px;
    width: 410px;
    color: #faf9f4;
}


.contact-card__arrow {
    position: absolute;
    right: 40px;
    bottom: 30px;
    font-size: 38px;
    color: #faf9f4;
}


/* ==========================================================
   АДАПТАЦИЯ
   ========================================================== */

@media (max-width: 1100px) {

    .contacts {
        min-height: auto;
        padding: 80px 25px;
    }

    .contacts__watermark,
    .contacts__eyebrow,
    .contacts__title,
    .contacts__intro,
    .contacts__cards {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    .contacts__watermark {
        position: absolute;
        right: -80px;
        left: auto;
        top: 180px;
        transform: none;
        font-size: 160px;
    }

    .contacts__eyebrow--right {
        display: none;
    }

    .contacts__title {
        margin-top: 20px;
    }

    .contacts__title--black {
        font-size: 90px;
        line-height: .95;
    }

    .contacts__title--orange {
        font-size: 84px;
        line-height: .95;
    }

    .contacts__intro {
        margin-top: 40px;
    }

    .contacts__cards {
        margin-top: 55px;
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .contacts {
        padding: 60px 18px;
    }

    .contacts__title--black {
        font-size: 54px;
    }

    .contacts__title--orange {
        font-size: 50px;
    }

    .contacts__intro {
        width: auto;
        font-size: 16px;
        line-height: 24px;
    }

    .contact-card {
        height: auto;
        min-height: 400px;
    }

    .contact-card__qr {
        position: relative;
        top: auto;
        right: auto;
        width: 220px;
        height: 230px;
        margin: 170px auto 20px;
    }
    .contacts {
        margin-top: 0 !important;
    }
}
/* =========================================
   TELEGRAM ICON FIX
   ========================================= */

.contact-card__icon--telegram {
    position: absolute;
    top: 25px !important;
    left: 27px !important;
    width: 52px !important;
    height: 52px !important;
    border: 2px solid #0e0e0e !important;
    border-radius: 50% !important;
    background-color: transparent !important;
}


    /* Настоящий бумажный самолётик */
    .contact-card__icon--telegram::before {
        content: "";
        position: absolute;
        width: 25px;
        height: 25px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.5 3.2L18.2 19c-.25 1.12-.9 1.4-1.82.87l-5.03-3.7-2.43 2.34c-.27.27-.5.5-1.02.5l.36-5.12 9.32-8.42c.4-.36-.09-.56-.63-.2L5.43 12.53.47 10.98c-1.08-.34-1.1-1.08.23-1.6L20.1 1.9c.9-.33 1.69.2 1.4 1.3Z' fill='%230e0e0e'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
.contact-card--telegram .contact-card__type {
    top: 25px !important;
    left: 97px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
/* =========================================
   УБИРАЕМ ПУСТОТУ ПЕРЕД КОНТАКТАМИ
   ========================================= */

#contacts.contacts {
    position: relative !important;
    width: 100% !important;
    height: 900px !important;
    min-height: 900px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f6f3ec !important;
    overflow: hidden !important;
}


/* возвращаем элементы контактов наверх секции */

.contacts__eyebrow--left {
    top: 28px !important;
}

.contacts__eyebrow--right {
    top: 28px !important;
}

.contacts__title--black {
    top: 90px !important;
}

.contacts__title--orange {
    top: 198px !important;
}

.contacts__intro {
    top: 355px !important;
}

.contacts__cards {
    top: 500px !important;
}
.contact-card--phone .contact-card__type {
    top: 26px !important;
    left: 98px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    line-height: 1 !important;
}
/* Кнопка "Рассчитать щит" */

.hero__nav a.hero__button {
    position: relative !important;
    min-width: 215px !important;
    height: 58px !important;
    padding: 0 42px 0 24px !important;
    margin-left: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    background: #f49f09 !important;
    clip-path: polygon( 0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100% );
    color: #0e0e0e !important;
    text-decoration: none !important;
    transition: background-color 0.25s ease, opacity 0.25s ease !important;
}

    .hero__nav a.hero__button:hover {
        background: #d98d08 !important;
        opacity: 0.82 !important;
    }
/* ===== ВЫРАВНИВАЕМ "ТЕЛЕФОН" ===== */

.contact-card--phone .contact-card__type {
    top: 26px !important;
    left: 98px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}


/* ===== КНОПКА "РАССЧИТАТЬ ЩИТ" ===== */

.hero__nav-button {
    box-sizing: border-box !important;
    min-width: 220px !important;
    height: 58px !important;
    padding: 0 42px 0 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: none !important;
    outline: none !important;
    background: #f49f09 !important;
    color: #0e0e0e !important;
    text-decoration: none !important;
    /* правая часть в форме стрелки */
    clip-path: polygon( 0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100% );
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease !important;
}


    /* плавное потускнение */
    .hero__nav-button:hover {
        opacity: 0.72 !important;
    }


    /* стрелка внутри */
    .hero__nav-button span {
        font-size: 22px !important;
        line-height: 1 !important;
    }
/* Нижняя линия перед каталогом */

.hero::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 0;
    height: 1px;
    background: rgba(14, 14, 14, 0.45);
    z-index: 50;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* ================= HERO ================= */

    .hero {
        height: auto !important;
        min-height: 100vh !important;
        padding: 20px 18px 34px !important;
        overflow: hidden !important;
    }

    .hero__header {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 58px !important;
    }

    .hero__delivery {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

        .hero__delivery::after {
            width: 38px !important;
            margin-top: 6px !important;
        }

    .hero__logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 64px !important;
    }

    .hero__nav {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        gap: 10px !important;
        font-size: 10px !important;
    }

        .hero__nav > a:not(.hero__nav-button) {
            display: none !important;
        }

    .hero__nav-button {
        min-width: 150px !important;
        height: 44px !important;
        padding: 0 26px 0 16px !important;
        font-size: 11px !important;
    }

    .hero__region {
        display: none !important;
    }

    .hero__watermark {
        position: absolute !important;
        left: 18px !important;
        top: 105px !important;
        transform: none !important;
        width: auto !important;
        font-size: 76px !important;
        line-height: .9 !important;
        letter-spacing: .02em !important;
        opacity: .13 !important;
    }

    .hero__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin: 0 !important;
        z-index: 5 !important;
    }

    .hero__title--left {
        margin-top: 120px !important;
        font-size: 74px !important;
        line-height: .9 !important;
    }

    .hero__title--right {
        margin-top: 8px !important;
        font-size: 49px !important;
        line-height: .93 !important;
    }

    .hero__panel {
        position: relative !important;
        left: 50% !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: 92% !important;
        height: auto !important;
        margin-top: -14px !important;
        z-index: 2 !important;
    }

    .hero__copy {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        margin-top: 8px !important;
    }

        .hero__copy h3 {
            font-size: 27px !important;
            line-height: 1 !important;
        }

        .hero__copy p {
            max-width: none !important;
            font-size: 15px !important;
            line-height: 1.45 !important;
        }

    .hero__primary {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 13px !important;
        margin-top: 18px !important;
    }

    .hero__side-copy {
        display: none !important;
    }

    .hero__benefits {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-top: 26px !important;
        padding: 22px 0 0 !important;
    }

    .benefit {
        grid-template-columns: 42px 1fr !important;
    }

        .benefit h4 {
            font-size: 13px !important;
        }

        .benefit p {
            font-size: 12px !important;
        }

    .hero__scroll {
        display: none !important;
    }


    /* ================= CATALOG ================= */

    .catalog {
        min-height: auto !important;
        padding: 56px 18px !important;
    }

    .catalog__eyebrow {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .catalog__eyebrow--right {
        display: none !important;
    }

    .catalog__watermark {
        position: absolute !important;
        top: 130px !important;
        left: 18px !important;
        font-size: 88px !important;
    }

    .catalog__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .catalog__title--black {
        margin-top: 46px !important;
        font-size: 70px !important;
        line-height: .9 !important;
    }

    .catalog__title--orange {
        margin-top: 8px !important;
        font-size: 56px !important;
        line-height: .95 !important;
    }

    .catalog__description {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        margin-top: 28px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    .catalog__cards {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 34px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .catalog-card {
        height: 560px !important;
        border-radius: 18px !important;
    }

    .catalog-card__number {
        font-size: 150px !important;
    }

    .catalog-card h3 {
        font-size: 34px !important;
    }

    .catalog-cta {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-top: 28px !important;
        height: auto !important;
        min-height: 520px !important;
        padding: 28px 22px !important;
    }

    .catalog-cta__question {
        display: none !important;
    }

    .catalog-cta__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .catalog-cta__white {
        font-size: 54px !important;
    }

    .catalog-cta__orange {
        font-size: 48px !important;
    }

    .catalog-cta__right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin-top: 26px !important;
    }

        .catalog-cta__right p {
            font-size: 15px !important;
            line-height: 22px !important;
        }

    .catalog-cta__button {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }


    /* ================= CONTACTS ================= */

    #contacts.contacts {
        height: auto !important;
        min-height: 0 !important;
        padding: 56px 18px 40px !important;
    }

    .contacts__watermark {
        position: absolute !important;
        top: 120px !important;
        left: 18px !important;
        transform: none !important;
        font-size: 100px !important;
    }

    .contacts__eyebrow {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .contacts__eyebrow--right {
        display: none !important;
    }

    .contacts__title {
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .contacts__title--black {
        margin-top: 58px !important;
        font-size: 68px !important;
        line-height: .9 !important;
    }

    .contacts__title--orange {
        margin-top: 6px !important;
        font-size: 60px !important;
        line-height: .9 !important;
    }

    .contacts__intro {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin-top: 28px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    .contacts__cards {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 32px !important;
    }

    .contact-card {
        height: auto !important;
        min-height: 380px !important;
        border-radius: 18px !important;
    }

    .contact-card__qr {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: min(260px, 78%) !important;
        height: auto !important;
        margin: 175px auto 24px !important;
    }

        .contact-card__qr img {
            width: 100% !important;
            height: auto !important;
        }

    .contact-card--phone {
        min-height: 320px !important;
    }

    .contact-card__arrow {
        right: 24px !important;
    }
}