:root {
            /* Cold War Theme (CSS 1) */
            --soviet-red: #8B0000;
            --soviet-gold: #C9A227;
            --dark-bg: #1a1a2e;

            /* Brand Theme (CSS 1) */
            --primary-color: #001B2E;
            --secondary-color: #f8f8f7;
            --neutral-gray: #f4f6f8;
            --brand-blue: #357296;
            --brand-gold: #B59B67;
            --brand-dark-blue: #22506b;
            --brand-text: #001B2E;

            /* NEW from CSS 2: Yalta Theme */
            --yalta-blue: #1e3a5f;
        }

        /* ===========================================
           SECTION 2: GLOBAL TYPOGRAPHY
           =========================================== */
        html {
            scroll-behavior: smooth;
        }

        body, h1, h2, h3, h4, h5, h6, .btn {
            font-family: 'Montserrat', sans-serif;
            color: var(--brand-text);
        }

        p, .text-body {
            font-family: 'Open Sans', sans-serif;
            color: var(--brand-text);
        }

        li p b, li p strong, p b, p strong {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            display: inline-block;
        }

        h1, h2, h3 { font-weight: 700; }
        h4, h5, h6 { font-weight: 600; }

        /* ===========================================
           SECTION 3: NAVBAR
           =========================================== */
        .navbar-brand {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
        }

        .navbar-nav .nav-link {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
        }

        .navbar-dark.bg-dark {
            background-color: var(--primary-color) !important;
        }

        /* ===========================================
           SECTION 4: READING PROGRESS BAR
           CONFLICT: CSS 2 uses --yalta-blue, CSS 1 uses --soviet-red
           RESOLVED: Keeping CSS 1's --soviet-red
           =========================================== */
        .reading-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: var(--soviet-red);
            z-index: 9999;
            transition: width 0.1s;
            will-change: width;
        }

        /* ===========================================
           SECTION 5: COLD WAR HERO SECTION (CSS 1)
           =========================================== */
        .coldwar-hero {
            background: linear-gradient(135deg, #883232 0%, #8B0000 100%);
            color: white;
            padding: 3rem 0;
            position: relative;
            overflow: hidden;
        }

        .coldwar-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>');
            background-size: 80px 80px;
            opacity: 0.3;
        }

        .coldwar-hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-stats {
            background: rgba(239, 233, 233, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        /* ===========================================
           SECTION 5B: YALTA HERO SECTION (NEW from CSS 2)
           Different class name, different SVG pattern
           =========================================== */
        .yalta-hero {
            background: linear-gradient(135deg, #883232 0%, var(--soviet-red) 100%);
            color: white;
            padding: 3rem 0;
            position: relative;
            overflow: hidden;
        }

        .yalta-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/><circle cx="50" cy="50" r="50" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></svg>');
            background-size: 100px 100px;
            opacity: 0.4;
        }

        .yalta-hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-badge {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 8px;
            padding: 1.5rem;
        }

        /* ===========================================
           SECTION 6: BRAND HERO SECTION
           =========================================== */
        .hero-section {
            position: relative;
            width: 100%;
            padding-top: 30%;
            overflow: hidden;
            background-color: var(--brand-blue);
            border-radius: 0.5rem;
            color: var(--secondary-color);
        }

        .angebote {
            background-color: var(--primary-color);
            color: var(--secondary-color);
            border-radius: 20px;
        }

        .hero-image-container {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 1;
        }

        .hero-background-image {
            width: 100%; height: 100%;
            object-fit: cover;
            opacity: 0.5;
            transition: opacity 0.3s ease-in-out;
        }

        .hero-content-wrapper {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 2;
            padding: 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .hero-content-wrapper h1,
        .hero-content-wrapper p {
            color: white;
            margin-bottom: 0.5rem;
        }

        .hero-image-container:hover .hero-background-image {
            opacity: 0.8;
        }

        @keyframes hero-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(181, 155, 103, 0.7); }
            70%  { box-shadow: 0 0 0 15px rgba(181, 155, 103, 0); }
            100% { box-shadow: 0 0 0 0 rgba(181, 155, 103, 0); }
        }

        .btn-hero-glow {
            animation: hero-pulse 2s infinite;
            background-color: var(--brand-gold) !important;
            border: none !important;
            color: #ffffff !important;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .btn-hero-glow:hover {
            background-color: var(--brand-blue) !important;
            transform: scale(1.05);
            animation: none;
        }

        /* ===========================================
           SECTION 7: QUICK FACTS BAR
           =========================================== */
        .quick-facts {
            background: #f8f9fa;
            border-bottom: 3px solid var(--soviet-red);
        }

        .fact-number {
            color: var(--soviet-red);
            font-weight: 700;
            font-size: 1.5rem;
        }

        /* ===========================================
           SECTION 8: TABLE OF CONTENTS SIDEBAR
           =========================================== */
        .toc-sidebar {
            position: sticky;
            top: 20px;
            background: white;
            border-radius: 8px;
            border: 2px solid #e9ecef;
            padding: 1.5rem;
            overflow: hidden;
        }

        .toc-sidebar h5 {
            color: var(--soviet-red);
            border-bottom: 2px solid var(--soviet-red);
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }

        .toc-link {
            display: block;
            color: #495057;
            text-decoration: none;
            padding: 0.4rem 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .toc-link:hover {
            color: var(--soviet-red);
            padding-left: 1rem;
            padding-right: 1rem;
            background: #f8f9fa;
            margin: 0 -1rem;
        }

        .toc-link.active {
            color: var(--soviet-red);
            font-weight: 600;
            border-left: 3px solid var(--soviet-red);
            padding-left: 0.5rem;
        }

        /* ===========================================
           SECTION 9: SECTION HEADERS
           =========================================== */
        .section-header {
            color: var(--soviet-red);
            border-bottom: 3px solid var(--soviet-red);
            padding-bottom: 0.5rem;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }

        /* ===========================================
           SECTION 10: ARTICLE CARDS
           =========================================== */
        .article-section {
            background: white;
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        /* ===========================================
           SECTION 11: LINK BOXES
           =========================================== */
        .link-box {
            background: #f8f9fa;
            border-left: 4px solid var(--soviet-gold);
            padding: 1rem 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 8px 8px 0;
        }

        .link-box a {
            color: var(--soviet-red);
            font-weight: 600;
            text-decoration: none;
        }

        .link-box a:hover {
            text-decoration: underline;
        }

        /* ===========================================
           SECTION 11B: QUOTE BOX (NEW from CSS 2)
           Different from .quote and .quote-soft
           =========================================== */
        .quote-box {
            background: #f8f9fa;
            border-left: 4px solid var(--yalta-blue);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-radius: 0 8px 8px 0;
            font-style: italic;
        }

        .quote-box footer {
            margin-top: 0.5rem;
            font-style: normal;
            color: #6c757d;
        }

        /* ===========================================
           SECTION 11C: CONCEPT BOX (NEW from CSS 2)
           =========================================== */
        .concept-box {
            background: #e8f4f8;
            border: 2px solid var(--yalta-blue);
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }

        .concept-box h5 {
            color: var(--yalta-blue);
            margin-bottom: 1rem;
        }

        /* ===========================================
           SECTION 12: TABLES
           CONFLICT: CSS 2 uses --yalta-blue for .comparison-table th
           RESOLVED: Keeping CSS 1's --soviet-red
           =========================================== */
        .comparison-table th {
            background: var(--soviet-red);
            color: white;
        }

        .timeline-table th {
            background: var(--dark-bg);
            color: white;
        }

        /* ===========================================
           SECTION 13: CLUSTER CARDS
           =========================================== */
        .cluster-card {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 1.5rem;
            height: 100%;
            transition: all 0.3s;
        }

        .cluster-card:hover {
            border-color: var(--soviet-red);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        .cluster-card h5 {
            color: var(--soviet-red);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .cluster-card ul {
            list-style: none;
            padding: 0; margin: 0;
        }

        .cluster-card li {
            padding: 0.4rem 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .cluster-card a {
            color: #495057;
            text-decoration: none;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }

        .cluster-card a:hover {
            color: var(--soviet-red);
        }

        /* ===========================================
           SECTION 13B: AGREEMENT CARDS (NEW from CSS 2)
           Similar to cluster-card but uses --yalta-blue
           =========================================== */
        .agreement-card {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 1.5rem;
            height: 100%;
            transition: all 0.3s;
        }

        .agreement-card:hover {
            border-color: var(--yalta-blue);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .agreement-card h5 {
            color: var(--yalta-blue);
            margin-bottom: 1rem;
        }

        /* ===========================================
           SECTION 13C: LEADER PROFILES (NEW from CSS 2)
           =========================================== */
        .leader-profile {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            height: 100%;
        }

        .leader-initial {
            width: 60px;
            height: 60px;
            background: var(--yalta-blue);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 1rem;
        }

        .leader-profile.roosevelt .leader-initial { background: #1e3a5f; }
        .leader-profile.churchill .leader-initial  { background: var(--soviet-red); }
        .leader-profile.stalin .leader-initial     { background: var(--soviet-red); }

        /* ===========================================
           SECTION 13D: YALTA TIMELINE (NEW from CSS 2)
           =========================================== */
        .yalta-timeline {
            position: relative;
            padding-left: 2rem;
        }

        .yalta-timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--yalta-blue);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 1.5rem;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -1.85rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            background: var(--yalta-blue);
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px var(--yalta-blue);
        }

        .timeline-date {
            font-weight: 700;
            color: var(--yalta-blue);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ===========================================
           SECTION 14: RESOURCE CARDS
           =========================================== */
        .resource-card {
            background: white;
            border: 2px dashed var(--soviet-gold);
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s;
        }

        .resource-card:hover {
            background: #f8f9fa;
            border-style: solid;
        }

        .resource-icon {
            font-size: 2.5rem;
            color: var(--soviet-red);
            margin-bottom: 1rem;
        }

        /* ===========================================
           SECTION 15: BUTTONS
           =========================================== */
        .btn-primary-custom {
            background-color: var(--brand-gold);
            border-color: var(--brand-gold);
            color: #f8f8f7;
            border-radius: 5px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary-custom:hover {
            background-color: #598198;
            border-color: #90A9B8;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-secondary-custom {
            background-color: #f8f8f7;
            color: #95B890;
            border-radius: 5px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-secondary-custom:hover {
            background-color: #f8f8f7;
            color: #598198;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-gradient-custom {
            background-image: linear-gradient(90deg, #90A9B8, #84828F);
            color: #FFFFFF;
            border-radius: 5px;
            padding: 0.4rem 0.8rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-gradient-custom:hover {
            background-image: linear-gradient(90deg, #90A9B8, #2F6175);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .share-btn {
            background-color: transparent !important;
            border: 1px solid var(--brand-dark-blue) !important;
            color: var(--brand-dark-blue) !important;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .share-btn:hover {
            background-color: var(--brand-gold) !important;
            border-color: var(--brand-gold) !important;
            color: #ffffff !important;
        }

        /* ===========================================
           SECTION 16: PHONE & WHATSAPP
           =========================================== */
        .phone-link {
            display: inline-flex;
            align-items: center;
            background-color: #f8f8f7;
            color: #191970 !important;
            padding: 8px 16px;
            border-radius: 50px;
            text-decoration: none !important;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
            border: 1px solid #191970;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .phone-link i {
            margin-right: 10px;
            font-size: 0.9rem;
        }

        .phone-link:hover {
            background-color: var(--brand-gold);
            color: #ffffff !important;
            border-color: var(--brand-gold);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        @keyframes whatsapp-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
            70%  { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        .whatsapp-btn-custom {
            background-color: #25D366;
            color: #ffffff !important;
            padding: 12px 24px;
            border-radius: 50px;
            border: none;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
            cursor: pointer;
            margin-bottom: 1rem;
            margin-top: 1rem;
            animation: whatsapp-pulse 2s infinite;
        }

        .whatsapp-btn-custom i { font-size: 1.4rem; }

        .whatsapp-btn-custom:hover {
            background-color: var(--brand-blue);
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(53, 114, 150, 0.4);
            color: #ffffff !important;
        }

        /* ===========================================
           SECTION 17: RELATED ARTICLE TEASER
           =========================================== */
        .related-teaser {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #f8f8f7;
            border-left: 5px solid var(--brand-blue);
            padding: 20px;
            margin: 30px 0;
            border-radius: 0 8px 8px 0;
            transition: all 0.3s ease;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .related-teaser:hover {
            background-color: #ffffff;
            transform: translateX(5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
            border-left-color: var(--brand-gold);
        }

        .related-teaser a { text-decoration: none !important; display: block; }

        .related-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 900;
            color: var(--brand-gold);
            letter-spacing: 1px;
            margin-bottom: 5px;
            font-family: 'Montserrat', sans-serif;
            text-decoration: none !important;
        }

        .related-title {
            margin: 0;
            font-size: 1.15rem;
            line-height: 1.3;
            margin-top: 5px;
            color: var(--brand-text);
            transition: color 0.3s ease;
        }

        .related-title a {
            color: var(--brand-text) !important;
            text-decoration: none !important;
        }

        .related-teaser a:hover .related-title {
            color: var(--brand-gold) !important;
        }

        .related-icon {
            color: var(--brand-blue);
            font-size: 1.2rem;
            padding-left: 15px;
        }

        .related-teaser:hover .related-icon { color: var(--brand-gold); }

        /* ===========================================
           SECTION 18: QUOTE BLOCKS
           =========================================== */
        .quote {
            border-left: 10px solid #FF6B35;
            padding-left: 8px;
            font-size: 1.25rem;
        }

        .quote-soft {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.2rem;
            color: #222425;
            background-color: #f0f4f7;
            border-left: 4px solid var(--brand-blue);
            padding: 1.5rem 2rem;
            margin: 2rem 0;
            line-height: 1.6;
            position: relative;
        }

        .quote-soft::before {
            content: "\201C";
            font-family: serif;
            position: absolute;
            top: -10px;
            left: 10px;
            font-size: 4rem;
            color: rgba(53, 114, 150, 0.1);
        }

        /* ===========================================
           SECTION 19: HIGHLIGHT BOX
           =========================================== */
        .highlight {
            padding: 0.25rem 1.5rem;
            margin-bottom: 1rem;
            background-color: var(--brand-gold);
            color: #ffffff !important;
            border: 1px solid #80693c;
            border-radius: 0.375rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            display: block;
            position: relative;
        }

        .highlight p { color: #ffffff !important; }

        .highlight a {
            color: #ffffff !important;
            text-decoration: underline;
            font-weight: 700;
        }

        .highlight a:hover {
            color: var(--brand-text) !important;
            text-decoration: none;
        }

        /* ===========================================
           SECTION 20: CHECKLIST BOX
           =========================================== */
        .checklist-box {
            background-color: #f8f8f7;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .checklist-header {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--brand-text);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .checklist-header i { color: var(--brand-blue); }

        .checklist-list { list-style: none; padding: 0; margin: 0; }

        .checklist-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
            font-family: 'Open Sans', sans-serif;
            font-size: 1rem;
            line-height: 1.5;
        }

        .checklist-item i {
            color: var(--brand-blue);
            margin-top: 4px;
            font-size: 0.9rem;
        }

        .checklist-item:last-child { margin-bottom: 0; }

        .custom-check-list li, .check-item {
            display: flex !important;
            align-items: flex-start !important;
            margin-bottom: 1.2rem;
        }

        .check-icon {
            flex: 0 0 35px !important;
            font-size: 1.2rem;
        }

        .check-text {
            font-family: 'Open Sans', sans-serif;
            color: var(--brand-text);
            flex: 1 !important;
            font-size: 1rem; /* BUGFIX: CSS 2 had "1,5rem" (comma typo) */
            line-height: 1.5;
        }

        .success-checklist {
            padding: 20px 0;
            background-color: transparent;
            margin: 40px 0;
        }

        .checklist-main-title {
            text-align: center;
            color: var(--brand-dark-blue);
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            margin-bottom: 35px;
        }

        /* ===========================================
           SECTION 21: COMPARISON CONTAINER
           =========================================== */
        .comparison-container {
            display: flex;
            gap: 0;
            margin: 40px 0;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .comparison-box { flex: 1; padding: 30px; }

        .comparison-box.before {
            background-color: #f4f4f4;
            border-right: 1px solid #ddd;
        }

        .comparison-box.after {
            background-color: #1c465e;
            color: #ffffff !important;
        }

        .comparison-header {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .before .comparison-header { color: #666; }
        .after .comparison-header  { color: var(--brand-gold); }

        .comparison-list { list-style: none; padding: 0; margin: 0; }

        .comparison-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .before i { color: #d9534f; }
        .after i  { color: var(--brand-gold); }

        /* ===========================================
           SECTION 22: TRUST BAR
           =========================================== */
        .trust-bar {
            background-color: #ffffff;
            border-bottom: 1px solid #e0e0e0;
            padding: 15px 0;
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .trust-item {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--brand-blue);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ===========================================
           SECTION 23: TAKEAWAY / FAZIT BOX
           =========================================== */
        .takeaway-box {
            background-color: #f4f7f9;
            border-left: 6px solid var(--brand-gold);
            padding: 25px;
            margin: 40px 0;
            border-radius: 0 8px 8px 0;
            position: relative;
            overflow: hidden;
        }

        .takeaway-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            font-size: 1.1rem;
            color: var(--brand-dark-blue);
            margin-bottom: 10px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .takeaway-content {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.2rem;
            line-height: 1.6;
            color: #333;
            margin: 0;
        }

        .takeaway-content p { font-size: 1.2rem; font-weight: 700; }

        .takeaway-box::after {
            content: "\f0eb";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            right: 20px;
            bottom: -10px;
            font-size: 5rem;
            color: rgba(181, 155, 103, 0.05);
            pointer-events: none;
        }

        /* ===========================================
           SECTION 24: EXPERT BIO BOX
           =========================================== */
        .expert-bio-box {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 25px 25px 15px 25px;
            margin: 40px 0 10px 0;
            display: flex;
            align-items: center;
            gap: 25px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .expert-photo-container { flex-shrink: 0; }

        .expert-photo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--brand-gold);
        }

        .expert-info { flex-grow: 1; }

        .expert-name {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--brand-dark-blue);
            margin-bottom: 5px;
        }

        .expert-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--brand-gold);
            margin-bottom: 12px;
            display: block;
        }

        .expert-description {
            font-size: 1.1rem;
            line-height: 1.5;
            color: #555;
            margin: 0;
        }

        /* ===========================================
           SECTION 25: ACCORDION / FAQ
           =========================================== */
        .faq-section { margin: 40px 0; }

        .accordion-item {
            border: 1px solid rgba(34, 80, 107, 0.1) !important;
            margin-bottom: 10px;
            border-radius: 8px !important;
            overflow: hidden;
        }

        .accordion-button {
            background-color: #ffffff !important;
            color: var(--brand-dark-blue) !important;
            font-weight: 700 !important;
            font-family: 'Montserrat', sans-serif;
            padding: 20px;
            box-shadow: none !important;
            font-size: 1.25rem !important;
        }

        .accordion-button.collapsed {
            color: #10334c !important;
            background-color: #ffffff !important;
        }

        .accordion-button:not(.collapsed) {
            background-color: rgba(181, 155, 103, 0.05) !important;
            color: var(--brand-gold) !important;
            box-shadow: none !important;
        }

        .accordion-button.collapsed::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2322506b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
            filter: brightness(0) saturate(100%) invert(8%) sepia(34%) saturate(2853%) hue-rotate(185deg) brightness(93%) contrast(106%);
        }

        .accordion-button:not(.collapsed)::after {
            filter: brightness(0) saturate(100%) invert(67%) sepia(19%) saturate(834%) hue-rotate(5deg) brightness(92%) contrast(85%);
        }

        .accordion-body {
            padding: 20px;
            font-size: 1.2rem !important;
            line-height: 1.6;
            color: #333;
            font-family: 'Open Sans', sans-serif;
            background-color: #ffffff;
        }

        /* ===========================================
           SECTION 26: ALERT BOXES
           CONFLICT: CSS 2 has global .alert { display: none }
           RESOLVED: Keeping CSS 1's scoped version
           =========================================== */
        .alert-coldwar {
            background: #f8f9fa;
            border-left: 4px solid var(--soviet-red);
            border-top: none;
            border-right: none;
            border-bottom: none;
        }

        .form-container .alert { display: none; }
        .error { color: red; }

        /* ===========================================
           SECTION 27: NAVIGATION PILLS
           =========================================== */
        .nav-pills .nav-link.active { background: var(--soviet-red); }
        .nav-pills .nav-link { color: #495057; }

        /* ===========================================
           SECTION 28: FORM CONTAINER
           =========================================== */
        .form-container {
            background-color: var(--brand-blue);
            color: #f4f6f8;
            margin: 10px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 5px;
        }

        /* ===========================================
           SECTION 29: COOKIE ALERT
           =========================================== */
        .cookiealert {
            position: fixed;
            bottom: 0; left: 0;
            width: 100%;
            margin: 0 !important;
            z-index: 999;
            opacity: 0;
            border-radius: 0;
            transform: translateY(100%);
            transition: all 500ms ease-out;
            color: #ecf0f1;
            background: #212327;
        }

        .cookiealert.show {
            opacity: 1;
            transform: translateY(0%);
            transition-delay: 1000ms;
        }

        .cookiealert a { text-decoration: underline; }

        .cookiealert .acceptcookies {
            margin-left: 10px;
            vertical-align: baseline;
        }

        /* ===========================================
           SECTION 30: VIDEO CONTAINER
           =========================================== */
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 30px;
            height: 0;
            overflow: hidden;
        }

        .video-container iframe,
        .video-container object,
        .video-container embed {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
        }

        /* ===========================================
           SECTION 31: CARDS & MISC
           =========================================== */
        .card { margin-bottom: 2rem; }
        .bg-bs { background-color: #4A100D !important; }

        .bonus-content {
            border-left: 3px solid var(--brand-gold);
            padding-left: 20px;
            margin-bottom: 20px;
            font-style: italic;
            color: #555;
        }

        /* ===========================================
           SECTION 31B: BREADCRUMBS (NEW from CSS 2)
           =========================================== */
        .breadcrumb-item a {
            color: var(--soviet-red);
            text-decoration: none;
        }

        /* ===========================================
           SECTION 32: FOOTER
           =========================================== */
        .footer-main { background-color: var(--primary-color); }

        .footer-custom {
            background-color: var(--brand-dark-blue) !important;
            color: #ffffff !important;
            padding: 30px 0 20px !important;
            margin-top: 15px !important;
        }

        .footer-gold-heading, .footer-heading {
            color: var(--brand-gold) !important;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            margin-bottom: 1.2rem;
            text-transform: uppercase;
            font-size: 1.1rem;
            display: block;
            text-align: center;
        }

        .footer-text, .footer-white-text {
            font-size: 0.95rem;
            color: rgba(255, 255, 255, 0.9) !important;
            margin-bottom: 10px;
            text-align: center;
        }

        .footer-links { list-style: none; padding: 0; margin: 0 auto; text-align: center; }
        .footer-links li { margin-bottom: 10px; }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover { color: var(--brand-gold); }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .social-icons a {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.1);
            width: 40px; height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .footer-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
            margin: 15px auto !important;
            opacity: 0.2;
            width: 80%;
        }

        .social-label {
            font-size: 0.85rem;
            font-weight: 700;
            color: #ffffff !important;
            margin-right: 5px;
        }

        .footer-social-row { display: flex; flex-wrap: wrap; gap: 12px; }

        .footer-social-row a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s ease;
        }

        .footer-social-row a:hover { color: var(--brand-gold); }

        .social-links a, .footer-social-links a {
            color: #ffffff !important;
            text-decoration: none !important;
            margin: 0 8px;
            font-size: 0.9rem;
            display: inline-block;
            transition: color 0.3s ease;
        }

        .social-links a:hover, .footer-social-links a:hover {
            color: var(--brand-gold) !important;
            text-decoration: underline !important;
        }

        .footer-copy, .copyright-text {
            color: rgba(255, 255, 255, 0.5) !important;
            font-size: 0.8rem;
            display: inline-block;
            margin-top: 0 !important;
        }

        .copyright-bar-centered {
            margin-top: 15px;
            color: rgba(255, 255, 255, 0.6) !important;
            font-size: 0.8rem;
            text-align: center;
        }

        .copyright-bar-centered a {
            color: rgba(255, 255, 255, 0.6) !important;
            text-decoration: underline;
        }

        .share-buttons-container {
            margin-bottom: 0 !important;
            padding-bottom: 10px;
        }

        /* ===========================================
           SECTION 33: SECTION SPACING
           =========================================== */
        .section-spacing {
            padding-top: 1.5rem !important;
            padding-bottom: 3rem;
        }

        .container-fluid.section-spacing { background-color: var(--neutral-gray); }
        .section-spacing:last-of-type { padding-bottom: 0 !important; }
        nav[aria-label="breadcrumb"] { margin-top: 0; }

        /* ===========================================
           SECTION 34: BACK TO TOP
           =========================================== */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--soviet-red);
            color: white;
            width: 45px; height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
            border: none;
        }

        .back-to-top.visible { opacity: 1; }
        .back-to-top:hover { background: #6d0000; }

        /* ===========================================
           SECTION 35: FOCUS STYLES / ACCESSIBILITY
           =========================================== */
        a:focus, button:focus {
            outline: 2px solid var(--soviet-red);
            outline-offset: 2px;
        }

        /* ===========================================
           SECTION 36: PRINT STYLES
           =========================================== */
        @media print {
            .toc-sidebar, .back-to-top, .reading-progress { display: none; }
        }

        /* ===========================================
           SECTION 37: RESPONSIVE — max-width: 576px
           =========================================== */
        @media (max-width: 576px) {
            .btn-gradient-custom { width: 100%; justify-content: center; }
            .expert-bio-box { flex-direction: column; text-align: center; }
            .expert-photo { width: 120px; height: 120px; }
        }

        @media (max-width: 575.98px) {
            .custom-card-text-list p {
                font-size: 0.8rem;
                margin-bottom: 0.4rem;
                line-height: 1.8rem;
            }
        }

        /* ===========================================
           SECTION 38: RESPONSIVE — max-width: 768px
           =========================================== */
        @media (max-width: 768px) {
            .coldwar-hero { padding: 2rem 0; }
            .yalta-hero { padding: 2rem 0; }
            .yalta-timeline { padding-left: 1.5rem; }
            .toc-sidebar { position: relative; margin-bottom: 2rem; }
            .hero-stats { margin-top: 1.5rem; }
            .comparison-container { flex-direction: column; }
            .comparison-box.before { border-right: none; border-bottom: 2px solid #ddd; }
            .footer-custom .col-md-4 { margin-bottom: 40px; }
            .footer-social-row { justify-content: center; margin-bottom: 10px; }
        }

        /* ===========================================
           SECTION 39: RESPONSIVE — min-width: 992px
           =========================================== */
        @media (min-width: 992px) {
            .img-fluid, img.rounded {
                width: 100%;
                height: auto;
                object-fit: cover;
            }
            .hero-background-image {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover;
            }
            .section-spacing {
                padding-top: 0.8rem !important;
                padding-bottom: 5rem;
            }
        }

        /* ===========================================
           SECTION 40: RESPONSIVE — min-width: 1400px
           =========================================== */
        @media (min-width: 1400px) {
            .container-large-screen { max-width: 1320px; }
            .text-wrapper-large { padding-left: 30px; }
        }

        /* ===========================================
           DEMO PAGE STYLES (not part of merged output)
           =========================================== */
        .demo-section {
            padding: 2rem 0;
            border-bottom: 1px solid #eee;
        }

        .demo-label {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #999;
            margin-bottom: 1rem;
        }

        .swatch {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.55rem;
            font-weight: 700;
            margin-right: 8px;
            margin-bottom: 8px;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .review-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'Montserrat', sans-serif;
        }

        .badge-pass { background: #d4edda; color: #155724; }
        .badge-warn { background: #fff3cd; color: #856404; }
        .badge-info { background: #d1ecf1; color: #0c5460; }
        .badge-new  { background: #e8daef; color: #6c3483; }
        .badge-conflict { background: #fadbd8; color: #922b21; }

        .review-panel {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }

        .review-panel h5 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 12px;
        }

        .issue-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .issue-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            font-size: 0.9rem;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .issue-list li:last-child { border-bottom: none; }

        .merge-summary-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: 2px solid #dee2e6;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 16px;
        }

        .merge-summary-card h6 {
            color: var(--brand-dark-blue);
            font-weight: 700;
            margin-bottom: 8px;
        }