/* === Advanced Use Cases Page Styles v2.1 (Scalable Version) === */

main {
    padding-top: 68px;
}

/* --- 1. Hero Section: STRUCTURE (без цвета) --- */
.hero-usecase {
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-usecase::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    animation: rotate 20s linear infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- 1a. Hero Section: COLOR MODIFIERS (здесь все наши цвета) --- */

/* Цвет по умолчанию (тот, что был на for-sales-teams) */
.hero-default {
    background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,121,255,1) 100%);
}
.hero-default::before {
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

/* Вариант 1: Пастельный бирюзовый */
.hero-teal {
    background: linear-gradient(45deg, #2a9d8f 0%, #a2d2ff 100%);
}
.hero-teal::before {
    background: radial-gradient(circle, rgba(200, 255, 230, 0.15) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант 2: Пастельный лавандовый */
.hero-lavender {
    background: linear-gradient(45deg, #4a4e69 0%, #c4b7de 100%);
}
.hero-lavender::before {
    background: radial-gradient(circle, rgba(255, 220, 240, 0.12) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант 3: Пастельный коралловый */
.hero-coral {
    background: linear-gradient(45deg, #e76f51 0%, #fde2e4 100%);
}
.hero-coral::before {
    background: radial-gradient(circle, rgba(255, 250, 220, 0.18) 0%, rgba(255,255,255,0) 65%);
}

/* --- (Остальные стили для pain-point-card, solutions-nav и т.д. остаются без изменений) --- */
.pain-point-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.pain-point-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
}
.pain-point-card .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.solutions-nav .nav-link {
    padding: 1rem 1.5rem;
    color: var(--bs-secondary-color);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 600;
}
.solutions-nav .nav-link.active {
    color: var(--bs-primary);
    background-color: transparent;
    border-bottom-color: var(--bs-primary);
}
.solutions-tab-content .feature-icon {
    width: 50px;
    height: 50px;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text);
}

.testimonial-power-section {
    background-color: #1a202c; /* A deep, professional navy/charcoal */
    color: #fff;
    padding: 4rem 0;
}
.testimonial-power-section blockquote {
    border: 0;
    font-size: 1.5rem;
    font-style: italic;
}
.testimonial-power-section .blockquote-footer {
    color: #a0aec0; /* Lighter gray for contrast */
    font-size: 1rem;
    font-style: normal;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.checklist-item .bi-check2-circle {
    color: var(--bs-success);
    font-size: 1.5rem;
    margin-right: 1rem;
    margin-top: 0.25rem;
}

/* Вариант 2: Пастельный лавандовый */
.hero-lavender {
    background: linear-gradient(45deg, #4a4e69 0%, #c4b7de 100%);
}
.hero-lavender::before {
    background: radial-gradient(circle, rgba(255, 220, 240, 0.12) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Пастельный бирюзовый (для Price Lists) */
.hero-teal {
    background: linear-gradient(45deg, #2a9d8f 0%, #8ecae6 100%);
}
.hero-teal::before {
    background: radial-gradient(circle, rgba(200, 255, 230, 0.15) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Индустриальный стальной (для Manufacturers) */
.hero-slate {
    background: linear-gradient(45deg, #212529 0%, #495057 100%);
}
.hero-slate::before {
    background: radial-gradient(circle, rgba(200, 220, 230, 0.08) 0%, rgba(255,255,255,0) 65%);
}

/* --- 2. "Pain Point" Cards --- */
.pain-point-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.pain-point-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,0.1);
}
.pain-point-card .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Было (красный фон): */
    /* background-color: var(--bs-danger-bg-subtle); */
    /* color: var(--bs-danger-text); */

    /* Стало (синий фон): */
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text);

    font-size: 1.75rem;
    margin-bottom: 1rem;
}

/* Вариант: Профессиональный золотой (для Commercial Offers) */
.hero-gold {
    background: linear-gradient(45deg, #b06c0f 0%, #e6a75b 100%);
}
.hero-gold::before {
    background: radial-gradient(circle, rgba(255, 245, 220, 0.15) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Креативный циан (для Digital Brochures) */
.hero-cyan {
    background: linear-gradient(45deg, #0077b6 0%, #ade8f4 100%);
}
.hero-cyan::before {
    background: radial-gradient(circle, rgba(220, 250, 255, 0.18) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Креативный маджента (для Marketers) */
.hero-magenta {
    background: linear-gradient(45deg, #5e2f7b 0%, #d94c8a 100%);
}
.hero-magenta::before {
    background: radial-gradient(circle, rgba(255, 220, 240, 0.15) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Корпоративный синий (для Sales Teams) */
.hero-sales-blue {
    background: linear-gradient(45deg, #023e8a 0%, #0096c7 100%);
}
.hero-sales-blue::before {
    background: radial-gradient(circle, rgba(200, 240, 255, 0.12) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Корпоративный синий (для Sales Teams) */
.hero-sales-blue {
    background: linear-gradient(45deg, #023e8a 0%, #0096c7 100%);
}
.hero-sales-blue::before {
    background: radial-gradient(circle, rgba(200, 240, 255, 0.12) 0%, rgba(255,255,255,0) 65%);
}
/* Вариант: Деловой зеленый (для Business Owners) */
.hero-green-biz {
    background: linear-gradient(45deg, #004b23 0%, #007200 100%);
}
.hero-green-biz::before {
    background: radial-gradient(circle, rgba(200, 255, 220, 0.1) 0%, rgba(255,255,255,0) 65%);
}
/* Вариант: Нейтральный серый (для главной страницы Use Cases Hub) */
.hero-hub-gray {
    background: linear-gradient(45deg, #212529 0%, #6c757d 100%);
}
.hero-hub-gray::before {
    background: radial-gradient(circle, rgba(200, 220, 230, 0.07) 0%, rgba(255,255,255,0) 65%);
}
/* Вариант: PDF Красный (для PDF Catalogs) */
.hero-pdf-red {
    background: linear-gradient(45deg, #a4161a 0%, #e5383b 100%);
}
.hero-pdf-red::before {
    background: radial-gradient(circle, rgba(255, 220, 220, 0.1) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: CMYK Print (для Print Catalogs) */
.hero-cmyk {
    background: linear-gradient(45deg, #00aeef 0%, #ec008c 100%);
}
.hero-cmyk::before {
    background: radial-gradient(circle, rgba(255, 255, 0, 0.15) 0%, rgba(255,255,255,0) 70%);
}
/* Вариант: Интерактивный синий (для HTML5) */
.hero-interactive-blue {
    background: linear-gradient(45deg, #014f86 0%, #2a9d8f 100%);
}
.hero-interactive-blue::before {
    background: radial-gradient(circle, rgba(200, 240, 255, 0.12) 0%, rgba(255,255,255,0) 65%);
}
    
	
/* Вариант: Технологичный индиго (для Product Management, Offline Editor и т.д.) */
.hero-indigo {
    background: linear-gradient(45deg, #30134b 0%, #5c4b99 100%);
}
.hero-indigo::before {
    background: radial-gradient(circle, rgba(230, 220, 255, 0.1) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: YouTube Красный (для Video Catalogs) */
.hero-youtube-red {
    background: linear-gradient(45deg, #c40202 0%, #ff6b6b 100%);
}
.hero-youtube-red::before {
    background: radial-gradient(circle, rgba(255, 220, 220, 0.12) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Android Зеленый (для Android Catalog App) */
.hero-android-green {
    background: linear-gradient(45deg, #0a5c36 0%, #3ddc84 100%);
}
.hero-android-green::before {
    background: radial-gradient(circle, rgba(220, 255, 235, 0.12) 0%, rgba(255,255,255,0) 65%);
}

/* Вариант: Социальный Градиент (для Social Media Content) */
.hero-social-gradient {
	background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}
.hero-social-gradient::before {
	background: radial-gradient(circle, rgba(255, 240, 220, 0.15) 0%, rgba(255,255,255,0) 65%);
}
.social-icon {
	font-size: 1.5rem;
	margin: 0 0.5rem;
} 
 
/* Вариант: Технологичный индиго (для общих/технических страниц) */
.hero-indigo {
	background: linear-gradient(45deg, #30134b 0%, #5c4b99 100%);
}
.hero-indigo::before {
	background: radial-gradient(circle, rgba(230, 220, 255, 0.1) 0%, rgba(255,255,255,0) 65%);
}