/* ============================================
   RESPONSIVE.CSS - Complete Responsive Styles
   ============================================ */

/* Адаптивность для больших экранов */
@media (min-width: 1441px) {
    .page-container {
        transform: none;
        max-width: 1600px;
    }
    
    .hero::before {
        background-size: cover;
        opacity: 1;
    }
}

/* Планшеты и средние экраны */
@media (max-width: 1024px) {
    .navbar {
        padding: 0 30px;
    }
    
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .two-column {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ecosystem-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    body {
        padding: 10px;
        gap: 10px;
    }
    
    .page-container {
        border-radius: 8px;
    }
    
    /* Навигация */
    .navbar {
        padding: 15px 20px;
        height: auto;
    }
    
    .nav-buttons {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block !important;
        font-size: 1.5rem;
        color: var(--primary);
        background: transparent;
        border: none;
        cursor: pointer;
    }
    
    /* Hero секция */
    .hero {
        padding: 60px 5%;
        min-height: 400px;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero h2 {
        font-size: 1.4rem;
    }
    
    /* Сетки */
    .features {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .testimonials {
        grid-template-columns: 1fr;
    }
    
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .two-column {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 5%;
    }
    
    .ecosystem-features {
        grid-template-columns: 1fr;
    }
    
    /* Футер */
    .footer {
        padding: 40px 5% 20px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    /* Секции */
    .section {
        padding: 50px 5%;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .page-title {
        padding: 60px 5% 40px;
        padding-bottom: 60px;
    }
    
    .page-title h1 {
        font-size: 2rem;
    }
    
    /* Pricing таблица */
    .pricing-table {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Процесс работы */
    .step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .step-connector {
        display: none;
    }
    
    /* Категории */
    .categories {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Workflow */
    .workflow-container {
        flex-direction: column;
        align-items: center;
    }
    
    .workflow-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    /* About страница */
    .about-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .about-image {
        width: 100%;
        height: 300px;
    }
    
    /* Формы */
    .contact-form-section,
    .faq-section,
    .docs-section,
    .chat-section,
    .hotline-section,
    .consultations-section {
        padding: 50px 5%;
    }
    
    .docs-grid,
    .chat-options,
    .hotline-container {
        grid-template-columns: 1fr;
    }
    
    /* Таблицы для мобильных */
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }
    
    thead {
        display: none;
    }
    
    tr {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        padding: 12px;
    }
    
    td {
        display: flex;
        justify-content: space-between;
        padding: 10px 8px;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        word-break: break-word;
    }
    
    td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        flex-basis: 45%;
        text-align: left;
    }
    
    td:last-child {
        border-bottom: none;
    }
    
    .difficulty {
        padding: 3px 8px;
        font-size: 12px;
    }
    
    /* Чат-бот */
    .chat-icon {
        padding: 12px 18px;
        font-size: 1rem;
    }
    
    .chat-icon::after {
        display: none;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .hero h2 {
        font-size: 1.2rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    .stats {
        grid-template-columns: 1fr;
    }
    
    .stat-item h3 {
        font-size: 2rem;
    }
    
    .blue-box {
        padding: 30px 20px;
    }
    
    .blue-box h3 {
        font-size: 1.5rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
}

/* Мобильное меню */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: white;
    padding: 20px;
    display: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu .nav-button {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 12px;
    text-align: left;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-menu .nav-button:hover {
    background: var(--gray-light);
    color: var(--primary);
}

/* Кнопка бургер меню - ВСЕГДА скрыта на десктопе */
.mobile-menu-btn {
    display: flex;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary);
    cursor: pointer;
    padding: 8px;
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    color: var(--primary-hover);
    transform: scale(1.1);
}

/* Показываем бургер только на мобильных */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block !important;
    }
    
    /* Дополнительные стили для мобильной адаптации */
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rating-system {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .workflow-container {
        gap: 15px;
    }
    
    .workflow-step {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .analytics-grid,
    .rating-system {
        grid-template-columns: 1fr;
    }
}