/* ==========================================================================
   1. ПЕРЕМЕННЫЕ ДИЗАЙНА И ЭКО-МИНИМАЛИЗМ
   ========================================================================== */
:root {
    --bg-main: #faf9f5;        
    --bg-white: #ffffff;
    --text-dark: #1c1e20;      /* Глубокий оттенок для превосходной контрастности */
    --text-muted: #62666a;
    --color-accent: #c99665;   
    --color-accent-hover: #b07f50;
    --color-accent-light: #f3ece4;
    --color-border: #e3e0d7;   /* Мягкие границы блоков */
    --radius-bento: 24px;      /* Трендовое Bento-скругление */
    
    /* Основной шрифт проекта */
    --font-base: 'Geist', system-ui, sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Сброс базовых стилей браузера --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { 
    scroll-behavior: smooth; 
    font-family: var(--font-base); 
    background-color: var(--bg-main); 
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

body { 
    line-height: 1.5;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 24px; 
}

/* ==========================================================================
   2. КНОПКИ И ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */
.btn { 
    padding: 14px 28px; 
    border-radius: 100px; 
    font-weight: 600; 
    font-size: 14px; 
    border: none; 
    cursor: pointer; 
    transition: var(--transition); 
    display: inline-block; 
    text-align: center;
    text-decoration: none;
}
.btn-primary { 
    background-color: var(--text-dark); 
    color: var(--bg-white); 
}
.btn-primary:hover { 
    background-color: var(--color-accent); 
    transform: translateY(-2px); 
}
.btn-outline { 
    background: transparent; 
    border: 1px solid var(--color-border); 
    color: var(--text-dark); 
}
.btn-outline:hover { 
    background: var(--bg-white); 
    border-color: var(--text-dark); 
}
.btn-sm { 
    padding: 10px 20px; 
    font-size: 13px; 
    background-color: var(--color-accent-light); 
    color: var(--color-accent-hover); 
}
.btn-sm:hover { 
    background-color: var(--color-accent); 
    color: white; 
}
.btn-block { 
    width: 100%; 
}

/* ==========================================================================
   3. ШАПКА САЙТА (HEADER)
   ========================================================================== */
.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: rgba(250, 249, 245, 0.85); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border); 
    z-index: 100; 
}
.header-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 80px; 
}
.logo { 
    font-size: 22px; 
    font-weight: 800; 
    letter-spacing: -0.5px; 
    text-decoration: none;
    color: var(--text-dark);
}
.logo span { 
    color: var(--color-accent); 
}
.nav a { 
    text-decoration: none; 
    color: var(--text-dark); 
    font-weight: 600; 
    margin-right: 24px; 
    font-size: 14px; 
    transition: var(--transition); 
}
.nav a:hover { 
    color: var(--color-accent); 
}
.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}
.phone { 
    text-decoration: none; 
    color: var(--text-dark); 
    font-weight: 800; 
    font-size: 15px; 
}

/* ==========================================================================
   4. ГЛАВНЫЙ ЭКРАН (HERO)
   ========================================================================== */
.hero { 
    padding: clamp(120px, 15vh, 200px) 0 60px; 
}
.hero-container { 
    display: grid; 
    grid-template-columns: 1.2fr 0.8fr; 
    gap: 40px; 
    align-items: center; 
}
.hero-subtitle { 
    color: var(--color-accent-hover); 
    font-weight: 800; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    display: block; 
    margin-bottom: 16px; 
}
.hero h1 { 
    font-size: clamp(32px, 5vw, 54px); 
    font-weight: 800; 
    line-height: 1.1; 
    letter-spacing: -1px; 
    margin-bottom: 24px; 
}
.hero p { 
    font-size: 17px; 
    color: var(--text-muted); 
    line-height: 1.6; 
    margin-bottom: 32px; 
}
.hero-buttons { 
    display: flex; 
    gap: 16px; 
    flex-wrap: wrap;
}
.hero-badge { 
    background: var(--bg-white); 
    border: 1px solid var(--color-border); 
    padding: 40px; 
    border-radius: var(--radius-bento); 
}
.badge-years { 
    font-size: 42px; 
    font-weight: 800; 
    color: var(--color-accent); 
    display: block; 
    margin-bottom: 12px; 
    letter-spacing: -1px; 
}

/* ==========================================================================
   5. КАТАЛОГ ПРОДУКЦИИ
   ========================================================================== */
section { 
    padding: clamp(50px, 8vh, 100px) 0; 
}
.section-title-block { 
    text-align: center; 
    margin-bottom: 48px; 
}
.section-title-block h2 { 
    font-size: clamp(26px, 4vw, 38px); 
    font-weight: 800; 
    letter-spacing: -0.5px; 
    margin-bottom: 12px; 
}
.section-title-block p {
    color: var(--text-muted);
    font-size: 15px;
}

.products-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
}

.product-card { 
    background: var(--bg-white); 
    border: 1px solid var(--color-border); 
    border-radius: var(--radius-bento); 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: var(--transition); 
}
.product-card:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 16px 32px rgba(28,30,32,0.04); 
    border-color: var(--color-accent); 
}

.product-img-box { 
    width: 100%; 
    height: 210px; 
    border-radius: 16px; 
    overflow: hidden; 
    margin-bottom: 20px; 
    background: var(--bg-main); 
}
.product-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: var(--transition); 
}
.product-card:hover .product-img { 
    transform: scale(1.03); 
}

.product-info { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
}
.product-info h3 { 
    font-size: 19px; 
    font-weight: 800; 
    margin-bottom: 12px; 
    letter-spacing: -0.3px; 
}
.product-info p { 
    font-size: 14px; 
    color: var(--text-muted); 
    line-height: 1.5; 
    margin-bottom: 16px; 
    flex-grow: 1; 
}

.nutrition { 
    font-size: 12px; 
    color: var(--text-muted); 
    background: var(--bg-main); 
    padding: 8px 14px; 
    border-radius: 10px; 
    align-self: flex-start; 
    margin-bottom: 24px; 
    font-weight: 600; 
}
.product-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-top: 12px; 
    border-top: 1px solid var(--bg-main); 
}
.stm-tag { 
    font-size: 11px; 
    font-weight: 800; 
    color: var(--text-muted); 
    letter-spacing: 0.5px; 
}

/* Переключатели табов внутри карточек */
.tabs-container {
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-start;
}
.tabs { 
    display: flex; 
    background: var(--bg-main); 
    padding: 3px; 
    border-radius: 100px; 
    border: 1px solid var(--color-border); 
}
.tab-btn { 
    padding: 6px 14px; 
    border-radius: 100px; 
    border: none; 
    background: transparent; 
    font-family: var(--font-base);
    font-weight: 600; 
    font-size: 12px; 
    cursor: pointer; 
    transition: var(--transition); 
    color: var(--text-muted);
}
.tab-btn.active { 
    background: var(--text-dark); 
    color: var(--bg-white); 
}
.grid-note { 
    text-align: center; 
    margin-top: 40px; 
    color: var(--text-muted); 
    font-size: 14px; 
}

/* ==========================================================================
   6. БЛОК: СХЕМА РАБОТЫ
   ========================================================================== */
.workflow-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; 
}
.workflow-step { 
    background: var(--bg-white); 
    padding: 32px; 
    border-radius: var(--radius-bento); 
    border: 1px solid var(--color-border); 
}
.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.step-num { 
    font-size: 28px; 
    font-weight: 800; 
    color: var(--color-accent); 
}
.step-icon-box {
    width: 44px;
    height: 44px;
    background-color: var(--color-accent-light);
    color: var(--color-accent-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-icon-box svg {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}
.workflow-step h4 { 
    font-size: 17px; 
    font-weight: 800; 
    margin-bottom: 8px; 
}
.workflow-step p { 
    font-size: 14px; 
    color: var(--text-muted); 
    line-height: 1.5; 
}

/* ==========================================================================
   7. УСЛОВИЯ СОТРУДНИЧЕСТВА
   ========================================================================== */
.coop-bento { 
    display: grid; 
    grid-template-columns: 1.1fr 0.9fr; 
    gap: 24px; 
}
.coop-info-card { 
    background: var(--bg-white); 
    padding: 40px; 
    border-radius: var(--radius-bento); 
    border: 1px solid var(--color-border); 
}
.coop-info-card h3 { 
    font-size: 22px; 
    font-weight: 800; 
    margin-bottom: 12px; 
}
.coop-info-card p { 
    color: var(--text-muted); 
    line-height: 1.6; 
    margin-bottom: 28px; 
    font-size: 15px; 
}
.coop-badges { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
}
.c-badge { 
    background: var(--bg-main); 
    padding: 10px 18px; 
    border-radius: 100px; 
    font-size: 13px; 
    font-weight: 600; 
    border: 1px solid var(--color-border); 
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.c-badge svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-hover);
}
.coop-target-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
.target-item { 
    background: var(--bg-white); 
    padding: 24px; 
    border-radius: var(--radius-bento); 
    border: 1px solid var(--color-border); 
    font-weight: 800; 
    font-size: 15px; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
}
.icon-check {
    width: 40px;
    height: 40px;
    background-color: var(--bg-main);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-hover);
    flex-shrink: 0;
}
.icon-check svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   8. БЛОК: ОТЗЫВЫ ПАРТНЕРОВ
   ========================================================================== */
.reviews-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; 
}
.review-card { 
    background: var(--bg-white); 
    border: 1px solid var(--color-border); 
    padding: 32px; 
    border-radius: var(--radius-bento); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}
.review-card.size-lg { 
    grid-column: span 2; 
    background-color: var(--color-accent-light); 
    border-color: transparent; 
}
.review-text { 
    font-size: 15px; 
    line-height: 1.6; 
    color: var(--text-dark); 
    margin-bottom: 32px; 
}
.review-author strong { 
    display: block; 
    font-size: 15px; 
    color: var(--text-dark); 
    margin-bottom: 2px; 
}
.review-author span { 
    font-size: 13px; 
    color: var(--text-muted); 
}

/* ==========================================================================
   9. БЛОК: FAQ (АККОРДЕОН)
   ========================================================================== */
.faq-accordion { 
    max-width: 760px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}
.faq-item { 
    background: var(--bg-white); 
    border: 1px solid var(--color-border); 
    border-radius: 16px; 
    transition: var(--transition); 
}
.faq-question { 
    width: 100%; 
    padding: 24px; 
    text-align: left; 
    background: none; 
    border: none; 
    font-size: 16px; 
    font-weight: 800; 
    color: var(--text-dark); 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-family: var(--font-base); 
}
.faq-icon { 
    font-size: 18px; 
    color: var(--color-accent); 
    transition: var(--transition); 
}
.faq-answer { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
    padding: 0 24px; 
}
.faq-answer p { 
    padding-bottom: 24px; 
    color: var(--text-muted); 
    font-size: 14px; 
    line-height: 1.6; 
}
.faq-item.active { 
    border-color: var(--text-dark); 
}
.faq-item.active .faq-answer { 
    max-height: 300px; 
}
.faq-item.active .faq-icon { 
    transform: rotate(45deg); 
    color: var(--text-dark); 
}

/* ==========================================================================
   10. ДОСТАВКА И ЭКСПОРТ
   ========================================================================== */
.delivery-banner { 
    background: var(--text-dark); 
    color: var(--bg-white); 
    padding: 48px; 
    border-radius: var(--radius-bento); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 40px; 
}
.delivery-text h2 { 
    font-size: 28px; 
    font-weight: 800; 
    margin-bottom: 12px; 
    letter-spacing: -0.5px; 
}
.delivery-text p { 
    color: #a1a5aa; 
    line-height: 1.6; 
    max-width: 680px; 
    margin-bottom: 16px; 
    font-size: 15px; 
}
.manager-tip { 
    font-size: 13px; 
    color: var(--color-accent); 
    font-weight: 600; 
}

/* ==========================================================================
   11. КОНТАКТЫ И ВИЗУАЛ КОМПЛЕКСА
   ========================================================================== */
.contacts-grid-layout { 
    display: grid; 
    grid-template-columns: 1.2fr 0.8fr; 
    gap: 24px; 
}
.contacts-details { 
    background: var(--bg-white); 
    padding: 40px; 
    border-radius: var(--radius-bento); 
    border: 1px solid var(--color-border); 
}
.contacts-details h2 { 
    font-size: 30px; 
    font-weight: 800; 
    margin-bottom: 12px; 
}
.contacts-details p { 
    color: var(--text-muted); 
    margin-bottom: 32px; 
    font-size: 15px; 
}
.info-row { 
    margin-bottom: 24px; 
}
.row-label { 
    display: block; 
    font-size: 11px; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 6px; 
    font-weight: 600; 
}
.row-value { 
    font-size: 18px; 
    font-weight: 800; 
    color: var(--text-dark); 
    text-decoration: none; 
}

.contacts-visual-box {
    position: relative;
    border-radius: var(--radius-bento);
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--color-border);
}
.contacts-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.contacts-action-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(20, 21, 22, 0.95) 50%, rgba(20, 21, 22, 0));
    padding: 40px;
    padding-top: 80px;
    color: white;
}
.contacts-action-overlay h3 {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 800;
}

/* ==========================================================================
   12. ПОДВАЛ (FOOTER)
   ========================================================================== */
.footer { 
    background: #141516; 
    color: #8e9398; 
    padding: 60px 0; 
    font-size: 13px; 
    border-top: 1px solid var(--color-border); 
}
.footer-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
}
.footer .logo { 
    color: white; 
    margin-bottom: 16px; 
}
.footer-left .copy { 
    margin-bottom: 8px; 
    color: white; 
    font-weight: 600; 
}
.legal { 
    font-size: 11px; 
    max-width: 500px; 
    line-height: 1.5; 
    color: #6c7278; 
}
.footer-right { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 24px; 
}
.footer-links a { 
    color: #8e9398; 
    text-decoration: none; 
    margin-left: 24px; 
    transition: var(--transition); 
}
.footer-links a:hover { 
    color: white; 
}
.national-project { 
    color: var(--color-accent); 
    font-weight: 600; 
}

/* ==========================================================================
   13. МОДАЛЬНОЕ ОКНО
   ========================================================================== */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(20,21,22,0.3); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    pointer-events: none; 
    transition: var(--transition); 
    z-index: 1000; 
}
.modal-overlay.active { 
    opacity: 1; 
    pointer-events: auto; 
}
.modal { 
    background: var(--bg-white); 
    padding: 40px; 
    border-radius: var(--radius-bento); 
    max-width: 440px; 
    width: 100%; 
    position: relative; 
    border: 1px solid var(--color-border); 
}
.modal-close { 
    position: absolute; 
    top: 24px; 
    right: 24px; 
    background: none; 
    border: none; 
    font-size: 28px; 
    cursor: pointer; 
    color: var(--text-muted); 
}
.modal h3 { 
    font-size: 22px; 
    font-weight: 800; 
    margin-bottom: 8px; 
    letter-spacing: -0.5px; 
}
.modal p { 
    font-size: 14px; 
    color: var(--text-muted); 
    line-height: 1.5; 
    margin-bottom: 24px; 
}
.modal-form { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
}
.modal-form input { 
    padding: 16px 20px; 
    border-radius: 100px; 
    border: 1px solid var(--color-border); 
    font-size: 14px; 
    background: var(--bg-main); 
    font-family: var(--font-base); 
    font-weight: 600; 
    transition: var(--transition); 
}
.modal-form input:focus { 
    border-color: var(--text-dark); 
    background: white; 
    outline: none; 
}
.selected-product-badge { 
    background: var(--color-accent-light); 
    color: var(--color-accent-hover); 
    padding: 10px 16px; 
    border-radius: 12px; 
    font-size: 12px; 
    font-weight: 800; 
    text-align: center; 
}

/* ==========================================================================
   14. ГЛОБАЛЬНАЯ МЕДИА-ОПТИМИЗАЦИЯ (АДАПТИВНОСТЬ)
   ========================================================================== */

/* --- Экраны ноутбуков и планшетов в альбомной ориентации (до 1200px) --- */
@media (max-width: 1200px) {
    .container { padding: 0 20px; }
    .products-grid, .workflow-grid, .reviews-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 20px; 
    }
    .review-card.size-lg { 
        grid-column: span 2; 
    }
}

/* --- Планшеты в портретной ориентации (до 992px) --- */
@media (max-width: 992px) {
    .hero-container, .coop-bento, .delivery-banner, .contacts-grid-layout { 
        grid-template-columns: 1fr; 
        gap: 32px;
    }
    .hero { padding-top: 130px; text-align: center; }
    .hero-buttons { justify-content: center; }
    .hero-badge { max-width: 450px; margin: 0 auto; width: 100%; }
    
    .delivery-banner { 
        text-align: center; 
        flex-direction: column; 
        padding: 32px 24px; 
    }
    .contacts-visual-box { min-height: 300px; }
}

/* --- Смартфоны и маленькие экраны (до 768px) --- */
@media (max-width: 768px) {
    /* Шапка сайта */
    .nav { display: none; } /* Скрываем громоздкое меню */
    .header-container { height: 70px; }
    .header-actions .btn { display: none; } /* Кнопку обратного звонка прячем ради места */
    
    /* Сетки bento перестраиваем в одну колонку */
    .products-grid, .workflow-grid, .reviews-grid, .coop-target-grid { 
        grid-template-columns: 1fr !important; 
        gap: 16px;
    }
    
    /* Сброс bento-расширений */
    .review-card.size-lg { 
        grid-column: span 1 !important; 
    }
    
    /* Оптимизация карточек под пальцы */
    .product-card, .workflow-step, .review-card, .coop-info-card, .contacts-details, .modal {
        padding: 24px 20px;
        border-radius: 20px; /* Слегка уменьшаем скругление на телефонах */
    }
    
    /* Тексты и заголовки */
    .hero h1 { margin-bottom: 16px; }
    .hero p { font-size: 15px; margin-bottom: 24px; }
    .hero-buttons .btn { width: 100%; } /* Кнопки во всю ширину */
    
    .review-text { font-size: 14px; margin-bottom: 20px; }
    
    /* Блок условий */
    .coop-badges { gap: 8px; }
    .c-badge { padding: 8px 14px; font-size: 12px; }
    .target-item { padding: 16px; font-size: 14px; }
    
    /* Схема работы */
    .step-header { margin-bottom: 14px; }
    
    /* Аккордеон FAQ */
    .faq-question { padding: 20px 16px; font-size: 15px; }
    .faq-answer p { padding-bottom: 20px; font-size: 13px; }
    
    /* Контакты и подложка */
    .contacts-visual-box { min-height: 260px; }
    .contacts-action-overlay { padding: 24px; }
    
    /* Подвал */
    .footer { padding: 40px 0; }
    .footer-content { flex-direction: column; gap: 32px; text-align: center; align-items: center; }
    .footer-right { align-items: center; gap: 16px; }
    .footer-links { display: flex; flex-direction: column; gap: 12px; }
    .footer-links a { margin: 0; }
}

/* --- Совсем крошечные экраны телефонов (до 414px) --- */
@media (max-width: 414px) {
    .phone { font-size: 14px; }
    .logo { font-size: 19px; }
    .product-img-box { height: 180px; }
}
/* ==========================================================================
   ОБНОВЛЕННЫЙ ВИЗУАЛЬНЫЙ БЛОК КОНТАКТОВ (ЗАПОЛНЕНИЕ ПРОСТРАНСТВА)
   ========================================================================== */
.contacts-visual-box {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Выравнивает overlay строго по центру по вертикали */
    align-items: center;     /* Выравнивает по центру по горизонтали */
}

.contacts-action-overlay {
    position: absolute;
    top: 0;                  /* Растягиваем плашку на всю высоту блока */
    bottom: 0;
    left: 0;
    right: 0;
    
    /* Делаем затемнение по всей площади, чтобы текст по центру идеально читался */
    background: rgba(20, 21, 22, 0.75); 
    
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирует все элементы (заголовок, фичи, кнопку) внутри самого оверлея */
    gap: 20px;               /* Оставляем аккуратные зазоры между элементами */
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Индикатор "В сети" */
.online-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e3e0d7;
}

.online-dot {
    width: 8px;
    height: 8px;
    background-color: #52c41a; /* Зеленая точка */
    border-radius: 50%;
    box-shadow: 0 0 8px #52c41a;
}

/* Мини-фичи для объема */
.contacts-mini-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mini-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a1a5aa;
    font-size: 13px;
    font-weight: 500;
}

.mini-feature-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Блок мессенджеров под кнопкой */
.messenger-channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}

.channels-label {
    font-size: 12px;
    color: #62666a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.channel-link {
    padding: 10px;
    border-radius: 100px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.channel-link:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Мобильная адаптация для этого блока */
@media (max-width: 480px) {
    .channels-grid {
        grid-template-columns: 1fr; /* На совсем крошечных экранах кнопки мессенджеров встают друг под друга */
    }
}
@media (max-width: 576px) {
    
    /* 1. Разрешаем блоку растягиваться под размер контента */
    .contacts-visual-box {
        position: relative;
        min-height: auto !important; /* Сбрасываем фиксированную высоту */
        height: auto !important;
        display: flex;
        flex-direction: column;
    }

    /* 2. Заставляем фоновую картинку перекрывать весь растянувшийся блок */
    .contacts-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1; /* Отправляем картинку на задний план */
    }

    /* 3. Делаем overlay главным контейнером, который задает высоту */
    .contacts-action-overlay {
        position: relative; /* Меняем absolute на relative, чтобы контент распирал карточку */
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        z-index: 2; /* Поднимаем текст и кнопки над картинкой */
        
        /* Делаем плотный темный фон, так как картинка теперь полностью сзади */
        background: rgba(20, 21, 22, 0.85) !important; 
        
        padding: 32px 20px !important;
        gap: 16px !important;
    }

    /* 4. Возвращаем фичи в колонку, если в строку они все равно жмут экран */
    .contacts-mini-features {
        flex-direction: column !important;
        align-items: stretch;
        width: 100%;
    }

    .mini-feature-item {
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 14px;
    }
}