/* ===== WHY PRO (advantages slider) ===== */
  .why-pro{padding:clamp(42px,7vw,80px) 0;background:#fff}
  /* Расширяем только область слайдера, не заголовок */
#advantages.why-pro {
  --wrap: 1400px; /* шире трек и стрелки */
}

#advantages.why-pro .why-carousel .inner-wrap {
  max-width: 1400px; /* именно зона карусели */
}
  .why-title{
    font-weight:800;text-align:left;margin:0 0 clamp(28px,3vw,56px);
    font-size:clamp(36px,7.5vw,65px);line-height:1.05;letter-spacing:.01em;color:#686f7d;
  }
  .why-title .accent{position:relative;display:inline-block;z-index:1}
  .why-title .accent::before{
    content:"";position:absolute;left:-.2rem;right:-.0rem;bottom:-.18em;
    height:.5em;background:#d1d4da;opacity:.95;z-index:-1;
  }
  .why-carousel{
    position:relative;
    isolation:isolate;
    overflow:visible;
  }
.why-carousel::before,
.why-carousel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(50px,9vw,160px);
  pointer-events:none;
  z-index:2;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%);
}
.why-carousel::after{
  right:0;
  transform:scaleX(-1);
}
.why-carousel::before{left:0;}
.why-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: none;            /* убрали фон */
  border: none;                /* убрали рамку */
  color: #686f7d;                 /* сделали стрелки чёрными */
  font-size: 1.3rem;           /* можно чуть увеличить, если мелковаты */
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}

.why-arrow:hover {
  color: #000000;              /* лёгкий синий при наведении (можно убрать или поменять) */
  transform: translateY(-50%) scale(1.1);
}

/* стрелки всегда вне карточек */
.why-arrow.prev {
  left: calc((100vw - var(--wrap)) / 2 - 60px);  /* выдвигаем левую стрелку наружу */
}

.why-arrow.next {
  right: calc((100vw - var(--wrap)) / 2 - 60px); /* выдвигаем правую стрелку наружу */
}

/* адаптив для планшетов и телефонов */
@media (max-width: 991.98px) {
  .why-arrow.prev {
    left: -12px;     /* остаётся чуть сбоку */
  }
  .why-arrow.next {
    right: -12px;
  }
}


.why-viewport{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    padding-inline:24px;
    padding-block:clamp(34px,4.5vw,70px);
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
  }
.why-viewport.no-snap{
    scroll-snap-type:none;
  }
  .why-viewport::-webkit-scrollbar{display:none}

  .why-track{
    display:inline-flex;
    gap: clamp(28px, 4vw, 48px);
    padding:6px 24px;
    transform-style:preserve-3d;
  }
  .why-track::before,
  .why-track::after{
    content:"";flex:0 0 calc((100vw - var(--wrap))/2 + var(--gutter));
  }

  .why-card{
    --scale-inactive:.97; --scale-active:1.05;
    --raise:0px;
    flex: 0 0 clamp(240px, 24vw, 320px);
    height:clamp(420px,50vw,600px);
    border-radius:36px;
    position:relative;
    cursor:pointer;
    background:var(--bg) center/cover no-repeat;
    color:#fff;
    overflow:hidden;
    transform:translateY(var(--raise)) scale(var(--scale-inactive));
    transition:transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), filter .35s ease;
    box-shadow:0 22px 55px rgba(34,44,64,.22);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    scroll-snap-align:center;
    transform-origin:center 86%;
    will-change:transform,box-shadow;
  }
  .why-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(40,55,75,.45) 0%,rgba(18,23,38,.9) 100%);
    transition:opacity .35s ease;
    animation:whyCardSheen 12s ease-in-out infinite;
  }
  .why-card::after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.25);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
  }
  .why-card.active{
    --raise:-22px;
    transform:translateY(var(--raise)) scale(var(--scale-active));
    box-shadow:0 35px 90px rgba(20,26,40,.45);
  }
  .why-card.active::after{opacity:.8}
  .why-card .why-content{position:absolute;inset:auto 20px 22px 20px;z-index:2}
  .why-card h3{
    text-transform:uppercase;letter-spacing:.03em;line-height:1.1;font-weight:800;
    font-size:clamp(18px,2.6vw,26px);margin:0 0 10px;
  }
  .why-card p{font-size:clamp(14px,2vw,16px);opacity:.95;margin:0}
  .why-card.cta::before{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.25))}
/* Кнопка в CTA */
.why-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border: none;                         /* убираем подчёркивание-полоску */
  border-radius: 999px;                 /* «капсула» */
  background: #ffffff;
  color: #2d3343;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;                /* естественная плотность */
  text-transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.why-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.why-cta:active{
  transform: translateY(0);
}

@media (max-width: 575.98px){
  .why-carousel::before,
  .why-carousel::after{
    display:none;
  }
  .why-viewport{
    padding-inline:0;
    padding-block:32px;
  }
  .why-track{
    gap:16px;
    padding:0 16px;
  }
  .why-card{
    flex:0 0 calc(100% - 24px);
    height:min(520px,120vw);
  }
  .why-cta{ padding: 12px 18px; }
}



/* Центруем текст и кнопку в CTA-слайде */
.why-card.cta .why-content{
  position:absolute;
  inset:0;                              /* растянули на всю карточку */
  display:flex;
  flex-direction:column;
  justify-content:center;               /* по вертикали — в середину */
  align-items:center;                   /* по горизонтали — в центр */
  text-align:center;
  gap: clamp(10px, 2.2vw, 16px);
  padding: clamp(20px, 4vw, 36px);
}

.why-card.cta h3{
  font-size: clamp(20px, 3vw, 28px);
  max-width: 22ch;
  margin: 0;
}

.why-card.cta p{
  max-width: 34ch;
  margin: 0;
  opacity: .95;
}

@keyframes whyCardSheen{
  0%,100%{opacity:.95;}
  50%{opacity:.75;}
}

/* мобильная версия слайдера начало */

@media (max-width: 575.98px){
  .why-pro{padding:0 0 40px}
  .why-viewport{
    padding-inline:12px;
    padding-block:36px;
    min-height:100vh;
  }

  /* ширина слайда — почти во всю ширину экрана */
  .why-card{
    flex: 0 0 92vw;
    height: min(620px, 92vh);
    --scale-inactive: .98;              /* на телефонах плавнее масштаб */
    --scale-active: 1.04;
    transform-origin:center 92%;
    border-radius:32px;
  }

  /* немного плотнее трек, чтобы поместилось удобнее */
  .why-track{
    gap: clamp(12px, 3vw, 16px);
    padding: 6px 6px;
  }

  /* стандартные карточки (не CTA): оставим нижний блок комфортно отступленным */
  .why-card:not(.cta) .why-content{
    inset: auto 18px 24px 18px;
  }
}
/* мобильная версия слайдера конец */

/* начало мобильный слайдер стрелки */
@media (max-width: 575.98px){
  .why-arrow{
    background: rgba(255,255,255,0.95);   /* почти белая «таблетка» */
    border: 1px solid rgba(0,0,0,0.1);    /* лёгкий обвод для контраста */
    color: #111;                          /* иконки чёрные */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* лёгкий объём */
    transition: all .25s ease;
  }

  .why-arrow:hover,
  .why-arrow:focus {
    background: #686f7d;                 /* подсветка при тапе/hover */
    color: #fff;                         /* стрелка белая на синем */
    box-shadow: 0 6px 16px rgba(0,102,204,0.35);
  }

  .why-arrow.prev { left: 6px; }
  .why-arrow.next { right: 6px; }
}
/* конец мобильный слайдер стрелки */


  .why-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:18px;
  }
  .why-dots button{
    width:46px;
    height:4px;
    border-radius:999px;
    border:none;
    background:rgba(45,51,67,.25);
    cursor:pointer;
    transition:background .3s,width .3s;
  }
  .why-dots button[aria-current="true"]{
    background:rgba(45,51,67,.9);
    width:70px;
  }