/* ================================================== */
/* 1. ОБЩИЕ НАСТРОЙКИ */
/* ================================================== */
:root { --primary-color: #5e35b1; --primary-light: #7e57c2; --primary-dark: #4527a0; --card-bg: #ffffff; --text-dark: #515050; --text-medium: #6c757d; --border-radius-xl: 24px; --border-radius-lg: 16px; --transition: all 0.3s ease; }
.quick-start-wrapper, .methods-wrapper, .calculator-wrapper { background: var(--card-bg); border: 1px solid #e9ecef; box-shadow: 0 10px 40px rgba(0,0,0,0.05); border-radius: var(--border-radius-xl); padding: 40px; margin-bottom: 40px; }
.section-subtitle { text-align: center; margin: 0 auto 40px; font-size: 1.1rem; color: var(--text-medium); max-width: 700px; }

/* ================================================== */
/* 2. HERO БЛОК */
/* ================================================== */
.earning-hero { background: linear-gradient(135deg, #673ab7 0%, #2196f3 100%); color: #ffffff; padding: 50px 0; position: relative; overflow: hidden; text-align: center; }
.earning-hero .breadcrumbs { margin-bottom: 30px; font-size: 0.9rem; }
.earning-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.8); }
.earning-hero .breadcrumbs a:hover { color: #ffffff; }
.earning-hero .breadcrumbs .separator, .earning-hero .breadcrumbs .current { color: rgba(255, 255, 255, 0.9); }
.earning-hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.earning-hero p { font-size: 1.1rem; color: #e2e8f0; margin: 0 auto 60px; max-width: 700px; line-height: 1.6; }
.hero-stats { display: flex; justify-content: center; align-items: center; gap: 80px; flex-wrap: wrap; }
.hero-stat { font-size: 16px; font-weight: 500; text-transform: uppercase; color: #e2e8f0; letter-spacing: 0.5px; display: flex; align-items: center; flex-direction: column; }
.hero-stat .value { font-size: 2.2rem; font-weight: 800; margin-bottom: 5px; color: #ffffff; line-height: 1; }

/* ================================================== */
/* 3. QUICK START (С ЧЕГО НАЧАТЬ) */
/* ================================================== */
.quick-start-section { padding-top: 40px; padding-bottom: 20px; }
.quick-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.quick-start-step { text-align: center; padding: 20px; background-color: #f8f9fa; border-radius: var(--border-radius-lg); }
.quick-start-step .step-icon { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%; background-color: var(--primary-light); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.quick-start-step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.quick-start-step p { color: var(--text-medium); line-height: 1.6; font-size: 0.95rem; }
.quick-start-cta { text-align: center; }
.quick-start-cta .btn-lg { padding: 12px 32px; border-radius: 50px; font-weight: 600; font-size: 1rem; }

/* ================================================== */
/* 4. МЕТОДЫ (ВЕРХНИЙ БЛОК) */
/* ================================================== */
.methods-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.method-step { text-align: center; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: var(--border-radius-lg); padding: 30px; transition: var(--transition); }
.method-step:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--primary-light); }
.step-icon-wrapper { margin-bottom: 20px; }
.method-step .step-icon { width: 60px; height: 60px; border-radius: 50%; background-color: var(--primary-light); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 4px 10px rgba(94, 53, 177, 0.3); }
.method-step h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.method-step p { font-size: 0.95rem; color: var(--text-medium); line-height: 1.6; margin-bottom: 20px; min-height: 55px; }
.method-stats { display: flex; justify-content: center; gap: 10px; font-size: 0.8rem; font-weight: 600; flex-wrap: wrap; }
.method-stats span { padding: 5px 12px; border-radius: 20px; border: 1px solid transparent; }
.method-stats .risk.low { background-color: #f0fff4; color: #38a169; border-color: #c6f6d5; }
.method-stats .risk.medium { background-color: #fffaf0; color: #dd6b20; border-color: #feebc8; }
.method-stats .risk.high { background-color: #fff5f5; color: #e53e3e; border-color: #fed7d7; }
.method-stats .profit.medium { background-color: #ebf8ff; color: #3182ce; border-color: #bee3f8; }
.method-stats .profit.high { background-color: #f0fff4; color: #38a169; border-color: #c6f6d5; }

/* ================================================== */
/* 5. ДЕТАЛЬНЫЕ МЕТОДЫ (ФИЛЬТРЫ И КАРТОЧКИ) */
/* ================================================== */
.filter-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
.filter-group-left { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-category { padding: 8px 15px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text-medium); background-color: #f8f9fa; border: 1px solid #e9ecef; transition: var(--transition); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.filter-category:hover { background-color: #e9ecef; color: var(--text-dark); transform: translateY(-2px); }
.filter-category.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.filter-sort select { padding: 8px 30px 8px 15px; border-radius: 8px; border: 1px solid #e9ecef; background: white; font-size: 0.9rem; cursor: pointer; }
.methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.method-card { background-color: var(--card-bg); border-radius: var(--border-radius-lg); box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: var(--transition); display: flex; flex-direction: column; border: 1px solid #e9ecef; overflow: hidden; }
.method-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.method-header { display: flex; align-items: center; gap: 15px; padding: 25px 25px 20px; border-bottom: 1px solid #e9ecef; }
.method-header-icon { font-size: 1.8rem; color: var(--primary-color); background-color: #f3f4f6; padding: 10px; border-radius: 12px; line-height: 1; flex-shrink: 0; }
.method-info h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 5px; }
.method-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.method-badges .badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.badge.risk-low { background-color: #d1fae5; color: #065f46; }
.badge.risk-medium { background-color: #fef3c7; color: #92400e; }
.badge.risk-high { background-color: #fee2e2; color: #991b1b; }
.badge.profit-high { background-color: #d5d3f8; color: #4c1d95; }
.method-image-container { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.method-image-container img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.method-card:hover .method-image-container img { transform: scale(1.05); }
.method-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.method-content p { color: var(--text-medium); margin-bottom: 20px; }
.method-details { display: flex; flex-direction: column; gap: 10px; background-color: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
.detail-item { display: flex; justify-content: space-between; font-size: 0.9rem; }
.detail-label { color: #9ca3af; }
.detail-value { font-weight: 600; color: var(--text-dark); }
.method-types h4 { font-size: 1rem; font-weight: 600; margin-bottom: 15px; color: var(--text-dark); }
.method-types ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.method-types li { padding-left: 25px; position: relative; color: var(--text-medium); font-size: 0.95rem; }
.method-types li::before { content: '\f058'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--primary-color); font-size: 1rem; }
.method-footer { display: flex; justify-content: space-between; align-items: center; padding: 25px; border-top: 1px solid #e9ecef; margin-top: auto; }
.method-footer .btn { flex-grow: 1; margin-right: 15px; }
.method-actions { display: flex; gap: 10px; }
.method-actions .btn-audio, .method-actions .btn-share { width: 38px; height: 38px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--text-medium); background-color: #f3f4f6; transition: var(--transition); border: 1px solid #e9ecef; cursor: pointer; }
.method-actions .btn-audio:hover, .method-actions .btn-share:hover { background-color: var(--primary-light); color: white; border-color: var(--primary-light); }

/* ================================================== */
/* 6. КАЛЬКУЛЯТОР */
/* ================================================== */
.calculator-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.calculator-form { display: flex; flex-direction: column; gap: 20px; }
.calc-input-group { display: flex; flex-direction: column; }
.calc-input-group label { margin-bottom: 8px; font-weight: 500; }
.calc-input-group input, .calc-input-group select { padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; }
.result-card { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; padding: 30px; border-radius: 16px; text-align: center; }
.result-card h3 { font-size: 1.2rem; opacity: 0.8; margin-bottom: 15px; }
.result-amount { font-size: 3rem; font-weight: 800; margin-bottom: 20px; }
.result-details { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 20px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; }
.result-item { display: flex; justify-content: space-between; }
.result-item span:first-child { opacity: 0.8; }
.calculator-disclaimer p { font-size: 0.8rem; opacity: 0.7; margin: 0; }

/* ================================================== */
/* 7. ИСТОРИИ УСПЕХА */
/* ================================================== */
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.story-card { background-color: var(--card-bg); border: 1px solid #e9ecef; border-radius: var(--border-radius-lg); box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 25px; display: flex; flex-direction: column; transition: var(--transition); }
.story-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.story-header { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #e9ecef; }
.story-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.story-info h3 { font-weight: 700; margin: 0 0 4px; color: var(--text-dark); }
.story-method { font-size: 0.95rem; color: var(--primary-color); }
.story-content { flex-grow: 1; }
.story-content p { color: var(--text-medium); line-height: 1.6; margin: 0; }
.story-stats { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e9ecef; display: flex; flex-direction: column; gap: 15px; }
.stat-item { display: flex; flex-direction: column; }
.stat-label { font-size: 0.8rem; color: #9ca3af; text-transform: uppercase; margin-bottom: 4px; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); }
.stat-value .profit-percent { font-size: 1.1rem; font-weight: 600; color: #10b981; margin-left: 8px; }

/* ================================================== */
/* 8. ИНСТРУМЕНТЫ И ТАБЛИЦА */
/* ================================================== */
.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.tool-category { background-color: var(--card-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-radius: var(--border-radius-lg); padding: 25px; border: 1px solid #e9ecef; }
.tool-category h3 { font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: var(--primary-color); }
.tool-list { display: flex; flex-direction: column; gap: 10px; }
.tool-item a { font-weight: 600; font-size: 1.1rem; color: var(--text-dark); }
.tool-item .tool-desc { color: var(--text-medium); font-size: 1rem; display: block; }
.comparison-table-container { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; text-align: center; }
.comparison-table th, .comparison-table td { padding: 15px; border-bottom: 1px solid #e9ecef; }
.comparison-table th { background-color: #5e35b1; color: white; font-weight: 600; }
.comparison-table td:first-child { text-align: left; font-weight: 600; }
.risk-badge { padding: 4px 10px; border-radius: 20px; font-weight: 500; font-size: 0.8rem; }
.risk-badge.low { background-color: #d1fae5; color: #065f46; }
.risk-badge.medium { background-color: #fef3c7; color: #92400e; }
.risk-badge.high { background-color: #fee2e2; color: #991b1b; }
.risk-badge.very-high { background-color: #f5d0fe; color: #701a75; }
.warning-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.warning-card { background-color: var(--card-bg); border: 1px solid #e9ecef; border-left-width: 4px; padding: 20px; border-radius: 8px; display: flex; align-items: center; gap: 15px; }
.warning-card.critical { border-left-color: #ef4444; }
.warning-card.important { border-left-color: #f59e0b; }
.warning-icon { font-size: 1.5rem; }
.warning-card.critical .warning-icon { color: #ef4444; }
.warning-card.important .warning-icon { color: #f59e0b; }
.faq-container { max-width: 100%; }
.faq-item { background-color: var(--card-bg); border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
.faq-question { padding: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-question h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease; }
.faq-item.active .faq-answer { padding: 10px 20px 10px; max-height: 1000px; }

/* ============================================ */
/* АДАПТИВНОСТЬ (MEDIA QUERIES) */
/* ============================================ */

/* 1200px */
@media (max-width: 1200px) {
.quick-start-grid, .methods-steps, .methods-grid, .stories-grid, .tools-grid, .warning-wrapper, .calculator-wrapper { grid-template-columns: 1fr; gap: 20px; }
}

/* 992px */
@media (max-width: 992px) {
.earning-hero { padding: 20px 0; }
.earning-hero h1 { font-size: 2rem; margin-bottom: 15px; }
.quick-start-section, .earning-methods-section, .detailed-methods, .calculator-section, .comparison-section, .tools-section, .success-stories, .risk-warning-section, .faq { padding-top: 20px; padding-bottom: 20px; }
}

/* 768px */
@media (max-width: 768px) {
.earning-hero { padding: 15px 0 20px; text-align: center; }
.earning-hero h1 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 10px; padding: 0 10px; }
.earning-hero p { font-size: 1rem; margin-top: 20px; margin-bottom: 30px; line-height: 1.4; padding: 0 15px; }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 10px; }
.hero-stat { flex-direction: column; align-items: center; min-width: 80px; }
.hero-stat .value { font-size: 1.8rem; margin-bottom: 2px; }
.hero-stat .label { font-size: 0.8rem; opacity: 0.8; }
.quick-start-wrapper, .methods-wrapper, .calculator-wrapper { padding: 20px 15px !important; border-radius: 16px; margin-bottom: 20px; }
.filter-container { flex-direction: column; align-items: center; gap: 15px; background: #ffffff !important; border: 1px solid #e9ecef; box-shadow: 0 4px 12px rgba(0,0,0,0.05); padding: 20px 15px !important; border-radius: 16px; margin-bottom: 25px; }
.filter-group-left { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; padding-bottom: 10px; }
.filter-category { white-space: nowrap; padding: 8px 12px; font-size: 0.85rem; flex-shrink: 0; margin: 0; }
.filter-sort { width: 100%; }
.sort-select { width: 100%; text-align: center; text-align-last: center; }
.method-card { border-radius: 12px; }
.method-header { padding: 15px; flex-direction: column; align-items: flex-start; gap: 10px; }
.method-header-icon { padding: 8px; font-size: 1.5rem; }
.method-content { padding: 15px; }
.method-details { padding: 15px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 20px; }
.detail-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 10px; font-size: 0.9rem; }
.detail-item:last-child { margin-bottom: 0; }
.detail-label { text-align: left; color: #9ca3af; flex-shrink: 0; max-width: 50%; }
.detail-value { text-align: right; font-weight: 700; color: var(--text-dark); flex-grow: 1; }
.method-types ul { grid-template-columns: 1fr; gap: 5px; }
.method-footer { padding: 15px; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; }
.method-footer .btn { width: auto !important; flex-grow: 1; margin-right: 0; margin-bottom: 0; padding: 10px 15px; height: 44px; display: flex; align-items: center; justify-content: center; }
.method-actions { width: auto !important; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.method-actions .btn-audio, .method-actions .btn-share { width: 44px; height: 44px; border-radius: 10px; }
.quick-start-grid { gap: 15px; margin-bottom: 20px; }
.quick-start-step { padding: 15px; border-radius: 12px; }
.quick-start-cta .btn-lg { width: 100%; padding: 14px 20px; border-radius: 12px; font-size: 1rem; white-space: normal; height: auto; }
.calculator-form { gap: 15px; }
.result-card { padding: 20px; }
.result-amount { font-size: 2.2rem; }
.story-card { padding: 15px; }
.story-header { flex-direction: column; text-align: center; gap: 10px; }
.story-avatar { width: 60px; height: 60px; }
.comparison-table th, .comparison-table td { padding: 10px; font-size: 0.85rem; }
.section-title { font-size: 1.5rem; }
}

/* 480px */
@media (max-width: 480px) {
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; }
.hero-stat:nth-child(3) { grid-column: span 2; }
.hero-stat .value { font-size: 1.5rem; }
.quick-start-wrapper, .methods-wrapper, .calculator-wrapper { padding: 15px 10px !important; }
}