/* ==========================================================================
   ФИНАЛЬНЫЕ ИСПРАВЛЕНИЯ МОБИЛЬНОЙ ВЕРСТКИ
   ========================================================================== */

/* 1. СБРОС СТИЛЕЙ ПК ДЛЯ КОНТЕЙНЕРОВ */


/* 2. ШАПКА И МИНИ-ЛОГОТИП */
.head {
    position: fixed !important;
    width: 100% !important;
    padding: 6px 12px !important;
    background: #100e17 !important;
}
.head__nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
}
.head__logo {
    height: 18px !important; /* Сильно уменьшаем логотип */
    width: auto !important;
}
.head__list--desktop {
    display: none !important; /* Надежно скрываем текстовые ссылки ПК */
}
.head__list--mobile {
    display: flex !important; /* Принудительно показываем мобильные иконки */
    list-style: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.head__list--mobile .head__list-link {
    border: none !important;
    background: transparent !important;
    font-size: 16px !important; /* Уменьшаем размер иконок */
    color: #939393 !important;
    padding: 4px 6px !important;
    border-radius: 0 !important;
}
.head__list--mobile .head__list-link.active {
    color: #00AD44 !important;
}
.head__button {
    font-size: 11px !important; /* Сильно уменьшаем кнопку в шапке */
    padding: 6px 10px !important;
    white-space: nowrap !important;
}

/* 3. УМЕНЬШЕНИЕ ГЛАВНОГО ФОТО (HERO ВЕРХНЯЯ ЧАСТЬ) */
.hero {
    padding-top: 60px !important; /* Сдвиг вниз, чтобы шапка не перекрывала фото */
}
.hero__image {
    width: 80% !important; /* Уменьшаем ширину главного фото до 80% от экрана */
    max-width: 280px !important;
    margin: 0 auto !important; /* Центрируем фото */
    display: block !important;
    height: auto !important;
}
.hero__buttons {
    margin-top: 15px !important;
    display: flex !important;
    flex-direction: row !important; /* Выстраиваем кнопки в ряд */
    justify-content: center !important;
    gap: 12px !important;
}
/* Кардинальное уменьшение кнопок "Больше о нас" и стрелочки */
.hero__button {
    font-size: 14px !important; 
    width: 140px !important;
    height: 40px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    border-radius: 50px !important;
}
.hero__scroll-image {
    padding: 8px 12px !important;
    border-radius: 50px !important;
}
.hero__scroll {
    width: 20px !important;
    height: 20px !important;
}

/* 4. КАРУСЕЛЬ "ПОЧЕМУ НАМ ДОВЕРЯЮТ" И АНИМАЦИЯ ЛИНИИ */
.aboutus {
    padding-block: 20px !important;
    overflow: hidden !important;
}
.aboutus__container {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 16px !important; /* Жесткий зазор между карточками для JS расчетов */
    padding: 20px 0 !important; /* Убираем боковые отступы контейнера, чтобы клоны скроллились бесшовно */
    height: auto !important;
    width: 100% !important;
}

/* Дополнительно гарантируем плавность анимации шкалы внутри JS-карусели */
.card .filledbar {
    transition: width 0.4s ease-out !important;
}
.aboutus__container::-webkit-scrollbar {
    display: none !important;
}
.card {
    flex: 0 0 230px !important; /* Уменьшаем ширину карточки */
    height: 320px !important;  /* Снижаем общую высоту */
    margin-left: 0 !important;
    transform: scale(0.9);
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}
.card:not(:first-child) {
    margin-left: 0 !important;
}
.card:hover {
    transform: scale(0.9) !important; /* Отменяем десктопные эффекты наведения */
}
.card:hover ~ .card {
    left: 0 !important;
}
/* Масштабируем тексты внутри карточек */
.title {
    font-size: 18px !important;
}
.title__p {
    font-size: 13px !important;
    top: 50px !important;
    width: calc(100% - 40px) !important;
}
.bar {
    top: 290px !important; /* Поднимаем шкалу заполнения повыше */
}
.aboutus__buttons {
    display: none !important;
}

/* 5. СОТРУДНИКИ (СТРОГО 2 В РЯД, ТЕКСТ УМЕНЬШЕН) */





/* Кардинальное уменьшение текстов внутри плашек сотрудников */
.name {
    font-size: 0.85rem !important; 
    font-weight: 700 !important;
}

.year {
    font-size: 0.65rem !important;
    margin-top: 2px !important;
}




/* 6. ИСПРАВЛЕНИЕ СЪЕХАВШЕЙ КАРУСЕЛИ БАНКОВ */
.card__company {
    display: flex !important;
    flex-direction: row !important; /* Разворачиваем текст и логотипы обратно в строку */
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    text-align: center !important;
}
.card__company p, .card__company span {
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100% !important; /* Текст занимает верхнюю строчку */
}
.card__company img {
    max-height: 35px !important; /* Ограничиваем высоту логотипов вроде Дом.РФ */
    width: auto !important;
}
/* Скрываем стандартный скроллбар в карусели для iOS, Android и Chrome */
.aboutus__container {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}
.aboutus__container::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
}


/* ProDom: final mobile overrides, loaded last. Desktop remains unchanged. */
@media (max-width:768px) {
 html {scroll-padding-top:125px} html,body {max-width:100%;overflow-x:clip}
 .head {padding:10px 12px!important}
 .hero {padding-top:115px!important;padding-bottom:0!important}
 .hero__content {padding:10px 0 0!important}
 .hero__images {display:block!important;width:100%!important;height:auto!important;max-width:100%!important}
 .hero__buttons {margin:12px auto 20px!important;transform:none!important;width:100%!important;min-width:0!important;padding:0 16px!important;justify-content:center!important}
 .why {padding-top:28px!important}
 .aboutus {padding-block:18px!important}
 .aboutus__container {height:auto!important;min-height:0!important;gap:14px!important;padding:16px!important;scroll-snap-type:x mandatory!important}
 .aboutus__container .card {margin:0!important;left:auto!important;transform:none!important;flex:0 0 min(78vw,290px)!important;scroll-snap-align:center!important;box-shadow:0 8px 22px #0006!important}
 .aboutus__container .card:hover~.card {left:auto!important}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .marquee_header {max-width:550px!important;margin:22px auto 16px!important;padding:0 18px!important;font-size:18px!important;line-height:1.4!important}
 /* Bank carousel rules are consolidated below. */



 #catalog-container .cardbuildingbutton {padding:0!important;background:transparent!important;border-radius:0!important}
 #catalog-container .cardbuildingbuttontext {padding:10px 12px!important}
 .section-map {padding-top:18px!important}
}



/* ProDom v3: consistent section buttons and expandable agent cards. Header untouched. */



/* Финальные настройки: одинаковые кнопки, карточки с раскрытием. */



/* V7: плавное раскрытие карточек без перекрытия соседних рядов */




/* Финальная мобильная анимация: плавное изменение высоты и содержимого */


/* =============================================================
   ProDom: фото продолжается ПОД зелёной плашкой на телефонах.
   Только закрытые карточки; десктоп и открытые не затрагиваем.
   ============================================================= */


/* ProDom: mobile avatar border stays attached to its photo.
   Override older delayed border transitions without changing desktop styles. */


/* ProDom: synchronized mobile portrait + green border animation.
   One element owns both image clipping and border; no delayed child transitions. */


/* ProDom: prevent the last-frame avatar snap on mobile.
   Keep the image box dimensions stable during the border change. */


/* Visible green avatar ring: painted ABOVE the image, no layout changes. */



/* === Scroll-activated fixed-height employee cards: mobile only === */



/* Fix: name pill remains inside the visible 48px strip when card is closed.
   The footer was previously at the bottom of the tall translated panel. */


/* Final: persistent bottom name and scroll-driven reveal, mobile only */




/* ================================================================
   ProDom 440: scroll-linked employee cards, stable two-column grid.
   Progress 0 = full portrait + name, 1 = circular avatar + bio.
   The JS updates --agent-progress without modifying grid dimensions.
   ================================================================ */
@media (max-width: 768px) {
  .agents {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 20px 12px 42px !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  .agents > .card-agents {
    --agent-progress: 0;
    --agent-height: 440px;
    --agent-footer: 58px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--agent-height) !important;
    min-height: var(--agent-height) !important;
    max-height: var(--agent-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #100e17 !important;
    border: 0 !important;
    border-radius: 23px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  /* The portrait frame and green ring are one element: no lagging border. */
  .agents .card-agents .profile-pic,
  .agents .card-agents:hover .profile-pic,
  .agents .card-agents.agent-expanded .profile-pic,
  .agents .card-agents.agent-expanded:hover .profile-pic {
    position: absolute !important;
    top: calc(12px * var(--agent-progress)) !important;
    left: calc(12px * var(--agent-progress)) !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - (100% - 68px) * var(--agent-progress)) !important;
    height: calc(100% - (100% - 68px) * var(--agent-progress)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    border: 3px solid #00ad44 !important;
    border-radius: calc(23px + 11px * var(--agent-progress)) !important;
    box-shadow: none !important;
    transform: translateZ(0) !important;
    transition: none !important;
  }
  .agents .card-agents .profile-pic::after { content: none !important; }
  .agents .card-agents .profile-pic img,
  .agents .card-agents:hover .profile-pic img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: inherit !important;
    transform: none !important;
    transition: none !important;
  }
  /* The panel reveals upward, while its bottom and the name stay anchored. */
  .agents .card-agents .bottom-agent,
  .agents .card-agents:hover .bottom-agent,
  .agents .card-agents.agent-expanded .bottom-agent,
  .agents .card-agents.agent-expanded:hover .bottom-agent {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
    background: #00ad44 !important;
    border: 0 !important;
    border-radius: 23px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
    clip-path: inset(calc(100% - 58px - 282px * var(--agent-progress)) 0 0 0 round 23px) !important;
    transition: none !important;
  }
  /* When opened, panel starts at 100px; circular avatar is above it. */
  .agents .card-agents .bottom-agent .content-agent,
  .agents .card-agents.agent-expanded .bottom-agent .content-agent {
    position: absolute !important;
    inset: 118px 11px 57px 11px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    color: #fff !important;
    opacity: clamp(0, (var(--agent-progress) - .36) * 2.2, 1) !important;
    transition: none !important;
  }
  .agents .card-agents .name {
    font-size: clamp(12px, 3vw, 15px) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: white !important;
    overflow-wrap: anywhere !important;
  }
  .agents .card-agents .year,
  .agents .card-agents .about-me,
  .agents .card-agents .bottom-agent .content-agent .about-me {
    display: block !important;
    font-size: clamp(11px, 2.7vw, 13px) !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
    color: white !important;
    margin: 0 !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
  .agents .card-agents .bottom-agent .bottom-bottom,
  .agents .card-agents.agent-expanded .bottom-agent .bottom-bottom {
    position: absolute !important;
    top: auto !important;
    bottom: 9px !important;
    left: 8px !important;
    right: 9px !important;
    width: auto !important;
    height: 39px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 7 !important;
  }
  .agents .card-agents .social-links-container { display: none !important; }
  .agents .card-agents .button-agent,
  .agents .card-agents:hover .button-agent {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 35px !important;
    max-width: 100% !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: white !important;
    color: #111 !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  .agents .agent-details-toggle { display: none !important; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .agents > .card-agents { --agent-progress: 0 !important; }
}

/* ================================================================
   ProDom: compact trust cards and viewport-safe section navigation.
   Scoped to mobile. Employee cards and scroll animation untouched.
   ================================================================ */
@media (max-width: 768px) {
  /* 'Почему нам доверяют?' — exactly 280px tall. */
  .aboutus__container > .card {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
    box-sizing: border-box !important;
  }
  .aboutus__container > .card .title__p-2 {
    top: 180px !important;
  }
  .aboutus__container > .card .bar {
    top: auto !important;
    bottom: 24px !important;
    left: 20px !important;
  }
  .aboutus__container > .card .circle {
    top: auto !important;
    bottom: 15px !important;
  }

  /* All three section action rows fit inside the phone viewport. */
  .hero__buttons,
  .aboutus__selectbutton .aboutus__buttons,
  .agentsus__selectbutton .agentsus__buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    transform: none !important;
  }
  .hero__button,
  .aboutus__selectbutton .aboutus__button,
  .agentsus__selectbutton .agentsus__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: clamp(14px, 4vw, 19px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
  }
  .hero__scroll,
  .aboutus__selectbutton .aboutus__scroll,
  .agentsus__selectbutton .agentsus__scroll {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
  }
  .hero__scroll-image,
  .aboutus__selectbutton .aboutus__scroll-image,
  .agentsus__selectbutton .agentsus__scroll-image {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
  }
}

/* Mobile section navigation: equal-width pill and arrow, larger labels.
   Only section navigation is affected; employee animation is unchanged. */
@media (max-width: 768px) {
  .hero .hero__buttons,
  .aboutus__selectbutton .aboutus__buttons,
  .agentsus__selectbutton .agentsus__buttons {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .hero .hero__buttons .hero__button,
  .aboutus__selectbutton .aboutus__buttons .aboutus__button,
  .agentsus__selectbutton .agentsus__buttons .agentsus__button {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 58px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .hero .hero__buttons .hero__scroll,
  .aboutus__selectbutton .aboutus__buttons .aboutus__scroll,
  .agentsus__selectbutton .agentsus__buttons .agentsus__scroll {
    display: flex !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
  }
  .hero .hero__buttons .hero__scroll-image,
  .aboutus__selectbutton .aboutus__buttons .aboutus__scroll-image,
  .agentsus__selectbutton .agentsus__buttons .agentsus__scroll-image {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
}


/* ================================================================
   ProDom: spacing between mobile sections + restored bank carousel.
   This block intentionally does not touch .agents, .card-agents,
   --agent-progress, or the scroll animation.
   ================================================================ */
@media (max-width: 768px) {
  /* Clear breathing room between the major homepage sections. */
  .hero {
    margin-bottom: 38px !important;
  }
  .why {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  .aboutus {
    margin-bottom: 32px !important;
  }
  .aboutus__selectbutton {
    display: block !important;
    margin-top: 12px !important;
    margin-bottom: 34px !important;
  }
  .section-map {
    margin-top: 0 !important;
    margin-bottom: 36px !important;
  }
  .agentsus__selectbutton {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
  }
  /* Leave employee cards and their 440px fixed-height grid untouched. */
  .agents {
    margin-bottom: 42px !important;
  }

  /* Bank partnership statement: full text, readable line spacing. */
  .marquee_header {
    display: block !important;
    position: relative !important;
    width: auto !important;
    max-width: 620px !important;
    height: auto !important;
    margin: 0 auto 22px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    font-size: clamp(17px, 4.2vw, 20px) !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  /* Restore the original continuously moving, duplicated bank logos.
     Previous mobile overrides had disabled animation and hidden group 2. */
  .marquee {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 46px !important;
    padding: 12px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent) !important;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent) !important;
  }
  .marquee .marquee__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    transform: translateX(0);
    animation: prodom-bank-marquee 20s linear infinite !important;
    will-change: transform;
  }
  .marquee .marquee__group,
  .marquee .marquee__group:nth-child(n+2) {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    width: max-content !important;
    visibility: visible !important;
  }
  .marquee .marquee__group span {
    display: flex !important;
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 140px !important;
    height: 66px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 10px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    scroll-snap-align: none !important;
  }
  .marquee .marquee__group img {
    display: block !important;
    width: 100% !important;
    max-width: 120px !important;
    height: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }
}

@keyframes prodom-bank-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .marquee .marquee__inner {
    animation: none !important;
    will-change: auto;
  }
  .marquee {
    overflow-x: auto !important;
  }
}

/* Bank intro below employee cards: mobile-only typography. */
@media (max-width: 768px) {
  .agents + .marquee_header {
    width: 100% !important;
    max-width: 540px !important;
    margin: 0 auto 20px !important;
    padding: 0 22px !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* Additional breathing room requested on mobile: map heading and hero CTA. */
@media (max-width: 768px) {
  /* Space above the location section heading, below the preceding navigation. */
  .section-map {
    padding-top: 48px !important;
  }

  /* Space between the main house photo and the 'Больше о нас' button row. */
  .hero .hero__buttons {
    margin-top: 42px !important;
  }
}






/* PRO.DOM — mobile catalog grid and header, only catalog/news pages */
@media (max-width: 768px) {
  .head .head__nav { display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:10px 8px!important; }
  .head .head__nav > img {order:1!important;flex:0 1 auto!important;max-width:55%!important;height:auto!important;max-height:32px!important;}
  .head .head__nav > .head__button--mobile {display:inline-flex!important;order:2!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;background:#fff!important;color:#111!important;border-radius:999px!important;padding:8px 16px!important;font-size:14px!important;line-height:1.2!important;text-decoration:none!important;opacity:1!important;visibility:visible!important;}
  .head .head__list--mobile {order:3!important;flex:0 0 100%!important;width:100%!important;min-width:0!important;margin:0!important;padding:0 0 4px!important;display:flex!important;gap:7px!important;justify-content:space-between!important;overflow-x:auto!important;}
  .head .head__list--mobile .head__list-link {white-space:nowrap!important;}
  .cardsbuilding {display:block!important;width:100%!important;max-width:100%!important;padding:155px 12px 65px!important;margin:0 auto!important;box-sizing:border-box!important;}
  .cardsbuilding .catalog-center-wrapper {width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;}
  #catalog-container {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;max-width:100%!important;margin:0!important;align-items:stretch!important;}
  #catalog-container .cardbuilding {display:flex!important;flex-direction:column!important;min-width:0!important;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;padding:0!important;background:#19191e!important;border:1px solid #303038!important;border-radius:13px!important;overflow:hidden!important;box-shadow:none!important;}
  #catalog-container .cardbuilding-int {display:flex!important;flex-direction:column!important;flex:1!important;min-width:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:transparent!important;border-radius:0!important;}
  #catalog-container .cardbuildingimg {position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1.13!important;overflow:hidden!important;background:#26262b!important;border-radius:0!important;flex:0 0 auto!important;}
  #catalog-container .cardbuildingimg > img {position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;}
  #catalog-container .cardbuildingimg .blur-bg {display:none!important;}
  #catalog-container .cardbuilding__span {position:absolute!important;top:8px!important;left:8px!important;max-width:calc(100% - 16px)!important;padding:5px 9px!important;font-size:11px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;background:#00ad44!important;color:#fff!important;border-radius:999px!important;z-index:4!important;}
  #catalog-container .cardbuilding-data {display:flex!important;flex-direction:column!important;flex:1!important;min-width:0!important;width:100%!important;padding:11px 10px 12px!important;background:transparent!important;color:#fff!important;}
  #catalog-container .cardbuildingtitle {font-size:clamp(17px,4.3vw,22px)!important;font-weight:750!important;line-height:1.18!important;color:#fff!important;margin:0 0 9px!important;overflow-wrap:anywhere!important;}
  #catalog-container .cardbuilding-data > p:not(.cardbuildingtitle) {font-size:clamp(11px,3vw,13px)!important;line-height:1.32!important;color:#e0e0e3!important;margin:0 0 12px!important;overflow-wrap:anywhere!important;}
  #catalog-container .cardbuildingbutton {display:block!important;visibility:visible!important;opacity:1!important;position:static!important;width:100%!important;height:auto!important;margin:auto 0 0!important;padding:0!important;background:transparent!important;border:0!important;transform:none!important;}
  #catalog-container .cardbuildingbuttontext {display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;min-height:34px!important;width:100%!important;margin:0!important;padding:7px 8px!important;border-radius:9px!important;background:#00ad44!important;color:#fff!important;text-decoration:none!important;font-size:12px!important;font-weight:700!important;line-height:1.2!important;}
  #catalog-container .cardbuildingbuttontext span {display:inline!important;visibility:visible!important;opacity:1!important;color:#fff!important;}
  #catalog-container .cardbuildingbutton:hover {transform:none!important;}
}


/* v2 — match desktop green-frame/white-content cards on phones */
@media (max-width:768px) {
  #catalog-container {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
  #catalog-container .cardbuilding {padding:7px!important;background:#00ad44!important;border:0!important;border-radius:16px!important;overflow:hidden!important;min-width:0!important;}
  #catalog-container .cardbuilding-int {background:#fff!important;border-radius:10px!important;overflow:hidden!important;min-width:0!important;}
  #catalog-container .cardbuildingimg {aspect-ratio:1.35!important;height:auto!important;background:#333!important;}
  #catalog-container .cardbuildingimg .blur-bg {display:block!important;position:absolute!important;inset:0!important;background-size:cover!important;background-position:center!important;filter:blur(9px) brightness(.6)!important;transform:scale(1.1)!important;z-index:1!important;}
  #catalog-container .cardbuildingimg > img {z-index:2!important;object-fit:contain!important;}
  #catalog-container .cardbuilding__span {top:9px!important;left:9px!important;font-size:clamp(10px,2.6vw,12px)!important;padding:5px 8px!important;}
  #catalog-container .cardbuilding-data {background:#fff!important;color:#111!important;padding:12px 10px 11px!important;min-height:150px!important;box-sizing:border-box!important;}
  #catalog-container .cardbuildingtitle {color:#111!important;font-size:clamp(16px,4.1vw,23px)!important;line-height:1.15!important;margin:0 0 9px!important;}
  #catalog-container .cardbuilding-data > p:not(.cardbuildingtitle) {color:#111!important;font-size:clamp(11px,2.9vw,14px)!important;line-height:1.3!important;margin:0 0 12px!important;}
  #catalog-container .cardbuildingbutton {margin-top:auto!important;display:block!important;}
  #catalog-container .cardbuildingbuttontext {min-height:32px!important;border-radius:5px!important;background:#00ad44!important;color:#fff!important;font-size:clamp(11px,2.8vw,13px)!important;}
}