/* Mobile Styles */
@media (max-width: 1024px) {
    /* Header & Navigation */
    .header-container {
      padding: 0 1rem;
    }
    
    nav ul {
      gap: 1rem;
    }
    
    .contact-info {
      display: none;
    }
    
    /* Hero Section */
    .hero h1 {
      font-size: 2.2rem;
    }
    
    .hero p {
      font-size: 1.1rem;
    }
    
    /* Pricing Cards */
    .pricing-card.popular {
      transform: scale(1.02);
    }
    
    .pricing-card.popular:hover {
      transform: scale(1.02) translateY(-10px);
    }
}

@media (max-width: 1200px) {
  /* Header & Navigation */  
  .contact-info .login-btn {
    display: none;
  }
  

}

/* Мобильная кнопка меню - БАЗОВЫЕ СТИЛИ */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 102;
  position: relative; /* Добавляем для десктопа */
}

.mobile-menu-btn i {
  font-size: 1.5rem;
  color: var(--dark);
  transition: var(--transition);
}

.mobile-menu-btn.active i {
  color: var(--primary);
}

/* Мобильная кнопка телефона в правом нижнем углу */
.mobile-call-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(30, 190, 180, 0.4);
  z-index: 99;
  transition: var(--transition);
  text-decoration: none;
  animation: pulse 2s infinite;
}

.mobile-call-btn:hover {
  background-color: var(--primary-dark);
  color: var(--white);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(30, 190, 180, 0.6);
}

.mobile-call-btn i {
  font-size: 1.2rem;
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(30, 190, 180, 0.4);
  }
  50% {
    box-shadow: 0 4px 12px rgba(30, 190, 180, 0.8);
  }
  100% {
    box-shadow: 0 4px 12px rgba(30, 190, 180, 0.4);
  }
}

/* Убираем overlay полностью - он не нужен для полноэкранного меню */
.menu-overlay {
  display: none !important;
}

@media (max-width: 768px) {
    /* Показать кнопку мобильного меню */
    .mobile-menu-btn {
      display: flex;
      /* В закрытом состоянии - обычная позиция */
      position: relative;
      background-color: transparent;
      border-radius: 0;
      width: 40px;
      height: 40px;
      box-shadow: none;
    }
    
    /* КОГДА МЕНЮ АКТИВНО - кнопка становится fixed */
    .mobile-menu-btn.active {
      position: fixed !important;
      top: 1rem;
      right: 1rem;
      z-index: 102;
      background-color: var(--white);
      border-radius: 50%;
      width: 50px;
      height: 50px;
      box-shadow: var(--shadow);
    }
    
    /* Изменение иконки на крестик */
    .mobile-menu-btn.active i:before {
      content: '\f00d' !important; /* Иконка крестика (Font Awesome) */
    }
    
    /* Header & Navigation */
    .header-container {
      position: relative;
    }
    
    /* ПОЛНОЭКРАННАЯ НАВИГАЦИЯ */
    nav {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100vw;
      height: 100vh;
      background-color: var(--white);
      z-index: 101;
      padding: 80px 2rem 2rem;
      transition: left 0.3s ease;
      overflow-y: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Когда меню открыто */
    nav.open {
      left: 0;
    }
    
    nav ul {
      flex-direction: column;
      gap: 2rem;
      align-items: center;
      justify-content: center;
      width: 100%;
      text-align: center;
    }
    
    nav ul li {
      width: auto; /* ИСПРАВЛЕНО: было width: 100% */
    }
    
    nav ul li a {
      display: inline-block; /* ИСПРАВЛЕНО: было display: block */
      padding: 1rem 2rem;
      font-size: 1.5rem;
      font-weight: 600;
      border: none;
      width: auto;
      color: var(--dark);
      transition: var(--transition);
      border-radius: var(--border-radius);
      text-align: center;
    }

    nav ul li a:hover {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    /* Hero Section */
    .hero {
      padding: 3rem 0;
    }
    
    .hero h1 {
      font-size: 2rem;
    }
    
    .hero-buttons {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
    
    .hero-buttons .btn {
      width: 100%;
      max-width: 300px;
    }
    
    /* Section Spacing */
    .section {
      padding: 3rem 0;
    }
    
    /* Benefits Numbers */
    .benefits-wrapper {
      flex-direction: column;
      align-items: center;
    }
    
    /* About Section */
    .about-content {
      flex-direction: column;
    }
    
    .about-image {
      order: -1;
    }
    
    /* Functionality Tabs */
    .tabs {
      flex-direction: column;
      align-items: center;
    }
    
    .tab-btn {
      width: 100%;
      max-width: 300px;
      text-align: center;
    }
    
    .tab-content.active {
      flex-direction: column;
    }
    
    .tab-image {
      order: -1;
      width: 100%;
      max-width: 400px;
      margin: 0 auto 2rem;
    }

    .tab-image img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .tab-description {
      width: 100%;
    }
    
    .tab-description h3 {
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    /* Testimonials */
    .testimonials-slider {
      flex-direction: column;
      gap: 1.5rem;
    }
    
    /* CTA Section */
    .cta {
      padding: 3rem 0;
    }
    
    .cta h2 {
      font-size: 1.8rem;
    }
    
    /* Contact Section */
    .contact-container {
      flex-direction: column;
    }
    
    /* Footer */
    .footer-content {
      flex-direction: column;
    }
    
    .footer-column {
      width: 100%;
    }
    
    /* Блокировать скролл когда меню открыто */
    body.menu-open {
      overflow: hidden;
    }
}

@media (max-width: 480px) {
    /* Headers */
    h1 {
      font-size: 1.8rem;
    }
    
    h2 {
      font-size: 1.6rem;
    }
    
    /* Logo */
    .logo {
      font-size: 1.5rem;
    }
    
    /* Section Spacing */
    .section {
      padding: 2.5rem 0;
    }
    
    /* Comparison Table */
    .comparison-table {
      font-size: 0.9rem;
    }
    
    /* Feature Cards */
    .features-grid {
      grid-template-columns: 1fr;
    }
    
    /* Demo Options */
    .demo-options {
      gap: 1.5rem;
    }
    
    /* Contact Form */
    .contact-form .btn {
      width: 100%;
    }
    
    /* Уменьшить размер мобильной кнопки телефона на малых экранах */
    .mobile-call-btn {
      width: 50px;
      height: 50px;
      bottom: 15px;
      right: 15px;
      font-size: 1.2rem;
    }
    
    .mobile-call-btn i {
      font-size: 1rem;
    }
    
    /* НЕТ НЕОБХОДИМОСТИ уменьшать ширину - у нас полноэкранное меню */
    /* nav { width: 90%; } - УДАЛЕНО */
}

/* Дополнительные стили для лучшего отображения */
@media (min-width: 769px) {
  /* Скрыть мобильную кнопку меню на десктопе */
  .mobile-menu-btn {
    display: none !important;
  }
  
  /* Скрыть мобильную кнопку телефона на десктопе */
  .mobile-call-btn {
    display: none !important;
  }
}