/* Обычный вес */
@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/CeraPro-Regular.woff2') format('woff2'),
         url('../fonts/CeraPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* Жирный */
@font-face {
    font-family: 'Cera Pro';
    src: url('../fonts/CeraPro-Bold.woff2') format('woff2'),
         url('../fonts/CeraPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 3.5rem;
        font-weight: 900;
        
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

h1{
    margin: 0px !important;
}

/* Глобальный шрифт (включая Bootstrap-компоненты) */
:root{
    --bs-body-font-family: 'Cera Pro', sans-serif;
}

/* Использование шрифта */
body {
    font-family: var(--bs-body-font-family);
    padding: 20px 0px;
}

/* Запрет выделения текста на сайте (кроме полей ввода) */
body,
body *{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input,
textarea,
select,
option,
[contenteditable="true"]{
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Курсор для кликабельных элементов */
a,
button,
[role="button"],
[onclick],
.btn,
.portfolio-block,
.calc-choice,
.calc-chip,
.calc-nav-btn,
.hamburger-btn,
.hamburger-link,
.footer-nav-link,
.portfolio-modal__thumb{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea{
    font-family: inherit;
}

html{
    scroll-behavior: smooth;
    /* Prevent layout shift when Bootstrap toggles scrollbars for modals */
    scrollbar-gutter: stable;
}

/* Запрещаем горизонтальный скролл из-за декоративных элементов,
   которые могут выходить за пределы viewport (например, #Wheel). */
html, body{
    overflow-x: clip;
}

@supports not (overflow: clip){
    html, body{ overflow-x: hidden; }
}

/* Снег (оверлей) */
.snow{
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1030; /* поверх контента/хедера, но ниже Bootstrap backdrop/modal (1050/1055) */
}

.snow__flake{
    position: absolute;
    left: var(--left, 50vw);
    top: -12vh;
    width: var(--size, 4px);
    height: var(--size, 4px);
    background: rgba(255, 255, 255, var(--alpha, 0.8));
    border-radius: 999px;
    filter: blur(0.2px);
    transform: translate3d(0, 0, 0);
    animation: snow-fall var(--duration, 10s) linear var(--delay, 0s) infinite;
    will-change: transform;
}

@keyframes snow-fall{
    0%{ transform: translate3d(0, -12vh, 0); }
    100%{ transform: translate3d(var(--drift, 0px), 112vh, 0); }
}

@media (prefers-reduced-motion: reduce){
    .snow{ display: none !important; }
}

/* Декоративная подложка abs.png */
.abs-scope{
    position: relative;
    isolation: isolate; /* гарантируем, что z-index внутри секции не вылезает наружу */
}

.abs-scope > .row{
    position: relative;
    z-index: 1;
}

.abs-decor{
    position: absolute;
    /* привязываем к левому краю viewport, а не контейнера */
    left: calc(50% - 50vw);
    top: -140px;
    transform: translateX(-50%); /* показываем ровно половину */
    width: clamp(320px, 55vw, 720px);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.abs-decor--prices{
    top: -120px;
    width: clamp(260px, 42vw, 560px);
}

.abs-decor--stages{
    top: -80px;
    width: clamp(320px, 55vw, 760px);
    left: calc(50% + 50vw); /* правый край viewport */
}

/* Этапы: адаптация декора под 1024–1440 (без обрезки) */
@media (max-width: 1440px) and (min-width: 1024px){
    .abs-decor--stages{
        left: auto;
        right: 0;
        transform: none;
        width: clamp(280px, 34vw, 520px);
        top: -60px;
    }
}

/* Этапы работы: предотвращаем горизонтальный скролл на узких экранах */
@media (max-width: 991.98px){
    #stages .MainText{ width: 100%; }

    #stages .justify-contents{
        flex-wrap: wrap;
        gap: 12px;
    }

    #stages .select-block,
    #stages .nonselect-block{
        flex: 0 0 100%;
        max-width: 100%;
    }

    #stages .back-border{
        flex-wrap: wrap;
        margin-top: 14px;
    }

    #stages .inside-border{
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Этапы работы: tablet (768–1024) — редизайн карточек */
@media (min-width: 768px) and (max-width: 1024px){
    #stages .plan-block{
        gap: 14px;
    }

    #stages .MainText{
        width: 100%;
        max-width: 820px;
    }

    /* 4 шага: вместо «простыни» делаем сетку 2×2 */
    #stages .justify-contents{
        display: grid !important; /* перебиваем Bootstrap .d-flex (display:flex!important) */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-items: stretch;
        width: 100%;
    }

    #stages .justify-contents > .col-3{
        width: auto;
        max-width: none !important;
        flex: initial !important;
    }

    #stages .justify-contents > .col-3.select-block,
    #stages .justify-contents > .col-3.nonselect-block{
        width: 100% !important;
    }

    #stages .select-block,
    #stages .nonselect-block{
        border-radius: 0 18px 18px 18px;
        padding: 18px 18px 16px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #stages .nonselect-block{
        background-color: #fff;
        border: 1px solid rgba(28, 50, 64, 0.12);
    }

    #stages .select-block{
        background-color: #1C3240;
    }

    #stages .justify-contents .text-64{
        font-size: 48px !important;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    #stages .justify-contents p{
        margin: 0;
    }

    #stages .justify-contents p:last-child{
        font-size: 14px;
        line-height: 1.35;
    }

    /* Нижние карточки внутри тёмного контейнера — ровно 3 колонки */
    #stages .back-border{
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 14px;
        padding: 16px;
        border-radius: 0 18px 18px 18px;
    }

    #stages .back-border .inside-border{
        max-width: none !important;
        flex: initial !important;
        padding: 16px;
        height: 100%;
    }
}

/* Этапы работы: desktop — радиусы как в макете */
@media (min-width: 1025px){
    #stages .select-block,
    #stages .nonselect-block{
        /* Верхние карточки: скруглены только верхние углы */
        border-radius: 20px 20px 0 0;
    }

    #stages .back-border{
        /* Нижний тёмный блок: скруглены все углы, кроме верхнего левого */
        border-radius: 0 20px 20px 20px;
    }
}


p{
    height: max-content !important;
    margin: 0px !important;
    font-weight: 100;
}

li{
    font-weight: 100;
}

.head-block {
    padding: 15px;
    border-radius: 40px;
}

#logo{
    max-width: 50px;
    max-height: 50px;
    border-radius: 120px;
}

.shadow{
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.base-block {
    border-radius: 50px; /* как на скриншоте */
    padding: 15px 30px;
    position: relative;
}

/* Передний блок */
.front-block {
    z-index: 100;
    position: relative;
}

/* Обёртка для хедера и его задника */
.header-wrap{
    position: fixed !important; /* перебиваем bootstrap .position-relative (important) */
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, calc(100% - 24px));
    z-index: 1020; /* выше контента, но ниже Bootstrap modal (1050+) */
}

/* Спейсер под фиксированный хедер, чтобы контент не уезжал под него */
#home{
    min-height: 110px;
}

@media (max-width: 575px){
    #home{ min-height: 120px; }
}

/* Мобилка (375–425): убираем слоган в хедере */
@media (max-width: 767px){
    .header-wrap .front-block > p{
        display: none;
    }
}

@keyframes header-levitation{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-4px) rotate(-0.35deg); }
    50%{ transform: translateY(-7px) rotate(0.35deg); }
    75%{ transform: translateY(-4px) rotate(-0.2deg); }
}

/* Задник как псевдоэлемент у обёртки — под хедером */
.header-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;             /* расстояние от верхней границы хедера */
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1;            /* ниже .front-block (z-index:2) */
    pointer-events: none;
}

/* Левитация без конфликта с transform центрирования .header-wrap */
.header-wrap::after,
.header-wrap .front-block{
    animation: header-levitation 5.5s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce){
    .header-wrap::after,
    .header-wrap .front-block{
        animation: none;
        transform: none;
    }
}

.hamburger-btn{
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background-color: rgb(28, 50, 64);
    border: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.hamburger-btn:hover{
    filter: brightness(1.05);
}

.hamburger-btn:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 3px;
}

.hamburger-line{
    width: 18px;
    height: 3px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 999px;

    transition: transform 180ms ease, opacity 180ms ease;
    transform-origin: center;
}

.hamburger-btn.is-open .hamburger-line:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-open .hamburger-line:nth-child(2){
    opacity: 0;
}

.hamburger-btn.is-open .hamburger-line:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

.hamburger-menu{
    position: relative;
    display: flex;
    align-items: center;
}

.hamburger-panel{
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 220px;
    padding: 12px;
    border-radius: 18px;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    gap: 10px;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform 160ms ease, opacity 160ms ease;
}

.hamburger-panel.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hamburger-link{
    text-decoration: none;
    color: rgb(28, 50, 64);
    font-weight: 600;
}

.hamburger-link:hover{
    text-decoration: underline;
}

.plan-block{
    width: 100%;

    gap: 20px;
    margin: 100px 0px;
}


.o-nas-block{
    width: 100%;

    gap: 20px;
    margin: 40px 0px;
}

.design-block{
    width: 100%;

    /* gap: 60px; */
    margin: 40px 0px;
}

.hashtag-block{
    display: flex;
    background-color: white;
    width: max-content;
    height: max-content;
    padding: 12px 16px;
    border-radius: 15px;

    white-space: nowrap;
    gap: 10px;

    /* Важно: не даём flex'у сжимать чипы — иначе крайние элементы могут обрезаться
       вместо переноса на новую строку (как на вашем 1-м скрине). */
    flex: 0 0 auto;

    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

.hashtag-block:hover{
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.02);
}

.hero-content{
    gap: 10px;
}

.hero{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Hero чипы: на ширинах 1024+ строка получается слишком длинной и чипы
   «почти все» влезают в одну линию. Ограничиваем ширину ряда, чтобы перенос
   был как на макете (примерно 5 чипов в первой строке). */
@media (min-width: 1024px){
    .hero{
        max-width: 640px;
    }
}

/* План/hero: планшеты 768–1023 */
@media (max-width: 1023.98px) and (min-width: 768px){
    /* Спейсер под фиксированный хедер: на планшетах он был слишком высоким */
    #home{
        min-height: 92px;
    }

    /* убираем лишний верхний отступ именно у первого (hero) блока */
    .hero-plan{
        margin-top: 40px;
    }

    /* делаем текст и картинку в две строки, чтобы ничего не наезжало */
    .plan-block > .d-flex{
        flex-wrap: wrap;
        gap: 20px;
    }

    .plan-block > .d-flex > .hero-content{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .plan-block > .d-flex > .col-4.position-relative{
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
    }

    .hero-content h1{
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.05;
        font-size: clamp(32px, 4.6vw, 46px);
    }

    /* центрирование заголовка и чипов */
    .hero-plan .hero-content{
        align-items: center;
        text-align: center;
    }

    .hero-plan .hero{
        justify-content: center;
    }

    /* картинка и круг — адаптивные, не вылезают из контейнера */
    #MainImg{
        max-width: min(460px, 100%);
        max-height: none;
        height: auto;
    }

    #Wheel{
        width: min(560px, 110%);
        height: auto;
    }

    /* хэштеги: как раньше (flex-wrap), но аккуратнее на планшетах */
    .hero{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }

    .hero .hashtag-block{
        /* даём длинным словам переноситься внутри чипа, чтобы он не становился на всю строку */
        white-space: normal;
        text-align: center;
        justify-content: center;

        padding: 10px 14px;
        font-size: 14px;
        line-height: 1.15;

        flex: 0 1 auto;
        max-width: min(240px, 100%);
    }
}

/* План/hero: mobile 425–767 */
@media (min-width: 425px) and (max-width: 767px){
    /* Спейсер под фиксированный хедер: на мобилках уменьшаем «пустоту» */
    #home{
        min-height: 92px;
    }

    /* Сам блок hero: компактнее и без огромных отступов */
    .plan-block.hero-plan{
        margin: 36px 0px;
        gap: 14px;
    }

    /* Две колонки превращаем в одну, чтобы ничего не наезжало */
    .plan-block.hero-plan > .d-flex{
        flex-wrap: wrap;
        gap: 14px;
    }

    .plan-block.hero-plan > .d-flex > .hero-content{
        flex: 0 0 100%;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .plan-block.hero-plan > .d-flex > .col-4.position-relative{
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        margin-top: 6px;
        min-height: 240px; /* резерв под Wheel, чтобы не «резало» */
    }

    .hero-content h1{
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.06;
        font-size: clamp(28px, 7vw, 40px);
    }

    /* Чипы: меньше и аккуратнее */
    .hero{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
    }

    .hero .hashtag-block{
        white-space: normal;
        text-align: center;
        justify-content: center;

        padding: 9px 12px;
        font-size: 13px;
        line-height: 1.15;

        flex: 0 1 auto;
        max-width: min(220px, 100%);
    }

    /* Картинка + колесо: адаптивно и без вылезаний */
    #MainImg{
        max-width: min(320px, 78vw);
        max-height: none;
        height: auto;
    }

    #Wheel{
        width: min(460px, 120%);
        height: auto;
    }

    /* Отзывы: чтобы карточки не прилипали к краям и был ровный отступ сверху */
    .plan-block.hero-plan .reviews-block{
        margin-top: 18px !important; /* перебиваем mt-5 */
        padding-left: 12px;
        padding-right: 12px;
    }

    .plan-block.hero-plan .reviews{
        max-width: 270px;
    }
}

/* План/hero: mobile 0–424 (целевой диапазон 375–424) */
@media (max-width: 424.98px){
    /* Спейсер под фиксированный хедер */
    #home{
        min-height: 92px;
    }

    /* Сам блок hero: компактнее */
    .plan-block.hero-plan{
        margin: 28px 0px;
        gap: 12px;
    }

    /* Две колонки превращаем в одну */
    .plan-block.hero-plan > .d-flex{
        flex-wrap: wrap;
        gap: 12px;
    }

    .plan-block.hero-plan > .d-flex > .hero-content{
        flex: 0 0 100%;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .plan-block.hero-plan > .d-flex > .col-4.position-relative{
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: 4px;
        min-height: 220px; /* резерв под Wheel */
    }

    .hero-content h1{
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.08;
        font-size: clamp(24px, 8.2vw, 34px);
    }

    /* Чипы: 2 колонки, переносы, без вылезаний */
    .hero{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
    }

    .hero .hashtag-block{
        width: auto; /* перебиваем width:max-content */
        white-space: normal;
        text-align: center;
        justify-content: center;
        align-items: center;

        padding: 8px 10px;
        font-size: 12.5px;
        line-height: 1.12;

        min-height: 34px;

        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-width: 140px;
    }

    /* Картинка + колесо: меньше, чтобы не перекрывать контент */
    #MainImg{
        max-width: min(280px, 82vw);
        max-height: none;
        height: auto;
    }

    #Wheel{
        width: min(420px, 128%);
        height: auto;
    }

    /* Отзывы: ровные отступы, чтобы карточки не прилипали к краям */
    .plan-block.hero-plan .reviews-block{
        margin-top: 16px !important; /* перебиваем mt-5 */
        padding-left: 10px;
        padding-right: 10px;
    }

    .plan-block.hero-plan .reviews{
        max-width: 250px;
    }
}

/* Дизайн-проект + Партнёрство: mobile 0–424 (целевой диапазон 375–424) */
@media (max-width: 424.98px){
    /* Делаем один столбец: картинка сверху, контент снизу */
    #design .design-block,
    #partners .design-block{
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap !important;
        align-items: stretch;
        justify-content: flex-start !important;
        gap: 12px;
        margin: 22px 0px;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Убираем возможную “пустоту” от кастомного justify-content */
    #design .design-block.justify-content.design-block,
    #partners .design-block.justify-content.design-block{
        justify-content: flex-start !important;
    }

    /* Bootstrap col-* внутри flex: растягиваем на всю ширину */
    #design .design-block > .col-5,
    #design .design-block > .col-7,
    #partners .design-block > .col-5,
    #partners .design-block > .col-7{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0;
    }

    /* Картинка */
    #design .design-block > .col-5,
    #partners .design-block > .col-5{
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        height: auto !important;
    }

    #design #designImg,
    #partners #designImg{
        width: 100%;
        display: block;
        height: min(220px, 56vw, 30vh);
        max-height: 220px;
        object-fit: cover;
        border-radius: 16px;
    }

    /* Правая часть: меньше паддинги (перебиваем p-5) */
    #design .design-block > .col-7,
    #partners .design-block > .col-7{
        padding: 14px !important;
        border-radius: 18px;
        border: 1px solid rgba(28, 50, 64, 0.12);
    }

    /* Список: компактнее */
    #design .design-block ul,
    #partners .design-block ul{
        padding-left: 18px;
        margin: 10px 0 0;
    }

    #design .design-block li,
    #partners .design-block li{
        margin: 6px 0;
    }

    /* Поля формы: во всю ширину (глобально .floating-field = 60%) */
    #design .floating-field,
    #partners .floating-field{
        width: 100%;
    }

    #design .custom-input,
    #partners .custom-input{
        font-size: 15px;
        padding: 16px 0 6px;
    }

    /* Чекбокс: выравниваем по верху */
    #design .design-block .d-flex.align-items-center.gap-10,
    #partners .design-block .d-flex.align-items-center.gap-10{
        align-items: flex-start !important;
    }

    /* Кнопка: на всю ширину */
    #design .design-block button.btn,
    #partners .design-block button.btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Дизайн-проект + Партнёрство: mobile 425–767 */
@media (min-width: 425px) and (max-width: 767px){
    /* Делаем один столбец: картинка сверху, контент снизу */
    #design .design-block,
    #partners .design-block{
        display: flex !important; /* перебиваем возможные grid/другие правила */
        flex-direction: column;
        flex-wrap: nowrap !important; /* важно: иначе при column может "увести" 2-ю часть вправо */
        align-items: stretch;
        justify-content: flex-start !important;
        gap: 14px;
        margin: 28px 0px;
        height: auto !important;
        min-height: 0 !important;
    }

    /* На странице используется класс "justify-content" (не bootstrap).
       Если он задаёт space-between/center, появится огромная пустота между картинкой и текстом. */
    #design .design-block.justify-content.design-block,
    #partners .design-block.justify-content.design-block{
        justify-content: flex-start !important;
    }

    /* Bootstrap col-* внутри flex: растягиваем на всю ширину */
    #design .design-block > .col-5,
    #design .design-block > .col-7,
    #partners .design-block > .col-5,
    #partners .design-block > .col-7{
        width: 100% !important;
        max-width: 100% !important;
        /* Важно: НЕ ставим flex-basis:100% — при flex-direction:column это становится "высотой" и раздувает блок. */
        flex: 0 0 auto !important;
        min-width: 0;
    }

    /* Картинка: нормальная высота, без "полосы" слева */
    #design .design-block > .col-5,
    #partners .design-block > .col-5{
        /* Поведение как у "col-12 d-flex align-items-center" */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        height: auto !important;
    }

    #design #designImg,
    #partners #designImg{
        width: 100%;
        display: block;
        /* Важно: не даём картинке «съедать» весь экран на мобильных.
           Берём наименьшее из: ограничения по px, по ширине экрана и по высоте экрана. */
        height: min(240px, 42vw, 32vh);
        max-height: 240px;
        object-fit: cover;
        border-radius: 18px;
    }

    /* Правая часть: меньше паддинги (перебиваем p-5) */
    #design .design-block > .col-7,
    #partners .design-block > .col-7{
        padding: 16px !important;
        border-radius: 20px;
        border: 1px solid rgba(28, 50, 64, 0.12);
    }

    /* Текст/список: компактнее, чтобы не разъезжалось */
    #design .design-block ul,
    #partners .design-block ul{
        padding-left: 18px;
        margin: 10px 0 0;
    }

    #design .design-block li,
    #partners .design-block li{
        margin: 6px 0;
    }

    /* Поля формы: во всю ширину (глобально .floating-field = 60%) */
    #design .floating-field,
    #partners .floating-field{
        width: 100%;
    }

    #design .custom-input,
    #partners .custom-input{
        font-size: 15px;
        padding: 16px 0 6px;
    }

    /* Чекбокс: выравниваем по верху, чтобы текст не "прыгал" */
    #design .design-block .d-flex.align-items-center.gap-10,
    #partners .design-block .d-flex.align-items-center.gap-10{
        align-items: flex-start !important;
    }

    /* Кнопка: на всю ширину */
    #design .design-block button.btn,
    #partners .design-block button.btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Дизайн-проект + Партнёрство: tablet 768–1024 (включительно) */
@media (min-width: 768px) and (max-width: 1024px){
    /* Делаем аккуратную 2-колоночную раскладку без "пустоты" */
    #design .design-block,
    #partners .design-block{
        display: grid !important; /* перебиваем Bootstrap .d-flex */
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 20px;
        align-items: stretch;
        margin: 28px 0px;
    }

    /* Сбрасываем bootstrap-колонки внутри grid */
    #design .design-block > .col-5,
    #design .design-block > .col-7,
    #partners .design-block > .col-5,
    #partners .design-block > .col-7{
        width: auto;
        max-width: none;
        flex: initial;
        min-width: 0;
    }

    /* Контент справа: без белого фона — аккуратная панель на фоне секции */
    #design .design-block > .col-7,
    #partners .design-block > .col-7{
        padding: 22px !important; /* перебиваем p-5 */
        border-radius: 24px;
        background-color: transparent;
        box-shadow: none;
        border: 1px solid rgba(28, 50, 64, 0.12);
    }

    /* Картинка слева: фиксируем визуальный блок, чтобы он был равным карточке */
    #design .design-block > .col-5,
    #partners .design-block > .col-5{
        align-items: stretch !important;
    }

    #design #designImg,
    #partners #designImg{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    /* Заголовок/текст: плотнее и современнее */
    #design .text-24,
    #partners .text-24{
        font-size: 22px;
        line-height: 1.2;
    }

    #design .design-block > .col-7 > div:first-child,
    #partners .design-block > .col-7 > div:first-child{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #design ul,
    #partners ul{
        margin: 0;
        padding-left: 18px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Форма: нормальная ширина и выравнивание */
    #design .floating-field,
    #partners .floating-field{
        width: 100%;
    }

    #design .design-block .d-flex.flex-column.gap-20,
    #partners .design-block .d-flex.flex-column.gap-20{
        width: 100%;
        max-width: 520px;
        margin-top: 6px;
    }

    #design .design-block .d-flex.align-items-center.gap-10,
    #partners .design-block .d-flex.align-items-center.gap-10{
        align-items: flex-start;
    }

    #design .design-block .btn,
    #partners .design-block .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Партнёрство: по просьбе — вертикальная компоновка + ниже фото + без обводки у текста */
    #partners .design-block{
        display: flex !important; /* перебиваем grid выше */
        flex-direction: column;
        gap: 0;
        align-items: stretch;

        /* Единая карточка: фото + контент */
        max-width: min(780px, 100%);
        margin-inline: auto;
        background-color: #fff;
        border-radius: 24px;
        overflow: hidden;
    }

    #partners .design-block > .col-7{
        order: 2;
        padding: 18px 18px 20px !important;
        border: 0 !important;      /* убираем «обводку» */
        box-shadow: none !important;

        /* компактнее, чем исходные gap-10/p-5 */
        gap: 12px !important;
    }

    #partners .design-block > .col-5{
        order: 1;
        align-items: stretch !important;
        padding: 0 !important;
    }

    #partners #designImg{
        display: block;
        width: 100%;
        height: 220px;
        max-height: 220px;
        object-fit: cover;
        border-radius: 0;
        box-shadow: none;
    }

    /* Дизайн-проект: такой же стиль, как у «Партнёрство» (единая карточка) */
    #design .design-block{
        display: flex !important; /* перебиваем grid выше */
        flex-direction: column;
        gap: 0;
        align-items: stretch;

        max-width: min(780px, 100%);
        margin-inline: auto;
        background-color: #fff;
        border-radius: 24px;
        overflow: hidden;
    }

    #design .design-block > .col-5{
        order: 1;
        align-items: stretch !important;
        padding: 0 !important;
    }

    #design .design-block > .col-7{
        order: 2;
        padding: 18px 18px 20px !important;
        border: 0 !important;
        box-shadow: none !important;
        gap: 12px !important;
    }

    #design #designImg{
        display: block;
        width: 100%;
        height: 220px;
        max-height: 220px;
        object-fit: cover;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Hero заголовок: на 1024px не должен "заезжать" на картинку */
@media (max-width: 1199.98px) and (min-width: 1024px){
    .hero-content h1{
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.05;
        font-size: clamp(34px, 3.25vw, 52px);
    }
}

#MainImg{
    max-width: 450px;
    max-height: 450px;
}
/* Stack wheel behind the main image but keep main image in flow */
#MainImg {
    position: relative;
    z-index: 2;
    display: block;

    --parallax-x: 0px;
    --parallax-y: 0px;
    transform: translate(var(--parallax-x), var(--parallax-y));

    transition: transform 220ms ease, filter 220ms ease;
    will-change: transform;
}

#MainImg:hover{
    transform: translate(var(--parallax-x), var(--parallax-y)) translateY(-3px) scale(1.01);
    filter: brightness(1.02);
}

#Wheel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center;
    animation: wheel-spin 18s linear infinite;
    z-index: -100;
    pointer-events: none;
}

@keyframes wheel-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.reviews-block{
    /* Full-width slider even when nested inside .container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    height: max-content;
}

/* Override Swiper default overflow:hidden */
.reviews-block.swiper{
    overflow: visible;
}

.reviews{
    width: max-content;
    height: max-content;
    max-width: 300px;

    padding: 10px;
    border-radius: 10px;

    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

/* Review author avatar */
.reviews .IconReview{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.reviews-block .reviews:hover{
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.03);
}

/* Swiper: keep each slide as wide as the card (no full-width stretching) */
.reviews-block.swiper .swiper-slide{
    width: auto;
}

.gap-10{
    display: flex;
    gap: 10px;
}

.gap-20{
    display: flex;
    gap: 20px;
}

.text-overflow-3{
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.text-overflow-2{
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-block{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    height: 200px;
    padding: 20px;
    border-radius: 20px;

    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

.portfolio-block[role="button"]{
    cursor: pointer;
}

.portfolio-block[role="button"]:hover{
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.03);
}

.portfolio-block[role="button"]:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
    .portfolio-block{
        transition: none;
    }

    .portfolio-block[role="button"]:hover,
    .portfolio-block[role="button"]:active{
        transform: none;
        filter: none;
    }

    .reviews{
        transition: none;
    }

    .reviews-block .reviews:hover,
    .reviews-block .reviews:active{
        transform: none;
        filter: none;
    }

    .block-price{
        transition: none;
    }

    .block-plan-price{
        animation: none;
    }

    .block-price:hover,
    .block-price:active{
        transform: none;
        filter: none;
    }
}

/* Portfolio modal */
.portfolio-modal__dialog{
    max-width: min(70vw, 1100px);
}

.portfolio-modal__content{
    border-radius: 20px;
    color: #1C3240;
}

.portfolio-modal__body{
    display: flex;
    gap: 20px;
    height: 60vh;
    padding: 20px;
}

.portfolio-modal__left{
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.portfolio-modal__main-image{
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    border-radius: 20px;
    object-fit: cover;
}

.portfolio-modal__thumbs{
    width: 100%;
    flex: 0 0 auto;
    height: 90px; /* важно для Swiper: иначе блок может схлопнуться и миниатюры "наедут" на основное фото */
    min-height: 90px;
}

/* На некоторых брейкпоинтах/в модалках Swiper может некорректно посчитать размеры.
   Фиксируем базовую раскладку, чтобы миниатюры не накладывались друг на друга. */
.portfolio-modal__thumbs .swiper-wrapper{
    display: flex;
    align-items: stretch;
}

.portfolio-modal__thumb{
    height: 90px;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    cursor: pointer;
}

.portfolio-modal__thumb.is-active{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 2px;
}

.portfolio-modal__right{
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portfolio-modal__thumbs .swiper-slide{
    width: auto;
    height: 100%;
    flex: 0 0 auto;
}

.portfolio-modal__text{
    flex: 1;
    overflow-y: auto;
    color: rgba(28, 50, 64, 0.75);
    padding-right: 6px;
    padding-bottom: 24px; /* отступ внизу текста */
}

.portfolio-modal__text p.text-bold{
    color: #1C3240;
}

.portfolio-modal__cta{
    padding-top: 12px;
}

/* Calculator result modal (light) */
.calc-result-modal__dialog{
    max-width: min(92vw, 980px);
}

/* Bootstrap backdrop: всегда закрывает весь экран (фикс полосы справа при modal-open) */
.modal-backdrop{
    position: fixed;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Bootstrap modal: prevent page "jump" and right-side gap */
body.modal-open{
    padding-right: 0 !important;
}

.modal{
    padding-right: 0 !important;
}

.calc-result-modal__content{
    border-radius: 24px;
    overflow: hidden;
    border: 0;
    background-color: #fff;
}

.calc-result-modal__close{
    z-index: 2;
}

.calc-result-modal__body{
    display: flex;
    min-height: 460px;
}

.calc-result-modal__left{
    flex: 0 0 56%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calc-result-modal__right{
    flex: 0 0 44%;
}

.calc-result-modal__image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.calc-result-modal__title{
    margin: 0;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(32px, 3.2vw, 54px);
}

.calc-result-modal__accent{
    color: #1C3240;
}

.calc-result-modal__text{
    color: rgba(28, 50, 64, 0.75);
    max-width: 520px;
}

.calc-result-modal__estimate{
    max-width: 520px;
    border: 1px solid rgba(28, 50, 64, 0.18);
    background-color: rgba(28, 50, 64, 0.04);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calc-result-modal__estimate-top{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calc-result-modal__estimate-label{
    color: rgba(28, 50, 64, 0.72);
    font-weight: 500;
    font-size: 14px;
}

.calc-result-modal__estimate-total{
    color: #1C3240;
    font-weight: 900;
    line-height: 1.05;
    font-size: clamp(26px, 2.2vw, 34px);
}

.calc-result-modal__estimate-note{
    color: rgba(28, 50, 64, 0.62);
    font-size: 12px;
}

.calc-result-modal__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calc-result-modal__chip{
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(28, 50, 64, 0.18);
    background-color: rgba(255, 255, 255, 0.9);
    color: rgba(28, 50, 64, 0.86);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.calc-result-modal__form{
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 520px;
}

.calc-result-modal__input{
    width: 100%;
    border: 1px solid rgba(28, 50, 64, 0.25);
    border-radius: 999px;
    padding: 14px 18px;
    font-size: 16px;
    outline: none;
    background-color: #fff;
}

.calc-result-modal__input:focus{
    border-color: rgba(28, 50, 64, 0.55);
    box-shadow: 0 0 0 3px rgba(28, 50, 64, 0.12);
}

.calc-result-modal__btn{
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 14px 18px;
    background-color: #1C3240;
    color: #fff;
    font-weight: 700;
}

.calc-result-modal__btn:hover{
    filter: brightness(1.05);
}

/* Small "OK / sent" modal */
.ok-modal__dialog{
    max-width: min(92vw, 440px);
}

.ok-modal__content{
    border-radius: 18px;
    border: 0;
    background-color: #fff;
    overflow: hidden;
}

.ok-modal__close{
    z-index: 2;
}

.ok-modal__body{
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.ok-modal__icon{
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background-color: rgba(28, 50, 64, 0.06);
    border: 1px solid rgba(28, 50, 64, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ok-modal__icon img{
    width: 20px;
    height: 20px;
    display: block;
}

.ok-modal__title{
    margin: 0;
    font-weight: 900;
    line-height: 1.1;
    color: #1C3240;
    font-size: 26px;
}

.ok-modal__text{
    margin: 0;
    color: rgba(28, 50, 64, 0.72);
    max-width: 360px;
}

/* Calculator result modal: tablet 768–1024 (включительно) */
@media (min-width: 768px) and (max-width: 1024px){
    .calc-result-modal__dialog{
        max-width: min(92vw, 920px);
    }

    .calc-result-modal__content{
        border-radius: 22px;
    }

    /* На tablet делаем 2 колонки (перебиваем max-width:991px где оно в колонку) */
    .calc-result-modal__body{
        display: flex;
        flex-direction: row !important;
        align-items: stretch;
        min-height: 420px;
    }

    .calc-result-modal__left{
        flex: 0 0 56% !important;
        padding: 26px;
        gap: 12px;
    }

    .calc-result-modal__right{
        flex: 0 0 44% !important;
        display: block !important;
        height: auto !important;
        min-height: 420px;
        overflow: hidden;
        border-left: 1px solid rgba(28, 50, 64, 0.10);
    }

    .calc-result-modal__image{
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .calc-result-modal__title{
        font-size: clamp(26px, 3.0vw, 40px);
        line-height: 1.08;
    }

    .calc-result-modal__text{
        font-size: 14px;
        line-height: 1.35;
        max-width: none;
    }

    .calc-result-modal__form{
        gap: 12px;
        max-width: none;
    }

    .calc-result-modal__input{
        padding: 12px 16px;
        font-size: 15px;
    }

    .calc-result-modal__btn{
        padding: 12px 16px;
        font-size: 15px;
    }

    .calc-result-modal__close{
        margin: 14px !important;
    }
}

@media (max-width: 991px){
    .calc-result-modal__body{
        flex-direction: column;
        min-height: 0;
    }

    .calc-result-modal__left{
        flex: 0 0 auto;
        padding: 26px;
    }

    .calc-result-modal__right{
        flex: 0 0 auto;
        height: 240px;
    }
}

@media (max-width: 991px){
    .portfolio-modal__dialog{
        max-width: 95vw;
    }

    .portfolio-modal__body{
        flex-direction: column;
        height: 85vh;
    }

    .portfolio-modal__left,
    .portfolio-modal__right{
        flex: 0 0 auto;
    }

    .portfolio-modal__right{
        height: 35vh;
    }
}

/* Portfolio modal: mobile 0–424 (целевой диапазон 375–424) */
@media (max-width: 424.98px){
    .portfolio-modal__dialog{
        max-width: 96vw;
        margin: 0.6rem auto;
    }

    .portfolio-modal__content{
        border-radius: 16px;
    }

    .portfolio-modal__content .btn-close{
        margin: 10px !important;
        z-index: 3;
    }

    .portfolio-modal__body{
        gap: 10px;
        height: min(90vh, 680px);
        padding: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .portfolio-modal__left{
        gap: 8px;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
    }

    .portfolio-modal__main-image{
        border-radius: 12px;
        height: min(48vh, 360px);
        flex: 0 0 auto;
    }

    .portfolio-modal__thumbs{
        height: 60px;
        min-height: 60px;
    }

    .portfolio-modal__thumb{
        height: 60px;
        border-radius: 10px;
    }

    .portfolio-modal__right{
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        gap: 8px;
        width: 100%;
    }

    .portfolio-modal__text{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 6px;
        padding-bottom: 10px;
        font-size: 13px;
        line-height: 1.35;
    }

    .portfolio-modal__cta{
        flex: 0 0 auto;
        padding-top: 2px;
    }

    .portfolio-modal__cta .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Portfolio + Calculator modals: mobile 425–767 */
@media (min-width: 425px) and (max-width: 767px){
    /* Portfolio modal: компактнее и без “кирпича” */
    .portfolio-modal__dialog{
        max-width: 96vw;
        margin: 0.75rem auto;
    }

    .portfolio-modal__content{
        border-radius: 18px;
    }

    .portfolio-modal__content .btn-close{
        margin: 12px !important;
        z-index: 3;
    }

    .portfolio-modal__body{
        gap: 12px;
        height: min(86vh, 720px);
        padding: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .portfolio-modal__left{
        gap: 10px;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
    }

    .portfolio-modal__main-image{
        border-radius: 14px;
        /* оставляем место под описание + кнопку */
        height: min(42vh, 420px);
        flex: 0 0 auto;
    }

    .portfolio-modal__thumbs{
        height: 68px;
        min-height: 68px;
    }

    .portfolio-modal__thumb{
        height: 68px;
        border-radius: 10px;
    }

    .portfolio-modal__right{
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        gap: 10px;
        width: 100%;
    }

    .portfolio-modal__text{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 6px;
        padding-bottom: 6px;
    }

    .portfolio-modal__cta{
        flex: 0 0 auto;
        padding-top: 4px;
    }

    .portfolio-modal__cta .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Calculator result modal: более компактный отступ и высота картинки */
    .calc-result-modal__dialog{
        max-width: 96vw;
    }

    .calc-result-modal__content{
        border-radius: 18px;
    }

    .calc-result-modal__left{
        padding: 18px;
        gap: 10px;
    }

    .calc-result-modal__title{
        font-size: clamp(22px, 6.2vw, 34px);
    }

    .calc-result-modal__text{
        font-size: 13px;
        line-height: 1.35;
    }

    .calc-result-modal__right{
        height: 200px;
    }
}

/* Portfolio modal: tablet 768–1024 (включительно) */
@media (min-width: 768px) and (max-width: 1024px){
    .portfolio-modal__dialog{
        max-width: min(92vw, 920px);
    }

    .portfolio-modal__body{
        display: grid;
        grid-template-columns: 1.35fr 0.9fr;
        gap: 16px;
        height: 78vh;
        padding: 16px;
    }

    .portfolio-modal__left,
    .portfolio-modal__right{
        min-width: 0;
    }

    .portfolio-modal__left{
        height: 100%;
        min-height: 0;
    }

    /* Фото + миниатюры */
    .portfolio-modal__main-image{
        flex: 1 1 0;
        min-height: 0;
        height: auto;
    }

    .portfolio-modal__thumbs{
        height: 78px;
        min-height: 78px;
    }

    .portfolio-modal__thumb{
        height: 78px;
        border-radius: 10px;
    }

    .portfolio-modal__right{
        height: 100%;
        min-height: 0;
    }

    .portfolio-modal__text{
        flex: 1 1 0;
        min-height: 0;
        padding-right: 8px;
        padding-bottom: 14px;
    }

    .portfolio-modal__cta{
        padding-top: 10px;
    }

    /* Кнопка: ровная, на всю ширину, без «уезда» */
    .portfolio-modal__cta .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Этапы работы: mobile 425–767 (редизайн, без изменения разметки) */
@media (min-width: 425px) and (max-width: 767px){
    /* Секция: меньше воздуха, чтобы не казалось «простынёй» */
    #stages .plan-block{
        margin: 56px 0px !important; /* перебиваем .plan-block{ margin:100px 0 } */
        gap: 16px;
    }

    /* 4 шага: сетка 2×2 вместо вертикального списка */
    #stages .justify-contents{
        display: grid !important; /* перебиваем Bootstrap .d-flex */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
        width: 100%;
    }

    #stages .justify-contents > .col-3{
        width: auto;
        max-width: none !important;
        flex: initial !important;
    }

    #stages .select-block,
    #stages .nonselect-block{
        border-radius: 16px;
        padding: 14px 14px 12px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #stages .nonselect-block{
        background-color: #fff;
        border: 1px solid rgba(28, 50, 64, 0.12);
    }

    #stages .select-block{
        background-color: #1C3240;
    }

    /* Номер шага: меньше и аккуратнее */
    #stages .justify-contents .text-64{
        font-size: 44px !important;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    /* Подпись: компактно, без «наезда» */
    #stages .justify-contents p:last-child{
        font-size: 13px;
        line-height: 1.3;
    }

    /* Нижние карточки (тёмный контейнер): вертикально и читабельно */
    #stages .back-border{
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        border-radius: 16px;
    }

    #stages .back-border .inside-border{
        padding: 14px;
        border-radius: 14px;
        height: auto;
    }

    #stages .inside-border p{
        font-size: 13px;
        line-height: 1.3;
    }
}

#Portfolio-1 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#Portfolio-2 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#Portfolio-3 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#Portfolio-4 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#Portfolio-5 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-5.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#Portfolio-6 {
  background:
    linear-gradient(
      rgba(28, 50, 64, 0.8),
      rgba(28, 50, 64, 0.8)
    ),
    url('/img/Portfolio/Portfolio-6.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.Location{
    height: 20px;
    width: 15px;
}

.text-white{
    color: white;
}
    
.text-12{
    font-size: 12px;
}

.text-20{
    font-size: 20px;
}

.text-24{
    font-size: 24px;
}

.text-28{
    font-size: 28px;
}


.text-36{
    font-size: 36px;
}

.text-64{
    font-size: 64px;
}

.text-bold{
    font-weight: 700;
}

.block-plan-price{
    height: max-content;
}

.block-price{
    max-width: 80%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    gap: 10px;
    border-radius: 20px;

    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

@keyframes float-levitation{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}

/* Прайс: левитация «в разнобой» */
.block-plan-price{
    animation: float-levitation var(--float-duration, 3.8s) ease-in-out infinite;
    will-change: transform;
}

.block-plan-price:nth-child(1){
    --float-duration: 4.1s;
    animation-delay: -0.6s;
}

.block-plan-price:nth-child(2){
    --float-duration: 3.6s;
    animation-delay: -1.3s;
}

.block-plan-price:nth-child(3){
    --float-duration: 4.4s;
    animation-delay: -0.9s;
}

/* Прайс: анимация при наведении */
.block-price:hover{
    transform: translateY(-6px) scale(1.015);
    filter: brightness(1.02);
}

.decor-line{
    width: 100%;
    border-bottom: 2px solid #1C3240;
}

.CheckSelect{
    width: 20px;
    height: 20px;
}

#center-block-price{
    max-width: 100% !important;
    width: 100%;

    background-color: #1C3240;
}

.btn{
    /* Базовые цвета кнопок + защита от Bootstrap active-стилей (когда при нажатии фон/текст "вспыхивает" белым). */
    --impuls-btn-bg: #1C3240;
    --impuls-btn-hover-bg: #243F4F;

    /* Bootstrap 5 использует эти переменные в :active/.active и btn-check переключателях */
    --bs-btn-bg: var(--impuls-btn-bg);
    --bs-btn-active-bg: var(--impuls-btn-bg);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-btn-color: currentColor;
    --bs-btn-active-color: currentColor;

    border-radius: 10px;
    background-color: var(--impuls-btn-bg);
    width: max-content;
    padding: 10px 20px;

    transition: transform 180ms ease, box-shadow 180ms ease;
    will-change: transform;
    cursor: pointer;
}

.btn:hover{
    transform: translateY(-2px);
    background-color: var(--impuls-btn-hover-bg);
    box-shadow: 0 10px 30px rgba(28, 50, 64, 0.22);
}

/* Убираем смену цвета при нажатии (в т.ч. перебиваем Bootstrap .btn:active).
   На десктопе (есть hover) активное состояние не должно отличаться от hover.
   На тач-устройствах (hover отсутствует) активное состояние не должно отличаться от базового. */
@media (hover: hover){
    .btn:active,
    .btn.active,
    .show > .btn.dropdown-toggle,
    .btn-check:checked + .btn,
    .btn-check:active + .btn{
        background-color: var(--impuls-btn-hover-bg);
        box-shadow: 0 10px 30px rgba(28, 50, 64, 0.22);
    }
}

@media (hover: none){
    .btn:active,
    .btn.active,
    .show > .btn.dropdown-toggle,
    .btn-check:checked + .btn,
    .btn-check:active + .btn{
        background-color: var(--impuls-btn-bg);
        box-shadow: none;
    }
}

.btn:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
}

/* Цитата/выделение (не кнопка) */
.quote-highlight{
    margin-top: 18px;
    border-radius: 10px;
    background-color: #1C3240;
    color: #fff;
    width: max-content;
    padding: 10px 20px;
    font-weight: 600;
}

.mar-40-0{
    margin: 40px 0px;
}

.gray{
    background-color: rgba(28, 50, 64, 0.1);
}

#designImg{
    border-radius: 20px;
    width: 100%;

    transition: transform 220ms ease, filter 220ms ease;
    will-change: transform;
}

#designImg:hover{
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.02);
}

/* Стили для блоков калькулятора */
.calc-block {
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    height: 280px;
}

/* Calculator wizard */
.calc-wizard{
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.calc-steps{
    flex: 1;
    min-width: 0;
    position: relative;
    min-height: 360px; /* чтобы блок не уменьшался при переключении шагов */
}

.calc-step{
    display: none;
}

.calc-step.is-active{
    display: block;
}

/* Центруем шаги, где мало вариантов (чтобы не прилипало влево/вверх) */
.calc-step[data-step="area"].is-active,
.calc-step[data-step="segment"].is-active{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.calc-step > p.text-bold.text-24{
    text-align: center;
    width: 100%;
}

.calc-options-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    max-width: 860px;
    margin-inline: auto;
    justify-content: center;
}

.calc-options-row--three .calc-choice{
    flex: 1 1 0;
    min-width: 220px;
}

.calc-choice--small{
    height: 220px;
}

.calc-choice[role="button"],
.calc-chip[role="button"]{
    cursor: pointer;
}

.calc-choice{
    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

.calc-choice:hover{
    transform: translateY(-4px) scale(1.01);
    filter: brightness(1.03);
}

.calc-choice.is-selected{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
}

.calc-choice:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
}

.calc-area-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
    max-width: 860px;
    margin-inline: auto;
}

.calc-chip{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    padding: 18px 18px;
    min-width: 92px;
    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
    user-select: none;
    min-height: 64px;
    font-size: 18px;
}

.calc-chip--wide{
    grid-column: 1 / -1;
}

/* Центруем сетку и делаем “аккуратную” ширину */
/* Площадь + кастомный ввод */
.calc-custom-area{
    margin-top: 16px;
    max-width: 420px;
    margin-inline: auto;
}

.calc-step .floating-field{
    width: 100%;
}

.calc-step .custom-input{
    width: 100%;
}

/* Вариант отделки и сегмент — более крупные карточки */
.calc-step[data-step="finish"] .calc-area-grid,
.calc-step[data-step="segment"] .calc-area-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-width: 640px;
}

.calc-step[data-step="finish"] .calc-chip,
.calc-step[data-step="segment"] .calc-chip{
    padding: 18px 20px;
    min-width: 180px;
    border-radius: 20px;
    font-weight: 600;
}

.calc-chip:hover{
    transform: translateY(-3px);
    filter: brightness(1.02);
}

.calc-chip.is-selected{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 3px;
}

.calc-chip:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 3px;
}

.calc-nav{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 72px;
    flex: 0 0 auto;
}

.calc-nav-btn{
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    background-color: #1C3240;
    color: white;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.calc-nav-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.calc-nav-btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.calc-nav-btn:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
}

@media (max-width: 991px){
    .calc-wizard{
        flex-direction: column;
    }

    .calc-nav{
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
    }

    .calc-steps{
        min-height: 420px;
    }

    .calc-area-grid{
        max-width: 100%;
    }
}

/* Калькулятор: mobile 425–767 — 1 колонка, меньше пустоты, навигация по центру */
@media (max-width: 424.98px){
    #calculator.mar-40-0{
        margin: 22px 0;
    }

    #calculator .row.py-5{
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    #calculator .base-block.mb-5{
        margin-bottom: 12px !important;
        padding: 10px 12px;
        text-align: center;
    }

    #calculator .calc-wizard{
        gap: 12px;
    }

    /* На mobile убираем искусственную «высоту» — она даёт пустоту под контентом */
    #calculator .calc-steps{
        min-height: 0 !important;
    }

    /* Карточки выбора: одна колонка */
    #calculator .calc-options-row{
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 500px;
        width: 100%;
        justify-content: initial;
    }

    /* Перебиваем базовое min-width:220px, которое может оставлять 2 карточки в ряд */
    #calculator .calc-options-row--three .calc-choice{
        min-width: 0 !important;
    }

    #calculator .calc-block{
        height: 190px;
        border-radius: 16px;
    }

    #calculator .description-calc{
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 0 0 16px 16px;
    }

    #calculator .description-calc p{
        font-size: 12px;
        line-height: 1.15;
    }

    /* Кнопки навигации: по центру, аккуратный размер */
    #calculator .calc-nav{
        justify-content: center;
        gap: 12px;
    }

    #calculator .calc-nav-btn{
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
}

@media (min-width: 425px) and (max-width: 767px){
    #calculator.mar-40-0{
        margin: 28px 0;
    }

    #calculator .row.py-5{
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    #calculator .base-block.mb-5{
        margin-bottom: 14px !important;
        padding: 12px 14px;
        text-align: center;
    }

    #calculator .calc-wizard{
        gap: 14px;
    }

    /* На mobile убираем искусственную «высоту» — она даёт пустоту под контентом */
    #calculator .calc-steps{
        min-height: 0 !important;
    }

    /* Карточки выбора: одна колонка, чтобы ничего не сжималось */
    #calculator .calc-options-row{
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 520px;
        width: 100%;
        justify-content: initial;
    }

    /* Перебиваем базовое min-width:220px, которое может оставлять 2 карточки в ряд */
    #calculator .calc-options-row--three .calc-choice{
        min-width: 0 !important;
    }

    #calculator .calc-block{
        height: 210px;
        border-radius: 18px;
    }

    #calculator .description-calc{
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 0 0 18px 18px;
    }

    #calculator .description-calc p{
        font-size: 12px;
        line-height: 1.15;
    }

    /* Кнопки навигации: по центру, аккуратный размер */
    #calculator .calc-nav{
        justify-content: center;
        gap: 14px;
    }

    #calculator .calc-nav-btn{
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
}

/* Калькулятор: tablet (768–1024) — аккуратная сетка + меньше пустоты */
@media (min-width: 768px) and (max-width: 1024px){
    /* Секция в целом: меньше воздуха сверху/снизу */
    #calculator.mar-40-0{
        margin: 28px 0;
    }

    #calculator .row.py-5{
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    #calculator .base-block.mb-5{
        margin-bottom: 18px !important;
        padding: 12px 18px;
    }

    #calculator .calc-wizard{
        gap: 16px;
        position: relative;
    }

    /* Высота не должна «прыгать» между шагами */
    #calculator .calc-steps{
        min-height: 290px !important;
    }

    /* Резервируем место под кнопки навигации (они будут поверх, а не отдельной строкой)
       На шаге «Площадь» это создаёт нормальный отступ от поля ввода до кнопок. */
    #calculator .calc-step.is-active{
        padding-bottom: 84px;
    }

    #calculator .calc-step > p.text-bold.text-24{
        margin-top: 6px;
    }

    /* Карточки выбора — сетка вместо растянутого flex */
    #calculator .calc-options-row{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
        max-width: 820px;
        width: 100%;
        justify-content: initial;
    }

    #calculator .calc-block{
        height: 220px;
        border-radius: 18px;
    }

    #calculator .calc-choice--small{
        height: 200px;
    }

    /* Подписи на карточках — компактнее, чтобы всё влезало */
    #calculator .description-calc{
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 0 0 18px 18px;
    }

    #calculator .description-calc p{
        font-size: 12px;
        line-height: 1.15;
    }

    /* Сегмент: 3 карточки в ряд (делаем их меньше) */
    #calculator .calc-step[data-step="segment"] .calc-options-row{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        max-width: 860px;
    }

    #calculator .calc-step[data-step="segment"] .calc-options-row--three .calc-choice{
        min-width: 0 !important; /* перебиваем .calc-options-row--three .calc-choice{ min-width: 220px } */
    }

    #calculator .calc-step[data-step="segment"] .calc-block{
        height: 170px;
    }

    #calculator .calc-step[data-step="finish"] .calc-block{
        height: 190px;
    }

    /* Навигация — по центру под карточками, без «уезда» вправо */
    #calculator .calc-nav{
        position: absolute;
        left: 50%;
        bottom: 4px;
        transform: translateX(-50%);
        width: auto;
        justify-content: center;
        gap: 12px;
        z-index: 2;
    }

    #calculator .calc-nav-btn{
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

/* Калькулятор: 1024px (и близко) — фикс навигации.
   В режиме tablet nav был absolute и попадал между карточками; возвращаем в поток и делаем горизонтально. */
@media (min-width: 992px) and (max-width: 1024px){
    #calculator .calc-step.is-active{
        padding-bottom: 0;
    }

    #calculator .calc-wizard{
        flex-direction: column;
    }

    #calculator .calc-nav{
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        margin-top: 12px;
    }
}

@media (max-width: 767px){
    .calc-area-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px){
    .calc-area-grid{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* Сегмент: ровно 3 карточки без пустых колонок */
    .calc-step[data-step="segment"] .calc-area-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 991px){
    .calc-step[data-step="segment"] .calc-area-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 520px;
    }
}

@media (prefers-reduced-motion: reduce){
    .calc-choice,
    .calc-chip,
    .calc-nav-btn{
        transition: none;
    }

    .calc-choice:hover,
    .calc-choice:active,
    .calc-chip:hover,
    .calc-chip:active,
    .calc-nav-btn:hover,
    .calc-nav-btn:active{
        transform: none;
        filter: none;
    }
}

/* Стили для input с линией снизу */
.floating-field{
    position: relative;
    width: 60%;
}

.custom-input {
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    outline: none;
    padding: 18px 0 6px;
    font-size: 16px;
    width: 100%;
}

.custom-input:focus {
    border-bottom: 1px solid #1C3240;
}

.floating-label{
    position: absolute;
    left: 0;
    top: 18px;
    color: #666;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 180ms ease, color 180ms ease, font-size 180ms ease, top 180ms ease;
}

/* Поднимаем placeholder-текст вверх при фокусе и когда поле не пустое */
.floating-field .custom-input:focus + .floating-label,
.floating-field .custom-input:not(:placeholder-shown) + .floating-label{
    top: 0;
    font-size: 12px;
    color: #1C3240;
}

@media (prefers-reduced-motion: reduce){
    .floating-label{
        transition: none;
    }
}

.custom-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.MainText{
    width: 60%;
}

.select-block{
    height: max-content;
    border-radius: 20px 20px 0px 0px;
    padding: 15px 30px 15px 30px;
    background-color: #1C3240;
}

.nonselect-block{
    height: max-content;
    border-radius: 20px 20px 0px 0px;
    padding: 15px 30px 15px 30px;
}

.back-border{
    padding: 20px;
    background-color: #1C3240;
    border-radius: 20px;
}

.inside-border{
    background-color: white;
    padding: 20px;
    border-radius: 10px;

    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

.inside-border:hover{
    transform: translateY(-3px);
    filter: brightness(1.02);
}

.description-calc{
    width: 100%;
    border-radius: 0px 0px 20px 20px;
    min-height: 50px;
    height: max-content;
    text-align: center;
    padding: 10px;
    background-color: #1C3240;
}

#Jane{
    max-height: 380px;
    border-radius: 20px;

    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;

    transition: transform 220ms ease, filter 220ms ease;
    will-change: transform;
}

/* О нас: на 1024–1440 фиксируем сетку, чтобы фото не наезжало на текст */
@media (max-width: 1440px) and (min-width: 1024px){
    #about .o-nas-block{
        align-items: stretch;
    }

    #about .o-nas-block > .col-3{
        flex: 0 0 320px;
        max-width: 320px;
    }

    #about .o-nas-block > .col-9{
        flex: 1 1 auto;
        max-width: none;
        min-width: 0; /* даём тексту нормально переноситься */
    }
}

/* О нас: tablet 768–1024 (включительно) — компактнее и без «пустоты» снизу */
@media (min-width: 768px) and (max-width: 1024px){
    #about .o-nas-block{
        align-items: flex-start; /* не растягиваем текстовую колонку по высоте фото */
        gap: 18px;
        margin: 28px 0;
    }

    #about .o-nas-block > .col-3{
        flex: 0 0 260px;
        max-width: 260px;
    }

    #about .o-nas-block > .col-9{
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;

        /* Bootstrap: .justify-content-between = space-between !important */
        justify-content: flex-start !important;
        gap: 14px;
    }

    /* Убираем слишком большой вертикальный паддинг внутри текстовой колонки */
    #about .o-nas-block > .col-9.pp-5{
        padding: 0 !important;
    }

    /* Внутренний блок с заголовком и текстом — аккуратные расстояния */
    #about .o-nas-block > .col-9 > .d-flex.flex-column{
        gap: 10px;
    }

    /* Цитата: без дополнительного margin-top (расстояние даёт gap) */
    #about .quote-highlight{
        margin-top: 0;
    }

    #about #Jane{
        max-height: 320px;
        height: auto;
        border-radius: 18px;
    }
}

/* О нас: mobile 425–767 — одна колонка + аккуратные отступы */
@media (max-width: 424.98px){
    #about .o-nas-block{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 22px 0;
    }

    #about .o-nas-block > .col-3,
    #about .o-nas-block > .col-9{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0;
    }

    /* Фото: по центру и компактнее */
    #about .o-nas-block > .col-3{
        display: flex;
        justify-content: center;
    }

    #about #Jane{
        width: 100%;
        max-width: 220px;
        max-height: 220px;
        height: auto;
        border-radius: 16px;
        object-fit: cover;
    }

    /* Текстовая колонка: убираем вертикальный pp-5 и делаем ровный gap */
    #about .o-nas-block > .col-9{
        justify-content: flex-start !important;
        gap: 10px;
    }

    #about .o-nas-block > .col-9.pp-5{
        padding: 0 !important;
    }

    #about .o-nas-block > .col-9 > .d-flex.flex-column{
        gap: 10px;
    }

    /* Цитата-пилюля: не вылезает за экран */
    #about .quote-highlight{
        margin-top: 0;
        align-self: center;
        text-align: center;
        max-width: 100%;
        white-space: normal;
    }
}

@media (min-width: 425px) and (max-width: 767px){
    #about .o-nas-block{
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin: 28px 0;
    }

    #about .o-nas-block > .col-3,
    #about .o-nas-block > .col-9{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0;
    }

    /* Фото: по центру и без гигантской высоты */
    #about .o-nas-block > .col-3{
        display: flex;
        justify-content: center;
    }

    #about #Jane{
        width: 100%;
        max-width: 260px;
        max-height: 260px;
        height: auto;
        border-radius: 18px;
        object-fit: cover;
    }

    /* Текстовая колонка: убираем вертикальный pp-5 и делаем ровный gap */
    #about .o-nas-block > .col-9{
        justify-content: flex-start !important;
        gap: 12px;
    }

    #about .o-nas-block > .col-9.pp-5{
        padding: 0 !important;
    }

    #about .o-nas-block > .col-9 > .d-flex.flex-column{
        gap: 10px;
    }

    #about .quote-highlight{
        margin-top: 0;
        align-self: center;
        text-align: center;
    }
}

#Jane:hover{
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.02);
}

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }

    .hashtag-block,
    #MainImg,
    .btn,
    #designImg,
    .inside-border,
    #Jane{
        transition: none;
    }

    .hashtag-block:hover,
    .hashtag-block:active,
    #MainImg:hover,
    .btn:hover,
    .btn:active,
    #designImg:hover,
    .inside-border:hover,
    .inside-border:active,
    #Jane:hover{
        transform: none;
        filter: none;
    }
}

.pp-5{
    padding: 5% 0px;
}

.footer-block{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    border-radius: 20px;
    padding: 40px;
}

.grey-text{
    color: #D1D5DB;
}

.IconMessengers{
    width: 40px;
    height: 40px;
}

/* Footer navigation links */
.footer-nav{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-nav-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: baseline;
}

.footer-nav-link{
    position: relative;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.footer-nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 100%;
    background: rgba(28, 50, 64, 0.55);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}

@keyframes footer-wiggle{
    0%{ transform: translateY(0) rotate(0deg); }
    25%{ transform: translateY(-1px) rotate(-2deg); }
    50%{ transform: translateY(0) rotate(2deg); }
    75%{ transform: translateY(-1px) rotate(-1deg); }
    100%{ transform: translateY(0) rotate(0deg); }
}

.footer-nav-link:hover{
    animation: footer-wiggle 420ms ease-in-out 1;
}

.footer-nav-link:hover::after{
    transform: scaleX(1);
}

.footer-nav-link:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
    border-radius: 6px;
}

.footer-nav-sep{
    color: rgba(28, 50, 64, 0.55);
}

/* Footer contacts: не даём телефону/времени переноситься и уходить за экран */
#contacts .contact-phone,
#contacts .contact-time{
    white-space: nowrap;
    max-width: 100%;
    font-size: clamp(18px, 2.2vw, 28px);
    line-height: 1.15;
}

/* Phone is now a link: keep same look */
#contacts a.contact-phone{
    color: inherit;
    text-decoration: none;
    font-weight: 100;
}

#contacts a.contact-phone:hover{
    text-decoration: none;
}

#contacts a.contact-phone:focus-visible{
    outline: 2px solid rgba(28, 50, 64, 0.35);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Адрес/офис: не растягиваем колонку шире контейнера */
#contacts .contact-office{
    width: 100%;
    max-width: 100%;
}

#contacts .contact-office p{
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Footer: mobile 375–424 */
@media (max-width: 424.98px){
    /* col-9/col-3 без брейкпоинтов остаются 75/25 — на 375px ломает. */
    #contacts > .row{
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    #contacts > .row > .col-9,
    #contacts > .row > .col-3{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    #contacts > .row > .col-9{
        gap: 10px;
    }

    #contacts > .row > .col-9 h1{
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1.05;
        margin-bottom: 6px;
    }

    #contacts .contact-phone,
    #contacts .contact-time{
        white-space: normal;
        font-size: clamp(18px, 6.2vw, 24px);
    }

    #contacts > .row > .col-3{
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Навигация: оставляем разделители "/" и перенос строк */
    .footer-nav-row{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
    }

    .footer-nav-sep{
        display: inline;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Не показываем завершающий разделитель в конце строки */
    .footer-nav-row > .footer-nav-sep:last-child{
        display: none;
    }

    /* Нижний белый блок: в колонку, без переполнения */
    .footer-block{
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-radius: 16px;
    }

    .footer-block > .d-flex.gap-20{
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    .footer-block > .d-flex.gap-20 > .d-flex{
        min-width: 0;
    }

    .footer-block #logo{
        width: 52px;
        height: 52px;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .footer-block > .d-flex.gap-10{
        justify-content: flex-start;
    }

    .IconMessengers{
        width: 34px;
        height: 34px;
    }
}

/* Footer: mobile 425–767 */
@media (min-width: 425px) and (max-width: 767px){
    /* col-9/col-3 в футере без брейкпоинтов — на mobile они остаются 75/25.
       Переводим в один столбец. */
    #contacts > .row{
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
    }

    #contacts > .row > .col-9,
    #contacts > .row > .col-3{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* Верхняя часть: выравнивание и переносы */
    #contacts > .row > .col-9{
        gap: 10px;
    }

    #contacts .contact-phone,
    #contacts .contact-time{
        white-space: normal;
        font-size: clamp(18px, 5.2vw, 24px);
    }

    #contacts > .row > .col-3{
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Навигация: показываем разделители "/" и даём перенос строк */
    .footer-nav-row{
        flex-wrap: wrap;
        gap: 10px;
        align-items: baseline;
    }

    .footer-nav-sep{
        display: inline;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Не показываем завершающий разделитель в конце строки */
    .footer-nav-row > .footer-nav-sep:last-child{
        display: none;
    }

    /* Нижний белый блок: в колонку и меньше паддинги */
    .footer-block{
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
        border-radius: 18px;
    }

    .footer-block > .d-flex{
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    .IconMessengers{
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce){
    .footer-nav-link{
        animation: none !important;
    }

    .footer-nav-link::after{
        transition: none;
    }
}


@media(max-width: 1440px) and (min-width: 1024px){
    .h1, h1 {
        font-size: 3.1rem;
        font-weight: 900;
    }

    /* Портфолио: чтобы текст не вылезал на 1024–1440 */
    #portfolio .portfolio-block{
        height: 220px;
        padding: 16px;
        font-size: 15px;
        line-height: 1.15;
    }

    #portfolio .portfolio-block .text-20{ font-size: 18px; }

    /* Заголовок проекта (2 строки максимум) */
    #portfolio .portfolio-block p.text-20.text-bold{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Адрес (2 строки максимум) */
    #portfolio .portfolio-block .Location + p{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Портфолио: mobile 0–424 (целевой диапазон 375–424) */
@media (max-width: 424.98px){
    /* Переводим разрозненные flex/col-* блоки в понятную колонку */
    #portfolio > .row.gap-10{
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;

        padding-left: 8px;
        padding-right: 8px;
    }

    /* Внутренние .col-12.gap-10 нужны только для группировки на десктопе */
    #portfolio > .row.gap-10 > .col-12.gap-10{
        display: contents;
    }

    /* Сбрасываем ширины bootstrap-колонок внутри grid */
    #portfolio .portfolio-block{
        width: 100%;
        max-width: none;

        height: clamp(150px, 54vw, 200px);
        padding: 12px;
        border-radius: 18px;

        gap: 6px;

        font-size: 12px;
        line-height: 1.2;

        overflow: hidden; /* ключевое: текст не должен вылезать и наезжать на соседей */
    }

    #portfolio .portfolio-block .text-20{ font-size: 14px; }

    /* Заголовок проекта (2 строки максимум) */
    #portfolio .portfolio-block p.text-20.text-bold{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Адрес (2 строки максимум) */
    #portfolio .portfolio-block .Location + p{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #portfolio .portfolio-block .Location{
        flex: 0 0 auto;
    }
}

/* Портфолио: mobile 425–767 */
@media (min-width: 425px) and (max-width: 767px){
    /* Переводим разрозненные flex/col-* блоки в понятную колонку */
    #portfolio > .row.gap-10{
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: stretch;

        /* Чуть воздуха по краям, чтобы блоки не прилипали */
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Внутренние .col-12.gap-10 нужны только для группировки на десктопе */
    #portfolio > .row.gap-10 > .col-12.gap-10{
        display: contents;
    }

    /* Сбрасываем ширины bootstrap-колонок внутри grid */
    #portfolio .portfolio-block{
        width: 100%;
        max-width: none;

        /* Не даём карточкам становиться «толстыми» на мобилках */
        height: clamp(160px, 42vw, 210px);
        padding: 12px;
        border-radius: 18px;

        /* Небольшие расстояния между строками контента */
        gap: 6px;

        font-size: 12.5px;
        line-height: 1.2;

        overflow: hidden; /* ключевое: текст не должен вылезать и наезжать на соседей */
    }

    #portfolio .portfolio-block .text-20{ font-size: 15px; }

    /* Заголовок проекта (2 строки максимум) */
    #portfolio .portfolio-block p.text-20.text-bold{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Адрес (2 строки максимум) */
    #portfolio .portfolio-block .Location + p{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Иконка адреса не растягивается */
    #portfolio .portfolio-block .Location{
        flex: 0 0 auto;
    }
}

/* Портфолио: tablet 768–1024 (включительно) */
@media (min-width: 768px) and (max-width: 1024px){
    /* Превращаем мозаику из flex/col-* в ровную 2-колоночную сетку */
    #portfolio > .row.gap-10{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    /* Внутренние .col-12.gap-10 нужны только для группировки на десктопе */
    #portfolio > .row.gap-10 > .col-12.gap-10{
        display: contents;
    }

    #portfolio .portfolio-block{
        width: 100%;
        height: 240px;
        padding: 16px;
        font-size: 14px;
        line-height: 1.2;
    }

    #portfolio .portfolio-block .text-20{ font-size: 17px; }

    /* Заголовок проекта (2 строки максимум) */
    #portfolio .portfolio-block p.text-20.text-bold{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Адрес (2 строки максимум) */
    #portfolio .portfolio-block .Location + p{
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Стоимость услуг: tablet 768–1024 (включительно) */
@media (max-width: 424.98px){
    /* На 375–424 три карточки в ряд не помещаются — делаем свайп без JS (scroll-snap) */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        align-items: flex-start !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
        padding-bottom: 14px;
        padding-left: 10px;
        padding-right: 10px;
        gap: 12px;
    }

    /* Скрываем скроллбар (где поддерживается), оставляя свайп */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        scrollbar-width: none;
    }
    #prices .row > .d-flex.justify-content.align-items-center.gap-20::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    #prices .row > .d-flex.justify-content.align-items-center.gap-20 > .block-plan-price{
        flex: 0 0 clamp(260px, 88vw, 340px);
        width: auto;
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        /* На мобилке отключаем левитацию (мешает свайпу и «дёргает» высоты) */
        animation: none;
    }

    #prices .block-price{
        max-width: 100%;
        width: 100%;
        padding: 14px;
        border-radius: 18px;
        gap: 10px;
    }

    /* Чтобы карточки не “подпрыгивали” во время свайпа */
    #prices .block-price:hover,
    #prices .block-price:active{
        transform: none;
        filter: none;
    }

    /* Типографика — чуть компактнее */
    #prices .text-24{ font-size: 19px; }
    #prices .text-36{ font-size: 28px; }

    /* Кнопки ровные и на всю ширину */
    #prices .block-price .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 425px) and (max-width: 767px){
    /* На мобилках 3 карточки в ряд не помещаются — делаем свайп без JS (scroll-snap) */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        align-items: flex-start !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
        padding-bottom: 14px;
        padding-left: 12px;
        padding-right: 12px;
        gap: 14px;
    }

    /* Скрываем скроллбар (где поддерживается), оставляя свайп */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        scrollbar-width: none;
    }
    #prices .row > .d-flex.justify-content.align-items-center.gap-20::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    #prices .row > .d-flex.justify-content.align-items-center.gap-20 > .block-plan-price{
        flex: 0 0 clamp(280px, 86vw, 360px);
        width: auto;
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        /* На мобилке отключаем левитацию (мешает свайпу и «дёргает» высоты) */
        animation: none;
    }

    #prices .block-price{
        max-width: 100%;
        width: 100%;
        padding: 16px;
        border-radius: 18px;
        gap: 10px;
    }

    /* Чтобы карточки не “подпрыгивали” во время свайпа */
    #prices .block-price:hover,
    #prices .block-price:active{
        transform: none;
        filter: none;
    }

    /* Типографика — чуть компактнее */
    #prices .text-24{ font-size: 20px; }
    #prices .text-36{ font-size: 30px; }

    /* Кнопки ровные и на всю ширину */
    #prices .block-price .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px){
    /* На tablet делаем свайп/листание по карточкам без JS (scroll-snap).
       Bootstrap .d-flex задаёт display:flex !important, поэтому работаем через flex. */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        align-items: flex-start !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
        padding-bottom: 14px;
        gap: 16px;
    }

    /* Скрываем скроллбар (где поддерживается), оставляя свайп */
    #prices .row > .d-flex.justify-content.align-items-center.gap-20{
        scrollbar-width: none;
    }
    #prices .row > .d-flex.justify-content.align-items-center.gap-20::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    #prices .row > .d-flex.justify-content.align-items-center.gap-20 > .block-plan-price{
        flex: 0 0 clamp(320px, 78vw, 420px);
        max-width: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        /* Отключаем пляску на tablet */
        animation: none;
    }

    #prices .block-price{
        max-width: 100%;
        width: 100%;
        padding: 18px;
    }

    /* На tablet убираем “подпрыгивание” карточек, чтобы их не резало контейнером скролла */
    #prices .block-price:hover,
    #prices .block-price:active{
        transform: none;
        filter: none;
    }

    /* Немного компактнее, чтобы не выглядело «раздуто» */
    #prices .text-24{ font-size: 20px; }
    #prices .text-36{ font-size: 30px; }

    /* Кнопки ровные и не «уезжают» */
    #prices .block-price .btn{
        width: 100%;
        display: flex;
        justify-content: center;
    }
}