/* Базові змінні та кольорова палітра */
:root {
    --primary-color: #1a365d; /* Глибокий синій - викликає довіру */
    --secondary-color: #2f855a; /* Смарагдовий - для позитивних акцентів */
    --danger-color: #c53030; /* Червоний - для ризиків/негативу */
    --bg-color: #f7fafc; /* Світло-сірий фон сторінки */
    --text-color: #2d3748; /* Основний колір тексту */
    --border-color: #e2e8f0;
    --accent-color: #ed8936; /* Помаранчевий для конверсійних кнопок */
}

/* Скидання та база */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
    background: var(--bg-color); 
    color: var(--text-color); 
    line-height: 1.7; 
}

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Навігація */
.navbar { 
    background: #fff; 
    padding: 15px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 800; color: var(--primary-color); }
.logo span { color: var(--secondary-color); }
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: var(--primary-color); }

/* Типографіка контенту */
.article-header { text-align: center; padding: 50px 0 30px; }
h1 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; line-height: 1.2; }
h2 { font-size: 2rem; color: var(--primary-color); margin: 50px 0 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
h3 { font-size: 1.5rem; color: #2c5282; margin: 30px 0 15px; }
p { margin-bottom: 18px; font-size: 1.1rem; }
.lead-text { font-size: 1.25rem; font-weight: 500; color: #4a5568; margin-bottom: 20px; }
ul, ol { margin-bottom: 20px; padding-left: 20px; }
li { margin-bottom: 10px; font-size: 1.1rem; }

.definition { 
    background: #edf2f7; 
    border-left: 5px solid var(--primary-color); 
    padding: 20px; 
    margin: 25px 0; 
    font-size: 1.15rem;
}

/* Інтерактивна таблиця порівняння */
.interactive-block { 
    background: #fff; 
    padding: 35px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    margin: 40px 0; 
}
.filter-controls { display: flex; gap: 15px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.filter-btn { 
    padding: 12px 24px; 
    border: 2px solid var(--border-color); 
    background: #fff; 
    border-radius: 30px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 1rem; 
    transition: all 0.3s ease; 
    color: var(--text-color); 
}
.filter-btn:hover { border-color: var(--primary-color); }
.filter-btn.active { 
    background: var(--primary-color); 
    color: #fff; 
    border-color: var(--primary-color); 
    box-shadow: 0 4px 10px rgba(26, 54, 93, 0.2); 
}

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { padding: 18px 20px; border-bottom: 1px solid var(--border-color); text-align: left; transition: opacity 0.4s ease, filter 0.4s ease; }
th { background: #f8fafc; font-weight: 700; color: var(--primary-color); font-size: 1.1rem; }
tbody tr:hover { background: #fbfbfc; }

.highlight-good { color: var(--secondary-color); font-weight: 700; }
.highlight-bad { color: var(--danger-color); font-weight: 700; }

/* Клас для JS (Затемнення неактивної колонки) */
.dimmed { opacity: 0.25; filter: grayscale(100%); }

/* CPA Банери (Блоки монетизації) */
.pattern-bg { 
    background-color: var(--primary-color); 
    /* Геометричний абстрактний патерн */
    background-image: linear-gradient(30deg, #1a365d 12%, transparent 12.5%, transparent 87%, #1a365d 87.5%, #1a365d), linear-gradient(150deg, #1a365d 12%, transparent 12.5%, transparent 87%, #1a365d 87.5%, #1a365d), linear-gradient(30deg, #1a365d 12%, transparent 12.5%, transparent 87%, #1a365d 87.5%, #1a365d), linear-gradient(150deg, #1a365d 12%, transparent 12.5%, transparent 87%, #1a365d 87.5%, #1a365d), linear-gradient(60deg, #2a4365 25%, transparent 25.5%, transparent 75%, #2a4365 75%, #2a4365), linear-gradient(60deg, #2a4365 25%, transparent 25.5%, transparent 75%, #2a4365 75%, #2a4365);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}
.cpa-banner { 
    color: #fff; 
    padding: 45px 30px; 
    border-radius: 12px; 
    margin: 40px 0; 
    text-align: center; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
}
.cpa-banner h3 { color: #fff; margin-top: 0; font-size: 1.8rem; border: none; }
.cpa-banner p { opacity: 0.9; margin-bottom: 30px; font-size: 1.15rem; }

.btn { 
    display: inline-block; 
    padding: 16px 35px; 
    border-radius: 8px; 
    font-weight: 700; 
    text-decoration: none; 
    font-size: 1.1rem; 
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s; 
}
.btn-primary { background: var(--accent-color); color: #fff; }
.btn-primary:hover { background: #dd6b20; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(237, 137, 54, 0.4); }
.btn-secondary { background: var(--secondary-color); color: #fff; }
.btn-secondary:hover { background: #276749; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(47, 133, 90, 0.4); }

/* FAQ Аккордеон */
.faq-section { margin: 60px 0; }
.accordion { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: #fff; }
.acc-item { border-bottom: 1px solid var(--border-color); }
.acc-item:last-child { border-bottom: none; }
.acc-header { 
    width: 100%; 
    text-align: left; 
    padding: 20px 25px; 
    background: #fff; 
    border: none; 
    font-weight: 700; 
    font-size: 1.1rem; 
    cursor: pointer; 
    color: var(--primary-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.3s; 
}
.acc-header:hover { background: #f8fafc; }
.acc-header::after { content: '+'; font-size: 1.5rem; transition: transform 0.3s ease; }
.acc-header.active::after { transform: rotate(45deg); }
.acc-body { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-out; 
    background: #fff; 
}
.acc-body p { padding: 0 25px 25px; margin: 0; color: #4a5568; }

/* Мобільна адаптація */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    .nav-links { display: none; } /* Для простоти приховуємо на моб. версії */
    .cpa-banner { padding: 30px 20px; }
    .filter-controls { flex-direction: column; align-items: stretch; }
    .filter-btn { width: 100%; }
}