/* ============================================================
   BUSINESS AUTOMATION BI — main.css
   Brand: #004080 · #1E90FF secondary · Inter font
   Merged: styles.css + index.css + insights.css + training.css + downloads.css
   ============================================================ */

/* ══ 1. BASE ══ */
/* ============================================
   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:      #004080;   /* alias used throughout */
    --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: 64px 0;
}

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

/* Dark navy blue section */
.section-blue {
    background: #004080;
}
.section-blue .section-header h2,
.section-blue .section-header p,
.section-blue h2,
.section-blue h3,
.section-blue p,
.section-blue strong,
.section-blue .da-header h3,
.section-blue .da-header,
.section-blue .powered-by-label {
    color: white;
}
.section-blue .domain-accordion,
.section-blue .da-item {
    border-color: rgba(255,255,255,0.2);
}
.section-blue .da-header {
    background: white !important;
}
.section-blue .da-header:hover {
    background: #f8fafc !important;
}
.section-blue .da-item.da-open .da-header {
    background: #f0f6ff !important;
}
.section-blue .da-header h3 {
    color: #111827 !important;
}
.section-blue .faq-icon {
    color: #4b5563 !important;
}
.section-blue .da-body {
    background: #fafcff;
    border-top-color: #e8f0fb;
}
.section-blue .domain-usecases li { color: #374151; }
.section-blue .domain-regs div { color: #4b5563; }
.section-blue .domain-tags span {
    background: #e8f0fb;
    color: #004080;
}
.section-blue .domain-meta-block strong { color: #004080; }
.section-blue .sector-note,
.section-blue .sector-note a { color: rgba(255,255,255,0.8); }
.section-blue .powered-logos img { filter: none; opacity: 1; }

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

.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 a {
    display: block;
    line-height: 0;
}

/* 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: 64px 0;
    background: var(--gray-50);
}

/* ============================================
   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: 64px 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: 64px 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: 64px 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
   ============================================ */

/* Social Media Links */






/* Footer Bottom */

/* ============================================
   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;
    }
    
    
    
    /* 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;
    }
    
    
    
    .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 — big, always visible blue */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #004080;
    border: 3px solid white;
    font-size: 28px;
    font-weight: 700;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.carousel-nav:hover {
    background: #003570;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 6px 20px rgba(0, 64, 128, 0.45);
}

.carousel-nav.prev {
    left: -8px;
}

.carousel-nav.next {
    right: -8px;
}

/* 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: var(--surface);
    padding: 6rem 0;
}

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

.free-course-section .section-header h2 {
    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-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;
}

/* ============================================
   DOMAIN PANELS
   ============================================ */
.domain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.domain-panel {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.domain-panel-header {
    background: var(--primary);
    color: white;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.domain-emoji {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}
.domain-panel-header h3 {
    color: white;
    font-size: 18px;
    margin: 0 0 3px;
    line-height: 1.2;
}
.domain-panel-header p {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin: 0;
}
.domain-panel-body {
    padding: 20px 24px;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.domain-usecases {
    list-style: none;
    padding: 0;
    margin: 0;
}
.domain-usecases li {
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f5f9;
    color: var(--gray-700, #374151);
    line-height: 1.4;
}
.domain-usecases li:last-child { border-bottom: none; }
.domain-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.domain-meta-block strong {
    display: block;
    font-size: 12px;
    color: var(--primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.domain-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.domain-tags span {
    background: #e8f0fb;
    color: #004080;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.domain-regs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #4b5563;
}
.domain-regs div { line-height: 1.5; }
.domain-panel-cta {
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.domain-panel-cta .btn {
    font-size: 14px;
    padding: 10px 20px;
}

/* ============================================
   SECTOR GRID
   ============================================ */
.sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.sector-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    background: white;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    text-decoration: none;
    transition: all 0.2s ease;
    color: #1e293b;
    gap: 4px;
}
.sector-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(0,64,128,0.10);
    transform: translateY(-2px);
}
.sector-emoji { font-size: 28px; margin-bottom: 4px; }
.sector-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.sector-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}
.sector-arrow {
    margin-top: 4px;
    color: var(--primary);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s;
}
.sector-card:hover .sector-arrow { opacity: 1; }
.sector-note {
    text-align: center;
    margin-top: 28px;
    color: #6b7280;
    font-size: 15px;
}
.sector-note a { color: var(--primary); font-weight: 600; }

/* ============================================
   POWERED BY
   ============================================ */
.powered-by-section {
    padding: 28px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.powered-by-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 16px;
    font-weight: 600;
}
.powered-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}
.powered-logos img {
    height: 34px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s, filter 0.2s;
    filter: grayscale(15%);
}
.powered-logos img:hover { opacity: 1; filter: none; }

@media (max-width: 900px) {
    .domain-grid { grid-template-columns: 1fr; }
    .domain-panel-body { grid-template-columns: 1fr; }
    .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sector-grid { grid-template-columns: repeat(2, 1fr); }
    .powered-logos { gap: 20px; }
    .powered-logos img { height: 26px; }
}

/* ============================================
   DOMAIN ACCORDION (da-*)
   ============================================ */
.domain-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}
.da-item {
    border-bottom: 1px solid #e2e8f0;
}
.da-item:last-child { border-bottom: none; }
/* da-header matches process-card-header exactly */
.da-header {
    background: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    user-select: none;
}
.da-header:hover { background: var(--gray-50, #f8fafc); }
.da-item.da-open .da-header { background: #f0f6ff; }
.da-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: var(--gray-900, #111827);
}
.da-icon {
    transition: transform 0.3s ease;
    color: var(--gray-600, #4b5563);
    font-size: 14px;
    flex-shrink: 0;
}
.da-content {
    display: none;
}
.da-body {
    padding: 20px 28px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-top: 1px solid #e8f0fb;
    background: #fafcff;
}
.da-cta { margin-top: 16px; }
.da-cta .btn { font-size: 14px; padding: 10px 20px; }

/* ============================================
   SECTOR LIST (sl-*)
   ============================================ */
.sector-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.sector-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
    background: white;
    transition: background 0.2s, border-color 0.2s;
    color: inherit;
}
.sector-list-item:last-child { border-bottom: none; }
.sector-list-item:hover {
    background: #f0f6ff;
}
.sl-emoji { font-size: 24px; flex-shrink: 0; }
.sl-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sl-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.sl-text span {
    font-size: 13px;
    color: #6b7280;
}
.sl-arrow {
    color: var(--primary);
    font-size: 18px;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
}
.sector-list-item:hover .sl-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ============================================
   TECH LOGOS (same style as client-logos)
   ============================================ */
.tech-logos-section {
    padding: 32px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.tech-logos-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 20px;
    font-weight: 600;
}
.tech-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}
.tech-logos img {
    height: 36px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s;
    filter: grayscale(15%);
}
.tech-logos img:hover { opacity: 1; filter: none; }

@media (max-width: 768px) {
    .da-body { grid-template-columns: 1fr; }
    .da-header { padding: 16px 20px; }
    .da-body { padding: 16px 20px 20px; }
}

/* ============================================
   TEAM SECTION - Blue background overrides
   ============================================ */
.section-blue .team-member {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
}
.section-blue .team-photo { background: rgba(255,255,255,0.15); }
.section-blue .team-role { color: rgba(255,255,255,0.7); }
.section-blue .team-name { color: white; }
.section-blue .team-member p { color: rgba(255,255,255,0.8); }

/* ============================================
   COMPARISON SECTION - Blue background text
   ============================================ */
.section-blue .comparison-card {
    background: white;
    color: #111827;
}
.section-blue .comparison-card h3,
.section-blue .comparison-card li,
.section-blue .comparison-quote { color: #111827; }

/* ============================================
   DOMAIN ACCORDION (da-*)
   ============================================ */
.domain-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}
.da-item {
    border-bottom: 1px solid #e2e8f0;
}
.da-item:last-child { border-bottom: none; }
/* da-header matches process-card-header exactly */
.da-header {
    background: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    user-select: none;
}
.da-header:hover { background: var(--gray-50, #f8fafc); }
.da-item.da-open .da-header { background: #f0f6ff; }
.da-header h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: var(--gray-900, #111827);
}
.da-icon {
    transition: transform 0.3s ease;
    color: var(--gray-600, #4b5563);
    font-size: 14px;
    flex-shrink: 0;
}
.da-content {
    display: none;
}
.da-body {
    padding: 20px 28px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    border-top: 1px solid #e8f0fb;
    background: #fafcff;
}
.da-cta { margin-top: 16px; }
.da-cta .btn { font-size: 14px; padding: 10px 20px; }

/* ============================================
   SECTOR LIST (sl-*)
   ============================================ */
.sector-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.sector-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
    background: white;
    transition: background 0.2s, border-color 0.2s;
    color: inherit;
}
.sector-list-item:last-child { border-bottom: none; }
.sector-list-item:hover {
    background: #f0f6ff;
}
.sl-emoji { font-size: 24px; flex-shrink: 0; }
.sl-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sl-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.sl-text span {
    font-size: 13px;
    color: #6b7280;
}
.sl-arrow {
    color: var(--primary);
    font-size: 18px;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.2s;
}
.sector-list-item:hover .sl-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ============================================
   TECH LOGOS (same style as client-logos)
   ============================================ */
.tech-logos-section {
    padding: 32px 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}
.tech-logos-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    margin-bottom: 20px;
    font-weight: 600;
}
.tech-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}
.tech-logos img {
    height: 36px;
    width: auto;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s;
    filter: grayscale(15%);
}
.tech-logos img:hover { opacity: 1; filter: none; }

@media (max-width: 768px) {
    .da-body { grid-template-columns: 1fr; }
    .da-header { padding: 16px 20px; }
    .da-body { padding: 16px 20px 20px; }
}

/* ============================================
   TEAM SECTION - Blue background overrides
   ============================================ */
.section-blue .team-member {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
}
.section-blue .team-photo { background: rgba(255,255,255,0.15); }
.section-blue .team-role { color: rgba(255,255,255,0.7); }
.section-blue .team-name { color: white; }
.section-blue .team-member p { color: rgba(255,255,255,0.8); }

/* ============================================
   COMPARISON SECTION - Blue background text
   ============================================ */
.section-blue .comparison-card {
    background: white;
    color: #111827;
}
.section-blue .comparison-card h3,
.section-blue .comparison-card li,
.section-blue .comparison-quote { color: #111827; }

/* Separate consecutive cta-final sections */
.cta-final + .cta-final {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ══ 2. DESIGN SYSTEM ══ */
/* ===================================================
       BRAND SYSTEM — Business Automation BI
       Primary #004080 | Secondary #1E90FF | Accent #FFBF00
       Font: Inter
       =================================================== */
    :root {
      --primary:    #004080;
      --primary-dk: #002f5f;
      --primary-lt: #e8f0fb;
      --secondary:  #1E90FF;
      --sec-lt:     #dbeeff;
      --accent:     #FFBF00;
      --accent-dk:  #e6ab00;
      --accent-lt:  #fff8e0;
      --bg:         #ffffff;
      --surface:    #f5f8ff;
      --surface-2:  #edf2fc;
      --card:       #ffffff;
      --border:     #dce8f5;
      --border-dk:  #b8d0ea;
      --text:       #0d1b3e;
      --body:       #374151;
      --muted:      #6b7a8d;
      --green:      #059669;
      --red:        #dc2626;
      --radius:     8px;
      --shadow-sm:  0 2px 8px rgba(0,64,128,0.08);
      --shadow-md:  0 6px 24px rgba(0,64,128,0.12);
      --shadow-lg:  0 16px 48px rgba(0,64,128,0.14);
      --font: 'Inter', sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{background:var(--bg);color:var(--body);font-family:var(--font);font-weight:400;line-height:1.65;overflow-x:hidden;}

    /* BUTTONS */
    .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font);font-size:.875rem;font-weight:600;letter-spacing:.01em;padding:.8rem 1.75rem;border-radius:var(--radius);text-decoration:none;cursor:pointer;border:none;transition:all .22s ease;}
    .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);}
    .btn-primary:hover{background:var(--primary-dk);transform:translateY(-2px);box-shadow:var(--shadow-md);}
    .btn-accent{background:#ffffff;color:var(--primary);box-shadow:var(--shadow-sm);}
    .btn-accent:hover{background:#f0f4ff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,64,128,.2);}
    .btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45);}
    .btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);transform:translateY(-2px);}
    .btn-whatsapp{background:#25D366;color:#fff;box-shadow:var(--shadow-sm);}
    .btn-whatsapp:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.3);}

    /* LAYOUT */
    .container{max-width:1160px;margin:0 auto;padding:0 2rem;}

    /* REVEAL */
    .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
    .reveal.visible{opacity:1;transform:translateY(0);}

    /* EYEBROW */
    .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);margin-bottom:.85rem;}
    .eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--secondary);flex-shrink:0;border-radius:2px;}

    /* SECTION HEADERS */
    .section-title{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.02em;margin-bottom:.75rem;}
    .section-title .hl{color:var(--secondary);}
    .section-sub{font-size:1rem;color:var(--muted);max-width:520px;}
    .section-header{margin-bottom:3rem;}
    .section-header.center{text-align:center;}
    .section-header.center .eyebrow{justify-content:center;}
    .section-header.center .section-sub{margin:0 auto;}

    /* ======================== HERO ======================== */
    #hero{position:relative;padding:140px 0 96px;overflow:hidden;background:linear-gradient(135deg,var(--primary) 0%,#005cad 55%,#0a72cc 100%);}
    #hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(30,144,255,.28) 0%,transparent 50%),radial-gradient(circle at 10% 80%,rgba(255,191,0,.1) 0%,transparent 45%);pointer-events:none;}
    #hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
    .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
    .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.4rem 1rem;border-radius:100px;margin-bottom:1.5rem;}
    .hero-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:#fff;line-height:1.2;letter-spacing:-.02em;margin-bottom:1.25rem;}
    .hero-title .hl-y{color:#fff;}
    .hero-sub{font-size:1.05rem;color:rgba(255,255,255,.78);margin-bottom:2.25rem;max-width:460px;line-height:1.7;font-weight:300;}
    .hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.5rem;}
    .hero-trust{display:flex;flex-wrap:wrap;gap:1.25rem;}
    .hero-trust-item{font-size:.8rem;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:.4rem;}
    .hero-trust-item::before{content:'✓';color:#6ee7a0;font-weight:700;}
    .hero-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
    .hero-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:12px;}

    /* ======================== METRICS ======================== */
    #metrics{background:var(--bg);border-bottom:1px solid var(--border);}
    .metrics-inner{display:grid;grid-template-columns:repeat(4,1fr);}
    .metric-item{text-align:center;padding:2rem 1.5rem;border-right:1px solid var(--border);transition:background .2s;}
    .metric-item:last-child{border-right:none;}
    .metric-item:hover{background:var(--surface);}
    .metric-num{display:block;font-size:2.4rem;font-weight:800;color:var(--primary);letter-spacing:-.03em;line-height:1;margin-bottom:.3rem;}
    .metric-label{font-size:.8rem;color:var(--muted);font-weight:500;}

    /* ======================== CLIENTS ======================== */
    #clients{padding:3.5rem 0;background:var(--surface);border-bottom:1px solid var(--border);}
    .clients-label{text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem;}
    #client-logos-placeholder{display:flex;justify-content:center;flex-wrap:wrap;gap:2.5rem;align-items:center;opacity:.55;filter:grayscale(1);}

    /* ======================== TECH STACK ======================== */
    #tech-stack{padding:6rem 0;background:var(--bg);}
    .tech-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:2.5rem;align-items:center;padding:2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:2rem;}
    .tech-logos img{height:42px;width:auto;object-fit:contain;transition:opacity .2s;opacity:.8;}
    .tech-logos img:hover{opacity:1;}
    .tech-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;}
    .tech-badge{font-size:.75rem;font-weight:500;padding:.35rem .9rem;border:1px solid var(--border-dk);border-radius:100px;color:var(--primary);background:var(--primary-lt);}

    /* ======================== DOMAINS ======================== */
    #solutions{padding:6rem 0;background:var(--surface);}
    .domain-accordion{display:flex;flex-direction:column;gap:.5rem;}
    .da-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);transition:border-color .2s,box-shadow .2s;}
    .da-item:hover{border-color:var(--border-dk);box-shadow:var(--shadow-sm);}
    .da-item.da-open{border-color:var(--secondary);box-shadow:var(--shadow-md);}
    .da-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;cursor:pointer;user-select:none;background:var(--card);transition:background .2s;}
    .da-header:hover{background:var(--surface);}
    .da-item.da-open .da-header{background:var(--primary-lt);}
    .da-header h3{font-size:1rem;font-weight:600;color:var(--text);}
    .da-item.da-open .da-header h3{color:var(--primary);}
    .faq-icon{color:var(--secondary);font-size:.8rem;transition:transform .3s;}
    .da-body{padding:1.75rem;border-top:1px solid var(--border);}
    .domain-usecases{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem;margin-bottom:1.75rem;}
    .domain-usecases li{font-size:.875rem;color:var(--body);padding:.5rem .75rem;background:var(--surface);border-radius:5px;border-left:3px solid var(--sec-lt);transition:border-color .2s;}
    .domain-usecases li:hover{border-left-color:var(--secondary);}
    .domain-meta{display:flex;flex-direction:column;gap:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border);}
    .domain-meta-block strong{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;}
    .domain-tags{display:flex;flex-wrap:wrap;gap:.4rem;}
    .domain-tags span{font-size:.75rem;font-weight:500;padding:.3rem .7rem;background:var(--sec-lt);border:1px solid #c0dbf8;border-radius:4px;color:var(--primary);}
    .domain-regs{display:flex;flex-direction:column;gap:.35rem;font-size:.83rem;color:var(--muted);}
    .da-cta{margin-top:.5rem;}
    .da-cta .btn{font-size:.8rem;padding:.6rem 1.3rem;}

    /* ======================== PARTNER ======================== */
    #partner{padding:4rem 0;background:linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);}
    .partner-inner{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;}
    .partner-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;color:#fff;margin-bottom:.5rem;letter-spacing:-.02em;}
    .partner-sub{font-size:.95rem;color:rgba(255,255,255,.72);max-width:540px;}
    .partner-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem;}
    .partner-badge{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.35);border-radius:100px;color:#fff;background:rgba(255,255,255,.12);}

    /* ======================== CAROUSEL ======================== */
    #dashboards{padding:6rem 0;background:var(--bg);}
    .carousel-container{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);margin-top:2rem;position:relative;}
    .carousel-wrapper{display:flex;transition:transform .45s ease;}
    .carousel-slide{min-width:100%;}
    .carousel-content{display:none;padding:2rem;}
    .carousel-content.active{display:block;}
    .carousel-content h3{font-size:1.35rem;font-weight:700;color:var(--text);margin-bottom:.35rem;}
    .carousel-content p{font-size:.88rem;color:var(--muted);margin-bottom:1.25rem;}
    .iframe-container{width:100%;height:520px;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
    .carousel-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--bg);border:1px solid var(--border);color:var(--primary);font-size:1.3rem;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10;box-shadow:var(--shadow-sm);}
    .carousel-nav:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
    .carousel-nav.prev{left:1rem;}
    .carousel-nav.next{right:1rem;}
    .carousel-dots{display:flex;gap:.5rem;justify-content:center;padding:1.25rem;background:var(--surface);border-top:1px solid var(--border);}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--border-dk);cursor:pointer;transition:all .25s;}
    .dot.active{background:var(--secondary);transform:scale(1.3);}

    /* ======================== COMPARISON ======================== */
    #comparison{padding:6rem 0;background:var(--surface);}
    .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem;}
    .comp-card{background:var(--card);border:1px solid;border-radius:12px;padding:2.25rem;box-shadow:var(--shadow-sm);}
    .comp-card.before{border-color:#fca5a5;}
    .comp-card.after{border-color:#6ee7b7;}
    .comp-card h3{font-size:1.3rem;font-weight:700;margin-bottom:1.25rem;}
    .comp-card.before h3{color:var(--red);}
    .comp-card.after h3{color:var(--green);}
    .comp-card ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;}
    .comp-card ul li{font-size:.9rem;color:var(--body);}
    .comp-img{margin:1.5rem 0;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
    .comp-img img{width:100%;height:auto;display:block;}
    .comp-quote{font-size:.85rem;font-style:italic;color:var(--muted);border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem;}

    /* ======================== CTA BANNERS ======================== */
    .cta-banner{padding:3.5rem 0;border-top:1px solid var(--border);}
    .cta-banner.alt{background:var(--surface);}
    .cta-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
    .cta-banner-text h2{font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;color:var(--text);margin-bottom:.35rem;letter-spacing:-.01em;}
    .cta-banner-text p{font-size:.95rem;color:var(--muted);}
    .cta-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem;}
    .cta-tags span{font-size:.72rem;font-weight:500;padding:.3rem .75rem;border:1px solid var(--border-dk);border-radius:100px;color:var(--primary);background:var(--primary-lt);}

    /* ======================== CONTACT ======================== */
    #contact{padding:7rem 0;background:var(--bg);}
    .contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
    .contact-left-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:var(--text);line-height:1.12;letter-spacing:-.025em;margin-bottom:1.25rem;}
    .contact-left-title .hl{color:var(--secondary);}
    .contact-left-sub{font-size:1rem;color:var(--muted);margin-bottom:2.25rem;line-height:1.7;}
    .contact-info-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;}
    .contact-info-item{display:flex;align-items:center;gap:1rem;font-size:.9rem;color:var(--body);}
    .contact-info-icon{width:40px;height:40px;border-radius:8px;background:var(--primary-lt);border:1px solid var(--border-dk);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
    .contact-info-item a{color:var(--secondary);text-decoration:none;font-weight:500;}
    .contact-info-item a:hover{color:var(--primary);text-decoration:underline;}
    .wa-banner{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;background:#f0fdf4;border:1px solid #86efac;border-radius:var(--radius);text-decoration:none;transition:all .25s;margin-top:1rem;}
    .wa-banner:hover{background:#dcfce7;box-shadow:0 4px 16px rgba(37,211,102,.2);transform:translateY(-2px);}
    .wa-icon{font-size:1.75rem;flex-shrink:0;}
    .wa-text strong{display:block;color:#15803d;font-size:.95rem;font-weight:600;}
    .wa-text span{font-size:.8rem;color:var(--muted);}
    .wa-arrow{margin-left:auto;color:#15803d;font-size:1.2rem;font-weight:600;}
    .contact-form-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:2.5rem;box-shadow:var(--shadow-md);}
    .form-title{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.35rem;letter-spacing:-.01em;}
    .form-sub{font-size:.875rem;color:var(--muted);margin-bottom:1.75rem;}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
    .form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
    .form-group label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
    .form-group input,.form-group select,.form-group textarea{background:var(--surface);border:1px solid var(--border-dk);border-radius:6px;padding:.75rem 1rem;font-family:var(--font);font-size:.9rem;color:var(--text);width:100%;transition:border-color .2s,box-shadow .2s;appearance:none;}
    .form-group input::placeholder,.form-group textarea::placeholder{color:#aab4c0;}
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(30,144,255,.12);background:#fff;}
    .form-group textarea{min-height:100px;resize:vertical;}
    .form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a8d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer;}
    .form-group select option{background:#fff;color:var(--text);}
    .form-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.75rem;}

    /* ======================== RESPONSIVE ======================== */
    @media(max-width:900px){
      .hero-inner{grid-template-columns:1fr;gap:2rem;}
      .metrics-inner{grid-template-columns:repeat(2,1fr);}
      .metric-item:nth-child(2){border-right:none;}
      .metric-item:nth-child(3),.metric-item:nth-child(4){border-top:1px solid var(--border);}
      .comparison-grid{grid-template-columns:1fr;}
      .contact-inner{grid-template-columns:1fr;gap:3rem;}
      .partner-inner{grid-template-columns:1fr;}
      .cta-banner-inner{flex-direction:column;align-items:flex-start;}
      .form-row{grid-template-columns:1fr;}
    }
    @media(max-width:600px){
      #hero{padding:5rem 0 3.5rem;}
      .hero-title{font-size:2.2rem;}
      .hero-actions{flex-direction:column;}
      .hero-actions .btn{justify-content:center;}
    }

    /* ======================== HEADER ======================== */
    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: #fff;
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .header .container { padding: 0 2rem; }
    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
      gap: 2rem;
    }

    /* Logo */
    .logo {
      display: flex;
      align-items: center;
      gap: .75rem;
      text-decoration: none;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .logo-icon img {
      width: 40px; height: 40px;
      display: block;
      border-radius: 6px;
    }
    .bi-highlight { color: var(--secondary); }

    /* Nav */
    .nav { display: flex; align-items: center; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.75rem;
    }
    .nav-links a {
      font-size: .875rem;
      font-weight: 500;
      color: var(--text);
      text-decoration: none;
      transition: color .2s;
      white-space: nowrap;
    }
    .nav-links a:hover,
    .nav-links a.active { color: var(--primary); }
    .nav-links .btn {
      padding: .55rem 1.25rem;
      font-size: .82rem;
      margin-left: .5rem;
    }
    .nav-links .btn-primary {
      color: #fff !important;
    }

    /* Language switcher */
    .lang-switch {
      display: flex;
      align-items: center;
      gap: .4rem;
      flex-shrink: 0;
    }
    .lang-switch button {
      background: none;
      border: 2px solid transparent;
      border-radius: 6px;
      padding: 2px;
      cursor: pointer;
      transition: border-color .2s;
      line-height: 0;
    }
    .lang-switch button:hover { border-color: var(--border-dk); }
    .lang-switch button a { display: block; line-height: 0; }
    .lang-switch button img {
      width: 26px; height: 18px;
      object-fit: cover;
      border-radius: 3px;
      display: block;
    }

    /* Mobile hamburger */
    .mobile-menu-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: .4rem;
      margin-left: auto;
    }
    .mobile-menu-toggle span {
      display: block;
      width: 24px; height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all .3s;
    }

    /* Hero padding offset for fixed header */
    /* header offset already included in #hero padding-top: 140px */

    /* ======================== HEADER RESPONSIVE ======================== */
    @media (max-width: 900px) {
      .mobile-menu-toggle { display: flex; }

      .nav { position: relative; }
      .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 1rem);
        right: 0;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-width: 220px;
        padding: .5rem 0;
        z-index: 999;
      }
      .nav-links.open { display: flex; }
      .nav-links a {
        width: 100%;
        padding: .75rem 1.25rem;
        border-radius: 0;
      }
      .nav-links a:hover { background: var(--surface); }
      .nav-links .btn {
        margin: .5rem 1rem;
        width: calc(100% - 2rem);
        justify-content: center;
      }
    }

    @media (max-width: 600px) {
      .logo span { display: none; }
      .header-content { gap: 1rem; }
    }

    /* ======================== CLIENT LOGOS ======================== */
    .client-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:2.5rem;align-items:center;}
    .client-logo{display:flex;align-items:center;opacity:.55;filter:grayscale(1);transition:opacity .25s,filter .25s;}
    .client-logo:hover{opacity:1;filter:grayscale(0);}
    .client-logo img{height:36px;width:auto;object-fit:contain;}
    
    /* ======================== DOMAIN TABS ======================== */
    .domain-tabs-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .domain-tab-nav {
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-right: 1px solid var(--border);
    }
    .domain-tab-btn {
      text-align: left;
      padding: .9rem 1.25rem;
      font-family: var(--font);
      font-size: .85rem;
      font-weight: 500;
      color: var(--muted);
      background: none;
      border: none;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: all .2s;
      line-height: 1.3;
    }
    .domain-tab-btn:last-child { border-bottom: none; }
    .domain-tab-btn:hover { background: var(--primary-lt); color: var(--primary); }
    .domain-tab-btn.active {
      background: var(--primary);
      color: #fff;
      font-weight: 600;
    }
    .domain-tab-panels { background: var(--card); }
    .domain-tab-panel { display: none; padding: 2rem; }
    .domain-tab-panel.active { display: block; }
    .domain-panel-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 1.25rem;
      padding-bottom: .75rem;
      border-bottom: 2px solid var(--primary-lt);
    }

    @media (max-width: 768px) {
      .domain-tabs-layout { grid-template-columns: 1fr; }
      .domain-tab-nav {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
      }
      .domain-tab-btn {
        flex: 1 1 auto;
        text-align: center;
        font-size: .75rem;
        padding: .65rem .5rem;
        border-bottom: none;
        border-right: 1px solid var(--border);
      }
    }

    /* ======================== DASHBOARD MOCKUPS ======================== */
    .db-mockup {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1.75rem;
      box-shadow: var(--shadow-md);
      font-family: var(--font);
      background: #f5f8ff;
    }
    .db-header {
      background: var(--primary);
      padding: .75rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .db-logo-row {
      display: flex;
      align-items: center;
      gap: .6rem;
    }
    .db-logo-img {
      width: 32px; height: 32px;
      border-radius: 6px;
      object-fit: contain;
      background: #fff;
      padding: 2px;
      padding: 2px;
      flex-shrink: 0;
    }
    .db-logo-name {
      font-size: .7rem;
      font-weight: 500;
      color: rgba(255,255,255,.7);
      line-height: 1;
    }
    .db-dashboard-name {
      font-size: .85rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
    }
    .db-pages {
      display: flex;
      gap: .3rem;
      flex-wrap: wrap;
    }
    .db-page {
      font-size: .72rem;
      font-weight: 500;
      padding: .3rem .75rem;
      border-radius: 4px;
      color: rgba(255,255,255,.65);
      cursor: pointer;
      transition: all .2s;
      border: 1px solid transparent;
      user-select: none;
    }
    .db-page:hover { color: #fff; border-color: rgba(255,255,255,.3); }
    .db-page-active { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.3); }

    .db-body { padding: 1rem; }

    /* KPI row */
    .db-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .65rem;
      margin-bottom: .75rem;
    }
    .dbk {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: .75rem .9rem;
      box-shadow: var(--shadow-sm);
    }
    .dbk-label {
      font-size: .68rem;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: .3rem;
    }
    .dbk-value {
      font-size: 1.3rem;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.1;
      margin-bottom: .2rem;
    }
    .dbk-change {
      font-size: .7rem;
      font-weight: 600;
    }

    /* Charts row */
    .db-charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .65rem;
    }
    .db-chart-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: .85rem 1rem;
      box-shadow: var(--shadow-sm);
    }
    .db-chart-title {
      font-size: .72rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: .6rem;
    }

    /* Bar chart */
    .dbb { display: flex; flex-direction: column; gap: .35rem; }
    .dbb-row {
      display: grid;
      grid-template-columns: 70px 1fr 30px;
      align-items: center;
      gap: .4rem;
    }
    .dbb-lbl { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dbb-track { height: 7px; background: var(--surface); border-radius: 4px; overflow: hidden; }
    .dbb-fill  { height: 100%; border-radius: 4px; transition: width .4s ease; }
    .dbb-val   { font-size: .7rem; font-weight: 600; color: var(--text); text-align: right; }

    /* Responsive mockup */
    @media (max-width: 768px) {
      .db-kpi-row  { grid-template-columns: repeat(2, 1fr); }
      .db-charts-row { grid-template-columns: 1fr; }
      .db-pages { display: none; }
    }

    /* ======================== INFO TABS ======================== */
    .info-tabs { margin-top: 1.5rem; }
    .info-tab-nav {
      display: flex;
      gap: 0;
      border-bottom: 2px solid var(--border);
      margin-bottom: 1rem;
    }
    .info-tab-btn {
      font-family: var(--font);
      font-size: .8rem;
      font-weight: 600;
      padding: .6rem 1.25rem;
      border: none;
      background: none;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: all .2s;
      white-space: nowrap;
    }
    .info-tab-btn:hover { color: var(--primary); }
    .info-tab-btn.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .info-panel { padding: .25rem 0; }

    /* ======================== GEO GRID ======================== */
    .geo-grid { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
    .geo-row {
      display: grid;
      grid-template-columns: 20px 80px 1fr 32px;
      align-items: center;
      gap: .5rem;
    }
    .geo-country { font-size: .72rem; color: var(--muted); }
    .geo-bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; }
    .geo-val { font-size: .72rem; font-weight: 600; color: var(--text); text-align: right; }

    /* ── MORE button ── */
    .domain-tab-more {
      margin-top: .5rem;
      border-top: 1px solid var(--border) !important;
      color: var(--secondary) !important;
      font-style: italic;
    }
    .domain-tab-more.active { color: #fff !important; font-style: normal; }

    /* ── MORE panel intro ── */
    .more-panel-intro {
      padding: 1rem 0 1.5rem;
      font-size: .9rem;
      color: var(--muted);
      border-bottom: 1px solid var(--border);
      margin-bottom: 1.25rem;
    }

    /* ── MORE grid ── */
    .more-grid {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    /* ── MORE card ── */
    .more-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--card);
      transition: border-color .2s, box-shadow .2s;
    }
    .more-card:hover { border-color: var(--border-dk); box-shadow: var(--shadow-sm); }
    .more-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .9rem 1.25rem;
      cursor: pointer;
      user-select: none;
      transition: background .2s;
    }
    .more-card-header:hover { background: var(--surface); }
    .more-card-title {
      font-size: .88rem;
      font-weight: 600;
      color: var(--text);
    }
    .more-card-chevron {
      font-size: .7rem;
      color: var(--secondary);
      transition: transform .3s;
    }
    .more-card-body {
      padding: 1.25rem;
      border-top: 1px solid var(--border);
    }
    .more-card-desc {
      font-size: .875rem;
      color: var(--muted);
      margin-bottom: 1rem;
      line-height: 1.65;
    }

    /* ======================== FOOTER ======================== */
    
    
    
    
    
    
    
    
    
    
    
    

    @media (max-width: 600px) {
      
      .footer-bottom  { flex-direction: column; align-items: flex-start; }
    }

/* ══ 3. INSIGHTS ══ */
/* =====================================================
   INSIGHTS PAGE — Business Automation BI
   Design system aligned with original article styles
   ===================================================== */

/* ── HERO ── */
#insights-hero {
  position: relative;
  padding: 130px 0 72px;
  background: linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);
  overflow: hidden;
}
#insights-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
#insights-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(30,144,255,.22) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(255,255,255,.05) 0%, transparent 45%);
  pointer-events: none;
}
.insights-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}
.insights-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
.insights-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  font-weight: 300;
  max-width: 520px;
}
.insights-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.insights-hero-tags span {
  font-size: .75rem;
  font-weight: 500;
  padding: .3rem .85rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  color: rgba(255,255,255,.85);
}

/* Newsletter card */
.insights-newsletter-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  text-decoration: none;
  transition: all .22s;
  min-width: 280px;
}
.insights-newsletter-card:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.35);
}
.inc-icon { font-size: 1.6rem; flex-shrink: 0; }
.inc-text strong { display: block; font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.inc-text span   { font-size: .78rem; color: rgba(255,255,255,.65); }
.inc-arrow { margin-left: auto; color: rgba(255,255,255,.6); font-size: 1.1rem; font-weight: 600; }

/* ── LEFT NAV ── */
.insights-nav { display: flex; flex-direction: column; max-height: 680px; overflow-y: auto; }
.insights-nav .domain-tab-btn {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  padding: .85rem 1.1rem;
  font-size: .82rem;
}
.insights-nav-footer {
  padding: 1.25rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.insights-nav-footer p {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .85rem;
  text-align: center;
}

/* ── POST CATEGORY BADGES (original colors) ── */
.post-category {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
}
.post-category.power-bi         { background: #e6a800; color: #1f1f1f; }
.post-category.microsoft-fabric { background: #4DB6AC; color: #fff; }
.post-category.data-governance  { background: #42A5F5; color: #fff; }
.post-category.ai               { background: #FFB74D; color: #fff; }
.post-category.dax              { background: #EF5350; color: #fff; }
.post-category.api              { background: #66BB6A; color: #fff; }
.post-category.sql              { background: #78909C; color: #fff; }
.post-category.python           { background: #8d6e63; color: #fff; }
.post-category.data-modeling    { background: #7E57C2; color: #fff; }
.post-category.power-automate   { background: #29B6F6; color: #fff; }

.post-category.power-query   { background: #2b579a; color: #fff; }
.post-category.power-apps    { background: #742774; color: #fff; }
.post-category.excel            { background: #1D6F42; color: #fff; }

/* ── ARTICLE BODY — full original design system ── */

/* Article header area */
.insight-article-header {
  padding: 2rem 2rem 0;
}
.insight-article-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.insight-article-meta .read-time {
  font-size: .8rem;
  color: var(--muted);
}
.insight-article-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 .75rem;
  letter-spacing: -.02em;
}
.insight-article-subtitle {
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
}

/* Article content wrapper */
.insight-article-content {
  padding: 1.25rem 2rem 1.5rem;
}

/* SECTION CARD — each section is a white card */
.insight-article-content .article-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.insight-article-content .article-section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.insight-article-content p {
  font-size: .9rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: .65rem;
}
.insight-article-content p:last-child { margin-bottom: 0; }
.insight-article-content ul, .insight-article-content ol {
  padding-left: 1.4rem;
  margin-bottom: .75rem;
}
.insight-article-content li {
  font-size: .9rem;
  line-height: 1.72;
  color: #374151;
  margin-bottom: .3rem;
}
.insight-article-content strong { color: var(--text); font-weight: 600; }

/* Callout — blue left border */
.insight-article-content .article-callout {
  background: #eff6ff;
  border-left: 4px solid var(--secondary);
  padding: .9rem 1.1rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
  color: #1e40af;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.6;
}

/* Highlight — green left border */
.insight-article-content .article-highlight {
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  padding: .9rem 1.1rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
  color: #166534;
  font-size: .9rem;
  line-height: 1.65;
}

/* Pros / Cons grid */
.insight-article-content .article-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  margin: 1rem 0 1.25rem;
}
.insight-article-content .article-pros-cons .col {
  background: #f8fafc;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
}
.insight-article-content .article-pros-cons .col h3 {
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 .65rem;
}
.insight-article-content .article-pros-cons .col.pros h3 { color: #16a34a; }
.insight-article-content .article-pros-cons .col.cons h3 { color: #dc2626; }
.insight-article-content .article-pros-cons .col:not(.pros):not(.cons) h3 { color: var(--primary); }
.insight-article-content .article-pros-cons ul { padding-left: 1.1rem; margin: 0; }
.insight-article-content .article-pros-cons li { font-size: .82rem; margin-bottom: .3rem; }

/* SYNTHESIS — dark card */
.insight-article-content .article-synthesis {
  background: #1e293b;
  color: #f8fafc;
  padding: 1.75rem 2rem;
  border-radius: 14px;
  margin-top: 1.5rem;
}
.insight-article-content .article-synthesis h2 {
  color: #f8fafc !important;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .85rem;
}
.insight-article-content .article-synthesis p {
  color: #cbd5e1;
  font-size: .9rem;
  line-height: 1.78;
}
.insight-article-content .article-synthesis ul { padding-left: 1.4rem; }
.insight-article-content .article-synthesis li {
  color: #cbd5e1;
  font-size: .9rem;
  line-height: 1.72;
  margin-bottom: .3rem;
}
.insight-article-content .article-synthesis strong { color: #f8fafc; }
.insight-article-content .tagline {
  font-size: .95rem;
  font-weight: 600;
  color: #f8fafc;
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid #334155;
  line-height: 1.7;
}

/* Code blocks */
.insight-article-content code {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .15rem .45rem;
  color: var(--primary);
}
.insight-article-content pre {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: .75rem 0;
  line-height: 1.6;
}
.insight-article-content pre code { background: none; border: none; padding: 0; }

/* Tables */
.insight-article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: .75rem 0;
  border-radius: 8px;
  overflow: hidden;
}
.insight-article-content th, .insight-article-content td {
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  text-align: left;
  color: #374151;
}
.insight-article-content th {
  background: var(--primary-lt);
  color: var(--primary);
  font-weight: 600;
}

/* Panel CTA footer */
.insight-panel-cta {
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .insights-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  #insights-hero { padding: 110px 0 60px; }
  .insight-article-content .article-pros-cons { grid-template-columns: 1fr; }
  .domain-tabs-layout { grid-template-columns: 1fr; }
  .insights-nav { border-right: none; border-bottom: 1px solid var(--border); }
  .insight-article-header, .insight-article-content, .insight-panel-cta { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── CATEGORY FILTER BAR ── */
.insights-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  align-items: center;
}
.ins-filter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 500;
  padding: .45rem 1rem;
  border: 1px solid var(--border-dk);
  border-radius: 100px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.ins-filter:hover {
  border-color: var(--secondary);
  color: var(--primary);
  background: var(--primary-lt);
}
.ins-filter.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ins-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ins-filter.active .ins-filter-dot {
  outline: 2px solid rgba(255,255,255,.5);
}

/* ── INSIGHTS LAYOUT FIX ── */
#insights .domain-tabs-layout {
  align-items: start;
  overflow: visible;
}
#insights .domain-tab-nav {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  align-self: start;
  border-radius: 0;
}
#insights .domain-tab-panels {
  min-height: 400px;
  align-self: start;
  border-radius: 0;
}

/* ══ 4. TRAINING ══ */
/* =====================================================
   TRAINING PAGE — Business Automation BI
   ===================================================== */

/* ── HERO ── */
#training-hero {
  position: relative;
  padding: 130px 0 72px;
  background: linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);
  overflow: hidden;
}
#training-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
#training-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 20%, rgba(30,144,255,.22) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(255,255,255,.05) 0%, transparent 45%);
  pointer-events: none;
}
.training-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.training-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
.hl-white { color: #fff; border-bottom: 3px solid rgba(255,255,255,.35); }
.training-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 300;
  max-width: 460px;
}
.training-hero-actions {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.training-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.training-hero-trust span {
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.training-hero-trust span::before {
  content: '✓';
  color: #6ee7a0;
  font-weight: 700;
}

/* Instructor card */
.training-instructor-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.tic-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.tic-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4);
}
.tic-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
}
.tic-role {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
}
.tic-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .5rem;
  margin-bottom: 1rem;
}
.tic-stat {
  text-align: center;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: .6rem .25rem;
}
.tic-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .2rem;
}
.tic-lbl {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
}
.tic-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.tic-badges span {
  font-size: .72rem;
  font-weight: 500;
  padding: .3rem .7rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  color: rgba(255,255,255,.85);
}
.tic-quote {
  font-size: .83rem;
  font-style: italic;
  color: rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: .85rem;
}

/* Training formats */
.training-formats {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.tf-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
}
.tf-icon { font-size: 1.4rem; flex-shrink: 0; }
.tf-item strong {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .1rem;
}
.tf-item span {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}

/* ── COURSE SECTION: reuse existing styles but override for new design ── */
.free-course-section .lang-note-wrap { margin-bottom: 2rem; }
.free-course-section .lang-note {
  background: var(--primary-lt);
  border: 1px solid var(--border-dk);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .875rem;
  color: var(--body);
  line-height: 1.65;
}

/* Module accordion */
.module-accordion { display: flex; flex-direction: column; gap: .75rem; }

.module-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.module-item.open { box-shadow: var(--shadow-md); border-color: var(--secondary); }

.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 1.5rem;
  cursor: pointer;
  background: var(--card);
  transition: background .2s;
  user-select: none;
}
.module-header:hover { background: var(--surface); }
.module-item.open .module-header { background: var(--primary-lt); }

.module-header-left { display: flex; align-items: center; gap: 1.25rem; }

.module-number {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  border-radius: 100px;
  background: var(--secondary);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.module-number.coming-soon { background: var(--muted); }

.module-title-group h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .2rem;
}
.module-item.open .module-title-group h3 { color: var(--primary); }
.module-title-group p { font-size: .82rem; color: var(--muted); }

.module-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .8rem;
  border-radius: 100px;
}
.module-badge.available { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.module-badge.soon      { background: #f1f5f9; color: var(--muted); border: 1px solid var(--border); }

.module-toggle {
  color: var(--secondary);
  font-size: .8rem;
  transition: transform .3s;
}
.module-item.open .module-toggle { transform: rotate(180deg); }

.module-body { display: none; border-top: 1px solid var(--border); }
.module-item.open .module-body { display: block; }

.coming-soon-body { display: none; border-top: 1px solid var(--border); }
.module-item.open .coming-soon-body { display: block; }
.coming-soon-content {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--muted);
}
.coming-soon-content .soon-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.coming-soon-content h4 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.coming-soon-content p  { font-size: .9rem; max-width: 400px; margin: 0 auto 1.5rem; }

/* Episode list */
.episode-list { display: flex; flex-direction: column; }

.episode-item {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.episode-item:last-child { border-bottom: none; }

.episode-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.episode-header:hover { background: var(--surface); }
.episode-item.open .episode-header { background: var(--primary-lt); }

.episode-num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .25rem .65rem;
  border-radius: 100px;
  background: var(--secondary);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.episode-num.soon { background: var(--muted); }

.episode-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.episode-item.open .episode-title { color: var(--primary); }

.episode-duration {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.episode-toggle {
  color: var(--secondary);
  font-size: .75rem;
  transition: transform .3s;
  flex-shrink: 0;
}
.episode-item.open .episode-toggle { transform: rotate(180deg); }

.episode-body { display: none; padding: 1.5rem; border-top: 1px solid var(--border); background: var(--surface); }
.episode-item.open .episode-body { display: block; }

/* Video iframe */


/* Episode soon wrap */
.episode-soon-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  background: var(--surface);
  border-radius: 6px;
  color: var(--muted);
}
.episode-soon-wrap .soon-icon { font-size: 1.2rem; }
.episode-soon-wrap .soon-text { font-size: .875rem; font-weight: 500; }

/* Episode tabs */
.episode-tabs { }
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.tab-btn {
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 600;
  padding: .6rem 1.1rem;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .75rem;
}
.tab-panel p {
  font-size: .875rem;
  color: var(--body);
  line-height: 1.75;
  margin-bottom: .75rem;
}
.tab-panel p:last-child { margin-bottom: 0; }

.tab-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.tab-panel table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border);
  color: var(--body);
  vertical-align: top;
}
.tab-panel table td:first-child {
  color: var(--secondary);
  font-weight: 600;
  white-space: nowrap;
  width: 56px;
}

.no-resources {
  font-size: .875rem;
  color: var(--muted);
  padding: 1rem;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Language tab */
.tab-lang-content { }
.tab-lang-desc {
  font-size: .875rem;
  color: var(--muted);
  margin-bottom: 1.25rem !important;
  line-height: 1.65 !important;
}
.tab-lang-flags {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.tab-lang-flag {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border-dk);
  border-radius: 6px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--card);
  transition: all .2s;
}
.tab-lang-flag:hover { border-color: var(--secondary); color: var(--primary); }
.tab-lang-flag.active { border-color: var(--secondary); background: var(--sec-lt); color: var(--primary); }
.tab-lang-flag img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .training-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  #training-hero { padding: 110px 0 60px; }
  .training-hero-actions { flex-direction: column; }
  .training-hero-actions .btn { justify-content: center; }
}
@media (max-width: 600px) {
  .tab-btn { font-size: .72rem; padding: .5rem .7rem; }
  .episode-header { gap: .6rem; padding: .85rem 1rem; }
  .module-header  { padding: 1rem; }
}

/* ══ 5. DOWNLOADS ══ */
/* =====================================================
   DOWNLOADS PAGE — Business Automation BI
   ===================================================== */

/* ── HERO (reuses insights hero styles) ── */
#downloads-hero {
  position: relative;
  padding: 130px 0 72px;
  background: linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);
  overflow: hidden;
}
#downloads-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
#downloads-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(30,144,255,.22) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(255,255,255,.05) 0%, transparent 45%);
  pointer-events: none;
}

/* ── LAYOUT FIX (same pattern as insights) ── */
#downloads .domain-tabs-layout {
  align-items: start;
  overflow: visible;
}
#downloads .domain-tab-nav {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  align-self: start;
  border-radius: 0;
}
#downloads .domain-tab-panels {
  min-height: 400px;
  align-self: start;
  border-radius: 0;
}

/* ── VIDEO ── */
.dl-video-wrap {
  background: #000;
  border-bottom: 1px solid var(--border);
}
.dl-video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.dl-video-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── PANEL CONTENT ── */
.dl-panel-content {
  padding: 1.75rem 2rem 2rem;
}
.dl-panel-title {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.dl-panel-excerpt {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.dl-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.dl-features li {
  font-size: .9rem;
  color: var(--body);
  line-height: 1.55;
  padding-left: 1.25rem;
  position: relative;
}
.dl-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: 600;
}
.dl-cta-row {
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #downloads-hero { padding: 110px 0 60px; }
  .dl-panel-content { padding: 1.25rem; }
  .dl-cta-row { flex-direction: column; }
  .dl-cta-row .btn { justify-content: center; }
  #downloads .domain-tabs-layout { grid-template-columns: 1fr; }
  #downloads .domain-tab-nav { position: static; max-height: none; }
}

.db-pcon { display: none; }
.db-pcon:first-child { display: block; }

/* ── SHARE BAR ── */
.share-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.share-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.share-btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 500;
  padding: .4rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--border-dk);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
  line-height: 1;
}
.share-btn:hover { color: var(--primary); border-color: var(--secondary); background: var(--primary-lt); }
.share-btn.share-li:hover { color: #0a66c2; border-color: #0a66c2; background: #e8f0fe; }
.share-btn.share-tw:hover { color: #000; border-color: #000; background: #f7f7f7; }
.share-btn.share-copy { cursor: pointer; }
@media (max-width: 600px) {
  .share-bar { flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem 1.25rem; }
}


/* ── FOOTER ── */
.footer {
  background: linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);
  color: rgba(255,255,255,.75);
  padding: 3rem 0 1.5rem;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-content h4 {
  font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .35rem;
}
.footer-content p {
  font-size: .85rem; color: rgba(255,255,255,.6); max-width: 340px;
}
.social-links {
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.social-links a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  text-decoration: none; font-size: .9rem; font-weight: 600;
  transition: all .2s; border: 1px solid rgba(255,255,255,.12);
}
.social-links a:hover {
  background: var(--secondary); border-color: var(--secondary);
  color: #fff; transform: translateY(-2px);
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
}
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.45); }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a {
  font-size: .8rem; color: rgba(255,255,255,.45);
  text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: rgba(255,255,255,.85); }
@media (max-width: 600px) {
  .footer-content { flex-direction: column; align-items: flex-start; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; }
}

/* ── RESOURCES / INSIGHTS SHOWCASE (homepage sections) ── */
.resources-showcase {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: start;
}
.rs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.rs-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,64,128,.1);
  border-color: var(--secondary);
}
.rs-cat {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 100px;
  color: #fff;
  width: fit-content;
}
.rs-cat-pbi    { background: #e6a800; color: #1f1f1f; }
.rs-cat-fabric { background: #4DB6AC; }
.rs-cat-ai     { background: #FFB74D; }
.rs-cat-dax    { background: #EF5350; }
.rs-cat-pq     { background: #2b579a; }
.rs-cat-pa     { background: #742774; }
.rs-cat-pauto  { background: #29B6F6; }
.rs-cat-sql    { background: #78909C; }
.rs-cat-python { background: #8d6e63; }
.rs-cat-api    { background: #66BB6A; }
.rs-card h4 {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.rs-card p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}
.rs-link {
  font-size: .75rem;
  font-weight: 600;
  color: var(--secondary);
  margin-top: .25rem;
}
/* CTA column */
.rs-cta-col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rs-counter {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.rs-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}
.rs-label {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}
.rs-divider {
  height: 1px;
  background: var(--border);
}
.rs-sub {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) {
  .rs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .resources-showcase { grid-template-columns: 1fr; }
  .rs-grid { grid-template-columns: repeat(2, 1fr); }
  .rs-cta-col { position: static; }
}
@media (max-width: 500px) {
  .rs-grid { grid-template-columns: 1fr; }
}

/* ── HERO BUTTON HOVERS ── */
.btn-hero-audit:hover,
.btn-accent:hover {
  background: #e6a800 !important;
  border-color: #e6a800 !important;
  color: #1f1f1f !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230,168,0,.35);
}
.btn-cert {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(230,168,0,.5);
  color: rgba(255,255,255,.85);
  background: rgba(230,168,0,.08);
  transition: all .22s;
}
.btn-cert:hover {
  background: rgba(230,168,0,.18);
  border-color: #e6a800;
  color: #fde68a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230,168,0,.25);
}

/* ── KPI CHANGE COLORS ── */
.dbk-change.dbk-up  { color: #16a34a; }
.dbk-change.dbk-down { color: #dc2626; }

/* ── FOOTER LOGO ── */
.footer-brand { display: flex; flex-direction: column; gap: .5rem; }
.footer-logo {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; margin-bottom: .25rem;
}
.footer-logo-icon {
  width: 36px; height: 36px;
  background: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 2px;
}
.footer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer-logo span {
  font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.9);
}
.footer-logo strong { color: #fff; }

/* ── FLAG IMAGES (match original site) ── */
.lang-switch img {
  width: 24px;
  height: 17px;
  border-radius: 3px;
  display: block;
}

/* ── INSIGHTS KPI STRIP (hero) ── */
.insights-kpi-strip {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.iks-card {
  flex: 1;
  min-width: 100px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
}
.iks-card-highlight {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.iks-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
}
.iks-label {
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.iks-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  width: 100%;
}
.iks-bar {
  flex: 1;
  background: rgba(255,255,255,.35);
  border-radius: 3px 3px 0 0;
  transition: background .2s;
}
.iks-bar:hover { background: rgba(255,255,255,.7); }
@media (max-width: 600px) { .insights-kpi-strip { display: none; } }

/* ── INSIGHTS HERO KPI PANEL ── */
.insights-kpi-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.5rem;
  width: 100%;
}
.ikp-header {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.25rem;
}
.ikp-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: .75rem; margin-bottom: 1.25rem;
}
.ikp-kpi {
  background: rgba(255,255,255,.07); border-radius: 8px;
  padding: .75rem .5rem; text-align: center;
}
.ikp-num { font-size: 1.4rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: .2rem; }
.ikp-lbl { font-size: .65rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; }
.ikp-divider { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 1rem; }
.ikp-chart-label { font-size: .7rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.ikp-bars { display: flex; flex-direction: column; gap: .35rem; }
.ikp-bar-item {
  display: grid; grid-template-columns: 70px 1fr 20px;
  align-items: center; gap: .5rem;
  font-size: .68rem; color: rgba(255,255,255,.55);
}
.ikp-bar-fill { height: 6px; background: rgba(255,255,255,.3); border-radius: 3px; }
.ikp-bar-item span:last-child { text-align: right; color: rgba(255,255,255,.4); }

/* ── EPISODE VIDEO — 16:9 ── */
.episode-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  background: #000;
}
.episode-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none; border-radius: 8px;
}

/* Hero video dashboard — transparent border, no white edge */
.hero-video .db-mockup {
  border-color: transparent;
  box-shadow: none;
}
.hero-video {
  border: none;
  background: transparent;
}

/* ── BTN OUTLINE ── */
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid #93c5fd;
}
.btn-outline:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  background: var(--primary-lt);
  transform: translateY(-2px);
}

/* ── FAQ PANELS (insight style) ── */
.faq-panel-styled {
  padding: 2rem 2rem 1.5rem;
}
.faq-panel-styled h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--primary-lt);
  line-height: 1.3;
}
.faq-panel-styled p {
  font-size: .9rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: .75rem;
}
.faq-panel-styled ul {
  padding-left: 1.4rem;
  margin-bottom: .75rem;
}
.faq-panel-styled li {
  font-size: .9rem;
  line-height: 1.72;
  color: #374151;
  margin-bottom: .3rem;
}
/* Small WA link in FAQ */
.faq-wa-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-top: 1rem;
  padding: .4rem .85rem;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  transition: all .2s;
}
.faq-wa-link:hover {
  background: var(--primary-lt);
  border-color: var(--secondary);
}

/* ── FAQ CTA — fixed at bottom of panel container ── */
#faq .domain-tab-panels {
  display: flex;
  flex-direction: column;
}
#faq #faq-panels-container {
  flex: 1;
}
.faq-cta-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── CONTACT + ERROR HERO (same style as insights/training) ── */
#contact-hero,
#error-hero {
  position: relative;
  padding: 130px 0 72px;
  background: linear-gradient(135deg, var(--primary) 0%, #005cad 55%, #0a72cc 100%);
  overflow: hidden;
}
#contact-hero::after,
#error-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
#contact-hero::before,
#error-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(30,144,255,.22) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(255,255,255,.04) 0%, transparent 40%);
  pointer-events: none;
}
#contact-hero .hero-inner,
#error-hero .hero-inner { position: relative; z-index: 1; }

@media (max-width: 900px) {
  #contact-hero { padding: 110px 0 60px; }
  #error-hero   { padding: 110px 0 60px; }
}