/* ============================================
   BUSINESS AUTOMATION BI - OPTIMIZED STYLESHEET
   Author: Business Automation BI Team
   Description: Clean, optimized styles for landing page
   
   TABLE OF CONTENTS:
   1. Base Styles & Reset
   2. CSS Variables (Design System)
   3. Typography
   4. Layout Utilities
   5. Button Components
   6. Header Section
   7. Hero Section
   8. Trust Bar Section
   9. Results/Metrics Cards
   10. Comparison Section
   11. Services Section
   12. Testimonials Section
   13. Pricing Section
   14. Comparison Table
   15. Process Section
   16. Team Section
   17. FAQ Section
   18. CTA Section
   19. Contact Options (Contact Page)
   20. Blog/Downloads Section
   21. Footer Section
   22. Utility Classes
   22.5. Hover Effects
   23. Responsive Design
   24. Dashboard Showcase Carousel
   25. Blog Article Page
   ============================================ */

/* ============================================
   1. BASE STYLES & RESET
   Normalize browser defaults for consistency
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   2. CSS VARIABLES (DESIGN SYSTEM)
   Centralized color palette and design tokens
   ============================================ */
:root {
    /* Primary Colors - Main brand identity */
    --primary-navy: #004080;
    --primary-blue: #1e90ff;
    
    /* Accent Colors - Highlights and status indicators */
    --accent-gold: #FFBF00;
    --green-success: #10B981;
    --red-urgent: #EF4444;
    
    /* Grayscale Palette - Backgrounds and text */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-600: #475569;
    --gray-900: #0F172A;
    --white: #FFFFFF;
}

/* ============================================
   3. TYPOGRAPHY
   Font family, sizes, and base text styles
   ============================================ */
body {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--gray-900);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Heading styles with responsive sizing */
h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
}

/* ============================================
   4. LAYOUT UTILITIES
   Container and section spacing
   ============================================ */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px; /* Horizontal padding for mobile */
}

/* Standard section padding */
.section {
    padding: 96px 0;
}

/* Alternate section background for visual separation */
.section-alt {
    background: var(--gray-50);
}

/* Centered section headers with bottom spacing */
.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header h2 {
    margin-bottom: 16px;
}

/* ============================================
   5. BUTTON COMPONENTS
   Primary and secondary button styles
   ============================================ */
.btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

/* Primary button - Main call-to-action style */
.btn-primary {
    background: var(--primary-blue);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(30, 144, 255, 0.4);
}

.btn-primary:hover {
    background: #1565C0;
    transform: translateY(-2px);
}

/* Force white text for all primary buttons */
.btn-primary,
.btn-primary * {
    color: white !important;
}

/* Secondary button - Outlined style for secondary actions */
.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 14px 28px; /* Adjusted for border width */
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--white);
}

/* Large CTA button variant */
.cta-btn-large {
    font-size: 20px;
    padding: 20px 48px;
}

/* ============================================
   6. HEADER SECTION
   Fixed navigation bar with glassmorphism effect
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border-bottom: 1px solid var(--gray-200);
    z-index: 1000; /* Ensure header stays above other content */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

/* Logo - Brand identity with icon and text */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-navy);
    text-decoration: none;
}

.logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* BI Highlight - Coloration spécifique pour "BI" */
.bi-highlight {
    color: var(--primary-blue);
}

/* Navigation Links */
.nav {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav a {
    color: var(--gray-900);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--primary-blue);
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

/* Language Switcher - Flag buttons for language selection */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-switch button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.lang-switch img {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    display: block;
}

/* Active language indicator */
.lang-switch button.active img {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.lang-switch button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ============================================
   7. HERO SECTION
   Main banner with gradient background
   ============================================ */
.hero {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #002855 100%);
    color: var(--white);
    padding: 140px 0 96px; /* Extra top padding to account for fixed header */
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.hero-text h1 {
    margin-bottom: 24px;
}

.hero-text p {
    font-size: 20px;
    margin-bottom: 32px;
    opacity: 0.9;
}

/* Hero Call-to-Action Buttons */
.hero-ctas {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

/* Trust Indicators - Checkmarked benefits */
.trust-indicators {
    display: flex;
    gap: 32px;
    font-size: 14px;
    opacity: 0.8;
}

.trust-indicators span::before {
    content: '✓ ';
    color: var(--green-success);
}

/* Hero Video Container - Responsive iframe wrapper */
.hero-image {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* ============================================
   8. TRUST BAR SECTION
   Client logos and key metrics display
   ============================================ */
.trust-bar {
    padding: 64px 0;
    background: var(--gray-50);
    text-align: center;
}

.trust-bar h3 {
    margin-bottom: 48px;
    color: var(--gray-600);
}

/* Client Logos Grid - Centered flex layout */
.client-logos {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    align-items: center;
}

.client-logo {
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.05);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%); /* Grayscale by default */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Color on hover */
.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================
   9. RESULTS/METRICS CARDS
   Reusable metric display cards
   ============================================ */
.results-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin: 64px 0;
}

.result-card {
    text-align: center;
    padding: 32px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.result-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.result-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.result-label {
    color: var(--gray-600);
    font-size: 16px;
}

/* Results section wrapper (index.html only) */
.results {
    padding: 96px 0;
    background: var(--white);
}

/* ============================================
   10. COMPARISON SECTION
   Before/After comparison cards
   ============================================ */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.comparison-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 48px;
    transition: all 0.3s ease;
}

/* Color-coded borders for before/after */
.comparison-card.before {
    border-color: var(--red-urgent);
}

.comparison-card.after {
    border-color: var(--green-success);
}

.comparison-card h3 {
    margin-bottom: 24px;
}

.comparison-card ul {
    list-style: none;
    margin-bottom: 24px;
}

.comparison-card li {
    padding: 8px 0 8px 24px;
    position: relative;
}

/* Icons for before/after states */
.comparison-card.before li::before {
    content: '❌';
    position: absolute;
    left: 0;
}

.comparison-card.after li::before {
    content: '✅';
    position: absolute;
    left: 0;
}

/* Visual container for screenshot */
.comparison-visual {
    background: var(--gray-100);
    height: 200px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

.comparison-visual {
  background: var(--gray-100);
  height: 200px;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

.comparison-visual img {
  height: 100%;
  width: auto;
  display: block;
}

.comparison-visual:hover img {
    transform: scale(1.02);
}

/* Quote styling */
.comparison-quote {
    font-style: italic;
    color: var(--gray-600);
    border-left: 4px solid var(--primary-blue);
    padding-left: 24px;
}

/* ============================================
   11. SERVICES SECTION
   Service cards grid layout
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.service-card {
    background: var(--white);
    border-radius: 12px;
    padding: 48px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.service-card h3 {
    margin-bottom: 16px;
}

.service-card ul {
    list-style: none;
    margin: 24px 0;
}

.service-card li {
    padding: 8px 0 8px 24px;
    position: relative;
}

.service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
}

.service-card a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
}

.service-card a:hover {
    text-decoration: underline;
}

/* ============================================
   12. TESTIMONIALS SECTION
   Client testimonial cards
   ============================================ */
.testimonials {
    padding: 64px 0;
    background: var(--gray-50);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.testimonial-card {
    background: var(--white);
    border-left: 4px solid #e0e0e0;
    /* border-left: 4px solid var(--primary-blue);*/
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Avatar placeholder */
.testimonial-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0; /* Prevent shrinking */
}

.testimonial-info h4 {
    margin-bottom: 4px;
}

.testimonial-info p {
    font-size: 14px;
    color: var(--gray-600);
}

.testimonial-title {
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--primary-navy);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.testimonial-metrics {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    font-size: 14px;
    font-weight: 600;
    color: var(--green-success);
}

/* ============================================
   13. PRICING SECTION
   Pricing tiers with feature lists
   ============================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 48px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Popular pricing card - highlighted and scaled */
.pricing-card.popular {
    border-color: var(--accent-gold);
    transform: scale(1.05);
}

/* Popular badge */
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gold);
    color: #002855;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.pricing-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 16px 0 24px;
    line-height: 1.2;
}

.pricing-features {
    list-style: none;
    margin: 24px 0;
    flex-grow: 1; /* Push button to bottom */
}

.pricing-features li {
    padding: 8px 0 8px 24px;
    position: relative;
}

.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
}

.pricing-best-for {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
    font-size: 13px;
    color: var(--gray-600);
    text-align: center;
}

.pricing-note {
    text-align: center;
    margin-top: 48px;
    padding: 32px;
    background: var(--gray-50);
    border-radius: 8px;
    border-left: 4px solid var(--primary-blue);
}

/* ============================================
   14. COMPARISON TABLE
   Feature comparison table
   ============================================ */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.compare-table th,
.compare-table td {
    padding: 24px 32px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.compare-table th {
    background: var(--primary-navy);
    color: var(--white);
    font-weight: 600;
}

/* Highlight last column (Business Automation BI) */
.compare-table th:last-child {
    background: var(--primary-blue);
}

.compare-table td:first-child {
    font-weight: 600;
}

/* Hover effect on table rows */
.compare-table tbody tr {
    transition: all 0.3s ease;
}

.compare-table tbody tr:hover {
    background: var(--gray-50);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Highlight your column on row hover */
.compare-table tbody tr:hover td:last-child {
    background: rgba(30, 144, 255, 0.08);
    color: var(--primary-blue);
    font-weight: 600;
}

/* ============================================
   15. PROCESS SECTION
   7-step methodology with accordion
   ============================================ */
.process {
    padding: 96px 0;
    background: var(--gray-50);
}

/* Process Timeline - Visual step indicators */
.process-timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    max-width: 1100px;
    margin: 48px auto 64px;
    flex-wrap: wrap;
}

.process-step-card {
    text-align: center;
    padding: 24px;
    background: var(--white);
    border-radius: 12px;
    flex: 0 0 130px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.process-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.process-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-blue);
}

/* Process Accordion - Detailed step descriptions */
.process-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto;
}

.process-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.process-card-header {
    background: var(--white);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.process-card-header:hover {
    background: var(--gray-50);
}

.process-card-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: var(--gray-900);
}

/* Accordion content - hidden by default */
.process-card-content {
    padding: 8px 24px 24px;
    display: none;
}

.process-card.active .process-card-content {
    display: block;
}

.process-card.active .faq-icon {
    transform: rotate(180deg);
}

/* Accordion icon */
.faq-icon {
    transition: transform 0.3s ease;
    color: var(--gray-600);
    font-size: 14px;
}

.process-card-content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-600);
}

/* ============================================
   16. TEAM SECTION
   Team member cards
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.team-member {
    text-align: center;
    padding: 32px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.team-photo {
    font-size: 48px;
    margin-bottom: 16px;
}

.team-role {
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

.team-member p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-600);
}

/* ============================================
   17. FAQ SECTION
   Accordion-style FAQ list
   ============================================ */
.faq {
    padding: 96px 0;
}

.faq-list {
    max-width: 800px;
    margin: 48px auto 0;
}

.faq-item {
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.faq-question {
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: var(--gray-50);
}

/* FAQ answer - hidden by default */
.faq-answer {
    padding: 8px 24px 24px;
    color: var(--gray-600);
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* ============================================
   18. CTA SECTION
   Call-to-action banner with gradient
   ============================================ */
.cta-final {
    background: linear-gradient(135deg, var(--primary-navy) 0%, #002855 100%);
    color: var(--white);
    padding: 96px 0;
    text-align: center;
}

.cta-final h2 {
    margin-bottom: 24px;
}

.cta-final p {
    font-size: 20px;
    margin-bottom: 48px;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
}

.cta-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    font-size: 14px;
    flex-wrap: wrap;
}

.cta-trust span::before {
    content: '✓ ';
    color: var(--green-success);
}

/* ============================================
   19. CONTACT OPTIONS (CONTACT PAGE)
   Contact method cards grid
   ============================================ */
.contact-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 96px;
}

.contact-option {
    background: var(--white);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.contact-option h3 {
    margin-bottom: 16px;
}

.contact-option p {
    color: var(--gray-600);
    margin-bottom: 24px;
}

/* ============================================
   20. BLOG/DOWNLOADS SECTION
   Posts grid and filtering system
   ============================================ */
.blog-layout {
    padding: 64px 0;
}

/* Dual Filter System Container */
.filters-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 48px;
}

.filter-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    text-align: center;
}

.filter-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Quarterly Filter Buttons */
.filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-btn {
    padding: 12px 32px;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-900);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: var(--white);
}

/* Posts Grid - 2 columns */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Post Card */
.post-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* YouTube Video Embed - Responsive 16:9 wrapper */
.post-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: var(--gray-200);
}

.post-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Post Content */
.post-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Download Button Placeholder - Centers the button */
.download-button-placeholder,
.card-read-article-btn-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto; /* Push button to bottom of card */
    padding-top: 16px;
}

.post-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--gray-600);
    flex-wrap: wrap;
}

/* Category Badge - Palette Pastel Douce */
.post-category {
    display: inline-block;
    color: var(--white);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Power BI - Jaune Pastel */
.post-category.power-bi {
    background: #FFD54F; /* Pastel Yellow */
    color: #1F1F1F;
}

/* Python - Vert Pastel */
.post-category.python {
    background: #81C784; /* Pastel Green */
    color: var(--white);
}

/* SQL - Bleu Pastel */
.post-category.sql {
    background: #64B5F6; /* Pastel Blue */
    color: var(--white);
}

/* Data Modeling - Violet Pastel */
.post-category.data-modeling {
    background: #BA68C8; /* Pastel Purple */
    color: var(--white);
}

/* Data Governance - Vert Émeraude Pastel */
.post-category.data-governance {
    background: #42A5F5; /* Pastel Sky Blue */
    color: var(--white);
}

/* Microsoft Fabric - Bleu Ciel Pastel */
.post-category.microsoft-fabric {
    background: #4DB6AC; /* Pastel Teal */
    color: var(--white);
}

/* DAX - Rose Pastel (au lieu du rouge vif) */
.post-category.dax {
    background: #EF5350; /* Pastel Red/Pink */
    color: var(--white);
}

/* Security - Lavande Pastel */
.post-category.security {
    background: #9575CD; /* Pastel Lavender */
    color: var(--white);
}

/* ETL - Cyan Pastel */
.post-category.etl {
    background: #4DD0E1; /* Pastel Cyan */
    color: var(--white);
}

/* AI/ML - Orange Pastel */
.post-category.ai {
    background: #FFB74D; /* Pastel Orange */
    color: var(--white);
}

/* API - Corail Pastel */
.post-category.api {
    background: #FF8A80; /* Pastel Coral */
    color: var(--white);
}

.post-category.power-automate {
    background: #0EA5E9; /* Power Automate Sky Blue */
    color: var(--white);
}

/* Power Apps - Violet */
.post-category.power-apps {
    background: #742774; /* Power Apps Purple */
    color: var(--white);
}

/* Power Query - Teal */
.post-category.power-query {
    background: #14B8A6; /* Power Query Teal */
    color: var(--white);
}

/* Excel - Green */
.post-category.excel {
    background: #10B981; /* Excel Green */
    color: var(--white);
}

/* Post Image - For blog articles with images instead of videos */
.post-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--gray-200);
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-image img {
    transform: scale(1.05);
}

.post-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--gray-900);
    line-height: 1.3;
}

.post-excerpt {
    color: var(--gray-600);
    margin-bottom: 16px;
    line-height: 1.6;
    font-size: 15px;
    flex-grow: 1;
}

.post-features {
    list-style: none;
    margin-bottom: 20px;
    padding-left: 0;
}

.post-features li {
    padding: 6px 0;
    color: var(--gray-600);
    font-size: 14px;
    line-height: 1.5;
}

.post-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.post-link {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    background: var(--primary-blue);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.post-link:hover {
    background: #1565C0;
    transform: translateY(-2px);
}

/* ============================================
   21. FOOTER SECTION
   Footer with social links and legal info
   ============================================ */
.footer {
    background: var(--primary-navy);
    color: var(--white);
    padding: 48px 0 24px;
    text-align: center;
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.footer h4 {
    margin-bottom: 16px;
}

.footer p {
    opacity: 0.8;
    margin-bottom: 24px;
}

/* Social Media Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: background 0.3s ease;
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px;
    margin-top: 32px;
    font-size: 14px;
    opacity: 0.7;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ============================================
   22. UTILITY CLASSES
   Helper classes for common patterns
   ============================================ */
.text-center {
    text-align: center;
}

.mt-xl {
    margin-top: 48px;
}

.mb-xl {
    margin-bottom: 48px;
}

/* Reduce space between contact and footer */
#audit {
    padding-bottom: 48px;
}

/* ============================================
   22.5. HOVER EFFECTS
   Apply lift effect to all cards throughout the site
   ============================================ */

/* Result/Metrics cards hover effect */
.result-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Comparison cards hover effect */
.comparison-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Testimonial cards hover effect */
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Pricing cards hover effect */
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Process step cards hover effect */
.process-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Team member cards hover effect */
.team-member:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ============================================
   23. RESPONSIVE DESIGN
   Media queries for tablet and mobile
   ============================================ */

/* Tablet and small desktop (1024px and below) */
@media (max-width: 1024px) {
    /* Scale down typography */
    h1 {
        font-size: 40px;
    }
    
    h2 {
        font-size: 32px;
    }
    
    /* Convert multi-column grids to single column */
    .hero-content,
    .comparison-grid,
    .services-grid,
    .testimonials-grid,
    .team-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    /* Remove popular card scaling on smaller screens */
    .pricing-card.popular {
        transform: scale(1);
    }
    
    /* Adjust metrics grid to 2 columns */
    .results-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact options to 2 columns */
    .contact-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Posts grid to single column */
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    /* Dual filter system responsive */
    .filters-container {
        gap: 24px;
    }
    
    .filter-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .filter-buttons {
        gap: 8px;
    }
    
    .filter-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Reduce padding on comparison cards for tablet */
    .comparison-card {
        padding: 32px; /* Reduced from 48px */
    }
    
    .comparison-grid {
        gap: 32px; /* Reduced from 48px */
    }
}

@media (max-width: 768px) {
    /* Hide desktop navigation - mobile menu should be implemented */
    .nav-links {
        display: none;
    }
    
    /* KEEP language switcher visible on mobile */
    .lang-switch {
        display: flex !important;
        gap: 6px;
    }
    
    .lang-switch img {
        width: 24px;
        height: 17px;
    }
    
    /* Make header more compact */
    .header-content {
        gap: 12px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .logo-icon img {
        width: 32px;
        height: 32px;
    }
    
    /* Further scale down typography */
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 28px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    /* Adjust hero padding for mobile */
    .hero {
        padding: 100px 0 64px;
    }
    
    /* Stack CTA buttons vertically */
    .hero-ctas {
        flex-direction: column;
    }
    
    .hero-ctas .btn {
        width: 100%;
    }
    
    /* Stack trust indicators */
    .trust-indicators {
        flex-direction: column;
        gap: 16px;
    }

    /* Reduce client logos size on mobile (50% of desktop) */
    .client-logos {
        gap: 24px;
    }
    
    .client-logo {
        width: 75px;  /* 50% de 150px */
        height: 30px; /* 50% de 60px */
    }

    
    /* Single column for all metric grids */
    .results-metrics {
        grid-template-columns: 1fr;
    }
    
    /* Single column for contact options */
    .contact-options {
        grid-template-columns: 1fr;
    }
    
    /* Adjust process timeline for mobile */
    .process-timeline {
        gap: 12px;
    }
    
    .process-step-card {
        flex: 0 0 100px;
        padding: 16px;
    }
    
 .process-icon {
        font-size: 32px;
    }
    
    /* Fix comparison cards overflow on mobile */
    .comparison-card {
        padding: 24px 16px; /* Reduced padding for mobile */
    }
    
    .comparison-grid {
        gap: 24px; /* Reduced gap between cards */
    }
    
    .comparison-visual {
        height: 150px; /* Smaller height on mobile */
    }
    
    .comparison-visual img {
        width: 100%; /* Make images responsive */
        height: auto;
        object-fit: cover;
    }
    
    .comparison-quote {
        font-size: 14px;
        padding-left: 16px;
    }
}
/* ============================================
   TRAINING PAGE - CUSTOM STYLES
   ============================================ */

/* Module bullet points styling - more spacing and green checkmarks */
.faq-answer ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.faq-answer ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.faq-answer ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-success);
    font-weight: 700;
    font-size: 18px;
}

/* ============================================
   MOBILE FIXES - Language Switcher & Comparison Table
   ============================================ */

/* Keep language switcher visible on mobile */
@media (max-width: 768px) {
    .lang-switch {
        display: flex !important;
        margin-left: auto;
        gap: 6px;
    }
    
    .lang-switch img {
        width: 24px;
        height: 17px;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .logo-icon img {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   TABLE RESPONSIVE - Scrollable horizontalement
   ============================================ */

.compare-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .compare-table {
        min-width: 800px;
        font-size: 14px;
    }
    
    .compare-table th,
    .compare-table td {
        padding: 16px;
        font-size: 14px;
    }
    
    /* Indicator that table is scrollable */
    .compare-table-wrapper::before {
        content: '👉 Swipe to see the full table.';
        display: block;
        text-align: center;
        padding: 8px;
        background: #1e90ff;
        color: white;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px 8px 0 0;
    }
    
    /* Custom scrollbar */
    .compare-table-wrapper::-webkit-scrollbar {
        height: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-thumb {
        background: #1e90ff;
        border-radius: 10px;
    }
    
    .compare-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: #003366;
    }
}

@media (max-width: 768px) {
    .compare-table {
        min-width: 650px;
        font-size: 12px;
    }
    
    .compare-table th,
    .compare-table td {
        padding: 12px 8px;
        font-size: 12px;
    }
}

/* ============================================
   MOBILE MENU HAMBURGER
   ============================================ */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--primary-navy);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Show hamburger on mobile, hide regular nav */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 70px);
        background: white;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 16px;
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    .nav-links.active {
        right: 0;
    }
    
    .nav-links a {
        padding: 12px 16px;
        border-radius: 8px;
        transition: background 0.3s ease;
    }
    
    .nav-links a:hover {
        background: var(--gray-100);
    }
    
    .nav-links .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Hamburger animation when active */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
}

/* Overlay when menu is open */
@media (max-width: 768px) {
    .nav-overlay {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    .nav-overlay.active {
        display: block;
    }
}

.section-header + .compare-table-wrapper {
    margin-top: -24px;
}

/* ============================================
   DASHBOARD SHOWCASE CAROUSEL SECTION
   Interactive Power BI dashboard carousel
   ============================================ */

.dashboard-showcase {
    background: var(--gray-50);
}

.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 60px;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    background: white;
}

.carousel-slide {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.carousel-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carousel-content {
    padding: 30px;
}

.carousel-content h3 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    text-align: center;
}

.carousel-content p {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 25px;
}

/* Iframe Container - Responsive */
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 62.25%; /* 16:10 aspect ratio for Power BI dashboards */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    font-size: 40px;
    font-weight: 300;
    color: #0066cc;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.carousel-nav:hover {
    background: #0066cc;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

/* Pagination Dots */
.carousel-dots {
    text-align: center;
    padding: 25px 0;
    background: white;
    border-radius: 0 0 16px 16px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: #d0d0d0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background: #999;
    transform: scale(1.2);
}

.dot.active {
    background: #0066cc;
    width: 30px;
    border-radius: 6px;
}

/* Responsive Design for Carousel */
@media (max-width: 1024px) {
    .carousel-container {
        padding: 0 50px;
    }
    
    .carousel-content h3 {
        font-size: 24px;
    }
    
    .carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 35px;
    }
}

@media (max-width: 768px) {
    .dashboard-showcase {
        padding: 60px 0;
    }
    
    .carousel-container {
        padding: 0 40px;
    }
    
    .carousel-content {
        padding: 20px;
    }
    
    .carousel-content h3 {
        font-size: 20px;
    }
    
    .carousel-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
    
    .dot.active {
        width: 25px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 30px;
    }
    
    .carousel-content {
        padding: 15px;
    }
    
    .carousel-content h3 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .carousel-content p {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 25px;
    }
    
    .carousel-dots {
        padding: 20px 0;
    }
    
    .dot {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
    
    .dot.active {
        width: 20px;
    }
}
/* ============================================
   25. BLOG ARTICLE PAGE
   Full-width article layout for individual blog posts
   Used by /blog-posts/*.html pages
   ============================================ */

/* Article page background - light gray like index sections */
/* Gray background for content pages (blog, downloads, etc.) */
.page-gray {
    background: var(--gray-50);
}

.article-page {
    background: var(--gray-50);
    min-height: 100vh;
    padding: 60px 24px 100px;
}

/* Article wrapper - white card centered on gray background */
.article-wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 56px 64px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

@media (max-width: 600px) {
    .article-page {
        padding: 32px 16px 80px;
    }

    .article-wrapper {
        padding: 32px 24px 48px;
    }
}

/* Back navigation link */
.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.article-back:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

/* Article header meta row */
.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* Article title */
.article-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-900);
    margin: 0 0 16px;
}

/* Article subtitle / lead */
.article-subtitle {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--gray-200);
}

/* ── Body content ── */
.article-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #374151;
}

.article-body h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 14px;
}

/* ── Section card — wraps each h2 + content block ── */
.article-section {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.article-body p {
    margin-bottom: 18px;
}

.article-body ul {
    margin: 0 0 20px;
    padding-left: 22px;
}

.article-body ul li {
    margin-bottom: 8px;
}

/* ── Callout box (blue, for key quote / highlight) ── */
.article-callout {
    background: #eff6ff;
    border-left: 4px solid var(--primary-blue);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
    color: #1e40af;
    font-weight: 500;
}

/* ── Pros / Cons two-column grid ── */
.article-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0 28px;
}

.article-pros-cons .col {
    background: var(--gray-50);
    border-radius: 10px;
    padding: 16px 18px;
}

.article-pros-cons .col h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
    line-height: 1.3;
}

.article-pros-cons .col.pros h3 {
    color: #16a34a;
}

.article-pros-cons .col.cons h3 {
    color: #dc2626;
}

.article-pros-cons ul {
    margin: 0;
    padding-left: 16px;
}

/* ── Highlight box (green, for best practice / takeaway) ── */
.article-highlight {
    background: #f0fdf4;
    border-left: 4px solid var(--green-success);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
    color: #166534;
}

/* ── Synthesis dark card ── */
.article-synthesis {
    background: #1e293b;
    color: #f8fafc;
    padding: 28px 32px;
    border-radius: 14px;
    margin: 48px 0 0;
}

.article-synthesis h2 {
    color: #f8fafc;
    margin-top: 0;
    font-size: 1.1rem;
}

.article-synthesis p {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.article-synthesis .tagline {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid #334155;
}

/* Back link at bottom of article */
.article-back-bottom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.article-back-bottom:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

/* ── Article Top Bar (back to blog + language flags) ── */
.article-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
}

.article-top-bar .article-back {
    margin-bottom: 0;
}

.article-lang-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.article-flag-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.15s ease;
    line-height: 1;
}

.article-flag-btn img {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.article-flag-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}

.article-flag-btn.active {
    opacity: 1;
}

/* ── Article Bottom Navigation (prev / back to blog / next) ── */
.article-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.article-bottom-nav-prev,
.article-bottom-nav-back,
.article-bottom-nav-next {
    flex: 1;
    display: flex;
}

.article-bottom-nav .article-back-bottom,
.article-bottom-nav .article-back {
    margin-top: 0;
    margin-bottom: 0;
}

.article-bottom-nav-prev  { justify-content: flex-start; }
.article-bottom-nav-back  { justify-content: center; }
.article-bottom-nav-next  { justify-content: flex-end; }

.article-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.article-nav-link:hover {
    background: var(--gray-200);
    color: var(--gray-900);
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .article-pros-cons {
        grid-template-columns: 1fr;
    }

    .article-title {
        font-size: 1.5rem;
    }

    .article-subtitle {
        font-size: 1rem;
        margin-bottom: 28px;
        padding-bottom: 28px;
    }

    .article-back {
        margin-bottom: 24px;
    }

    .article-bottom-nav {
        flex-direction: column;
        gap: 12px;
    }

    .article-bottom-nav-prev,
    .article-bottom-nav-back,
    .article-bottom-nav-next {
        justify-content: center;
    }

    .article-wrapper {
        padding: 32px 20px 60px;
    }

    .article-synthesis {
        padding: 22px 20px;
    }

    .article-body h2 {
        margin-top: 32px;
    }
}

@media (max-width: 480px) {
    .article-page {
        padding: 0 0 60px;
    }

    .article-wrapper {
        border-radius: 0;
        box-shadow: none;
        padding: 28px 20px 60px;
    }
}


/* ============================================
   TRAINING PAGE — FREE COURSE MODULE
   ============================================ */

.free-course-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    padding: 60px 0;
}

.free-course-section .section-header {
    text-align: center;
    margin-bottom: 40px;
}

.free-course-section .section-header h2 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.free-course-section .section-header p {
    color: #666;
    font-size: 1.05rem;
}

/* Module Accordion */
.module-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.module-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #e2eaf5;
}

.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.module-header:hover { background: #f7faff; }

.module-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.module-number {
    background: linear-gradient(135deg, #1a3a6b 0%, #2563c5 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.module-number.coming-soon {
    background: linear-gradient(135deg, #999 0%, #bbb 100%);
}

.module-title-group h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2540;
    margin: 0 0 4px;
}

.module-title-group p {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
}

.module-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.module-badge.available { background: #e6f9ef; color: #1a7a45; }
.module-badge.soon { background: #f0f0f0; color: #888; }

.module-toggle {
    font-size: 1.1rem;
    color: #2563c5;
    transition: transform 0.3s;
    margin-left: 12px;
}

.module-item.open .module-toggle { transform: rotate(180deg); }

/* Module Body */
.module-body {
    display: none;
    padding: 0 28px 28px;
}

.module-item.open .module-body { display: block; }

/* Coming Soon Body */
.coming-soon-body {
    display: none;
    padding: 20px 28px 28px;
}

.module-item.open .coming-soon-body { display: block; }

.coming-soon-content {
    text-align: center;
    padding: 32px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 2px dashed #ddd;
}

.coming-soon-content .soon-icon { font-size: 2.5rem; margin-bottom: 12px; }
.coming-soon-content h4 { font-size: 1.1rem; color: #555; margin-bottom: 8px; }
.coming-soon-content p { font-size: 0.9rem; color: #888; max-width: 380px; margin: 0 auto; }

/* Video Grid */
.videos-grid { display: flex; flex-direction: column; gap: 24px; }
.video-card { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; transition: box-shadow 0.2s, transform 0.2s; }
.video-card:hover { box-shadow: 0 4px 24px rgba(37,99,197,0.14); transform: translateY(-2px); }
.video-thumbnail-wrap { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #1a1a2e; }
.video-thumbnail-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg,#1a2540,#2a3f6b); color:#fff; gap:10px; }
.video-soon .soon-icon { font-size: 2rem; }
.video-soon .soon-text { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.video-meta { padding: 14px 18px 16px; display: flex; align-items: center; gap: 12px; }
.video-meta .vid-num { font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#1a3a6b,#2563c5); padding: 3px 9px; border-radius: 6px; white-space: nowrap; letter-spacing: 0.04em; }
.video-meta .vid-title { font-size: 0.97rem; font-weight: 600; color: #1a2540; line-height: 1.3; }

/* Lang Note */
.lang-note-wrap { max-width: 900px; margin: 0 auto 32px; }
.lang-note { display: block; background: #eef4ff; border: 1px solid #c7d9f8; border-radius: 10px; padding: 16px 20px; font-size: 0.88rem; color: #2a4a8a; line-height: 1.8; }

/* Episode Accordion */
.episode-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.episode-item { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }
.episode-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; user-select: none; transition: background 0.15s; }
.episode-header:hover { background: #f5f8ff; }
.episode-num { font-size: 0.7rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#1a3a6b,#2563c5); padding: 3px 9px; border-radius: 6px; white-space: nowrap; letter-spacing: 0.04em; flex-shrink: 0; }
.episode-num.soon { background: linear-gradient(135deg,#94a3b8,#64748b); }
.episode-title { font-size: 0.95rem; font-weight: 600; color: #1a2540; flex: 1; }
.episode-duration { font-size: 0.78rem; color: #94a3b8; font-weight: 500; margin-left: auto; padding-right: 6px; white-space: nowrap; }
.episode-toggle { font-size: 0.75rem; color: #94a3b8; transition: transform 0.2s; flex-shrink: 0; }
.episode-item.open .episode-toggle { transform: rotate(180deg); }

/* Language Tab */
.tab-lang-content { padding: 16px 4px; }
.tab-lang-desc { font-size: 0.85rem; color: #64748b; margin-bottom: 14px; line-height: 1.5; }
.tab-lang-flags { display: flex; gap: 14px; align-items: center; }
.tab-lang-flag { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.84rem; font-weight: 500; color: #334155; transition: background 0.15s, border-color 0.15s, opacity 0.15s; }
.tab-lang-flag img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.tab-lang-flag:hover { background: #f0f5ff; border-color: #93aee8; }
.tab-lang-flag.active { border-color: #2563c5; background: #eef3ff; color: #1d4ed8; pointer-events: none; }
.tab-lang-flag.active::after { content: ' ✓'; font-size: 0.78rem; }

/* Episode Body */
.episode-body { display: none; }
.episode-item.open .episode-body { display: block; }
.episode-video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #1a1a2e; }
.episode-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.episode-soon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; background: linear-gradient(135deg,#1a2540,#2a3f6b); color: #fff; }
.episode-soon-wrap .soon-icon { font-size: 2rem; }
.episode-soon-wrap .soon-text { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }

/* Episode Tabs */
.episode-tabs { border-top: 1px solid #e2e8f0; }
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid #e2e8f0; padding: 0 18px; overflow-x: auto; }
.tab-btn { background: none; border: none; cursor: pointer; padding: 12px 16px; font-size: 0.82rem; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.tab-btn:hover { color: #2563c5; }
.tab-btn.active { color: #2563c5; border-bottom-color: #2563c5; }
.tab-panel { display: none; padding: 20px 22px; }
.tab-panel.active { display: block; }
.tab-summary h4 { font-size: 0.95rem; font-weight: 700; color: #1a2540; margin-bottom: 10px; }
.tab-summary p { font-size: 0.88rem; color: #4a5568; line-height: 1.7; margin-bottom: 8px; }
.tab-script p { font-size: 0.86rem; color: #4a5568; line-height: 1.8; margin-bottom: 14px; }
.tab-timestamps table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tab-timestamps tr:nth-child(even) { background: #f8faff; }
.tab-timestamps td { padding: 7px 12px; color: #4a5568; }
.tab-timestamps td:first-child { color: #2563c5; font-weight: 700; font-family: monospace; width: 80px; }
.tab-downloads { font-size: 0.88rem; color: #64748b; }
.tab-downloads .no-resources { display:flex; align-items:center; gap:10px; padding:12px; background:#f8faff; border-radius:8px; border:1px dashed #c7d9f8; color:#4a6fa0; }

/* Dashboard category badge */
.post-category.dashboard {
    background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-blue) 100%) !important;
    color: var(--white) !important;
}