/* Build v0.9.8R.12 - Features */
.features {
  position: relative;
  width: 100%;
  background: #FAF6F6; /* фон как в макете */
  padding: 120px 0 140px; /* более просторная секция */
}
.features__container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Carousel */
.features__carousel { position: relative; margin-bottom: 80px; }
.features__slide { display: none; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.features__slide--active { display: grid; }
.features__media { background: url('../assets/images/scales_1.png') left center/contain no-repeat; min-height: 460px; }
/* Колонка текста как flex‑контейнер, чтобы точки были всегда внизу */
.features__content { display: flex; flex-direction: column; min-height: 460px; }
.features__title { font-family: var(--font-family-ubuntu-mono); font-size: 40px; font-weight: 700; margin: 0 0 8px; }
.features__subtitle { font-size: 14px; color: #7a7a7a; margin: 0 0 16px; }
.features__description { font-size: 16px; margin: 0 0 12px; }
.features__list { margin: 0 0 26px; padding-left: 18px; }
.features__list li { margin-bottom: 8px; }
/* Входные анимации элементов текущего слайда */
.features__slide .features__media,
.features__slide .features__title,
.features__slide .features__subtitle,
.features__slide .features__description,
.features__slide .features__list,
.features__slide .features__dots {
  opacity: 0;
  transform: translateY(8px);
}
.features__slide .features__media {
  transform: translateX(-32px);
}

/* Когда секция во вьюпорте — анимацию запускаем классом --switching (см. ниже) */

/* Анимация при переключении слайдов */
.features__slide.features__slide--switching .features__media {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: .15s;
}
.features__slide.features__slide--switching .features__title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: 0s;
}
.features__slide.features__slide--switching .features__subtitle,
.features__slide.features__slide--switching .features__description {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: .12s;
}
.features__slide.features__slide--switching .features__list,
.features__slide.features__slide--switching .features__dots {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: .24s;
}
/* Переключатель под текстом, фиксируем позицию снизу колонки */
.features__dots { margin-top: auto; padding-top: 12px; display: flex; gap: 14px; align-items: center; }
.features__dot { width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 3px solid #1f1f1f; opacity: .9; cursor: pointer; padding: 0; position: relative; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; color: #1f1f1f; }
.features__dot--active { background: var(--color-red-primary); border-color: var(--color-red-primary); color: var(--color-red-primary); }

/* эффект "булька" */
.features__dot:hover { transform: scale(1.12); }
.features__dot:focus-visible { outline: none; transform: scale(1.12); }
.features__dot::after { content: ''; position: absolute; inset: -6px; border: 3px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none; }
.features__dot:hover::after, .features__dot:focus-visible::after { animation: features-bubble .45s ease-out forwards; }

@keyframes features-bubble {
  0% { opacity: .28; transform: scale(0.7); }
  70% { opacity: .12; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* Promo */
.features__promo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 72px 48px; border-radius: 12px; overflow: hidden; background: transparent; }
/* фон тянем на всю ширину промо-блока */
.features__promo::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  /* было: bg_promo_2.jpg — переименуем старый фон в старый при необходимости */
  background: url('../assets/images/bg_promo_2.jpg') center/cover no-repeat; 
  opacity: .9; 
  z-index: 0; 
  transition: transform 0.3s ease-out;
  transform-origin: center center;
  transform: translate(var(--bg-offset-x, 0px), var(--bg-offset-y, 0px)) scale(1.1);
}
.features__promo > * { position: relative; z-index: 1; }
.promo__title { font-family: 'Ubuntu Sans Mono', var(--font-family-ubuntu-mono), monospace; font-size: 36px; font-weight: 500; line-height: 1.2; margin: 0 0 16px; background: linear-gradient(180deg, #852626 0%, #9F2121 50%, #EE3838 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.promo__text { font-size: 16px; margin: 0; max-width: 540px; color: #1f1f1f; }
.promo__cta { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  position: relative;
  width: 318px; 
  height: 53px; 
  background: transparent; 
  color: #fff; 
  font-family: var(--font-family-ubuntu-mono); 
  font-weight: 700; 
  font-size: 24px; 
  text-decoration: none; 
  border: none;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.2s ease-out;
  text-shadow: 0 2px 2px rgba(0,0,0,0.25);
  z-index: 3;
}

.promo__cta-text { position: relative; z-index: 2; }

.promo__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-red-primary);
  border-radius: 6px;
  z-index: 1;
}

.promo__cta::after {
  content: '';
  position: absolute;
  top: 4px;
  left: -4px;
  width: 100%;
  height: 100%;
  background: var(--color-red-secondary);
  border-radius: 6px;
  z-index: 0;
  transition: top 0.2s ease, left 0.2s ease;
}

.promo__cta:hover { 
  transform: translateY(-4px); 
}

.promo__cta:hover::after {
  top: 6px;
  left: -5px;
}
.promo__hint { margin-top: 10px; font-size: 14px; color: #333; }

/* медиа‑варианты для разных слайдов */
.features__media--weight { background-image: url('../assets/images/scales_1.png'); }
.features__media--ai { background-image: url('../assets/images/features_ai_1.png'); }
.features__media--climate { background-image: url('../assets/images/features_temperature_1.png'); }
.features__media--telegram { background-image: url('../assets/images/features_telegram_1.png'), url('../assets/images/paper_plane.png'); }
.features__media--analytics { background-image: url('../assets/images/features_report_1.png'); }
.features__media--labels { background-image: url('../assets/images/features_tag_1.png'); }
.features__media--profile { background-image: url('../assets/images/features_profile_1.png'); }
.features__media--weight,
.features__media--ai,
.features__media--climate,
.features__media--telegram,
.features__media--analytics,
.features__media--labels,
.features__media--profile { background-position: left center; background-repeat: no-repeat; background-size: contain; }

/* Бар точек под каруселью */
.features__dotsbar { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.features__dotsbar .features__dots { justify-self: end; }

@media (max-width: 900px) {
  .features__slide--active { grid-template-columns: 1fr; }
  .features__media { min-height: 300px; background-position: center center !important; background-repeat: no-repeat; background-size: contain; }
  .features__content { min-height: auto; }
  .features__promo { grid-template-columns: 1fr; }
}