/**
 * Стили хаба «Marketing AI» — перенесены из инлайн-блока <style> легаси
 * solutions/marketing/index.php 1:1 (правило FSD: CSS слайса — файлом в ui/).
 * Классы .page-container / .hero-section / .cta-section дублируют легаси-имена
 * сознательно — вёрстка сохранена без изменений.
 */

.page-container {max-width: 1200px;margin: 0 auto;padding: 0 40px;}
.page-container h2 {text-align: center;margin-bottom: var(--space-2xl);}
.hero-section {padding: 140px 0 var(--space-3xl);background: white;}
.hero-content-centered {max-width: 800px;margin: 0 auto;text-align: center;padding-top: var(--space-lg);}
.hero-content-centered h1 {margin: var(--space-md) 0;}
.hero-subheading {font-size: 20px;line-height: 1.6;color: var(--text-muted);margin: var(--space-lg) 0;}
.agents-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: var(--space-xl);max-width: 1200px;margin: 0 auto;}
.agent-card {background: white;border: 1px solid var(--border);border-radius: var(--radius-lg);padding: var(--space-xl);transition: all var(--transition);}
.agent-card:hover {box-shadow: var(--shadow-lg);transform: translateY(-4px);}
.agent-card .badge {margin-bottom: var(--space-md);}
.agent-card h3 {margin: var(--space-md) 0;color: var(--text);}
.agent-card p {color: var(--text-muted);margin-bottom: var(--space-lg);line-height: 1.6;}
.feature-list {list-style: none;padding: 0;margin: var(--space-lg) 0;}
.feature-list li {padding: var(--space-xs) 0;color: var(--text-muted);font-size: 15px;padding-left: 24px;position: relative;}
.feature-list li:before {content: "✓";position: absolute;left: 0;color: var(--teal);font-weight: 700;}
.agent-card .btn {margin-top: var(--space-md);width: 100%;}
.cta-section {max-width: 900px;margin: 0 auto;padding: 70px 60px;background: var(--white);border-radius: 20px;box-shadow: 0 25px 70px rgba(19, 53, 61, 0.18);text-align: center;border: 1px solid var(--border);}
.cta-content {max-width: 700px;margin: 0 auto;}
.cta-content h2 {color: var(--text);margin-bottom: var(--space-lg);}
.cta-content p {color: var(--text-muted);font-size: 17px;line-height: 1.7;margin-bottom: var(--space-xl);}
@media (max-width: 768px) {
    .page-container {padding: 0 20px;}
    .agents-grid {grid-template-columns: 1fr;}
    .cta-section {margin: var(--space-2xl) 20px;padding: 50px 40px;border-radius: 16px;}
}