:root{
  --brand-600:#007aff;
  --brand-700:#005fcc;
  --brand-500:#1a8cff;
  --brand-400:#409cff;
}

.transformation-section{
  background:#f8fafc;
}

.clients-grid{
  position:relative;
}

.compare-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  aspect-ratio:16/9;
  background:#000;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.before-wrapper,
.after-wrapper{
  position:absolute;
  top:0;
  height:100%;
  overflow:hidden;
}

.before-wrapper{ left:0; width:50%; }
.after-wrapper { right:0; width:50%; }

.before-img,
.after-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  border-radius:inherit;
  pointer-events:none;
  transition:transform .3s ease;
}

.compare-card:hover .before-img,
.compare-card:hover .after-img{
  transform:scale(1.06);
}

.slider-line{
  position:absolute;
  inset:0 auto 0 50%;
  width:2px;
  background:rgba(255,255,255,.85);
  z-index:2;
  pointer-events:none;
}

.slider-handle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:40px;
  height:40px;
  border-radius:9999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 4px 15px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  z-index:3;
  pointer-events:none;
}

.slider-icon{
  font-size:18px;
  color:#0f172a;
  font-weight:700;
  line-height:1;
}

.label{
  position:absolute;
  top:12px;
  padding:4px 10px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:14px;
  border-radius:6px;
  pointer-events:none;
  z-index:4;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.before-label{ left:12px; }
.after-label { right:12px; }

/* Отзывы: светлый фон + тёмный текст + тень */
.reviews-grid .cs-card {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
}

/* немного усилить тень при ховере (по желанию) */
.reviews-grid .cs-card:hover {
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.14);
}

/* заголовок и подпись тоже делаем тёмными/серыми */
.reviews-grid .cs-title { color: #0f172a; }
.reviews-grid .cs-sub   { color: #64748b; }

.compare-card {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10);
  transition: box-shadow .2s ease;
}

.compare-card:hover {
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.14);
}

/* Мобильный слайдер */
@media (max-width:768px){
  .clients-grid{
    display:block !important;
    overflow:hidden;
  }

  .mobile-slider-track{
    display:flex;
    width:100%;
    gap:0;
    transition:transform .4s ease;
    will-change:transform;
  }

  .mobile-slider-track .compare-card{
    flex:0 0 100%;
    max-width:100%;
    margin:0;
    cursor:default !important;

    /* 👇 Блокируем движение карточек */
    pointer-events:none !important;
    touch-action:none !important;
    user-select:none !important;
  }

  .slider-line,
  .slider-handle{
    display:none !important;
  }
}

/* Кнопки мобильного слайдера */
.t-c-prev,
.t-c-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:9999px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  color:#0f172a;
  opacity:.95;
}

.t-c-prev{ left:10px; }
.t-c-next{ right:10px; }

.t-c-prev:active,
.t-c-next:active{
  transform:translateY(-50%) scale(.98);
}

/* Отзывы (карточки скринов) — лёгкий hover */
.reviews-grid .cs-card{
  transition:transform .25s ease;
}
.reviews-grid .cs-card:hover{
  transform:translateY(-2px);
}