/* ===================================================
   ENGAGEMENT BLOCKS - INTERACTIVE STYLES
   =================================================== */

/* Hover эффекты для карточек проблем - УПРОЩЕНО */
.problem-card {
  transition: box-shadow 0.2s ease;
}

.problem-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Hover эффекты для карточек шагов - УПРОЩЕНО */
.step-card {
  transition: box-shadow 0.2s ease;
}

.step-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Hover для CTA кнопки - УПРОЩЕНО */
.cta-button {
  transition: opacity 0.2s ease;
}

.cta-button:hover {
  opacity: 0.9;
}

/* FAQ интерактивность */
.faq-question {
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: rgba(45, 57, 171, 0.05);
}

/* FAQ Answer базовые стили */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

/* Добавляем отступ к тексту ответа */
.faq-item.active .faq-answer > div {
  padding-bottom: 32px !important;
  border-top: none !important;
}

/* Убираем верхнюю линию у ответа */
.faq-answer > div {
  border-top: none !important;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Фикс для gradient text (добавляем standard property) */
.social-proof div[style*="-webkit-background-clip"] {
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
}

/* Hover эффект для футер ссылок */
.footer-link,
.footer-link-main {
  transition: color 0.3s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-link:hover,
.footer-link-main:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateX(3px);
}

/* Анимация появления секций - ОПТИМИЗИРОВАНО */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Начальное состояние для секций устанавливается через JS */
.problems-section,
.how-it-works,
.benefits-section,
.faq-section,
.social-proof,
.final-cta {
  will-change: opacity, transform; /* Оптимизация для браузера */
}

/* Предотвращаем скачки при изменении размера */
html {
  scroll-behavior: auto; /* Отключаем smooth scroll для предотвращения багов */
}

/* Блокируем скролл к якорям */
:target {
  scroll-margin-top: 0;
}

/* Пульсация для иконок - ОТКЛЮЧЕНА */
/* @keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
}

.problem-card:hover > div:first-child,
.step-card:hover > div:first-child {
  animation: pulse 1s infinite;
} */

/* ===================================================
   RESPONSIVE - MOBILE ADAPTATIONS
   =================================================== */

@media (max-width: 1024px) {
  /* Tablets */
  .problems-section h2,
  .how-it-works h2,
  .benefits-section h2,
  .faq-section h2,
  .social-proof h2 {
    font-size: 2rem !important;
  }
  
  .final-cta h2 {
    font-size: 2.2rem !important;
  }
}

@media (max-width: 768px) {
  /* Mobile */
  section[class*="-section"] {
    padding: 60px 20px !important;
  }
  
  .problems-section h2,
  .how-it-works h2,
  .benefits-section h2,
  .faq-section h2,
  .social-proof h2 {
    font-size: 1.8rem !important;
  }
  
  .final-cta h2 {
    font-size: 2rem !important;
  }
  
  .final-cta p {
    font-size: 1.1rem !important;
  }
  
  /* Карточки в одну колонку на мобильных */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Меньше отступы */
  .problem-card,
  .step-card {
    padding: 24px !important;
  }
  
  /* Адаптация шрифтов в карточках */
  .problem-card h3,
  .step-card h3 {
    font-size: 1.3rem !important;
  }
  
  /* FAQ на мобильных */
  .faq-question {
    font-size: 1rem !important;
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Small mobile */
  .problems-section h2,
  .how-it-works h2,
  .benefits-section h2,
  .faq-section h2,
  .social-proof h2 {
    font-size: 1.5rem !important;
  }
  
  .final-cta h2 {
    font-size: 1.7rem !important;
  }
  
  .final-cta p {
    font-size: 1rem !important;
  }
  
  /* Уменьшаем иконки */
  .problem-card > div:first-child,
  .step-card > div:first-child {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  
  /* CTA кнопка на полную ширину */
  .cta-button {
    width: 100%;
    padding: 16px 32px !important;
    font-size: 1rem !important;
  }
}

/* ===================================================
   ACCESSIBILITY IMPROVEMENTS
   =================================================== */

/* Фокус для доступности - убираем outline */
.faq-question:focus,
.cta-button:focus {
  outline: none;
}

/* Добавляем визуальную обратную связь вместо outline */
.faq-question:focus {
  background: rgba(45, 57, 171, 0.03);
}

/* Улучшенный контраст для читаемости */
@media (prefers-contrast: high) {
  .problem-card,
  .step-card,
  .faq-item {
    border: 2px solid #e2e8f0;
  }
}

/* Уменьшение анимаций для пользователей с вестибулярными расстройствами */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .problem-card:hover,
  .step-card:hover,
  .cta-button:hover {
    transform: none;
  }
}

/* ===================================================
   PRINT STYLES
   =================================================== */

@media print {
  .problems-section,
  .how-it-works,
  .benefits-section,
  .faq-section,
  .social-proof,
  .final-cta {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .cta-button {
    display: none;
  }
}