/* Responsive styles */
@media (max-width:980px){
  .wrap { padding: 0; }
  header, header.scrolled { padding: 10px 0; }
  .header-wrapper { padding: 0 10px; height: 60px; }
  .hero-wrapper { padding: 80px 20px 40px; min-height: auto; }
  .hero { flex-direction: column; text-align: center; }
  .hero-text { text-align: center; }
  .cta { justify-content: center; }
  .meta { justify-content: center; }
  .hero-image-container { margin-top: 40px; }
  footer { padding: 20px; flex-direction: column; gap: 10px; text-align: center; }
  .hero h2 { font-size: 32px; }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg);
    width: 100%;
    flex-direction: column;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .menu-toggle { display: block; position: relative; z-index: 1; }
  .menu-toggle input { display: block; width: 40px; height: 32px; position: absolute; top: -5px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; }
  .menu-toggle .ham { display: block; width: 30px; height: 3px; margin-bottom: 5px; position: relative; background: var(--text); border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
  .menu-toggle .ham:nth-child(2) { transform-origin: 0% 0%; }
  .menu-toggle .ham:nth-child(4) { transform-origin: 0% 100%; }
  .menu-toggle input:checked ~ .ham:nth-child(2) { transform: rotate(45deg) translate(-2px, -1px); }
  .menu-toggle input:checked ~ .ham:nth-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
  .menu-toggle input:checked ~ .ham:nth-child(4) { transform: rotate(-45deg) translate(0, -1px); }
  body.nav-open nav { display: flex; }
  .pricing-card, .features-included {flex-direction:column; grid-template-columns: 1fr;}
  .download-cards { grid-template-columns: 1fr; }
  .pricing-image {
    width: 100%;
    height: auto;
    margin: 30px auto 0; /* Добавляем отступ сверху и центрируем */
  }
  
  /* Улучшаем читаемость текста на мобильных устройствах */
  .hero p, .feature-text p {
    font-size: 15px;
  }
  
  /* Корректируем размеры кнопок на мобильных устройствах */
  .btn {
    padding: 10px 20px;
    font-size: 15px;
  }
  
  /* Делаем FAQ более удобным для мобильных устройств */
  .faq .q-header {
    padding: 10px;
  }
  
  /* Улучшаем отображение карточек функций */
  .feature-grid {
    grid-template-columns: 1fr !important; /* !important чтобы гарантировать перезапись других стилей */
  }
  
  /* Уменьшаем отступы на мобильных устройствах */
  .section-wrapper {
    padding: 40px 20px;
  }
}

@media (min-width: 981px) { .menu-toggle { display: none; } }
@media (max-width: 768px) {
  .hero h2 { font-size: 28px; }
  .section-wrapper { padding: 40px 20px; }
  .cta { flex-direction: column; }
  .feature-text h3 { font-size: 24px; }
  .feature-visual { height: 200px; }
  
  /* Дополнительные стили для планшетов и маленьких экранов */
  .section-content {
    flex-direction: column;
    gap: 24px;
  }
  
  /* Корректируем размеры шрифтов для лучшей читаемости */
  h3 {
    font-size: 24px;
  }
  
  .section-title {
    font-size: 28px;
  }
}

/* Добавляем дополнительный медиа-запрос для очень маленьких экранов */
@media (max-width: 480px) {
  .hero h2 { font-size: 24px; }
  .hero p { font-size: 14px; }
  .btn { padding: 8px 16px; font-size: 14px; }
  .section-wrapper { padding: 30px 15px; }
  .feature-visual { height: 180px; }
  
  /* Уменьшаем размеры иконок */
  .feature-icon svg {
    width: 28px;
    height: 28px;
  }
  
  /* Корректируем отступы в навигации */
  .header-wrapper { padding: 0 8px; }
}

/* Utility classes */
.section-subtitle { color: var(--muted); margin-top: 6px; }
.download-note { margin-top: 10px; color: var(--muted); font-size: 14px; }