/* === БАЗА: перечисляем все карточки, чтобы точно попасть по слою IMG === */
.t396__elem.card1,
.t396__elem.card2,
.t396__elem.card3,
.t396__elem.card4,
.t396__elem.card5,
.t396__elem.card6,
.t396__elem.card7,
.t396__elem.card8,
.t396__elem.card9{
  position: relative !important;
  overflow: hidden;
  border-radius: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* ховер‑подъём */
.t396__elem.card1:hover,
.t396__elem.card2:hover,
.t396__elem.card3:hover,
.t396__elem.card4:hover,
.t396__elem.card5:hover,
.t396__elem.card6:hover,
.t396__elem.card7:hover,
.t396__elem.card8:hover,
.t396__elem.card9:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* картинка всегда под оверлеями */
.t396__elem.card1 .tn-atom,
.t396__elem.card2 .tn-atom,
.t396__elem.card3 .tn-atom,
.t396__elem.card4 .tn-atom,
.t396__elem.card5 .tn-atom,
.t396__elem.card6 .tn-atom,
.t396__elem.card7 .tn-atom,
.t396__elem.card8 .tn-atom,
.t396__elem.card9 .tn-atom,
.t396__elem.card1 img,
.t396__elem.card2 img,
.t396__elem.card3 img,
.t396__elem.card4 img,
.t396__elem.card5 img,
.t396__elem.card6 img,
.t396__elem.card7 img,
.t396__elem.card8 img,
.t396__elem.card9 img{
  position: relative;
  z-index: 1;
  display: block;
  transition: transform .4s ease;
  background-size: cover;
  background-position: center;
}

/* зум картинки */
.t396__elem.card1:hover .tn-atom, .t396__elem.card1:hover img,
.t396__elem.card2:hover .tn-atom, .t396__elem.card2:hover img,
.t396__elem.card3:hover .tn-atom, .t396__elem.card3:hover img,
.t396__elem.card4:hover .tn-atom, .t396__elem.card4:hover img,
.t396__elem.card5:hover .tn-atom, .t396__elem.card5:hover img,
.t396__elem.card6:hover .tn-atom, .t396__elem.card6:hover img,
.t396__elem.card7:hover .tn-atom, .t396__elem.card7:hover img,
.t396__elem.card8:hover .tn-atom, .t396__elem.card8:hover img,
.t396__elem.card9:hover .tn-atom, .t396__elem.card9:hover img{
  transform: scale(1.05);
}

/* затемнение + лупа (поверх картинки) */
.t396__elem.card1::before,
.t396__elem.card2::before,
.t396__elem.card3::before,
.t396__elem.card4::before,
.t396__elem.card5::before,
.t396__elem.card6::before,
.t396__elem.card7::before,
.t396__elem.card8::before,
.t396__elem.card9::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMjgiIGN5PSIyOCIgcj0iMTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI0Ii8+PGxpbmUgeDE9IjM4IiB5MT0iMzgiIHgyPSI1MiIgeTI9IjUyIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+")
      center / 36px 36px no-repeat,
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 5;
  pointer-events: none;
}
.t396__elem.card1:hover::before,
.t396__elem.card2:hover::before,
.t396__elem.card3:hover::before,
.t396__elem.card4:hover::before,
.t396__elem.card5:hover::before,
.t396__elem.card6:hover::before,
.t396__elem.card7:hover::before,
.t396__elem.card8:hover::before,
.t396__elem.card9:hover::before{
  opacity: 1;
}

/* подпись (поверх всего) */
.t396__elem.card1::after,
.t396__elem.card2::after,
.t396__elem.card3::after,
.t396__elem.card4::after,
.t396__elem.card5::after,
.t396__elem.card6::after,
.t396__elem.card7::after,
.t396__elem.card8::after,
.t396__elem.card9::after{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  z-index: 6;
  pointer-events: none;
  content: "";   /* текст задаём ниже */
}
.t396__elem.card1:hover::after,
.t396__elem.card2:hover::after,
.t396__elem.card3:hover::after,
.t396__elem.card4:hover::after,
.t396__elem.card5:hover::after,
.t396__elem.card6:hover::after,
.t396__elem.card7:hover::after,
.t396__elem.card8:hover::after,
.t396__elem.card9:hover::after{
  transform: translateY(0);
  opacity: 1;
}

/* тексты */
.t396__elem.card1::after{ content: "Замер и разметка"; }
.t396__elem.card2::after{ content: "Установка стоек"; }
.t396__elem.card3::after{ content: "Монтаж окон"; }
.t396__elem.card4::after{ content: "Прокладка проводки"; }
.t396__elem.card5::after{ content: "Укладка утеплителя"; }
.t396__elem.card6::after{ content: "Монтаж пароизоляции"; }
.t396__elem.card7::after{ content: "Обшивка стен"; }
.t396__elem.card8::after{ content: "Монтаж пола"; }
.t396__elem.card9::after{ content: "Финальная отделка"; }
/* (опционально) финальный «киллер» старого псевдо-плюса */
.t-rec.uc-faq-q::after,
.uc-faq-q::after,
.t-rec .uc-faq-q::after{ content:"" !important; display:none !important; }

/* Ответный блок: высота=0 при закрытии, плавное раскрытие */
.t-rec.uc-faq-a .t396__artboard{
  height:0; overflow:hidden; opacity:0;
  transition:height .3s ease, opacity .2s ease;
  will-change:height, opacity;
}
.t-rec.uc-faq-a.is-open .t396__artboard{ opacity:1; }