/* ====== SCOPE: только для нашего попапа ====== */
.t-popup[data-tooltip-hook="#popup:myform"] {
    background: rgba(0, 0, 0, .55); /* затемнение фона */
    padding: 24px; /* небольшой внутренний отступ у оверлея */
}

/* Карточка */
.t-popup[data-tooltip-hook="#popup:myform"] .t-popup__container {
    width: auto !important;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(16, 18, 22, .25);
    overflow: hidden;
}

/* Внутренние отступы */
.t-popup[data-tooltip-hook="#popup:myform"] .t702__wrapper {
    padding: 32px 28px 28px;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myform"] .t702__wrapper {
        padding: 40px 44px 36px;
    }
}

/* Заголовок и описание */
.t-popup[data-tooltip-hook="#popup:myform"] .t702__title {
    margin: 0 0 6px;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    color: #1f2227;
    text-align: center;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myform"] .t702__title {
        font-size: 30px;
    }
}

.t-popup[data-tooltip-hook="#popup:myform"] .t702__descr {
    margin: 0 0 18px;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(31, 34, 39, .85);
    text-align: center;
}

/* Сетка полей */
.t-popup[data-tooltip-hook="#popup:myform"] .t-form__inputsbox {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

/* Группа инпута */
.t-popup[data-tooltip-hook="#popup:myform"] .t-input-group .t-input-block {
    background: #f4f4f4;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    transition: box-shadow .15s ease, background-color .15s ease;
}

/* Сам инпут */
.t-popup[data-tooltip-hook="#popup:myform"] .t-input {
    width: 100%;
    height: 56px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    outline: none;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    color: #1d1f23;
    -webkit-appearance: none;
}

/* Фокус */
.t-popup[data-tooltip-hook="#popup:myform"] .t-input:focus {
    outline: none;
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-input:focus-visible {
    outline: none;
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-input:focus ~ .t-input__overlay,
.t-popup[data-tooltip-hook="#popup:myform"] .t-input:focus {
    box-shadow: 0 0 0 2px rgba(255, 36, 52, .35) inset, 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Плейсхолдеры */
.t-popup[data-tooltip-hook="#popup:myform"] input::placeholder,
.t-popup[data-tooltip-hook="#popup:myform"] textarea::placeholder {
    color: #000;
    opacity: .5;
}

/* Кнопка отправки */
.t-popup[data-tooltip-hook="#popup:myform"] .t-form__submit {
    margin-top: 6px;
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-submit {
    display: block;
    width: 100%;
    height: 56px;
    border-radius: 32px;
    background: #ff2434;
    color: #fff;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
    border: 0;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease;
}

@media (hover: hover) {
    .t-popup[data-tooltip-hook="#popup:myform"] .t-submit:hover {
        filter: brightness(.95);
    }
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-submit:active {
    transform: translateY(1px);
}

/* Нижняя подпись */
.t-popup[data-tooltip-hook="#popup:myform"] .t702__form-bottom-text {
    margin-top: 14px;
    color: rgba(31, 34, 39, .6);
}

.t-popup[data-tooltip-hook="#popup:myform"] .t702__form-bottom-text a {
    color: #ff2434;
    text-decoration: underline;
}

/* Крестик (фикс позиционирования и видимости) */
.t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close {
    position: relative;
    z-index: 3;
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close-wrapper {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    display: grid;
    place-items: center;
    transition: background .15s ease;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close-wrapper {
        top: 16px;
        right: 16px;
    }
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close-icon {
    width: 20px;
    height: 20px;
}

.t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close-icon g {
    fill: #222 !important;
}

@media (hover: hover) {
    .t-popup[data-tooltip-hook="#popup:myform"] .t-popup__close-wrapper:hover {
        background: rgba(0, 0, 0, .09);
    }
}

/* Чтобы слой модалки всегда был выше фоновых T396 */
.t-popup.t-popup_show {
    z-index: 100000 !important;
}





/* ====== SCOPE: только для нашего попапа ====== */
.t-popup[data-tooltip-hook="#popup:myformzapis"] {
    background: rgba(0, 0, 0, .55); /* затемнение фона */
    padding: 24px; /* небольшой внутренний отступ у оверлея */
}

/* Карточка */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__container {
    width: auto !important;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(16, 18, 22, .25);
    overflow: hidden;
}

/* Внутренние отступы */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__wrapper {
    padding: 32px 28px 28px;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__wrapper {
        padding: 40px 44px 36px;
    }
}

/* Заголовок и описание */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__title {
    margin: 0 0 6px;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.25;
    color: #1f2227;
    text-align: center;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__title {
        font-size: 30px;
    }
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__descr {
    margin: 0 0 18px;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(31, 34, 39, .85);
    text-align: center;
}

/* Сетка полей */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-form__inputsbox {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

/* Группа инпута */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input-group .t-input-block {
    background: #f4f4f4;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    transition: box-shadow .15s ease, background-color .15s ease;
}

/* Сам инпут */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input {
    width: 100%;
    height: 56px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    outline: none;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    color: #1d1f23;
    -webkit-appearance: none;
}

/* Фокус */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input:focus {
    outline: none;
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input:focus-visible {
    outline: none;
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input:focus ~ .t-input__overlay,
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-input:focus {
    box-shadow: 0 0 0 2px rgba(255, 36, 52, .35) inset, 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Плейсхолдеры */
.t-popup[data-tooltip-hook="#popup:myformzapis"] input::placeholder,
.t-popup[data-tooltip-hook="#popup:myformzapis"] textarea::placeholder {
    color: #000;
    opacity: .5;
}

/* Кнопка отправки */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-form__submit {
    margin-top: 6px;
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-submit {
    display: block;
    width: 100%;
    height: 56px;
    border-radius: 32px;
    background: #ff2434;
    color: #fff;
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
    border: 0;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease;
}

@media (hover: hover) {
    .t-popup[data-tooltip-hook="#popup:myformzapis"] .t-submit:hover {
        filter: brightness(.95);
    }
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-submit:active {
    transform: translateY(1px);
}

/* Нижняя подпись */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__form-bottom-text {
    margin-top: 14px;
    color: rgba(31, 34, 39, .6);
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t702__form-bottom-text a {
    color: #ff2434;
    text-decoration: underline;
}

/* Крестик (фикс позиционирования и видимости) */
.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close {
    position: relative;
    z-index: 3;
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close-wrapper {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    display: grid;
    place-items: center;
    transition: background .15s ease;
}

@media (min-width: 560px) {
    .t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close-wrapper {
        top: 16px;
        right: 16px;
    }
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close-icon {
    width: 20px;
    height: 20px;
}

.t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close-icon g {
    fill: #222 !important;
}

@media (hover: hover) {
    .t-popup[data-tooltip-hook="#popup:myformzapis"] .t-popup__close-wrapper:hover {
        background: rgba(0, 0, 0, .09);
    }
}

/* Чтобы слой модалки всегда был выше фоновых T396 */
.t-popup.t-popup_show {
    z-index: 100000 !important;
}


@media (max-width: 640px){
    #rec962224171 { display:block !important; visibility:visible !important; opacity:1 !important; }
}

@media (max-width: 640px){
    #rec962224171 .t396__elem.t-elem__hidden_mobile { display:block !important; }
}

@media (max-width: 640px){
    .zero-map12 { display:block !important; }
}

@media (max-width: 640px){
    #rec962224171 .t396__artboard { min-height: 1249px !important; height:auto !important; }
    #rec962224171 .t396__carrier,
    #rec962224171 .t396__filter { height:100% !important; }
}

@media (max-width: 640px){
    #rec962224171 { position:relative; z-index:10; }
}

/* Показать запись и элементы на мобилках */
@media (max-width: 640px){
    #rec962224171 { display:block !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:10; }
    #rec962224171 .t396__artboard { min-height:1249px !important; height:auto !important; }
    #rec962224171 .t396__carrier, #rec962224171 .t396__filter { height:100% !important; }
    #rec962224171 .t396__elem.t-elem__hidden_mobile { display:block !important; }
    .zero-map12 { display:block !important; } /* если в ваших стилях есть скрытие */
}

/* Форсим видимость записи и арткорда на мобилке */
@media (max-width: 640px){
    #rec962224171 { display:block !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:10; }
    #rec962224171 .t396__artboard,
    #rec962224171 .t396__carrier,
    #rec962224171 .t396__filter { min-height: 1px !important; opacity:1 !important; }
    /* На всякий случай если где-то выключали элементы */
    #rec962224171 .t396__elem { display:block !important; visibility:visible !important; opacity:1 !important; }
    /* Ваш кастомный класс карты — вдруг был скрыт */
    .zero-map12 { display:block !important; }
}


:root{ --brand-bg:#383a45; --brand-accent:#ff2434; --brand-text:#ffffff; }
#app-preloader{ position:fixed; inset:0; z-index:99999; background:var(--brand-bg);
    display:flex; align-items:center; justify-content:center; opacity:1; visibility:visible;
    transition:opacity .4s ease, visibility .4s ease; }
#app-preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__box{ text-align:center; padding:32px 24px; }
.preloader__icon{
    width:72px; height:72px; margin:0 auto 16px; display:block;
}
.preloader__icon{
    width:72px;height:72px;margin:0 auto 16px;display:block;
    transform-origin:50% 50% !important;
    transform-box:view-box;
    animation:preloader-spin 1s linear infinite !important;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }

.preloader__percent{ font:600 24px/1.1 Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--brand-text); letter-spacing:.5px; margin-bottom:12px;}
.preloader__bar{ width:min(280px, 60vw); height:6px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; margin:0 auto;}
.preloader__bar > i{ display:block; height:100%; width:0%; background:var(--brand-accent); border-radius:inherit; transform:translateZ(0);}
/* пока грузимся — блокируем скролл */
html.is-loading, body.is-loading{ overflow:hidden!important; }

.cases-section {
    background-color: #2d303b;
    color: #ffffff;
    font-family: 'Onest', Arial, sans-serif;
}

.cases-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.cases-kicker {
    font-size: 17px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.cases-title {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    /* ближе к заголовку тарифов */
    font-size: 42px;
    letter-spacing: 0.01em;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Onest', Arial, sans-serif;
    background-position: center center;
    border-color: transparent;
    border-style: solid;
}

.tabs-container {
    margin-top: 32px;
    padding: 0 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tab-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.tab-button:hover,
.tab-button.active {
    background-color: #ff2e2e;
    border-color: #ff2e2e;
    color: #fff;
}

/* --- Карточки на десктопе: сетка --- */
.landing-cards {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #252733;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: none; /* по умолчанию скрыты, показываем только нужные .show */
}

.card.show {
    display: block;
}

.card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.card img.mobile {
    height: 260px;
    object-fit: cover;
}

.caption {
    padding: 16px 18px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
}

.caption strong {
    font-weight: 700;
}

.portfolio-button-container {
    text-align: center;
    margin-top: 32px;
}

.portfolio-button {
    display: inline-block;
    background-color: #ff2e2e;
    color: #fff !important;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 40px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.portfolio-button:hover {
    background-color: #d62828;
}

/* --- Адаптивность / планшеты --- */

@media (max-width: 1200px) {
    .landing-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .landing-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cases-title {
        font-size: 36px;
    }
}

/* --- Мобильный: заголовки и слайдеры --- */

@media (max-width: 768px) {
    .cases-section {
        padding: 1px 0 40px;
    }

    .cases-header {
        margin-bottom: 32px;
    }

    .cases-kicker {
        font-size: 15px;
    }

    /* чтобы выглядело как на скрине с тарифами */
    .cases-title {
        font-size: 28px;
        line-height: 1.25;
    }

    /* табы — горизонтальный скролл без полосы */
    .tabs-container {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        margin: 0 -20px 0 0; /* чуть в край экрана */
    }

    .tabs-container::-webkit-scrollbar {
        display: none;
    }
    .tabs-container {
        scrollbar-width: none;
    }

    .tab-button {
        font-size: 14px;
        padding: 10px 18px;
    }

    /* карточки — горизонтальный слайдер */
    .landing-cards {
        margin-top: 32px;
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .landing-cards::-webkit-scrollbar {
        display: none;
    }
    .landing-cards {
        scrollbar-width: none;
    }

    .card {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: start;
    }

    .caption {
        font-size: 21px;
        font-family: 'Onest', Arial, sans-serif;
        line-height: 1.1;
        font-weight: 700;
        background-position: center center;
        border-color: transparent;
        border-style: solid;
    }

    .portfolio-button {
        font-size: 16px;
        padding: 12px 24px;
    }
}

@media (max-width: 480px) {
    .cases-title {
        font-size: 32px;
        font-family: 'Onest', Arial, sans-serif;
        line-height: 1.1;
        font-weight: 700;
        background-position: center center;
        border-color: transparent;
        border-style: solid;
    }

    .cases-kicker {
        font-size: 14px;
    }

    .tab-button {
        padding: 8px 14px;
        font-size: 18px;
        font-family: 'Onest', Arial, sans-serif;
        line-height: 1.1;
        font-weight: 700;
        background-position: center center;
        border-color: transparent;
        border-style: solid;
    }
}