:root { --fx-font: "Geologica", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.font-geo { font-family: var(--fx-font); }
#track { pointer-events: none; }
#rotor { transition: transform 520ms cubic-bezier(.2,.8,.2,1); }
.dot-outer { width:56px; height:56px; border-radius:9999px; background:#101010; border:2px solid #fff; box-shadow: 0 6px 24px rgba(0,0,0,.45); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; }
.dot-inner { position:absolute; left:50%; top:50%; width:32px; height:32px; transform:translate(-50%,-50%); border-radius:9999px; background:#fff; }
.card { transition: left 420ms cubic-bezier(.2,.8,.2,1), top 420ms cubic-bezier(.2,.8,.2,1), transform 420ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; z-index: 20; }
.nav-pill { box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.card-icon { display: block; width: 48px; height: 48px; margin: 0 auto 1rem; background-color: #252525; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
#prevBtn[disabled], #nextBtn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Планшетная версия */
@media (max-width: 1023px) {
  #benefits-title { font-size: 2.5rem; }
  .card { transform-origin: center center; }
  .dot-outer { transform: translate(-50%, -50%) scale(0.8); }
}

/* Мобильная версия */
@media (max-width: 767px) {
  /* Скрываем ненужные элементы */
  .mobile-view #track, .mobile-view #rotor { display: none !important; }
  /* Перестраиваем главный контейнер в Flex-колонку */
  .mobile-view { display: flex; flex-direction: column; }
  /* Заголовок и навигация занимают фиксированное место */
  .mobile-view #benefits-title { position: relative !important; top: auto !important; left: auto !important; transform: none !important; padding: 3rem 1rem 1.5rem 1rem; font-size: 2rem; }
  .mobile-view #benefits-nav { position: relative !important; bottom: auto !important; left: auto !important; transform: none !important; padding: 1.5rem 1rem 2rem 1rem; }
  /* Контейнер карточек занимает все оставшееся место */
  .mobile-view #cardsLayer { position: relative !important; flex-grow: 1; display: flex; align-items: center; width: 100%; overflow: hidden; }
  /* Внутренний враппер для карточек, который будет двигаться */
  .mobile-cards-wrapper { display: flex; height: auto; width: 100%; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
  /* Стили для самих карточек */
  .mobile-view .card {
    position: relative !important; left: auto !important; top: auto !important;
    transform: none !important; opacity: 1 !important;
    flex-shrink: 0; width: 80%; margin: 0 10% !important;
  }
  .mobile-view .card-icon { width: 36px; height: 36px; }
  .mobile-view .card .font-geo { font-size: 1rem; line-height: 1.5rem; }
}