/* ========================================
   eXsecute MARKETING SITE - MAIN STYLESHEET
   ========================================

   TABLE OF CONTENTS:
   1. CSS Variables & Theming
      - Color Usage Strategy
      - Brand Colors
      - Neutral Palette
      - State Colors & Alpha Values
      - Shadows, Transitions, Spacing

   2. Utility Classes
      - Phase 1 & 2 Utilities
      - Color, Typography, Layout, Spacing

   3. Advantage Cards & Components

   4. Typography System

   5. Navigation

   6. Hero Sections

   7. Process & Feature Sections

   8. Forms & Contact

   9. Footer

   10. Animations & Effects

   11. Responsive Design

   ======================================== */

/* ========================================
   1. CSS VARIABLES & THEMING
   ======================================== */

/* ========================================
   COLOR USAGE STRATEGY - NEW 3-COLOR PALETTE
   ========================================

   Complete semantic color system with 3-state support.
   ALL colors use CSS variables - NO hard-coded hex values.

   🟦 DEEP NAVY (#003d7a) - PRIMARY BRAND COLOR
   - Logo color (darkest square)
   - Headlines, navigation, primary brand elements
   - Authority, trust, professionalism
   - Use: var(--color-brand-navy)
   - States: --color-brand-navy-hover, --color-brand-navy-active

   🔵 CYAN (#00acc1) - SECONDARY BRAND COLOR
   - Logo color (medium square)
   - Interactive elements, links, secondary actions
   - Modern, fresh, approachable
   - Use: var(--color-brand-cyan)
   - States: --color-brand-cyan-hover, --color-brand-cyan-active

   🟩 EMERALD GREEN (#10b981) - CALL-TO-ACTION COLOR
   - Logo color (lightest square)
   - CTAs, success states, positive feedback
   - Growth, action, success
   - Use: var(--color-brand-green)
   - States: --color-brand-green-hover, --color-brand-green-active

   📐 NEUTRAL GRAYS (#f8fafc → #0f172a)
   - 10-point scale for all gray needs
   - Use: var(--color-neutral-50) through var(--color-neutral-900)

   ⚠️ SEMANTIC UI COLORS
   - Success: var(--color-success) [green]
   - Warning: var(--color-warning) [amber]
   - Danger: var(--color-danger) [red]
   - Info: var(--color-info) [cyan]
   - Each has -hover and -active states

   ======================================== */

/* ========================================
   DEVELOPER QUICK REFERENCE
   ========================================

   ✅ ALWAYS USE CSS VARIABLES (NOT hard-coded colors)

   🎨 Brand Colors (all have -hover and -active variants):
   - var(--color-brand-navy)        Deep Navy #003d7a (primary brand)
   - var(--color-brand-cyan)        Cyan #00acc1 (secondary brand)
   - var(--color-brand-green)       Emerald Green #10b981 (tertiary brand)

   Example: var(--color-brand-navy-hover), var(--color-brand-cyan-active)

   🎯 Semantic UI Colors (all have -hover and -active variants):
   - var(--color-success)           Green (confirmations, completions)
   - var(--color-warning)           Orange (warnings, alerts)
   - var(--color-danger)            Red (errors, critical states)
   - var(--color-info)              Blue (informational)

   📝 Text Colors:
   - var(--color-text-primary)      #1a1a1a (headings, important text)
   - var(--color-text-secondary)    #545454 (body text)
   - var(--color-text-muted)        #737373 (meta, labels)

   ⚫ Neutral Palette (10-point scale):
   - var(--color-neutral-50)        Lightest (nearly white)
   - var(--color-neutral-100 to 900) Full gray scale
   - var(--color-neutral-900)       Darkest (nearly black)

   🎨 Alpha/Transparent Colors:
   - var(--color-brand-navy-alpha-10 to -50)
   - var(--color-brand-cyan-alpha-10 to -50)
   - var(--color-brand-green-alpha-10 to -50)
   - var(--color-black-alpha-10 to -50)
   - var(--color-white-alpha-10 to -90)

   📄 Backgrounds:
   - var(--color-bg-primary)        White
   - var(--color-bg-secondary)      Light gray #f8fafb
   - var(--color-neutral-50)        Lightest gray

   🔲 Borders:
   - var(--color-border-light)      #e5e7eb
   - var(--color-border-medium)     #d1d5db
   - var(--color-border-dark)       #9ca3af

   💫 Shadows:
   - var(--shadow-sm/md/lg/xl)      Standard shadows
   - var(--shadow-accent)           Brand-colored shadow

   📏 Spacing (8-point grid):
   - var(--space-xs) through var(--space-4xl)

   ⚠️ NEVER use hard-coded hex colors like #888, #666, #f8f9fa
   ⚠️ ALWAYS use CSS variables for maintainability and rebrand flexibility

   ======================================== */

:root {
    /* ========================================================================
       eXsecute BRAND COLOR SYSTEM
       ========================================================================

       Complete semantic color system with 3-state support (normal, hover, active)
       All colors defined here - NO hard-coded hex values elsewhere in CSS

       Color Categories:
       1. Brand Colors (navy, cyan, green)
       2. Semantic UI Colors (success, warning, danger, info)
       3. Neutral Grays (50-900 scale)
       4. Background Colors
       5. Text Colors
       6. Border Colors
       7. Alpha/Transparency Colors
       8. Category-Specific Colors (consulting types)
    */

    /* ========================================================================
       1. BRAND COLORS - eXsecute 3-Color Palette
       ======================================================================== */

    /* Primary Brand - Deep Navy */
    --color-brand-navy: #003d7a;
    --color-brand-navy-hover: #002a54;
    --color-brand-navy-active: #001a3a;
    --color-brand-navy-rgb: 0, 61, 122;

    /* Secondary Brand - Cyan */
    --color-brand-cyan: #00acc1;
    --color-brand-cyan-hover: #0088a3;
    --color-brand-cyan-active: #006d85;
    --color-brand-cyan-rgb: 0, 172, 193;

    /* Tertiary Brand - Emerald Green */
    --color-brand-green: #10b981;
    --color-brand-green-hover: #0d9668;
    --color-brand-green-active: #0a7a54;
    --color-brand-green-rgb: 16, 185, 129;

    /* Legacy Aliases (for backward compatibility) */
    --brand-primary: var(--color-brand-navy);
    --brand-hover: var(--color-brand-navy-hover);
    --accent-color: var(--color-brand-cyan);
    --accent-secondary: var(--color-brand-green);
    --accent-warm: var(--color-brand-green);

    /* ========================================================================
       2. SEMANTIC UI COLORS - 3 States Each
       ======================================================================== */

    /* Success */
    --color-success: #10b981;
    --color-success-hover: #0d9668;
    --color-success-active: #0a7a54;
    --color-success-rgb: 16, 185, 129;

    /* Warning */
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-active: #b45309;
    --color-warning-rgb: 245, 158, 11;

    /* Danger/Error */
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-active: #b91c1c;
    --color-danger-rgb: 239, 68, 68;

    /* Info */
    --color-info: #00acc1;
    --color-info-hover: #0088a3;
    --color-info-active: #006d85;
    --color-info-rgb: 0, 172, 193;

    /* ========================================================================
       3. NEUTRAL GRAYS - 10-point Scale (Tailwind-inspired)
       ======================================================================== */

    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* Legacy Aliases */
    --neutral-50: var(--color-neutral-50);
    --neutral-100: var(--color-neutral-100);
    --neutral-200: var(--color-neutral-200);
    --neutral-300: var(--color-neutral-300);
    --neutral-400: var(--color-neutral-400);
    --neutral-500: var(--color-neutral-500);
    --neutral-600: var(--color-neutral-600);
    --neutral-700: var(--color-neutral-700);
    --neutral-800: var(--color-neutral-800);
    --neutral-900: var(--color-neutral-900);

    /* ========================================================================
       4. BACKGROUND COLORS
       ======================================================================== */

    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafb;
    --color-bg-tertiary: #f1f5f9;
    --color-bg-muted: #e9ecef;
    --color-bg-overlay: #f0f0f0;

    /* Tinted Backgrounds */
    --color-bg-navy-tint: #e6f1f7;
    --color-bg-cyan-tint: #d1f5f9;
    --color-bg-green-tint: #d1f5ef;

    /* Legacy Aliases */
    --primary-bg: var(--color-bg-primary);
    --secondary-bg: var(--color-bg-secondary);
    --tertiary-bg: var(--color-bg-tertiary);

    /* ========================================================================
       5. TEXT COLORS
       ======================================================================== */

    --color-text-primary: #1a1a1a;
    --color-text-secondary: #545454;
    --color-text-muted: #737373;
    --color-text-disabled: var(--color-neutral-400);
    --color-text-inverse: #ffffff;

    /* Legacy Aliases */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);

    /* ========================================================================
       6. BORDER COLORS
       ======================================================================== */

    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-dark: #cbd5e1;
    --color-border-focus: var(--color-brand-cyan);

    /* Legacy Aliases */
    --border-color: var(--color-border);
    --border-color-light: var(--color-border-light);
    --border-color-dark: var(--color-border-dark);

    /* ========================================================================
       7. ALPHA/TRANSPARENCY COLORS
       ======================================================================== */

    /* Navy Alpha */
    --color-navy-alpha-10: rgba(0, 61, 122, 0.1);
    --color-navy-alpha-20: rgba(0, 61, 122, 0.2);
    --color-navy-alpha-30: rgba(0, 61, 122, 0.3);

    /* Cyan Alpha */
    --color-cyan-alpha-10: rgba(0, 172, 193, 0.1);
    --color-cyan-alpha-20: rgba(0, 172, 193, 0.2);
    --color-cyan-alpha-30: rgba(0, 172, 193, 0.3);

    /* Green Alpha */
    --color-green-alpha-10: rgba(16, 185, 129, 0.1);
    --color-green-alpha-20: rgba(16, 185, 129, 0.2);
    --color-green-alpha-40: rgba(16, 185, 129, 0.4);

    /* Black/White Alpha */
    --color-black-alpha-04: rgba(0, 0, 0, 0.04);
    --color-black-alpha-05: rgba(0, 0, 0, 0.05);
    --color-black-alpha-06: rgba(0, 0, 0, 0.06);
    --color-black-alpha-08: rgba(0, 0, 0, 0.08);
    --color-black-alpha-10: rgba(0, 0, 0, 0.1);
    --color-black-alpha-12: rgba(0, 0, 0, 0.12);
    --color-black-alpha-15: rgba(0, 0, 0, 0.15);
    --color-black-alpha-20: rgba(0, 0, 0, 0.2);
    --color-white-alpha-10: rgba(255, 255, 255, 0.1);
    --color-white-alpha-15: rgba(255, 255, 255, 0.15);
    --color-white-alpha-20: rgba(255, 255, 255, 0.2);
    --color-white-alpha-30: rgba(255, 255, 255, 0.3);
    --color-white-alpha-40: rgba(255, 255, 255, 0.4);
    --color-white-alpha-60: rgba(255, 255, 255, 0.6);
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    --color-white-alpha-90: rgba(255, 255, 255, 0.9);
    --color-white-alpha-95: rgba(255, 255, 255, 0.95);

    /* Legacy Aliases */
    --brand-alpha-100: var(--color-navy-alpha-10);
    --brand-alpha-200: var(--color-navy-alpha-20);
    --green-alpha-200: var(--color-green-alpha-20);
    --green-alpha-400: var(--color-green-alpha-40);
    --black-alpha-80: var(--color-black-alpha-08);
    --black-alpha-100: var(--color-black-alpha-10);
    --black-alpha-120: var(--color-black-alpha-12);
    --black-alpha-150: var(--color-black-alpha-15);
    --white-alpha-200: var(--color-white-alpha-20);
    --white-alpha-800: var(--color-white-alpha-80);

    /* ========================================================================
       8. CATEGORY-SPECIFIC COLORS (Consulting Types)
       ======================================================================== */

    /* Advisory - Deep Navy */
    --color-advisory: var(--color-brand-navy);
    --color-advisory-hover: var(--color-brand-navy-hover);
    --color-advisory-active: var(--color-brand-navy-active);
    --color-advisory-rgb: var(--color-brand-navy-rgb);

    /* Specialty - Cyan */
    --color-specialty: var(--color-brand-cyan);
    --color-specialty-hover: var(--color-brand-cyan-hover);
    --color-specialty-active: var(--color-brand-cyan-active);
    --color-specialty-rgb: var(--color-brand-cyan-rgb);

    /* Operational - Green */
    --color-operational: var(--color-brand-green);
    --color-operational-hover: var(--color-brand-green-hover);
    --color-operational-active: var(--color-brand-green-active);
    --color-operational-rgb: var(--color-brand-green-rgb);

    /* Legacy Aliases */
    --advisory-primary: var(--color-advisory);
    --advisory-secondary: var(--color-advisory-hover);
    --advisory-rgb: var(--color-advisory-rgb);
    --specialty-primary: var(--color-specialty);
    --specialty-secondary: var(--color-specialty-hover);
    --specialty-rgb: var(--color-specialty-rgb);
    --operational-primary: var(--color-operational);
    --operational-secondary: var(--color-operational-hover);
    --operational-rgb: var(--color-operational-rgb);

    /* ========================================================================
       9. STATE COLORS
       ======================================================================== */

    --color-disabled-bg: var(--color-neutral-100);
    --color-disabled-text: var(--color-neutral-400);
    --color-disabled-border: var(--color-neutral-200);
    --color-hover-overlay: var(--color-cyan-alpha-10);
    --color-active-overlay: var(--color-cyan-alpha-20);

    /* Legacy Aliases */
    --disabled-bg: var(--color-disabled-bg);
    --disabled-text: var(--color-disabled-text);
    --disabled-border: var(--color-disabled-border);
    --hover-overlay: var(--color-hover-overlay);
    --active-overlay: var(--color-active-overlay);
    
    /* Enhanced Transitions */
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-snap: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Common Shadows */
    --shadow-sm: 0 4px 20px var(--hover-overlay);
    --shadow-md: 0 10px 30px var(--black-alpha-80);
    --shadow-lg: 0 24px 48px var(--black-alpha-120);
    --shadow-accent: 0 8px 24px var(--accent-alpha-300);
    
    /* Consistent Spacing System */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 2rem;     /* 32px */
    --space-xl: 3rem;     /* 48px */
    --space-2xl: 4rem;    /* 64px */
    --space-3xl: 6rem;    /* 96px */
    --space-4xl: 8rem;    /* 128px */
}

/* ========================================
   UTILITY CLASSES - Phase 1 Refactor
   ======================================== */

/* Color Utilities - eXsecute Brand System */
/* Text Colors - Legacy names mapped to new brand */
.text-accent { color: var(--color-brand-cyan) !important; }  /* Cyan - primary accent */
.text-secondary-accent { color: var(--color-brand-navy) !important; }  /* Navy - secondary accent */
.text-accent-warm { color: var(--color-brand-green) !important; }  /* Green - tertiary accent */
.text-dark-primary { color: var(--text-primary) !important; }

/* Background Colors - Legacy names mapped to new brand */
.bg-accent { background: var(--color-brand-cyan) !important; }  /* Cyan background */
.bg-secondary-accent { background: var(--color-brand-navy) !important; }  /* Navy background */
.bg-accent-warm { background: var(--color-brand-green) !important; }  /* Green background */
.bg-primary { background: var(--primary-bg) !important; }
.bg-secondary { background: var(--secondary-bg) !important; }
.bg-gradient-accent { background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-brand-cyan) 100%) !important; }  /* Navy to cyan gradient */

/* Border Utilities */
.border-left-accent { border-left: 3px solid var(--brand-primary) !important; }  /* Dark blue border */
.border-left-accent-4 { border-left: 4px solid var(--brand-primary) !important; }

/* Typography Utilities */
.fw-light { font-weight: 300 !important; }
.fw-semibold { font-weight: 600 !important; }
.fs-display { font-size: 2.5rem !important; }
.fs-hero { font-size: 3.2rem !important; }
.fs-large { font-size: 1.2rem !important; }
.fs-medium { font-size: 1.1rem !important; }
.fs-small { font-size: 0.9rem !important; }

/* Layout Utilities */
.max-w-sm { max-width: 500px; margin: 0 auto; }
.max-w-md { max-width: 600px; margin: 0 auto; }
.max-w-lg { max-width: 700px; margin: 0 auto; }
.max-w-xl { max-width: 800px; margin: 0 auto; }

/* Spacing Utilities */
.mb-space-lg { margin-bottom: var(--space-lg) !important; }
.mb-space-xl { margin-bottom: var(--space-xl) !important; }
.mb-space-2xl { margin-bottom: var(--space-2xl) !important; }
.mt-space-2xl { margin-top: var(--space-2xl) !important; }

/* Component Specific Utilities */
.section-bg-primary { background: var(--primary-bg); }
.section-bg-secondary { background: var(--secondary-bg); }

/* Special Effect Utilities */
.accent-highlight { 
    background: var(--accent-light); 
    border-left: 3px solid var(--accent-color); 
    padding: 1rem; 
    border-radius: 4px; 
}

.value-highlight { 
    background: var(--accent-light); 
    border-left: 3px solid var(--accent-color); 
    padding: 0.75rem; 
    border-radius: 4px; 
}

.step-circle {
    background: var(--white-alpha-200);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}

.advantage-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-accent-highlight {
    max-width: 500px;
    background: white;
    border: 2px solid var(--accent-color);
    box-shadow: var(--shadow-md);
}

/* Additional Common Patterns */
.number-circle {
    width: 100px;
    height: 100px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 2rem;
    font-weight: 600;
}

.flex-center-wrap {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.number-reveal {
    margin-bottom: 5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.big-stat-value {
    font-size: 4rem;
    font-weight: 600;
    color: var(--accent-color);
    line-height: 1;
}

.big-stat-label {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ========================================
   UTILITY CLASSES - Phase 1.5 Expansion
   (October 17, 2025 - Audit-driven additions)
   ======================================== */

/* Text Color Utilities (EXPANDED) */
.text-muted { color: var(--color-text-muted) !important; }
.text-muted-light { color: var(--color-neutral-400) !important; }
.text-muted-dark { color: var(--color-neutral-600) !important; }
.text-white { color: var(--color-text-inverse) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* Font Size Utilities (EXPANDED - Complete Scale) */
.fs-xs { font-size: 0.75rem !important; }   /* 12px */
.fs-sm { font-size: 0.875rem !important; }  /* 14px */
.fs-base { font-size: 1rem !important; }    /* 16px - default */
/* .fs-medium already exists (1.1rem) */
/* .fs-large already exists (1.2rem) */
.fs-xl { font-size: 1.5rem !important; }    /* 24px */
.fs-2xl { font-size: 1.8rem !important; }   /* ~29px */
.fs-3xl { font-size: 2rem !important; }     /* 32px */
.fs-4xl { font-size: 2.5rem !important; }   /* 40px */
.fs-5xl { font-size: 3rem !important; }     /* 48px */
.fs-6xl { font-size: 4rem !important; }     /* 64px */

/* Font Weight Utilities (EXPANDED) */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
/* .fw-semibold already exists (600) */
.fw-bold { font-weight: 700 !important; }

/* Line Height Utilities */
.lh-1 { line-height: 1 !important; }
.lh-tight { line-height: 1.2 !important; }
.lh-normal { line-height: 1.5 !important; }
.lh-relaxed { line-height: 1.6 !important; }
.lh-loose { line-height: 1.8 !important; }

/* Flexbox Utilities */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }

/* Combined Flex Utilities (Common Patterns) */
.d-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.d-flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Gap Utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.5rem !important; }  /* 8px */
.gap-2 { gap: 1rem !important; }    /* 16px */
.gap-3 { gap: 1.5rem !important; }  /* 24px */
.gap-4 { gap: 2rem !important; }    /* 32px */
.gap-5 { gap: 3rem !important; }    /* 48px */

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.p-5 { padding: 3rem !important; }

.px-1 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-3 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-4 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-1 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-2 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-3 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Margin Utilities (EXPANDED) */
.m-0 { margin: 0 !important; }
.m-auto { margin: 0 auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }

.me-1 { margin-right: 0.5rem !important; }
.me-2 { margin-right: 1rem !important; }
.me-3 { margin-right: 1.5rem !important; }

.ms-1 { margin-left: 0.5rem !important; }
.ms-2 { margin-left: 1rem !important; }
.ms-3 { margin-left: 1.5rem !important; }

/* Border Radius Utilities */
.rounded-0 { border-radius: 0 !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded { border-radius: 8px !important; }
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }
.rounded-2xl { border-radius: 20px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

/* Border Utilities (EXPANDED) */
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: none !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-left { border-left: 1px solid var(--border-color) !important; }
.border-right { border-right: 1px solid var(--border-color) !important; }

/* Background Utilities (EXPANDED) */
.bg-white { background: white !important; }
.bg-transparent { background: transparent !important; }
/* .bg-primary already exists */
/* .bg-secondary already exists */

/* Width/Height Utilities */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }

/* Text Alignment Utilities (EXPANDED) */
.text-center { text-align: center !important; }
/* .text-left already exists in Phase 2 */
.text-right { text-align: right !important; }

/* Display Utilities */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Position Utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Transition Utilities */
.transition-all { transition: all 0.3s ease !important; }
.transition-colors { transition: background-color 0.3s ease, color 0.3s ease !important; }

/* Box Shadow Utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Additional Width/Height Utilities (PHASE 1.5 EXTENSION) */
.w-80px { width: 80px !important; }
.h-80px { height: 80px !important; }
.w-100px { width: 100px !important; }
.h-100px { height: 100px !important; }
.w-120px { width: 120px !important; }
.h-120px { height: 120px !important; }

/* Additional Background Gradients (PHASE 1.5 EXTENSION) */
.bg-gradient-secondary { background: linear-gradient(135deg, var(--accent-secondary), var(--accent-color)) !important; }
.bg-gradient-operational { background: linear-gradient(135deg, var(--operational-primary), var(--accent-color)) !important; }
.bg-gradient-brand { background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-brand-green) 100%) !important; }  /* Navy to Green */

/* Additional Text Color Utilities (PHASE 1.5 EXTENSION) */
.text-white-90 { color: rgba(255, 255, 255, 0.9) !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

/* Additional Background Utilities (PHASE 1.5 EXTENSION) */
.bg-light { background: var(--color-bg-secondary) !important; }
.bg-operational { background: var(--color-operational) !important; }

/* Additional Border Utilities (PHASE 1.5 EXTENSION) */
.border-light { border-color: var(--color-bg-muted) !important; }

/* Additional Transition Utilities (PHASE 1.5 EXTENSION) */
.transition-base { transition: all 0.2s ease !important; }

/* Additional Font Size Utilities (HTML AUDIT FIX - OCT 2025) */
/* Bootstrap gaps: needs .fs-lg for 18px and .fs-5 for 20px */
.fs-lg { font-size: 1.125rem !important; } /* 18px - used 8x in templates */
.fs-5 { font-size: 1.25rem !important; } /* 20px - Bootstrap equivalent */

/* Additional Opacity Utilities (HTML AUDIT FIX - OCT 2025) */
/* Bootstrap only has .opacity-75, need .opacity-90 */
.opacity-90 { opacity: 0.9 !important; }

/* ========================================
   PHASE 2 UTILITY CLASSES
   ======================================== */

/* Email & Content Utilities */
.email-body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--neutral-700);
}

.email-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.email-section {
    background: var(--neutral-100);
    padding: 20px;
    border-radius: 5px;
    margin: 20px 0;
}

.tag-small {
    background: var(--neutral-100);
    color: var(--neutral-600);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Additional Max-Width Utilities */
.max-w-2xl { max-width: 700px; margin: 0 auto; }

/* Additional Typography Sizes */
.fs-subtitle { font-size: 1.8rem; font-weight: 300; color: var(--text-primary); margin-bottom: 1rem; }
.fs-card-title { font-size: 1.4rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.fs-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 500; }

/* Text Alignment Utilities */
.text-left { text-align: left !important; }

/* Component Specific Utilities - Extended */
.gradient-cta-box {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    color: white;
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
}

.step-circle-detailed {
    background: var(--white-alpha-200);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}

.inline-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 20px;
    border: 1px solid var(--neutral-200);
}

/* Hero Variations */
.hero-min-height {
    min-height: 60vh;
    /* padding-top inherited from .hero base class (80px) for consistency */
}

/* Additional Margin Utilities */
.mt-space-md { margin-top: var(--space-md) !important; }
.mb-space-lg-custom { margin-bottom: 5rem !important; }

/* Color Links for Emails */
.link-accent { color: var(--accent-color) !important; text-decoration: none; }
.link-accent:hover { color: var(--accent-secondary) !important; }

/* ========================================
   MISSING COMPONENT CLASSES (HTML AUDIT FIX - OCT 2025)
   Added to fix missing CSS definitions found in audit
   ======================================== */

/* Number Circle Component - Used 6x in about.html */
/* Replaces 900+ char inline style + 11 utility classes per instance */
.number-circle {
    width: 80px;
    height: 80px;
    background: var(--color-brand-navy);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.number-circle:hover {
    background: var(--color-brand-navy-hover);
    transform: scale(1.05);
}

/* Stat Counter Component - Used 3x for animated statistics */
.stat-counter {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-brand-navy);
    line-height: 1.2;
}

@media (max-width: 768px) {
    .number-circle {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .stat-counter {
        font-size: 2rem;
    }
}

/* ========================================
   ADVANTAGE CARDS - MODERN REDESIGN
   ======================================== */

.advantage-card {
    background: var(--primary-bg);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    border-radius: 16px;
    transition: var(--transition-smooth);
}

.advantage-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    text-align: center;
    padding: var(--space-lg);
}

.advantage-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    z-index: -1;
}

/* Unified Advantage Card Theme - Refined Color Balance */
.advantage-card::before {
    background: var(--accent-alpha-400);  /* More prominent Sky Blue border */
}

.advantage-card .advantage-icon-modern {
    background: linear-gradient(135deg, rgba(var(--color-brand-cyan-rgb), 0.9), rgba(var(--color-brand-navy-rgb), 0.9));
}

.advantage-card .advantage-title {
    color: var(--color-text-primary);  /* Black for advantage titles - maximum contrast and readability */
}

.advantage-card .value-stat {
    color: var(--accent-color);  /* Sky Blue for value stats - creates visual interest */
}

/* Common Card Components */
.advantage-icon-modern {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: var(--transition-smooth);
}

.advantage-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.advantage-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.advantage-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.advantage-value-box {
    background: var(--white-alpha-800);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: auto;
    backdrop-filter: blur(10px);
}

.value-stat {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.value-comparison {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Hover Effects - Refined and Subtle */
.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px var(--accent-alpha-250);  /* More subtle hover shadow */
}

.advantage-card:hover .advantage-icon-modern {
    transform: scale(1.05);
    box-shadow: 0 4px 16px var(--accent-alpha-200);  /* Softer icon glow */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .advantage-card .card-body {
        min-height: 280px;
        padding: var(--space-md);
    }
    
    .advantage-icon-modern {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .advantage-title {
        font-size: 1.25rem;
    }
    
    .value-stat {
        font-size: 2rem;
    }
}

/* SVG Stop Classes */
.stop-left { stop-color: white; stop-opacity: 0.6; }
.stop-right { stop-color: white; stop-opacity: 0; }

/* ========================================
   BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   CONTAINER MAX-WIDTH FIX FOR LARGE SCREENS
   ======================================== */

.container {
    max-width: 1400px !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--primary-bg);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Account for fixed navbar on pages that don't have hero sections */
main:not(.has-hero) {
    padding-top: 80px;
}

/* ========================================
   TYPOGRAPHY - Modern Light Base + Bold Emphasis System
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 300; /* Light base weight */
    margin-bottom: 1rem;
    color: var(--text-primary); /* Consistent heading color */
    line-height: 1.2; /* Tighter line height for headings */
}

/* Typography scale with light base + emphasis pattern */
h1 { 
    font-size: 3.2rem; 
    margin-bottom: 2rem;
}

.hero h1 { 
    font-size: 3.2rem; /* Consistent with about page */
    line-height: 1.2;
}

h2 { 
    font-size: 2.5rem; 
    margin-bottom: 1rem;
}

h3 { 
    font-size: 1.8rem; 
    margin-bottom: 1rem;
}

h4 { 
    font-size: 1.4rem; 
    margin-bottom: 0.8rem;
}

h5 { 
    font-size: 1.2rem; 
    margin-bottom: 0.6rem;
}

h6 { 
    font-size: 1rem; 
    margin-bottom: 0.5rem;
}

/* Bold emphasis class for key words in headings */
.font-emphasis,
.emphasis {
    font-weight: 600; /* Semi-bold for emphasis */
}

/* Body text improvements */
p {
    color: var(--neutral-600); /* More readable body text color */
    line-height: 1.6; /* Better readability */
    margin-bottom: 1rem;
}

/* ========================================
   NAVIGATION
   ======================================== */
.navbar {
    background: var(--color-white-alpha-95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
    z-index: 1050; /* Ensure navbar stays above all content */
}

.navbar-light .navbar-toggler {
    border-color: var(--border-color);
}

.navbar-light .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--accent-alpha-250);
}

.navbar-brand img {
    transition: transform 0.3s ease;
}


.brand-text {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Only show hover effects on devices that support true hover (not touch) */
@media (hover: hover) and (pointer: fine) {
    .navbar-brand:hover .brand-text {
        color: var(--brand-primary);  /* Dark Blue - primary brand color on hover */
    }
    
    .navbar-brand:hover img {
        transform: scale(1.05);
    }
}

/* Remove focus outlines consistently */
.navbar-brand:focus,
.navbar-brand:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.footer a:focus,
.footer a:focus-visible,
.footer-link:focus,
.footer-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 300;
    transition: var(--transition-base);
    position: relative;
}

.nav-link:hover {
    color: var(--brand-primary) !important;  /* Dark blue for navigation links */
}

.nav-link.active {
    color: var(--brand-primary) !important;  /* Dark blue for active nav */
    font-weight: 400;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--brand-primary);  /* Dark blue underline */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

.dropdown-menu {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px var(--black-alpha-100);
}

.dropdown-item {
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: var(--tertiary-bg);
    color: var(--accent-color);
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%),
        radial-gradient(ellipse at top left, var(--color-brand-navy-alpha-10) 0%, transparent 50%);
    /* Ensure consistent spacing across all pages - account for fixed navbar */
    margin-top: 0 !important;
    padding-top: 80px !important;  /* Consistent navbar spacing for all pages */
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, var(--color-brand-navy-alpha-20) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, var(--active-overlay) 0%, transparent 50%);
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 30%;
    height: 80%;
    background: linear-gradient(135deg, var(--color-brand-navy-alpha-10) 0%, var(--color-brand-green-alpha-20) 100%);  /* Navy to green gradient */
    border-radius: 50%;
    filter: blur(100px);
    animation: float 15s ease-in-out infinite reverse;
    pointer-events: none;
}

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

.hero-logo {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    transition: filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

.hero-logo-img {
    transition: filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 20px 40px var(--accent-alpha-150));
    /* Optimize for SVG content, eliminating viewBox whitespace */
    width: 500px;
    height: auto;
    max-width: 90vw;
    object-fit: contain;
    object-position: center;
    transform-origin: center center;
}

/* ========================================
   FOR-CONSULTANTS PAGE SPECIFIC STYLES
   ======================================== */

/* Consultant Time Breakdown Pie Chart */
.consultant-time-chart {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.time-pie-chart {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px var(--black-alpha-100));
}

.pie-segment {
    transition: all 0.3s ease;
    cursor: pointer;
}

.pie-segment:hover {
    filter: brightness(1.1);
    transform-origin: center;
}

.pie-legend {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Marketplace Chaos Animation */
.marketplace-chaos {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chaos-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.consultant-icon {
    position: absolute;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.consultant-icon:nth-child(1) { top: 10%; left: 20%; }
.consultant-icon:nth-child(2) { top: 60%; left: 5%; }
.consultant-icon:nth-child(3) { top: 20%; right: 15%; }
.consultant-icon:nth-child(4) { bottom: 10%; right: 25%; }
.consultant-icon:nth-child(5) { top: 45%; left: 50%; transform: translateX(-50%); }

.consultant-icon i {
    color: var(--text-secondary);
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.consultant-icon span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--danger-color);
}

.price-pressure {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--danger-color);
    font-weight: 600;
}

.price-pressure i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    animation: bounce 2s infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Perfect Match Visual */
.perfect-match-visual {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 500px;
}

.match-side {
    flex: 1;
}

.match-profile {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.match-profile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.profile-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
}

.profile-icon.consultant {
    background: var(--accent-color);
}

.profile-icon.client {
    background: var(--accent-secondary);
}

.profile-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.profile-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.profile-rate, .profile-budget {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color);
}

.match-connection {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.connection-line {
    width: 2px;
    height: 60px;
    background: var(--accent-color);
    position: relative;
}

.connection-line::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
}

.connection-line::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
}

.match-heart {
    background: var(--accent-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -20px 0;
    animation: heartbeat 2s infinite;
    box-shadow: 0 2px 8px var(--accent-alpha-300);
}

.match-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Expert Profile Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.result-item {
    text-align: center;
    padding: 1rem;
    background: var(--secondary-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color-light);
}

.result-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.result-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Expertise Badges */
.expertise-badge.cloud-security {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
}

.expertise-badge.devsecops {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
}

.expertise-badge.security-strategy {
    background: linear-gradient(135deg, var(--accent-warm), var(--accent-color));
}

/* Enhanced Process Steps for Consultants */
.process-step[data-step] .step-card-inner {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
    border: 2px solid var(--border-color-light);
    background: white;
    transition: all 0.3s ease;
}

.process-step[data-step]:hover .step-card-inner {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-accent);
    transform: translateY(-4px);
}

.step-main-content, .step-detail-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.4s ease;
}

.step-detail-content {
    transform: translateY(100%);
    opacity: 0;
    background: var(--primary-bg);
}

.process-step[data-step]:hover .step-main-content {
    transform: translateY(-100%);
    opacity: 0;
}

.process-step[data-step]:hover .step-detail-content {
    transform: translateY(0%);
    opacity: 1;
}

.detail-title {
    color: var(--accent-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.detail-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.detail-requirements {
    width: 100%;
}

.requirement-item {
    display: flex;
    align-items: center;
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .match-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .match-connection {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
    
    .consultant-icon {
        width: 60px;
        height: 60px;
    }
    
    .consultant-icon i {
        font-size: 1rem;
    }
    
    .consultant-icon span {
        font-size: 0.6rem;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .process-step[data-step] .step-card-inner {
        height: auto;
        min-height: 250px;
    }
    
    .step-detail-content {
        position: relative;
        transform: none;
        opacity: 1;
        display: none;
    }
    
    .process-step[data-step]:hover .step-main-content {
        transform: none;
        opacity: 1;
    }
    
    .process-step[data-step]:hover .step-detail-content {
        display: flex;
    }
}

.hero-logo:hover .hero-logo-img {
    filter: drop-shadow(0 32px 64px var(--accent-alpha-200));
}

/* Optimize for scroll effects and larger logo on desktop */
@media (min-width: 769px) {
    .hero-logo {
        transform-origin: center center;
    }

    .hero-logo-img {
        width: 550px;
        max-width: 90vw;
    }
}

/* Disable scroll effects on mobile for performance */
@media (max-width: 768px) {
    .hero-logo {
        transform: none !important;
        opacity: 1 !important;
    }
}

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

.hero-visual img {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 20px 40px var(--accent-alpha-150));
}

.hero-visual:hover img {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 32px 64px var(--accent-alpha-200));
}

.hero-subtitle {
    color: var(--brand-primary);  /* Dark blue for hero subtitle */
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-description {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* eXsecute Word Cycling Animation */
.exsecute-changing {
    color: var(--text-primary);
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
    min-width: 200px;
    text-align: left;
}

.exsecute-comma {
    color: var(--text-muted);
    font-weight: 400;
    margin: 0;  /* Remove margin so comma stays with word */
}

.exsecute-static {
    color: var(--brand-primary);  /* Dark blue to match logo */
    font-weight: 300;  /* Light weight to match logo */
    letter-spacing: 0.5px;  /* Match logo letter spacing */
    font-size: 1.1em;  /* Slightly larger to balance visual weight with bold cycling words */
    margin-left: 0.25rem;  /* Small space before "eXsecuted" */
}

.exsecute-static .brand-x {
    font-weight: 400;  /* Normal weight X (subtle emphasis) */
}

/* Mobile: Intentional stacking for consistency */
@media (max-width: 576px) {
    .hero h1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;  /* Controlled spacing between lines */
    }

    .exsecute-line-1 {
        display: block;  /* Line 1: word + comma together */
    }

    .exsecute-changing {
        min-width: auto;  /* Remove min-width on mobile */
        display: inline;  /* Keep inline with comma */
    }

    .exsecute-comma {
        display: inline;  /* Keep comma with changing word */
    }

    .exsecute-static {
        display: block;  /* Force to own line */
        margin-left: 0;  /* Remove left margin since it's stacked */
    }
}

/* Buttons */
.btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    border: none;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* Enhanced button micro-interactions */
.btn:active {
    transform: translateY(1px) scale(0.98);
    transition: var(--transition-snap);
}

.btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--color-white-alpha-15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.btn:hover:before {
    width: 300px;
    height: 300px;
}

/* Ensure button text stays above ripple effect */
.btn > * {
    position: relative;
    z-index: 2;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    color: white;
    box-shadow: 0 5px 15px var(--accent-alpha-300);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--accent-alpha-400);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    transition: var(--transition-base);
}

.btn-outline:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--accent-alpha-300);
}

/* Ensure proper contrast and accessibility */
.btn-outline:focus {
    box-shadow: 0 0 0 3px var(--accent-alpha-250);
    outline: none;
}

/* Clean Button Styles - 3-Color Logo Harmony (Refined) */
.btn-clean-primary {
    background: var(--brand-primary);  /* Dark blue for primary CTAs */
    color: white;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px var(--brand-alpha-200);  /* Subtle dark blue shadow */
}

.btn-clean-primary:hover {
    background: var(--brand-hover);  /* Deeper blue on hover */
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-brand-green-alpha-40);  /* Green glow on hover */
}

.btn-clean-outline {
    background: transparent;
    color: var(--brand-primary);  /* Dark blue for outlined buttons */
    padding: 0.875rem 2rem;
    border: 1px solid var(--brand-primary);
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    font-size: 0.95rem;
}

.btn-clean-outline:hover {
    background: var(--brand-primary);  /* Fill with dark blue on hover */
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-brand-navy-alpha-30);
}

/* Light theme variants */
.btn-clean-light {
    background: white;
    color: var(--text-primary);
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    font-size: 0.95rem;
}

.btn-clean-light:hover {
    background: var(--color-white-alpha-90);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--black-alpha-100);
}

.btn-clean-outline-light {
    background: transparent;
    color: white;
    padding: 0.875rem 2rem;
    border: 1px solid white;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
    font-size: 0.95rem;
}

.btn-clean-outline-light:hover {
    background: white;
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--white-alpha-200);
}

/* Large button variant */
.btn-clean-primary.btn-lg,
.btn-clean-outline.btn-lg,
.btn-clean-light.btn-lg,
.btn-clean-outline-light.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* ========================================
   UNIFIED CARD SYSTEM
   ======================================== */

/* Base Card Styles - Applied to all cards */
.card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    /* Improved base shadow for better hierarchy */
    box-shadow: 0 2px 10px var(--color-black-alpha-06), 
                0 1px 3px var(--black-alpha-80);
}

/* Card hover overlay effect */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-brand-cyan-alpha-10) 0%, var(--color-brand-navy-alpha-10) 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 1;
}

/* Ensure card content stays above overlay */
.card > * {
    position: relative;
    z-index: 2;
}

/* Card focus state for accessibility */
.card:focus-within {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.card:hover:not(.service-category-card) {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 32px 64px var(--black-alpha-120), 
                0 16px 32px var(--active-overlay);
    border-color: var(--accent-color);
}

.card:hover:not(.service-category-card)::before {
    opacity: 1;
}

.card:hover:not(.service-category-card) .card-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 24px var(--accent-alpha-300);
}

.card:hover:not(.service-category-card) h4 {
    color: var(--accent-color);
}

.card-header {
    background: var(--tertiary-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 2rem 1.5rem;
    text-align: center;
}

.card-body {
    padding: 2rem;
    /* Better content spacing */
    line-height: 1.6;
}

.card h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.card p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

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

/* Better list item spacing in cards */
.card li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
}

.card li:last-child {
    margin-bottom: 0;
}

/* Icon spacing in list items */
.card li i {
    margin-right: 0.75rem;
    margin-top: 0.125rem; /* Slight offset for better icon alignment */
    flex-shrink: 0;
}

/* Better heading spacing in cards */
.card h3, .card h4, .card h5 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

.card h3 + p, .card h4 + p, .card h5 + p {
    margin-top: 0.5rem;
}

/* Legacy styling - now handled by the improved flexbox version above */

/* Unified Icon System for Cards */
.card-icon,
.step-icon,
.metric-icon,
.phase-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: white;
    transition: all 0.3s ease;
}

/* Icon hover effects */
.card:hover .card-icon,
.card:hover .step-icon,
.card:hover .metric-icon,
.card:hover .phase-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px var(--accent-alpha-300);
}

/* Special Card Styles */

/* Get Started Cards - Moved to Modern Light Theme section to avoid duplicates */

/* Metric Cards */
.metric-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px var(--black-alpha-80);
}

.metric-card:hover::after {
    transform: scaleX(1);
}

.metric-card .counter {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.metric-card p {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.metric-card small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* CTA Cards */
.cta-card {
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
    border: 2px solid var(--accent-color);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--accent-alpha-100) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.3; }
}

/* Outcome Cards */
.outcome-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.outcome-card:hover {
    background: var(--tertiary-bg);
    border-color: var(--accent-color);
    transform: scale(1.05);
}

.outcome-card h3 {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* Step Cards - Engaging design with excellent contrast */
.step-card {
    background: linear-gradient(145deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    color: var(--color-text-primary) !important;
    border: 1px solid var(--accent-alpha-200);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    box-shadow: 
        0 10px 30px var(--black-alpha-100),
        inset 0 1px 0 var(--color-white-alpha-60);
    overflow: hidden;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), var(--accent-color));
    border-radius: 16px 16px 0 0;
}

.step-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 50px var(--black-alpha-150),
        0 8px 30px var(--accent-alpha-200),
        inset 0 1px 0 var(--white-alpha-800);
    border-color: var(--accent-alpha-400);
    background: linear-gradient(145deg, #ffffff 0%, #f5f7fa 100%);
}

.step-card .fas {
    color: var(--accent-color) !important;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 8px var(--accent-alpha-300));
    transition: all 0.3s ease;
}

.step-card:hover .fas {
    transform: scale(1.1);
    color: var(--accent-warm) !important;
    filter: drop-shadow(0 4px 12px var(--purple-alpha-400));
}

.step-card h5 {
    color: var(--text-primary) !important;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.step-card p {
    color: var(--text-secondary) !important;
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    font-weight: 400;
}

/* LATAM Highlight Cards - Regional emphasis without overwhelming CTAs */
.latam-highlight-card {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

/* Subtle gradient overlay to highlight regional content */
.latam-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-brand-cyan-alpha-10) 0%, var(--color-brand-navy-alpha-10) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.latam-highlight-card .card-header {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid var(--accent-alpha-100);
}

.latam-highlight-card .card-body {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
}

.latam-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--accent-alpha-100);
    border-left-color: var(--accent-secondary);
}

.latam-highlight-card:hover::before {
    opacity: 0.8;
}

/* Flag emojis and country indicators get slight emphasis */
.latam-highlight-card .card-header h5 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.latam-highlight-card .card-header h5::before {
    content: '🌎';
    font-size: 1.2em;
    filter: drop-shadow(0 2px 4px var(--accent-alpha-300));
}

/* Unified hover effect for all special cards */
.get-started-card:focus-within,
.metric-card:focus-within,
.cta-card:focus-within,
.outcome-card:focus-within,
.step-card:focus-within,
.latam-highlight-card:focus-within {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Mobile Optimizations for Cards */
@media (max-width: 768px) {
    .card,
    .get-started-card,
    .metric-card,
    .cta-card,
    .outcome-card,
    .step-card,
    .latam-highlight-card {
        margin-bottom: 1.5rem;
    }

    /* Reduce hover effects on mobile */
    .card:hover,
    .get-started-card:hover,
    .metric-card:hover,
    .outcome-card:hover,
    .step-card:hover,
    .latam-highlight-card:hover {
        transform: translateY(-4px);
    }

    /* Smaller icons on mobile */
    .card-icon,
    .step-icon,
    .metric-icon,
    .phase-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    /* Adjust padding for mobile */
    .get-started-card,
    .metric-card {
        padding: 1.5rem;
    }

    .cta-card {
        padding: 2rem;
    }

    /* Smaller counters on mobile */
    .metric-card .counter {
        font-size: 2.5rem;
    }

    .outcome-card h3 {
        font-size: 2rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Enhanced touch feedback with haptic-like responses */
    .card:hover,
    .get-started-card:hover,
    .metric-card:hover,
    .outcome-card:hover,
    .step-card:hover,
    .latam-highlight-card:hover {
        transform: none;
        box-shadow: 0 8px 16px var(--black-alpha-100);
    }
    
    /* Haptic-like feedback for buttons */
    .btn:active {
        transform: scale(0.94);
        transition: transform 0.1s ease;
        box-shadow: 0 2px 8px var(--black-alpha-150);
    }
    
    /* Enhanced touch feedback for interactive elements */
    .nav-link:active,
    .footer-link:active {
        transform: scale(0.96);
        background-color: var(--active-overlay);
        transition: all 0.1s ease;
    }
    
    /* Category-specific active states for mobile touch */
    .category-selector-tab:active {
        transform: scale(0.96);
        transition: all 0.1s ease;
    }
    
    .category-selector-tab[data-category="advisory"]:active {
        background-color: rgba(var(--advisory-rgb), 0.08);
    }
    
    .category-selector-tab[data-category="specialty"]:active {
        background-color: rgba(var(--specialty-rgb), 0.08);
    }
    
    .category-selector-tab[data-category="operational"]:active {
        background-color: rgba(var(--operational-rgb), 0.08);
    }
    
    /* Fallback for non-categorized tabs */
    .category-selector-tab:not([data-category]):active {
        background-color: var(--active-overlay);
    }
    
    /* Quick visual response for form elements */
    input:active,
    textarea:active,
    select:active {
        transform: scale(0.99);
        transition: transform 0.1s ease;
    }
    
    /* Remove complex animations on touch */
    .cta-card::before {
        animation: none;
        opacity: 0.3;
    }
    
    /* Simplify parallax on touch devices for performance */
    .parallax-element {
        transform: none !important;
        transition: none;
    }
}

/* ========================================
   PROCESS FLOW SECTION
   ======================================== */
.process-flow {
    position: relative;
    will-change: transform;
}

/* Connecting progression line */
.process-flow .row {
    position: relative;
    overflow: visible; /* Allow cards to expand beyond row boundaries */
}

/* Ensure process flow container allows expansion */
.process-flow {
    overflow: visible;
}

/* Removed duplicate connecting line - now handled by .process-flow::after */

@keyframes progressFlow {
    0%, 100% { opacity: 0.3; transform: translateY(-50%) scaleX(1); }
    50% { opacity: 0.6; transform: translateY(-50%) scaleX(1.02); }
}

.process-flow::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -20%;
    width: 140%;
    height: 120%;
    background: 
        radial-gradient(circle at 20% 30%, var(--accent-alpha-50) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, var(--color-brand-navy-alpha-10) 0%, transparent 50%);
    z-index: -1;
    animation: processParallax 15s ease-in-out infinite;
}

@keyframes processParallax {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        opacity: 0.7;
    }
    33% { 
        transform: translateY(-10px) scale(1.02); 
        opacity: 1;
    }
    66% { 
        transform: translateY(5px) scale(0.98); 
        opacity: 0.8;
    }
}

.process-step {
    position: relative;
    padding: 1rem 0.5rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: visible;
    opacity: 0;
    transform: translateY(30px);
    animation-fill-mode: forwards;
    perspective: 1000px;
}

.process-step.animate-in {
    animation: stepSlideIn 0.3s ease forwards;
}

.process-step.animate-in:nth-child(1) { animation-delay: 0s; }
.process-step.animate-in:nth-child(2) { animation-delay: 0.08s; }
.process-step.animate-in:nth-child(3) { animation-delay: 0.16s; }
.process-step.animate-in:nth-child(4) { animation-delay: 0.24s; }

@keyframes stepSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Performance Optimization */
@media (max-width: 768px) {
    .process-step.animate-in {
        animation: stepSlideIn 0.2s ease forwards;
    }
    
    .process-step.animate-in:nth-child(1) { animation-delay: 0s; }
    .process-step.animate-in:nth-child(2) { animation-delay: 0.05s; }
    .process-step.animate-in:nth-child(3) { animation-delay: 0.1s; }
    .process-step.animate-in:nth-child(4) { animation-delay: 0.15s; }
    
    /* Reduce motion for better mobile performance */
    .process-step {
        will-change: opacity;
    }
}

.process-step:hover {
    /* Removed transform to prevent connecting line movement */
}

/* About Page Mobile Stat Counter Centering */
@media (max-width: 991px) {
    .big-stat {
        text-align: center !important;
    }
}

/* Modern Expandable Cards */
.step-card-inner {
    position: relative;
    width: 120%; /* Wider cards for better readability */
    margin-left: -10%; /* Center the wider cards */
    min-height: 280px;
    text-align: center;
    transition: var(--transition-smooth);
    cursor: pointer;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    overflow: hidden;
}

/* Content replacement system - stable cards with crossfade content */
.process-step {
    position: relative;
    overflow: visible; /* Allow cards to expand beyond column boundaries */
}

.process-step:hover {
    z-index: 5; /* Subtle elevation for hover state */
}

/* Stable card with subtle hover and touch enhancement */
.process-step:hover .step-card-inner,
.process-step:active .step-card-inner,
.process-step.touched .step-card-inner {
    box-shadow: 0 8px 32px var(--accent-alpha-300);
    border-color: var(--accent-color);
    /* Cards remain completely stable - no movement */
}

/* Content states for crossfade - FORCED top-aligned layout */
.step-main-content,
.step-detail-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* FORCE top alignment */
    padding: 2rem 1.5rem !important;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* UNIFIED ELEMENT STYLING - Identical positioning for both content states */

/* All icons - main and detail */
.step-visual,
.step-detail-content .additional-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px; /* Fixed height for perfect alignment */
    margin-bottom: 1rem;
}

/* All titles - main and detail */
.step-title,
.step-detail-content .additional-title {
    text-align: center;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    min-height: 1.8rem; /* Ensure consistent title height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* All descriptions - main and detail */
.step-description,
.step-detail-content .additional-description {
    text-align: center;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Detail content specific sizing */
.step-detail-content .additional-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-color);
}

.step-detail-content .additional-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 240px;
}

/* Default state - show main content */
.step-main-content {
    opacity: 1;
    z-index: 2;
}

.step-detail-content {
    opacity: 0;
    z-index: 1;
}

/* Hover and touch states - crossfade to detail content */
.process-step:hover .step-main-content,
.process-step:active .step-main-content,
.process-step.touched .step-main-content {
    opacity: 0;
}

.process-step:hover .step-detail-content,
.process-step:active .step-detail-content,
.process-step.touched .step-detail-content {
    opacity: 1;
    z-index: 2;
}

/* Old step-card-content rules removed - using content replacement system */

.step-main-content {
    transition: var(--transition-smooth);
}

/* Remove conflicting detail content rules - using unified system below */

/* Unified icon sizing for perfect alignment */
.step-visual i,
.step-detail-content .additional-icon i {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem; /* Consistent size for both main and detail */
}

/* ========================================
   PROJECT EXAMPLES VISUAL EFFECTS
   ======================================== */

.project-examples {
    margin: 0;
    padding: 0;
    flex: 1; /* Take up remaining space in the card */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px; /* Ensure consistent height */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.project-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    margin-bottom: 0.6rem;
    border-radius: 12px;
    background: var(--neutral-50);
    border: 1px solid var(--border-color-light);
    transition: var(--transition-smooth);
    position: relative;
}

/* Premium service badge styling */
.project-item:hover {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--primary-bg) 100%);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-sm);
    transform: scale(1.02);
}

.project-item .fas.fa-arrow-right {
    transition: var(--transition-smooth);
    font-size: 0.8rem;
    opacity: 0.6;
}

.project-item:hover .fas.fa-arrow-right {
    color: var(--accent-color) !important;
    opacity: 1;
    transform: scale(1.1);
}

.project-hover {
    transition: var(--transition-smooth);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Category-specific project hover colors */
.advisory-category .project-item:hover .project-hover {
    color: var(--advisory-primary);
    font-weight: 600;
}

.specialty-category .project-item:hover .project-hover {
    color: var(--specialty-primary);
    font-weight: 600;
}

.operational-category .project-item:hover .project-hover {
    color: var(--operational-primary);
    font-weight: 600;
}

/* Fallback for non-categorized project items */
.project-item:hover .project-hover {
    color: var(--accent-color);
    font-weight: 600;
}

/* Add subtle glow effect on card hover */
.reveal-scale:hover .project-item {
    border-color: var(--accent-alpha-300);
    box-shadow: 0 0 0 1px var(--accent-alpha-100);
}

/* Professional service indicator */
.project-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--neutral-300);
    border-radius: 2px;
    transition: var(--transition-smooth);
}

/* Category-specific project item hover :after colors */
.advisory-category .project-item:hover::after {
    background: var(--advisory-primary);
    width: 4px;
}

.specialty-category .project-item:hover::after {
    background: var(--specialty-primary);
    width: 4px;
}

.operational-category .project-item:hover::after {
    background: var(--operational-primary);
    width: 4px;
}

/* Fallback for non-categorized project items */
.project-item:hover::after {
    background: var(--accent-color);
    width: 4px;
}

/* ========================================
   DISTINCT SECTION CARD DESIGNS
   ======================================== */

/* Service Categories Section - Category-Specific Colors */
.service-category-card {
    background: var(--primary-bg);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Advisory Category Card */
.service-category-card.advisory-category {
    background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(var(--advisory-rgb), 0.05) 100%);
}

/* Specialty Category Card */
.service-category-card.specialty-category {
    background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(var(--specialty-rgb), 0.05) 100%);
}

/* Operational Category Card */
.service-category-card.operational-category {
    background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(var(--operational-rgb), 0.05) 100%);
}

.service-category-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 280px; /* Ensure consistent height */
}

.service-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
    z-index: -1;
}

/* Category-specific gradient borders */
.service-category-card.advisory-category::before {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
}

.service-category-card.specialty-category::before {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
}

.service-category-card.operational-category::before {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
}

/* Category-specific service icons */
.advisory-category .service-icon {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--advisory-rgb), 0.3);
}

.specialty-category .service-icon {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--specialty-rgb), 0.3);
}

.operational-category .service-icon {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--operational-rgb), 0.3);
}

/* Category-specific service titles */
.advisory-category .service-title {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.specialty-category .service-title {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.operational-category .service-title {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.service-category-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Category-specific hover effects */
.service-category-card.advisory-category:hover {
    box-shadow: 0 12px 40px rgba(var(--advisory-rgb), 0.2), 0 4px 12px rgba(var(--advisory-rgb), 0.1);
}

.service-category-card.specialty-category:hover {
    box-shadow: 0 12px 40px rgba(var(--specialty-rgb), 0.2), 0 4px 12px rgba(var(--specialty-rgb), 0.1);
}

.service-category-card.operational-category:hover {
    box-shadow: 0 12px 40px rgba(var(--operational-rgb), 0.2), 0 4px 12px rgba(var(--operational-rgb), 0.1);
}

/* Category-specific expert headers */
.advisory-category .expert-header {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.specialty-category .expert-header {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.operational-category .expert-header {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Real Projects Section - Professional Business Cards */
.reveal-scale[style*="border-left: 4px solid"] {
    background: var(--primary-bg);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.reveal-scale[style*="border-left: 4px solid"]:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--shadow-md);
}

.reveal-scale[style*="border-left: 4px solid"] .card-header {
    position: relative;
    z-index: 2;
}

.reveal-scale[style*="border-left: 4px solid"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    z-index: 1;
}

/* Pricing Cards Section - Premium Financial Cards */
.reveal-scale[style*="border: 2px solid"] {
    position: relative;
    overflow: hidden;
    background: var(--primary-bg);
}

.reveal-scale[style*="border: 2px solid"]::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--accent-color), var(--accent-secondary), var(--info-color));
    z-index: -1;
    border-radius: inherit;
}

.reveal-scale[style*="border: 2px solid"]:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow-lg);
}

/* Most Popular Card Enhancement */
.reveal-scale[style*="transform: scale(1.05)"] {
    position: relative;
    overflow: visible;
}

.reveal-scale[style*="transform: scale(1.05)"]::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(45deg, var(--accent-secondary), var(--accent-color));
    border-radius: inherit;
    z-index: -1;
    opacity: 0.1;
    animation: premium-glow 3s ease-in-out infinite alternate;
}

@keyframes premium-glow {
    0% { opacity: 0.1; }
    100% { opacity: 0.2; }
}

.step-back-content {
    text-align: center;
}

.step-back-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: white !important;
}

.step-back-phrase {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-white-alpha-95) !important;
    font-weight: 500;
}

/* Homepage process steps - hexagon step numbers */
.process-step .step-number {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow:
        0 6px 20px var(--color-brand-cyan-alpha-50),
        0 2px 4px var(--black-alpha-100),
        inset 0 1px 0 var(--color-white-alpha-30);
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 3px solid white;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    position: relative;
}

.process-step .step-number::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--accent-alpha-400);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.process-step:hover .step-number {
    transform: translateX(-50%) scale(1.15) rotate(5deg);
    box-shadow:
        0 8px 30px rgba(var(--color-brand-cyan-rgb), 0.7),
        0 4px 8px var(--black-alpha-150),
        inset 0 2px 0 var(--color-white-alpha-40);
    animation: hexagonPulse 2s infinite;
}

.process-step:hover .step-number::before {
    opacity: 1;
    animation: hexagonGlow 2s infinite;
}

@keyframes hexagonPulse {
    0%, 100% { 
        box-shadow: 
            0 8px 30px var(--color-brand-navy-alpha-50),
            0 4px 8px var(--black-alpha-150),
            inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }
    50% { 
        box-shadow: 
            0 12px 40px rgba(var(--color-brand-navy-rgb), 0.8),
            0 6px 12px var(--color-black-alpha-20),
            inset 0 3px 0 var(--color-white-alpha-40);
    }
}

@keyframes hexagonGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.step-visual {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.process-step:hover .step-visual i {
    transform: scale(1.1) rotate(5deg);
    color: var(--accent-color);
}

.step-title {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.step-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 250px;
    margin: 0 auto;
}

/* Flow arrows */
.flow-arrow {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color);
    font-size: 1.2rem;
    opacity: 0.6;
    z-index: 3;
    transition: color 0.3s ease, opacity 0.3s ease;
    animation: arrowFlow 2s ease-in-out infinite;
    pointer-events: none; /* Prevent interference with card hover */
}

.flow-arrow:last-child {
    display: none;
}

@keyframes arrowFlow {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
    50% { transform: translateY(-50%) translateX(5px); opacity: 1; }
}

.process-step:hover + .flow-arrow {
    color: var(--accent-secondary);
    opacity: 1;
    animation-duration: 1s;
}

/* Desktop layout enhancements */
@media (min-width: 992px) {
    .process-flow .row {
        position: relative;
    }
    
    /* Number connecting path */
    /* Remove moving path flow line - causes visual interference */
    
    /* Animated connecting line - expands from center on scroll */
    .process-flow::after {
        content: '';
        position: absolute;
        top: 165px; /* Fixed pixel position aligned with step numbers */
        left: 50%;
        transform: translateX(-50%);
        width: 0%; /* Start with no width */
        height: 3px;
        background: linear-gradient(90deg, 
            var(--accent-color) 0%, 
            var(--accent-secondary) 25%,
            var(--accent-color) 50%,
            var(--accent-secondary) 75%, 
            var(--accent-color) 100%);
        border-radius: 2px;
        box-shadow: 0 2px 8px var(--accent-alpha-200);
        z-index: 1;
        opacity: 0.4;
        transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none; /* Prevent interference with card interactions */
    }
    
    /* Line expands to full width when section is visible */
    .process-flow.animate-line::after {
        width: 84%; /* Same as left: 8%, right: 8% = 84% total width */
        animation: flowLine 3s ease-in-out infinite 0.5s; /* Start flow animation after expansion */
    }
    
    @keyframes numberPathFlow {
        0%, 100% { 
            opacity: 0.4; 
            transform: scaleX(1);
        }
        50% { 
            opacity: 0.7;
            transform: scaleX(1.02);
        }
    }
    
    @keyframes flowLine {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 0.4; }
    }
    
    .process-step {
        margin: 0 10px;
        position: relative;
        z-index: 2;
        min-height: 320px;
        overflow: visible;
    }
    
    .process-step:hover {
        box-shadow: 0 12px 32px var(--accent-alpha-150);
    }
    
    .step-card-front {
        box-shadow: 0 4px 12px var(--color-black-alpha-05);
    }
    
    .process-step:hover .step-card-front {
        box-shadow: 0 8px 24px var(--accent-alpha-100);
    }
    
    .step-card-back {
        box-shadow: 0 12px 32px var(--accent-alpha-300);
    }
    
    .flow-arrow {
        display: block;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 991px) {
    /* Create flexbox layout for step number next to card */
    .process-step {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.75rem;
        min-height: auto;
        padding: 0.25rem 0;
        position: relative;
        margin-left: 0;
        gap: 1rem;
    }
    
    /* Position step numbers next to cards */
    .step-number {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin: 0;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }
    
    /* Make card content take remaining space */
    .step-card-inner {
        flex: 1;
    }
    
    /* Create vertical connecting line for mobile - aligned with step numbers */
    .process-flow {
        position: relative;
    }
    
    /* Create vertical connecting line for mobile - extend from process-flow */
    .process-flow::before {
        content: '';
        position: absolute;
        top: 60px;
        height: calc(100% + 40px); /* Extend just to the button area */
        left: 17.5px; /* Center of step number (35px / 2) */
        width: 3px;
        background: linear-gradient(180deg, 
            var(--accent-color) 0%, 
            var(--accent-secondary) 50%, 
            var(--accent-color) 100%);
        border-radius: 2px;
        z-index: 0;
        opacity: 0.4;
        animation: verticalFlow 3s ease-in-out infinite;
    }
    
    /* Add arrow pointing to button at end of line */
    .process-flow::after {
        content: '';
        position: absolute;
        top: calc(100% + 30px); /* Position just before button area */
        left: 14px; /* Slightly left of line center */
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid var(--accent-color);
        opacity: 0.6;
        z-index: 1;
        animation: arrowPulse 2s ease-in-out infinite;
    }
    
    @keyframes verticalFlow {
        0%, 100% { opacity: 0.4; transform: scaleY(1); }
        50% { opacity: 0.6; transform: scaleY(1.02); }
    }
    
    @keyframes arrowPulse {
        0%, 100% { opacity: 0.6; transform: translateY(0); }
        50% { opacity: 0.8; transform: translateY(2px); }
    }
    
    /* Hide desktop connecting elements */
    .process-flow::after,
    .process-flow .row::after,
    .process-flow .row::before {
        display: none;
    }
    
    /* Improved touch handling for mobile */
    .step-card-inner {
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    
    .step-card-front,
    .step-card-back {
        -webkit-backface-visibility: hidden;
    }
    
    .step-description {
        max-width: 300px;
    }
    
    .flow-arrow {
        display: none;
    }
    
    .step-card-inner {
        width: 100%; /* Reset to full width on mobile */
        margin-left: 0; /* Reset centering on mobile */
        min-height: 240px; /* Changed to min-height for expandable content */
        height: auto; /* Allow dynamic height */
        overflow: hidden; /* Ensure content doesn't break layout */
    }
    
    /* Mobile content replacement - tighter spacing */
    .step-main-content,
    .step-detail-content {
        padding: 1.5rem 1rem; /* Adjusted padding for mobile */
    }
    
    /* Mobile unified spacing and sizing */
    .step-visual,
    .step-detail-content .additional-icon {
        height: 50px; /* Smaller container for mobile */
        margin-bottom: 0.75rem;
    }
    
    .step-title,
    .step-detail-content .additional-title {
        margin-bottom: 0.5rem;
        min-height: 1.5rem; /* Smaller minimum height for mobile */
    }
    
    /* Mobile specific sizing overrides */
    .step-detail-content .additional-title {
        font-size: 1rem;
    }
    
    .step-detail-content .additional-description {
        font-size: 0.85rem;
        max-width: 220px;
        line-height: 1.4;
    }
    
    /* Mobile icon sizing - consistent for both main and detail */
    .step-visual i,
    .step-detail-content .additional-icon i {
        width: 40px;
        height: 40px;
        font-size: 1.8rem; /* Consistent size for mobile */
    }
    
    /* Touch interaction styling handled by main hover/touch rules */
    
    /* Old additional content rules removed - now using content replacement */
    
    /* Mobile uses unified hover/touch system - no separate rules needed */
    
    /* Additional content rules removed - using content replacement system */
    
    /* Mobile icon sizing */
    .step-visual i {
        width: 40px;
        height: 40px;
        font-size: 2rem; /* Slightly smaller for mobile */
    }
    
    .additional-icon i {
        width: 20px;
        height: 20px;
        font-size: 1rem;
    }
}

/* Enhanced parallax scroll effect for desktop */
@media (min-width: 992px) {
    .process-step[data-step="1"] { 
        transform: translateY(0px);
        transition: transform 0.6s ease-out;
    }
    .process-step[data-step="2"] { 
        transform: translateY(-8px);
        transition: transform 0.6s ease-out 0.1s;
    }
    .process-step[data-step="3"] { 
        transform: translateY(0px);
        transition: transform 0.6s ease-out 0.2s;
    }
    .process-step[data-step="4"] { 
        transform: translateY(-8px);
        transition: transform 0.6s ease-out 0.3s;
    }
    
    /* Reset mobile positioning for desktop */
    .step-number {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .process-step {
        margin-left: 0; /* Reset mobile margin */
    }
    
    /* Remove duplicate enhanced line - using single .process-flow::after definition */
    
    /* Remove progression dots - causes movement when cards expand */
    
    /* Hide mobile vertical line on desktop */
    .process-flow::before {
        display: none;
    }
    
    @keyframes progressPulse {
        0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    }
}

/* ========================================
   SECTIONS
   ======================================== */
.section {
    padding: var(--space-4xl) 0;
    position: relative;
}

/* Subtle background patterns for section breaks */
.section:nth-child(even) {
    background: var(--secondary-bg);
}

.section:nth-child(odd) {
    background: var(--primary-bg);
}

/* Add subtle texture overlay */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.02;
    background-image: 
        radial-gradient(circle at 1px 1px, var(--accent-color) 1px, transparent 0);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

/* Ensure section content stays above pattern */
.section > * {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    color: var(--accent-secondary);  /* Dark Blue for section subtitles */
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

/* Only target non-subtitle paragraphs to avoid overriding .section-subtitle color */
.section-header p:not(.section-subtitle) {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-item {
    text-align: center;
    padding: 2rem;
}

.feature-item h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.feature-item p {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 0;
}

.counter {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.feature-item .counter + p {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Contact Form */
.contact-form {
    background: var(--secondary-bg);
    padding: 3rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.form-control {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s ease;
}

.form-control:focus {
    background: var(--tertiary-bg);
    border-color: var(--accent-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem var(--accent-alpha-250);
}

.form-control::placeholder {
    color: var(--text-muted);
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
    padding: 3rem 0 2rem;
}

.footer a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: var(--accent-color) !important;
}


.footer h5 {
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 1rem;
}

.footer p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-weight: 300;
}

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

.footer li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.footer li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 300;
}

.footer li a:hover {
    color: var(--accent-color);
}


/* Footer specific styles for better contrast */
.footer-heading {
    color: var(--text-secondary) !important;
    font-weight: 400;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.footer-description {
    color: var(--text-secondary) !important;
    line-height: 1.6;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 300;
}

.footer-link {
    color: var(--text-secondary) !important;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 300;
}

.footer-link:hover {
    color: var(--accent-color) !important;
}


.footer-text {
    color: var(--text-secondary) !important;
    font-weight: 300;
}

.footer-copyright {
    color: var(--text-secondary) !important;
    font-weight: 300;
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */
.flash-messages {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 1050;
    max-width: 400px;
}

.alert {
    border: none;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--success-color);
    color: var(--text-primary);
}

.alert-danger {
    background: var(--danger-color);
    color: var(--text-primary);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Modern Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

/* Staggered Animation Classes */
.stagger-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-smooth);
}

.stagger-animation.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Progressive disclosure animation */
.progressive-reveal {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progressive-reveal.collapsed {
    max-height: 0;
}

.progressive-reveal.expanded {
    max-height: 1000px; /* Adjust based on content */
}

/* Loading states and skeleton screens */
.loading-skeleton {
    background: linear-gradient(90deg, 
        var(--neutral-100) 25%, 
        var(--neutral-50) 37%, 
        var(--neutral-100) 63%);
    background-size: 400% 100%;
    animation: loading 1.4s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.large {
    height: 1.5rem;
}

.skeleton-button {
    height: 2.5rem;
    width: 120px;
    border-radius: 50px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Enhanced disabled states */
.btn:disabled,
.btn.disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: var(--disabled-border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Form field disabled states */
input:disabled,
textarea:disabled,
select:disabled {
    background: var(--disabled-bg);
    color: var(--disabled-text);
    border-color: var(--disabled-border);
    cursor: not-allowed;
}

/* ========================================
   MOBILE LOADING & PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Skeleton loading animation for mobile */
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    height: 280px;
}

/* Progressive enhancement for mobile images */
@media (max-width: 768px) {
    img {
        loading: lazy;
        decoding: async;
    }
    
    /* Critical path loading optimization */
    .hero img,
    .navbar img {
        loading: eager;
        decoding: sync;
    }
    
    /* Prevent layout shift during image loading */
    .card img,
    .process-visual img {
        aspect-ratio: 16/9;
        object-fit: cover;
        background: var(--neutral-100);
    }
}

/* ========================================
   TOUCH & MOBILE OPTIMIZATIONS
   ======================================== */

/* Ensure touch targets meet minimum 44px requirement */
.btn,
.nav-link,
.card,
input,
textarea,
select {
    min-height: 44px;
}

/* Enhanced touch feedback for interactive elements */
@media (max-width: 768px) {
    .btn:active,
    .card:active,
    .nav-link:active {
        background-color: var(--active-overlay);
        transform: scale(0.98);
        transition: var(--transition-snap);
    }
    
    /* Better spacing for touch on mobile */
    .btn {
        padding: 16px 24px;
        margin: 8px 4px;
    }
    
    /* Enhanced card touch improvements */
    .card {
        margin: 0 var(--space-xs) var(--space-lg) var(--space-xs); /* Add horizontal margin for easier thumb reach */
        cursor: pointer;
        touch-action: manipulation; /* Disable double-tap zoom */
    }
    
    .card:active {
        transform: scale(0.96); /* More pronounced feedback */
        box-shadow: var(--shadow-sm);
        transition: var(--transition-snap);
    }
    
    /* Enhanced navigation touch targets */
    .nav-link {
        padding: var(--space-md) var(--space-lg); /* Larger touch area */
        margin: var(--space-xs) 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
    }
    
    /* Improved footer links for touch */
    .footer-link {
        padding: var(--space-sm) 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        touch-action: manipulation;
    }
    
    /* Form improvements for mobile */
    input,
    textarea,
    select {
        padding: var(--space-sm);
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
        border: 2px solid var(--border-color);
        transition: var(--transition-base);
    }
    
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px var(--accent-alpha-100);
        outline: none;
    }
    
    /* Gesture-friendly navigation enhancements */
    .project-selector-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        scroll-behavior: smooth;
        padding: var(--space-xs) 0;
    }
    
    .project-selector-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* Add visual scroll indicators for horizontal content */
    .project-selector-tabs::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    /* Enhanced mobile navbar */
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1051; /* Higher than navbar itself */
        background: var(--primary-bg);
        border-radius: 0 0 15px 15px;
        margin-top: var(--space-sm);
        box-shadow: 0 4px 20px var(--black-alpha-100);
    }
    
    /* Improved mobile dropdown menus */
    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        border: none;
        box-shadow: none;
        background: var(--secondary-bg);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.animate-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.animate-float {
    animation: float 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Staggered Animation Delays */
.animate-stagger-1 { animation-delay: 0.1s; }
.animate-stagger-2 { animation-delay: 0.2s; }
.animate-stagger-3 { animation-delay: 0.3s; }
.animate-stagger-4 { animation-delay: 0.4s; }
.animate-stagger-5 { animation-delay: 0.5s; }
.animate-stagger-6 { animation-delay: 0.6s; }

/* Reveal Classes for Scroll Triggers */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero {
        min-height: 80vh;
        text-align: center;
    }
    
    .hero-logo {
        margin-bottom: 3rem;
    }

    .hero-logo-img {
        width: 580px;
        max-width: 85vw;
    }
    
    .section {
        padding: var(--space-xl) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-xl);
    }
    
    .contact-form {
        padding: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    /* Enhanced mobile typography with better readability */
    h1 {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
        line-height: 1.2;
        margin-bottom: var(--space-md);
    }
    
    .hero h1 {
        font-size: clamp(2.2rem, 6vw, 2.8rem); /* More responsive hero sizing */
        line-height: 1.1;
    }
    
    .hero-description {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
        line-height: 1.5; /* Better readability */
        margin-bottom: var(--space-lg);
    }
    
    /* Improve section headers for mobile */
    h2 {
        font-size: clamp(1.5rem, 4.5vw, 2rem);
        line-height: 1.3;
        margin-bottom: var(--space-md);
    }
    
    h3 {
        font-size: clamp(1.3rem, 4vw, 1.7rem);
        line-height: 1.4;
    }
    
    /* Better paragraph spacing and sizing */
    p {
        font-size: clamp(0.95rem, 3vw, 1.1rem);
        line-height: 1.6;
        margin-bottom: var(--space-md);
    }
    
    /* Mobile hero spacing and layout improvements */
    .hero-logo {
        margin-bottom: var(--space-3xl); /* Generous spacing between logo and content */
    }

    .hero-logo-img {
        width: 420px;
        max-width: 80vw;
    }
    
    .hero-content {
        margin-top: 0; /* Remove any extra top margin */
    }
    
    .brand-text {
        font-size: 1.3rem;
        font-weight: 300;
    }
    
    .btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
    
    /* Vertical space optimization for mobile */
    .section {
        padding: var(--space-2xl) 0 var(--space-xl) 0; /* Reduce section padding */
    }
    
    .section-header {
        margin-bottom: var(--space-xl); /* Reduce header spacing */
    }
    
    /* Card spacing optimization */
    .card {
        margin-bottom: var(--space-lg);
    }
    
    /* Process page specific optimizations */
    .parallax-section {
        min-height: 45vh; /* Further reduce for small mobile */
        padding: var(--space-lg) 0;
    }
    
    /* Improved mobile navigation spacing */
    .navbar {
        padding: var(--space-sm) 0;
    }
    
    .navbar-brand {
        padding: var(--space-xs) 0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* Selection Styling */
::selection {
    background: var(--accent-color);
    color: var(--text-primary);
}

/* Focus Styles */
*:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* SOW Creator Section Styles */
.sow-creator-card {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--black-alpha-80);
    transition: all 0.3s ease;
}

.sow-creator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--black-alpha-120);
}

.sow-creator-icon {
    color: var(--accent-color);
}

.sow-creation-steps {
    margin: 2rem 0;
}

.step-item {
    text-align: center;
    padding: 1rem;
}

/* SOW Creator step numbers */
.step-item .step-number {
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: bold;
    font-size: 1.2rem;
}

.step-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* Cost Calculator Section Styles */
.cost-comparison-table {
    background: var(--tertiary-bg);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px var(--black-alpha-80);
}

.cost-comparison-table .table {
    color: var(--text-primary);
    margin: 0;
}

.cost-comparison-table .table th {
    border: none;
    color: var(--accent-color);
    font-weight: 600;
    padding: 1rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.cost-comparison-table .table td {
    border: none;
    padding: 1rem 0.75rem;
    vertical-align: middle;
    color: var(--text-primary);
    font-weight: 500;
}

.cost-comparison-table .table tbody tr:hover {
    background: var(--secondary-bg);
    transition: background 0.3s ease;
}

.cost-comparison-table .table-active {
    background: var(--accent-color);
    color: var(--text-primary);
}

.cost-comparison-table .table-active td {
    color: var(--text-primary);
    font-weight: bold;
}

/* LATAM Team Section Styles */
.team-highlight-card {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
}

.team-highlight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px var(--black-alpha-120);
    border-color: var(--accent-color);
}

.team-highlight-card h4 {
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

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

.team-highlight-card li {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.team-highlight-card li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

/* Modern Light Theme Enhancements */
.get-started-card {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px var(--color-black-alpha-06);
    position: relative;
    overflow: hidden;
}

.get-started-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-brand-cyan-alpha-10) 0%, var(--color-brand-navy-alpha-10) 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.get-started-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px var(--black-alpha-120), 
                0 12px 24px var(--active-overlay);
    border-color: var(--accent-color);
}

.get-started-card:hover::before {
    opacity: 1;
}

.step-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px var(--accent-alpha-200);
}

.get-started-card:hover .step-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 24px var(--accent-alpha-300);
}

.metric-card {
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px var(--color-black-alpha-06);
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-brand-cyan-alpha-10) 0%, var(--color-brand-navy-alpha-10) 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.metric-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px var(--black-alpha-120), 
                0 12px 24px var(--active-overlay);
    border-color: var(--accent-color);
}

.metric-card:hover::before {
    opacity: 1;
}

.metric-card:hover .counter {
    transform: scale(1.05);
    color: var(--accent-secondary);
}

.metric-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--accent-color);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px var(--accent-alpha-200);
}

.metric-card:hover .metric-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 24px var(--accent-alpha-300);
}

/* Enhanced buttons for light theme */
.btn-outline-light {
    border: 2px solid var(--white-alpha-800);
    color: var(--color-white-alpha-90);
    background: transparent;
    transition: var(--transition-base);
}

.btn-outline-light:hover {
    background: var(--color-white-alpha-10);
    border-color: white;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--white-alpha-200);
}

.btn-outline-light:focus {
    box-shadow: 0 0 0 3px var(--color-white-alpha-20);
    outline: none;
}

/* Light theme gradients */
.hero-visual {
    filter: drop-shadow(0 10px 30px var(--accent-alpha-200));
}

/* Responsive adjustments for new sections */
@media (max-width: 768px) {
    .sow-creator-card {
        padding: 2rem 1rem;
    }
    
    .cost-comparison-table {
        padding: 1rem;
        overflow-x: auto;
    }
    
    .cost-comparison-table .table {
        font-size: 0.9rem;
    }
    
    .team-highlight-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .step-item {
        margin-bottom: 1rem;
    }
    
    .metric-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
}

/* ========================================
   FOR CONSULTANTS PAGE STYLES
   ======================================== */

/* Benefit Cards */
.benefit-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    box-shadow: var(--shadow-accent);
}

/* Benefit List Items */
.benefit-item {
    transition: var(--transition-smooth);
    padding: var(--space-sm);
    border-radius: 12px;
}

.benefit-item:hover {
    background: var(--hover-overlay);
    transform: translateX(8px);
}

.benefit-icon-sm {
    width: 40px;
    height: 40px;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Consultant Stats */
.consultant-stats {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-card {
    background: var(--primary-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-color);
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 1;
    transition: var(--transition-smooth);
}

.stat-card:hover .stat-number {
    transform: scale(1.1);
    color: var(--accent-secondary);
}

.stat-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

/* Requirement Categories */
.requirement-category {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: var(--space-xl);
    height: 100%;
    transition: var(--transition-smooth);
}

.requirement-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0 0;
}

.requirements-list li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-base);
}

.requirements-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.requirements-list li:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

/* Specialty Tags */
.specialty-tag {
    background: var(--primary-bg);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    padding: var(--space-sm) var(--space-lg);
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    box-shadow: var(--shadow-sm);
}

.specialty-tag:hover {
    background: var(--accent-light);
    border-color: var(--accent-color);
    color: var(--accent-secondary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.specialty-tag i {
    color: var(--accent-color);
    margin-right: var(--space-xs);
    font-size: 1.1rem;
}

/* Process Flow for Consultants */
.process-step {
    position: relative;
    transition: var(--transition-smooth);
    padding: var(--space-lg);
    border-radius: 16px;
}

.process-step:hover {
    background: var(--hover-overlay);
    /* Removed transform to prevent connecting line movement */
}

.process-step .step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: var(--accent-secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.3rem;
    box-shadow: var(--shadow-accent);
    border: 4px solid var(--primary-bg);
    z-index: 2;
}

.process-step .step-icon {
    margin-bottom: var(--space-lg);
}

.process-step h5 {
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.process-step p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .consultant-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .stat-card {
        padding: var(--space-lg);
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .requirement-category {
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }
    
    .specialty-tag {
        padding: var(--space-sm) var(--space-md);
        height: 50px;
        font-size: 0.9rem;
    }
    
    .process-step {
        padding: var(--space-lg) var(--space-sm);
        margin-bottom: var(--space-xl);
    }
    
    .process-step .step-number {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 0 auto var(--space-lg) auto;
    }
}

/* ========================================
   HOME PAGE SPECIFIC STYLING
   ======================================== */

/* Traditional vs Modern Consulting Cards */
.comparison-list {
    text-align: left; /* Override parent text-center for list items */
}

.comparison-list li {
    display: flex;
    align-items: flex-start;
}

.comparison-list li div {
    color: var(--text-secondary);
}

/* Pricing Cards Mobile Ordering - Most Popular First */
@media (max-width: 991px) {
    /* Target the column containing the featured pricing card */
    .col-lg-4:has(.featured-pricing) {
        order: -1; /* Moves "Ongoing Support" (most popular) to the top */
    }
    
    /* Fallback for browsers that don't support :has() */
    .col-lg-4 {
        order: 0; /* Default order for all columns */
    }
    
    .col-lg-4:nth-child(2) {
        order: -1; /* Target the second column (featured pricing) directly */
    }
}

/* Value Proposition Sections */
.value-proposition-section {
    text-align: left;
}

.value-prop-item {
    padding: var(--space-sm);
    border-radius: 8px;
    background: rgba(var(--neutral-50), 0.5);
    border-left: 3px solid transparent;
    transition: var(--transition-base);
}

.value-prop-item:hover {
    background: rgba(var(--neutral-50), 0.8);
    transform: translateX(3px);
}

.value-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.value-example {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 32px; /* Align with text above */
}

/* Base Shift-Left and Continuous Risk Styling (Fallback) */
.shift-left {
    border-left-color: var(--accent-color);
}

.shift-left .value-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: white;
}

.continuous-risk {
    border-left-color: var(--accent-secondary);
}

.continuous-risk .value-icon {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent-color));
    color: white;
}

/* Service Category Color Customizations - Advisory */
.advisory-category .shift-left {
    border-left-color: var(--advisory-primary);
    background: rgba(var(--advisory-rgb), 0.08);
}

.advisory-category .shift-left .value-icon {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
}

.advisory-category .shift-left:hover {
    background: rgba(var(--advisory-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--advisory-rgb), 0.15);
}

.advisory-category .continuous-risk {
    border-left-color: var(--advisory-secondary);
    background: rgba(var(--advisory-secondary-rgb), 0.08);
}

.advisory-category .continuous-risk .value-icon {
    background: linear-gradient(135deg, var(--advisory-secondary), var(--advisory-primary));
}

.advisory-category .continuous-risk:hover {
    background: rgba(var(--advisory-secondary-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--advisory-secondary-rgb), 0.15);
}

/* Service Category Color Customizations - Specialty */
.specialty-category .shift-left {
    border-left-color: var(--specialty-primary);
    background: rgba(var(--specialty-rgb), 0.08);
}

.specialty-category .shift-left .value-icon {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
}

.specialty-category .shift-left:hover {
    background: rgba(var(--specialty-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--specialty-rgb), 0.15);
}

.specialty-category .continuous-risk {
    border-left-color: var(--specialty-secondary);
    background: rgba(var(--specialty-secondary-rgb), 0.08);
}

.specialty-category .continuous-risk .value-icon {
    background: linear-gradient(135deg, var(--specialty-secondary), var(--specialty-primary));
}

.specialty-category .continuous-risk:hover {
    background: rgba(var(--specialty-secondary-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--specialty-secondary-rgb), 0.15);
}

/* Service Category Color Customizations - Operational */
.operational-category .shift-left {
    border-left-color: var(--operational-primary);
    background: rgba(var(--operational-rgb), 0.08);
}

.operational-category .shift-left .value-icon {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
}

.operational-category .shift-left:hover {
    background: rgba(var(--operational-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--operational-rgb), 0.15);
}

.operational-category .continuous-risk {
    border-left-color: var(--operational-secondary);
    background: rgba(var(--operational-secondary-rgb), 0.08);
}

.operational-category .continuous-risk .value-icon {
    background: linear-gradient(135deg, var(--operational-secondary), var(--operational-primary));
}

.operational-category .continuous-risk:hover {
    background: rgba(var(--operational-secondary-rgb), 0.12);
    box-shadow: 0 3px 12px rgba(var(--operational-secondary-rgb), 0.15);
}

/* Timeline Carousel Styling */
.project-timeline-showcase {
    margin-top: 2rem;
}

.timeline-carousel {
    display: none;
    background: var(--primary-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 2rem;
    margin-bottom: 2rem;
}

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

.carousel-header {
    text-align: center;
    margin-bottom: 2rem;
}

.carousel-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.carousel-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.project-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-item i {
    color: var(--accent-color);
}

.timeline-cards-container {
    position: relative;
    overflow: visible; /* Allow cards to show shadows */
    padding: 2rem 0;
    margin: 0 -2rem; /* Negative margin to center content */
}

.timeline-cards {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    gap: 2rem;
    padding: 0 2rem;
    justify-content: center;
    align-items: flex-start;
}

.timeline-card {
    min-width: 320px;
    max-width: 360px;
    padding: 2rem;
    background: var(--primary-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    opacity: 0.6;
    transform: scale(0.85) translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.timeline-card.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    background: var(--primary-bg);
    box-shadow: 0 20px 60px var(--black-alpha-150);
    border-color: var(--accent-color);
    z-index: 10;
    position: relative;
}

.timeline-card:hover:not(.active) {
    opacity: 0.8;
    transform: scale(0.9) translateY(10px);
}

.phase-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.phase-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: white;
    font-size: 1.2rem;
}

.phase-info h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.phase-duration {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.content-section h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.content-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content-section li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--border-color);
}

.content-section li:last-child {
    border-bottom: none;
}

.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.nav-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: scale(1.1);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

.phase-indicators {
    display: flex;
    gap: 0.75rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    cursor: pointer;
    transition: var(--transition-base);
}

.indicator.active {
    background: var(--accent-color);
    transform: scale(1.2);
}

/* Category-specific indicator hover colors */
.timeline-carousel[data-category="advisory"] .indicator:hover {
    background: var(--advisory-primary);
}

.timeline-carousel[data-category="specialty"] .indicator:hover {
    background: var(--specialty-primary);
}

.timeline-carousel[data-category="operational"] .indicator:hover {
    background: var(--operational-primary);
}

/* Fallback for non-categorized indicators */
.indicator:hover {
    background: var(--accent-color);
}

/* Category-specific phase icons */
.timeline-carousel[data-category="advisory"] .phase-icon {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary));
}

.timeline-carousel[data-category="specialty"] .phase-icon {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary));
}

.timeline-carousel[data-category="operational"] .phase-icon {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary));
}

/* Mobile responsive */
@media (max-width: 991px) {
    .timeline-cards-container {
        margin: 0;
        padding: 1rem 0;
        overflow: hidden;
    }
    
    .timeline-cards {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
        align-items: center;
    }
    
    .timeline-card {
        min-width: 100%;
        max-width: 100%;
        transform: scale(1) translateY(0);
        opacity: 0.3;
    }
    
    .timeline-card.active {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    
    .timeline-card:not(.active) {
        display: none;
    }
    
    .project-stats {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .carousel-navigation {
        gap: 1rem;
    }
    
    .timeline-cards-container {
        overflow: hidden; /* Prevent horizontal scroll on mobile */
    }
}

/* Traditional Consulting Card - More Muted Styling */
.card h4[style*="--neutral-600"] {
    color: var(--neutral-600) !important;
}

.comparison-list li div strong {
    color: var(--text-primary);
}

/* eXsecute Consulting Card - Clean White with Theme Colors - Updated */
.exsecute-card {
    background: var(--primary-bg) !important;
    box-shadow: 0 8px 32px var(--accent-alpha-150);
    position: relative;
}

.exsecute-card::before {
    display: none !important; /* Remove the gradient overlay completely */
}

.exsecute-card.reveal-scale::after {
    display: none !important; /* Remove the reveal-scale gradient background */
}

.exsecute-card h3 {
    color: var(--accent-color) !important;
    font-weight: 700;
}

.exsecute-card h4, .exsecute-card h5 {
    color: var(--accent-color) !important;
    font-weight: 600;
}

.exsecute-card p {
    color: var(--text-primary) !important;
}

.exsecute-card .comparison-list li div {
    color: var(--text-primary);
}

.exsecute-card .comparison-list li div strong {
    color: var(--accent-color);
    font-weight: 700;
}

/* Fix sections with explicit background styles to override nth-child rules */
.section[style*="background: var(--secondary-bg)"] {
    background: var(--secondary-bg) !important;
}

.section[style*="background: var(--primary-bg)"] {
    background: var(--primary-bg) !important;
}

/* Process Step Flip Cards - Ensure White Text */
.step-card-back * {
    color: white !important;
}

.step-card-back i {
    color: var(--accent-color) !important;
}

/* ========================================
   UNIFIED SERVICES PAGE DESIGN SYSTEM
   ======================================== */

/* Unified Project Cards */
.unified-project-card {
    background: var(--primary-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.unified-project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.unified-project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.unified-project-card:hover::before {
    opacity: 1;
}

.unified-project-header {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    border: none;
    border-radius: 16px 16px 0 0;
    padding: var(--space-lg);
    position: relative;
    z-index: 1;
}

.unified-project-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-accent);
}

.unified-project-title {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.3rem;
}

.unified-project-subtitle {
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

/* Unified Project Meta */
.unified-project-meta {
    background: var(--secondary-bg);
    border-radius: 12px;
    padding: var(--space-lg);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.meta-item i {
    font-size: 1.1rem;
}

/* Unified Sections */
.unified-section {
    position: relative;
}

.unified-section-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
}

.unified-section-title i {
    color: var(--accent-color);
    font-size: 0.9rem;
}

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

.unified-list li {
    position: relative;
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-base);
}

.unified-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: var(--space-xs);
    color: var(--success-color);
    font-weight: bold;
    font-size: 1rem;
}

.unified-list li:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

/* Unified Outcome Box */
.unified-outcome-box {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    border-radius: 12px;
    padding: var(--space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.unified-outcome-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.unified-project-card:hover .unified-outcome-box::before {
    transform: translateX(100%);
}

.outcome-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.outcome-value {
    font-size: 1.1rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Unified Pricing Cards */
.unified-pricing-card {
    background: var(--primary-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.unified-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.unified-pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.unified-pricing-card:hover::before {
    opacity: 1;
}

/* Featured Pricing Card */
.featured-card {
    transform: scale(1.05);
    border-color: var(--accent-secondary);
    box-shadow: var(--shadow-lg);
}

.popular-badge {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: white;
    padding: var(--space-xs) var(--space-lg);
    border-radius: 0 0 12px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: var(--shadow-accent);
}

.unified-pricing-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-accent);
    position: relative;
    z-index: 1;
}

.unified-pricing-title {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.4rem;
    margin: var(--space-lg) 0 var(--space-sm) 0;
    position: relative;
    z-index: 1;
}

.unified-pricing-desc {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
}

.unified-pricing-highlight {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    border-radius: 12px;
    padding: var(--space-lg);
    position: relative;
    z-index: 1;
}

.price-value {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-xs);
}

.price-note {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.unified-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    position: relative;
    z-index: 1;
}

.unified-feature-list li {
    position: relative;
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    color: var(--text-secondary);
    font-weight: 500;
    transition: var(--transition-base);
}

.unified-feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    top: var(--space-xs);
    color: var(--success-color);
    font-weight: bold;
    font-size: 1rem;
}

.unified-feature-list li:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .unified-project-card, .unified-pricing-card {
        margin-bottom: var(--space-lg);
    }
    
    .unified-project-header {
        padding: var(--space-md);
    }
    
    .unified-project-meta {
        padding: var(--space-md);
    }
    
    .meta-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .unified-project-title {
        font-size: 1.1rem;
    }
    
    .unified-pricing-title {
        font-size: 1.2rem;
    }
    
    .price-value {
        font-size: 1.3rem;
    }
    
    .featured-card {
        transform: none;
        margin-bottom: var(--space-xl);
    }
    
    .popular-badge {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 0 auto var(--space-md) auto;
        border-radius: 12px;
        display: inline-block;
    }
}

/* ========================================
   PROJECT SHOWCASE CARDS - Real Projects Section
   ======================================== */

.project-showcase-card {
    background: var(--primary-bg);
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--black-alpha-80);
    transition: var(--transition-smooth);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, flexible content, fixed outcome */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.project-showcase-card .card-body {
    display: grid;
    grid-template-rows: auto 1fr; /* Details section, deliverables section */
    padding: var(--space-xl);
    gap: var(--space-lg);
}

.project-showcase-card:hover {
    transform: translateY(-12px) rotate(1deg);
    box-shadow: 0 20px 40px var(--black-alpha-150);
}

.project-showcase-header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: var(--space-xl);
    text-align: center;
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto; /* Tag, icon, title, stats */
    gap: var(--space-md);
    align-content: center;
    min-height: 260px; /* Flexible minimum */
}

.project-category-tag {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-category-tag.advisory {
    background: rgba(var(--advisory-rgb), 0.1);
    color: var(--advisory-primary);
    border: 1px solid rgba(var(--advisory-rgb), 0.3);
}

.project-category-tag.specialty {
    background: rgba(var(--specialty-rgb), 0.1);
    color: var(--specialty-primary);
    border: 1px solid rgba(var(--specialty-rgb), 0.3);
}

.project-category-tag.operational {
    background: rgba(var(--operational-rgb), 0.1);
    color: var(--operational-primary);
    border: 1px solid rgba(var(--operational-rgb), 0.3);
}

.project-showcase-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg) auto;
    color: white;
    font-size: 1.8rem;
    position: relative;
}

.project-showcase-icon.advisory {
    background: linear-gradient(135deg, var(--advisory-primary) 0%, var(--advisory-secondary) 100%);
    box-shadow: 0 8px 24px rgba(var(--advisory-rgb), 0.4);
}

.project-showcase-icon.specialty {
    background: linear-gradient(135deg, var(--specialty-primary) 0%, var(--specialty-secondary) 100%);
    box-shadow: 0 8px 24px rgba(var(--specialty-rgb), 0.4);
}

.project-showcase-icon.operational {
    background: linear-gradient(135deg, var(--operational-primary) 0%, var(--operational-secondary) 100%);
    box-shadow: 0 8px 24px rgba(var(--operational-rgb), 0.4);
}

.project-showcase-title {
    font-size: clamp(1.2rem, 4vw, 1.5rem); /* Responsive font size */
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.project-showcase-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: 25px;
    box-shadow: 0 4px 12px var(--black-alpha-80);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-item i {
    color: var(--accent-color);
}

/* Project Details Content */
.project-details-section {
    display: grid;
    grid-template-rows: auto 1fr; /* Header, flexible content */
    gap: var(--space-md);
    align-content: start;
}

.project-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-section-header i {
    color: var(--accent-color);
    font-size: 1rem;
}

.project-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    flex: 1; /* Take up remaining space in flex container */
}

.project-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--secondary-bg);
    border-radius: 12px;
    transition: var(--transition-base);
    font-weight: 500;
    color: var(--text-secondary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0; /* Allow flex items to shrink */
}

.project-item:hover {
    background: var(--accent-light);
    color: var(--text-primary);
    transform: translateX(4px);
}

.project-item i {
    color: var(--accent-color);
    font-size: 0.9rem;
    width: 16px;
    min-width: 16px; /* Prevent icon shrinking */
    text-align: center;
    flex-shrink: 0;
}

.project-item span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    flex: 1;
}

/* Project Deliverables */
.project-deliverables {
    display: grid;
    grid-template-rows: auto 1fr; /* Header, flexible content */
    gap: var(--space-md);
    align-content: start;
}

.deliverables-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1; /* Take up remaining space */
}

.deliverable-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs); /* Further reduced gap for tighter spacing */
    padding: var(--space-md) var(--space-lg); /* Reduce vertical padding, keep horizontal */
    background: var(--secondary-bg);
    border-radius: 16px;
    border-left: 4px solid var(--accent-color);
    transition: var(--transition-base);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
}

.deliverable-item:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-sm);
}

.deliverable-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align emoji to the left */
    width: 1.2rem; /* Force fixed width to match font-size */
    max-width: 1.2rem;
    overflow: hidden;
}

.deliverable-item > div {
    min-width: 0;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.deliverable-item strong {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.deliverable-item small {
    color: var(--text-muted);
    line-height: 1.4;
}

/* Execution Flow Styles */
.execution-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm); /* Reduced gap */
    flex: 1;
}

.execution-step {
    display: flex;
    align-items: center; /* Center alignment for single-line */
    gap: var(--space-sm); /* Smaller gap */
    padding: var(--space-sm); /* Reduced padding */
    background: var(--accent-alpha-50);
    border-radius: 8px; /* Smaller border radius */
    border-left: 3px solid var(--accent-color);
    transition: var(--transition-base);
    position: relative;
}

/* Category-specific execution-step hover colors */
.large-project-card[data-category="advisory"] .execution-step:hover {
    background: var(--accent-alpha-100);
    transform: translateX(3px);
}

.large-project-card[data-category="specialty"] .execution-step:hover {
    background: var(--brand-alpha-100);
    transform: translateX(3px);
}

.large-project-card[data-category="operational"] .execution-step:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(3px);
}

/* Fallback for non-categorized execution steps */
.execution-step:hover {
    background: var(--accent-alpha-100);
    transform: translateX(3px); /* Smaller movement */
}

/* Execution step numbers (used in project cards) */
.execution-step .step-number {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: white;
    width: 22px; /* Smaller number circle */
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem; /* Smaller font */
    font-weight: 700;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
    min-width: 0;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    font-size: 0.9rem; /* Slightly smaller font */
}

.step-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Mobile adjustments for execution flow */
@media (max-width: 768px) {
    .execution-step {
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
    }
    
    .step-number {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    .step-title {
        font-size: 0.85rem;
    }
}

/* Interactive Project Cards */
.interactive-project-card {
    border: 2px solid transparent;
    transition: var(--transition-base);
    overflow: hidden;
}

.interactive-project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.project-header {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    padding: var(--space-lg);
    position: relative;
    border-radius: 16px 16px 0 0;
}

.project-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-accent);
    margin-bottom: var(--space-md);
    color: white;
}

.project-icon i {
    color: white;
    opacity: 0.95;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.project-title {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: var(--space-sm);
}

.project-stats {
    display: flex;
    gap: var(--space-lg);
}

.project-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--secondary-bg);
}

.nav-tab {
    flex: 1;
    background: none;
    border: none;
    padding: var(--space-sm) var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    transition: var(--transition-base);
    color: var(--text-muted);
    position: relative;
    min-height: 60px;
}

.nav-tab i {
    font-size: 1.1rem;
}

.nav-tab span {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

.nav-tab:hover {
    background: var(--accent-alpha-100);
    color: var(--text-primary);
}

.nav-tab.active {
    background: var(--accent-color);
    color: white;
}

/* Category-specific nav-tab active :after colors */
.large-project-card[data-category="advisory"] .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--advisory-primary);
}

.large-project-card[data-category="specialty"] .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--specialty-primary);
}

.large-project-card[data-category="operational"] .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--operational-primary);
}

/* Fallback for non-categorized nav-tabs */
.nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-color);
}

.project-content {
    position: relative;
    min-height: 280px;
    max-height: 320px;
    padding: 0;
    overflow: hidden;
}

.content-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--transition-smooth);
    pointer-events: none;
    padding: var(--space-lg);
    overflow-y: auto;
    overflow-x: hidden;
}

.content-panel.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Timeline View */
.timeline-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-alpha-50);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.timeline-week {
    background: var(--accent-color);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
    flex-shrink: 0;
}

.timeline-task {
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* Outcome Display */
.outcome-display {
    text-align: center;
}

.outcome-details {
    margin-top: var(--space-lg);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Card-Specific Visual Enhancements */

/* Advisory Project Card - Consultative Theme */
.interactive-project-card[data-project="architecture"] .nav-tab.active {
    background: linear-gradient(135deg, var(--advisory-primary) 0%, var(--advisory-secondary) 100%);
    box-shadow: 0 4px 12px rgba(var(--advisory-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.interactive-project-card[data-project="architecture"] .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-200), transparent);
    animation: shimmer 2s infinite;
}

.interactive-project-card[data-project="architecture"] .timeline-week {
    background: linear-gradient(135deg, var(--advisory-primary) 0%, var(--advisory-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--advisory-rgb), 0.2);
}

.interactive-project-card[data-project="architecture"] .step-number {
    background: linear-gradient(135deg, var(--advisory-primary) 0%, var(--advisory-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--advisory-rgb), 0.3);
}

.interactive-project-card[data-project="architecture"] .content-panel.active {
    animation: slideInFromLeft 0.6s ease-out;
}

/* Specialty Project Card - Discovery Theme */
.interactive-project-card[data-project="tool-selection"] .nav-tab.active {
    background: linear-gradient(135deg, var(--specialty-primary) 0%, var(--specialty-secondary) 100%);
    box-shadow: 0 4px 12px rgba(var(--specialty-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.interactive-project-card[data-project="tool-selection"] .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-200), transparent);
    animation: shimmer 2s infinite 0.5s;
}

.interactive-project-card[data-project="tool-selection"] .timeline-week {
    background: linear-gradient(135deg, var(--specialty-primary) 0%, var(--specialty-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--specialty-rgb), 0.2);
}

.interactive-project-card[data-project="tool-selection"] .step-number {
    background: linear-gradient(135deg, var(--specialty-primary) 0%, var(--specialty-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--specialty-rgb), 0.3);
}

.interactive-project-card[data-project="tool-selection"] .content-panel.active {
    animation: slideInFromTop 0.6s ease-out;
}

/* Operational Project Card - Continuous Theme */
.interactive-project-card[data-project="devsecops"] .nav-tab.active {
    background: linear-gradient(135deg, var(--operational-primary) 0%, var(--operational-secondary) 100%);
    box-shadow: 0 4px 12px rgba(var(--operational-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.interactive-project-card[data-project="devsecops"] .nav-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--white-alpha-200), transparent);
    animation: shimmer 2s infinite 1s;
}

.interactive-project-card[data-project="devsecops"] .timeline-week {
    background: linear-gradient(135deg, var(--operational-primary) 0%, var(--operational-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--operational-rgb), 0.2);
}

.interactive-project-card[data-project="devsecops"] .step-number {
    background: linear-gradient(135deg, var(--operational-primary) 0%, var(--operational-secondary) 100%);
    box-shadow: 0 2px 8px rgba(var(--operational-rgb), 0.3);
}

.interactive-project-card[data-project="devsecops"] .content-panel.active {
    animation: slideInFromRight 0.6s ease-out;
}

/* Custom Animations for Each Card */
/* ========================================
   PROJECT SHOWCASE SYSTEM (CATEGORY SELECTOR + LARGE CARDS)
   ======================================== */

/* Category Selector Tabs */
.project-selector-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.category-selector-tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-base);
    min-width: 200px;
    box-shadow: var(--shadow-sm);
}

/* Category-specific selector tab hover effects */
.category-selector-tab[data-category="advisory"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--advisory-primary);
}

.category-selector-tab[data-category="specialty"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--specialty-primary);
}

.category-selector-tab[data-category="operational"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--operational-primary);
}

/* Fallback for non-categorized selector tabs */
.category-selector-tab:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}

.category-selector-tab.active {
    border-color: var(--accent-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.tab-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg);
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.category-selector-tab.active .tab-icon {
    background: var(--accent-color);
    color: white;
}

/* Category-specific tab selector styling */
.category-selector-tab[data-category="advisory"].active {
    border-color: var(--advisory-primary) !important;
}

.category-selector-tab[data-category="advisory"].active .tab-icon {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary)) !important;
}

.category-selector-tab[data-category="specialty"].active {
    border-color: var(--specialty-primary) !important;
}

.category-selector-tab[data-category="specialty"].active .tab-icon {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary)) !important;
}

.category-selector-tab[data-category="operational"].active {
    border-color: var(--operational-primary) !important;
}

.category-selector-tab[data-category="operational"].active .tab-icon {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary)) !important;
}

.tab-content {
    text-align: left;
}

.tab-title {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.tab-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Single Project Showcase Container */
.single-project-showcase {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Large Project Cards */
.large-project-card {
    display: none;
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fadeIn 0.6s ease-out;
}

.large-project-card.active {
    display: block;
}

.large-project-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    padding: var(--space-2xl);
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
}

.project-icon.advisory {
    color: var(--advisory-primary);
}

.project-icon.specialty {
    color: var(--specialty-primary);
}

.project-icon.operational {
    color: var(--operational-primary);
}

.project-header-content {
    flex: 1;
}

.large-project-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.project-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.project-stats {
    display: flex;
    gap: var(--space-lg);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-item i {
    color: var(--accent-color);
}

.large-project-body {
    padding: 0;
}

.project-navigation {
    display: flex;
    border-bottom: 2px solid var(--border-color-light);
    background: white;
    overflow-x: auto;
}

.project-navigation .nav-tab {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-xl);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 0;
    flex-shrink: 0;
}

.project-navigation .nav-tab:hover {
    background: var(--secondary-bg);
    color: var(--text-primary);
}

.project-navigation .nav-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background: var(--accent-light);
}

.project-content {
    padding: var(--space-2xl);
    min-height: 400px;
}

/* Category-specific colors for project category tags */
.project-category-tag.advisory {
    background: linear-gradient(135deg, var(--advisory-primary) 0%, var(--advisory-secondary) 100%);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    display: inline-block;
}

.project-category-tag.specialty {
    background: linear-gradient(135deg, var(--specialty-primary) 0%, var(--specialty-secondary) 100%);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    display: inline-block;
}

.project-category-tag.operational {
    background: linear-gradient(135deg, var(--operational-primary) 0%, var(--operational-secondary) 100%);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    display: inline-block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .project-selector-tabs {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }
    
    .category-selector-tab {
        min-width: 280px;
        justify-content: center;
        text-align: center;
    }
    
    .large-project-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-lg);
        padding: var(--space-xl);
    }
    
    .large-project-title {
        font-size: 1.75rem;
    }
    
    .project-stats {
        justify-content: center;
    }
    
    .project-navigation {
        flex-wrap: wrap;
    }
    
    .project-navigation .nav-tab {
        flex: 1;
        justify-content: center;
        min-width: 120px;
        padding: var(--space-md) var(--space-sm);
    }
    
    .project-content {
        padding: var(--space-xl);
    }
}

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

/* ========================================
   ENHANCED TIMELINE VISUALIZATION
   ======================================== */

.large-project-card .enhanced-timeline {
    position: relative;
    padding: var(--space-xl) 0;
}

.large-project-card .timeline-progress-bar {
    position: absolute;
    left: 60px;
    top: 80px;
    bottom: 80px;
    width: 3px;
    background: var(--border-color);
    border-radius: 2px;
}

.large-project-card .progress-line {
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--accent-color), var(--accent-secondary));
    border-radius: 2px;
    animation: progressGrow 2s ease-out;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes progressGrow {
    from { height: 0%; }
    to { height: 100%; }
}

.large-project-card .timeline-milestone {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    opacity: 0;
    transform: translateX(-30px);
    animation: milestoneSlideIn 0.6s ease-out forwards;
}

.large-project-card .timeline-milestone:nth-child(2) { animation-delay: 0.3s; }
.large-project-card .timeline-milestone:nth-child(3) { animation-delay: 0.6s; }
.large-project-card .timeline-milestone:nth-child(4) { animation-delay: 0.9s; }

@keyframes milestoneSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.milestone-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
    background: white;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    flex-shrink: 0;
    transition: var(--transition-base);
    cursor: pointer;
}

.milestone-marker:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

.milestone-icon {
    position: absolute;
    top: 12px;
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.milestone-number {
    position: absolute;
    bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition-base);
}

.milestone-content {
    flex: 1;
    padding-top: var(--space-xs);
}

/* Category-specific milestone-time colors */
.large-project-card[data-category="advisory"] .milestone-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--advisory-primary);
    margin-bottom: var(--space-xs);
}

.large-project-card[data-category="specialty"] .milestone-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--specialty-primary);
    margin-bottom: var(--space-xs);
}

.large-project-card[data-category="operational"] .milestone-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--operational-primary);
    margin-bottom: var(--space-xs);
}

/* Fallback for non-categorized milestone-time */
.milestone-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: var(--space-xs);
}

.milestone-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.milestone-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

/* Category-specific milestone-details border colors */
.large-project-card[data-category="advisory"] .milestone-details {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--secondary-bg);
    border-radius: 8px;
    border-left: 4px solid var(--advisory-primary);
}

.large-project-card[data-category="specialty"] .milestone-details {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--secondary-bg);
    border-radius: 8px;
    border-left: 4px solid var(--specialty-primary);
}

.large-project-card[data-category="operational"] .milestone-details {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--secondary-bg);
    border-radius: 8px;
    border-left: 4px solid var(--operational-primary);
}

/* Fallback for non-categorized milestone-details */
.milestone-details {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--secondary-bg);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.milestone-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.milestone-details li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.milestone-details li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 600;
}

/* Category-specific milestone marker colors */
.large-project-card .enhanced-timeline.advisory .milestone-marker {
    border-color: var(--advisory-primary);
}

.large-project-card .enhanced-timeline.advisory .milestone-marker:hover {
    border-color: var(--advisory-secondary);
    box-shadow: 0 8px 25px rgba(var(--advisory-rgb), 0.2);
}

.large-project-card .enhanced-timeline.advisory .milestone-marker:hover .milestone-icon {
    color: var(--advisory-primary);
    transform: scale(1.1);
}

.large-project-card .enhanced-timeline.advisory .milestone-marker:hover .milestone-number {
    color: var(--advisory-primary);
}

.large-project-card .enhanced-timeline.specialty .milestone-marker {
    border-color: var(--specialty-primary);
}

.large-project-card .enhanced-timeline.specialty .milestone-marker:hover {
    border-color: var(--specialty-secondary);
    box-shadow: 0 8px 25px rgba(var(--specialty-rgb), 0.2);
}

.large-project-card .enhanced-timeline.specialty .milestone-marker:hover .milestone-icon {
    color: var(--specialty-primary);
    transform: scale(1.1);
}

.large-project-card .enhanced-timeline.specialty .milestone-marker:hover .milestone-number {
    color: var(--specialty-primary);
}

.large-project-card .enhanced-timeline.operational .milestone-marker {
    border-color: var(--operational-primary);
}

.large-project-card .enhanced-timeline.operational .milestone-marker:hover {
    border-color: var(--operational-secondary);
    box-shadow: 0 8px 25px rgba(var(--operational-rgb), 0.2);
}

.large-project-card .enhanced-timeline.operational .milestone-marker:hover .milestone-icon {
    color: var(--operational-primary);
    transform: scale(1.1);
}

.large-project-card .enhanced-timeline.operational .milestone-marker:hover .milestone-number {
    color: var(--operational-primary);
}

/* Category-specific nav-tab styling for large project cards */
.large-project-card[data-category="advisory"] .nav-tab.active {
    background: var(--advisory-primary) !important;
    border-bottom-color: var(--advisory-primary) !important;
    color: white !important;
}

.large-project-card[data-category="advisory"] .nav-tab:hover {
    background: rgba(var(--advisory-rgb), 0.1) !important;
}

.large-project-card[data-category="specialty"] .nav-tab.active {
    background: var(--specialty-primary) !important;
    border-bottom-color: var(--specialty-primary) !important;
    color: white !important;
}

.large-project-card[data-category="specialty"] .nav-tab:hover {
    background: rgba(var(--specialty-rgb), 0.1) !important;
}

.large-project-card[data-category="operational"] .nav-tab.active {
    background: var(--operational-primary) !important;
    border-bottom-color: var(--operational-primary) !important;
    color: white !important;
}

.large-project-card[data-category="operational"] .nav-tab:hover {
    background: rgba(var(--operational-rgb), 0.1) !important;
}

/* Category-specific progress lines, arrows, and visual elements */
.large-project-card[data-category="advisory"] .progress-line {
    background: linear-gradient(to bottom, var(--advisory-primary), var(--advisory-secondary)) !important;
}

.large-project-card[data-category="specialty"] .progress-line {
    background: linear-gradient(to bottom, var(--specialty-primary), var(--specialty-secondary)) !important;
}

.large-project-card[data-category="operational"] .progress-line {
    background: linear-gradient(to bottom, var(--operational-primary), var(--operational-secondary)) !important;
}

/* Category-specific milestone numbers */
.large-project-card[data-category="advisory"] .milestone-number {
    color: var(--advisory-primary) !important;
}

.large-project-card[data-category="specialty"] .milestone-number {
    color: var(--specialty-primary) !important;
}

.large-project-card[data-category="operational"] .milestone-number {
    color: var(--operational-primary) !important;
}

/* Category-specific arrows and flow elements */
.large-project-card[data-category="advisory"] .pipeline-arrow {
    color: var(--advisory-primary) !important;
}

.large-project-card[data-category="specialty"] .pipeline-arrow {
    color: var(--specialty-primary) !important;
}

.large-project-card[data-category="operational"] .pipeline-arrow {
    color: var(--operational-primary) !important;
}

/* Category-specific outcome stats */
.large-project-card[data-category="advisory"] .outcome-number {
    background: linear-gradient(135deg, var(--advisory-primary), var(--advisory-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.large-project-card[data-category="specialty"] .outcome-number {
    background: linear-gradient(135deg, var(--specialty-primary), var(--specialty-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.large-project-card[data-category="operational"] .outcome-number {
    background: linear-gradient(135deg, var(--operational-primary), var(--operational-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Category-specific project item arrows */
.large-project-card[data-category="advisory"] .project-item:hover .fas.fa-arrow-right {
    color: var(--advisory-primary) !important;
}

.large-project-card[data-category="specialty"] .project-item:hover .fas.fa-arrow-right {
    color: var(--specialty-primary) !important;
}

.large-project-card[data-category="operational"] .project-item:hover .fas.fa-arrow-right {
    color: var(--operational-primary) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .timeline-progress-bar {
        left: 30px;
    }
    
    .milestone-marker {
        width: 60px;
        height: 60px;
    }
    
    .milestone-icon {
        font-size: 1.25rem;
        top: 8px;
    }
    
    .milestone-number {
        font-size: 0.625rem;
        bottom: 6px;
    }
    
    .timeline-milestone {
        gap: var(--space-lg);
    }
    
    /* Mobile adjustments */
    .milestone-details {
        margin-top: var(--space-sm);
        padding: var(--space-md);
    }
}

/* ========================================
   ENHANCED DELIVERABLES VISUALIZATION (SERVICES PAGE ONLY)
   ======================================== */

.large-project-card .enhanced-deliverables {
    padding: var(--space-lg) 0;
}

.large-project-card .deliverable-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.large-project-card .deliverable-preview {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

/* Category-specific deliverable preview hover colors */
.large-project-card[data-category="advisory"] .deliverable-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--advisory-primary);
}

.large-project-card[data-category="specialty"] .deliverable-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--specialty-primary);
}

.large-project-card[data-category="operational"] .deliverable-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--operational-primary);
}

/* Fallback for non-categorized deliverable previews */
.large-project-card .deliverable-preview:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-color);
}

.large-project-card .deliverable-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
    border-bottom: 1px solid var(--border-color);
}

.large-project-card .deliverable-icon.large {
    font-size: 2.5rem;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.large-project-card .deliverable-info h4 {
    margin: 0 0 var(--space-xs) 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.large-project-card .deliverable-meta {
    display: flex;
    gap: var(--space-md);
}

.large-project-card .deliverable-meta span {
    background: var(--accent-light);
    color: var(--accent-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.large-project-card .deliverable-content {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-xl);
}

.large-project-card .document-preview {
    flex-shrink: 0;
    width: 200px;
}

.large-project-card .document-page {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.large-project-card .document-page::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--border-color);
    border-radius: 8px;
    z-index: -1;
}

.large-project-card .doc-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.large-project-card .doc-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.large-project-card .doc-line {
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
}

.large-project-card .doc-line.long { width: 100%; }
.large-project-card .doc-line.medium { width: 75%; }
.large-project-card .doc-line.short { width: 50%; }

.large-project-card .document-chart {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.large-project-card .chart-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.large-project-card .risk-grid {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
}

.large-project-card .risk-item {
    width: 40px;
    height: 30px;
    border-radius: 4px;
}

.large-project-card .risk-item.high { background: var(--color-danger); }
.large-project-card .risk-item.medium { background: var(--color-warning); }
.large-project-card .risk-item.low { background: var(--color-success); }

/* Specialty Card Visualizations */
.large-project-card .tool-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    position: relative;
}

.large-project-card .tool-layer {
    height: 20px;
    border-radius: 4px;
}

.large-project-card .tool-layer.current {
    width: 100px;
    background: var(--color-danger);
}

.large-project-card .tool-layer.optimized {
    width: 40px;
    background: var(--color-success);
}

.large-project-card .tool-reduction {
    position: absolute;
    top: 50%;
    right: -20px;
    background: var(--color-success);
    color: white;
    padding: var(--space-xs);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.large-project-card .comparison-grid {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
}

.large-project-card .vendor-score {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

.large-project-card .vendor-score.high { background: var(--color-success); }
.large-project-card .vendor-score.medium { background: var(--color-warning); }
.large-project-card .vendor-score.low { background: var(--color-danger); }

/* Operational Card Visualizations */
.large-project-card .pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.large-project-card .pipeline-stage {
    background: var(--operational-primary);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.large-project-card .pipeline-arrow {
    color: var(--operational-primary);
    font-weight: 700;
}

.large-project-card .security-layer {
    text-align: center;
    font-size: 0.875rem;
    color: var(--operational-primary);
    font-weight: 600;
}

.large-project-card .metrics-dashboard {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
}

.large-project-card .dashboard-metric {
    padding: var(--space-xs);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    min-width: 40px;
    text-align: center;
}

.large-project-card .dashboard-metric.success { background: var(--color-success); }
.large-project-card .dashboard-metric.warning { background: var(--color-warning); }
.large-project-card .dashboard-metric.critical { background: var(--color-danger); }

.large-project-card .deliverable-details {
    flex: 1;
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
}

.large-project-card .detail-section {
    flex: 1;
}

.large-project-card .detail-section h5 {
    margin: 0 0 var(--space-sm) 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.large-project-card .detail-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.large-project-card .detail-section li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.large-project-card .detail-section li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 600;
}

.large-project-card .impact-metrics {
    flex-shrink: 0;
}

.large-project-card .metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--secondary-bg);
    border-radius: 12px;
    max-width: 150px;
}

.large-project-card .metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

.large-project-card .metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-xs);
}

/* Responsive Design */
@media (max-width: 768px) {
    .deliverable-content {
        flex-direction: column;
        gap: var(--space-lg);
    }
    
    .document-preview {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .deliverable-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }
    
    .deliverable-details {
        flex-direction: column;
        gap: var(--space-lg);
    }
    
    .impact-metrics {
        align-self: center;
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Enhanced Timeline Styling */
.timeline-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Timeline Item Hover Effects */
.timeline-item {
    transition: var(--transition-base);
    cursor: default;
}

.timeline-item:hover {
    transform: translateX(4px);
    background: var(--accent-alpha-100);
}

/* Enhanced Deliverable Items */
.deliverables-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Redesigned What's Included Section - Vertical Flow Pills */
.execution-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
}

.execution-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--secondary-bg);
    border-radius: 20px;
    transition: all var(--transition-smooth);
    position: relative;
    border: 2px solid transparent;
}

/* Arrow connector between steps */
.execution-step:not(:last-child)::after {
    content: '↓';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0.4;
    z-index: 1;
    transition: var(--transition-base);
}

.execution-step:hover:not(:last-child)::after {
    opacity: 0.8;
    animation: arrowBounce 0.8s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(2px);
    }
}

/* Hover effects - Category-specific border colors */
.large-project-card[data-category="advisory"] .execution-step:hover {
    transform: translateY(-4px);
    background: var(--primary-bg);
    border-color: var(--advisory-primary);
    box-shadow: var(--shadow-md);
}

.large-project-card[data-category="specialty"] .execution-step:hover {
    transform: translateY(-4px);
    background: var(--primary-bg);
    border-color: var(--specialty-primary);
    box-shadow: var(--shadow-md);
}

.large-project-card[data-category="operational"] .execution-step:hover {
    transform: translateY(-4px);
    background: var(--primary-bg);
    border-color: var(--operational-primary);
    box-shadow: var(--shadow-md);
}

/* Fallback for non-categorized execution steps */
.execution-step:hover {
    transform: translateY(-4px);
    background: var(--primary-bg);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-md);
}

.execution-step:hover .step-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* Emoji icon container */
.step-icon {
    font-size: 2rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-base);
}

.execution-step:hover .step-icon {
    transform: scale(1.2) rotate(-10deg);
}

.step-content {
    flex: 1;
    min-width: 0;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    font-size: 0.95rem;
    margin: 0;
    margin-bottom: 2px;
}

.step-subtitle {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.3;
}

/* Mobile adjustments for execution flow */
@media (max-width: 768px) {
    .execution-step {
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }
    
    .step-icon {
        font-size: 1.5rem;
        width: 35px;
        height: 35px;
    }
    
    .step-title {
        font-size: 0.9rem;
    }
    
    .step-subtitle {
        font-size: 0.8rem;
    }
}

/* Outcome Display Animation */
.outcome-display {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.outcome-stat {
    transition: var(--transition-base);
}

.outcome-stat:hover {
    transform: scale(1.05);
}

/* Mobile Adjustments for Interactive Cards */
@media (max-width: 768px) {
    .project-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tab {
        flex: none;
        min-width: 100px;
        padding: var(--space-sm);
    }
    
    .nav-tab span {
        font-size: 0.75rem;
    }
    
    .project-content {
        min-height: 220px;
        max-height: 280px;
        padding: 0;
    }
    
    .content-panel {
        padding: var(--space-md);
    }
    
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .timeline-week {
        align-self: flex-start;
    }
}

/* Project Outcome */
.project-outcome {
    text-align: center;
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-blue-light) 100%);
    border-radius: 16px;
    border: 2px solid transparent;
    background-clip: padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px; /* Flexible minimum */
}

.outcome-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.outcome-number {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.outcome-desc {
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

/* ========================================
   PRICING CLARITY CARDS - Transparent Pricing Section
   ======================================== */

.pricing-clarity-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px var(--color-black-alpha-04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.pricing-clarity-card .card-body {
    flex: 1; /* Take up remaining space after header */
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
}

.pricing-clarity-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--black-alpha-100);
}

.pricing-clarity-header {
    background: var(--secondary-bg);
    padding: var(--space-xl);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    min-height: 180px; /* Ensure consistent header height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pricing-icon-simple {
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md) auto;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px var(--accent-alpha-300);
}

.featured-icon {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
}

.pricing-plan-name {
    font-size: clamp(1.2rem, 3vw, 1.4rem); /* Responsive font size */
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.pricing-plan-desc {
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

/* Featured Pricing Special Styling */
.featured-pricing {
    border-color: var(--accent-secondary);
    transform: scale(1.05);
    box-shadow: 0 8px 32px var(--color-brand-navy-alpha-20);
}

.pricing-badge-featured {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    color: white;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px var(--color-brand-navy-alpha-30);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Pricing Amount Section */
.pricing-amount-section {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    border-bottom: 1px solid var(--border-color-light);
    margin-bottom: var(--space-lg);
}

.pricing-range {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.pricing-context {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Pricing Features */
.pricing-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex: 1; /* Take up remaining space */
    min-height: 240px; /* Ensure consistent height */
}

.pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm);
    transition: var(--transition-base);
    border-radius: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
}

.pricing-feature-item:hover {
    background: var(--hover-overlay);
    transform: translateX(4px);
}

.pricing-feature-item i {
    color: var(--accent-color);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
    min-width: 1.1rem;
}

.pricing-feature-item > div {
    min-width: 0;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.pricing-feature-item strong {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.pricing-feature-item small {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.3;
}

/* Pricing Guarantee */
.pricing-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--accent-light);
    border-radius: 12px;
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto; /* Push to bottom of card */
    height: 60px; /* Fixed height for alignment */
}

.featured-guarantee {
    background: linear-gradient(135deg, var(--accent-light), var(--accent-blue-light));
    color: var(--accent-secondary);
}

.pricing-guarantee i {
    font-size: 1rem;
}

/* Text overflow prevention for all cards */
.card, .card-body, .card-header {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    min-width: 0;
}

/* Ensure Bootstrap columns don't overflow */
.col-lg-4, .col-md-6, .col-sm-12 {
    min-width: 0;
    max-width: 100%;
}

/* Container-level text controls */
.container, .row {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Mobile Responsive for Project Showcase and Pricing */
@media (max-width: 768px) {
    .project-showcase-stats {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }
    
    .project-items-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm); /* Reduce gap on mobile */
    }
    
    .outcome-number {
        font-size: clamp(1.5rem, 8vw, 2rem); /* More responsive */
    }
    
    .pricing-range {
        font-size: clamp(1.2rem, 6vw, 1.6rem); /* More responsive */
    }
    
    .featured-pricing {
        transform: none;
        margin-bottom: var(--space-xl);
    }
    
    .project-showcase-card:hover {
        transform: translateY(-8px);
    }
    
    /* Reduce minimum heights on mobile for better fit */
    .project-showcase-header {
        min-height: 240px;
        padding: var(--space-md); /* Reduce padding */
    }
    
    .pricing-clarity-header {
        min-height: 150px;
        padding: var(--space-md); /* Reduce padding */
    }
    
    .service-category-card .card-body {
        min-height: 240px;
        padding: var(--space-md); /* Reduce padding */
    }
    
    .project-examples {
        min-height: 140px;
    }
    
    .pricing-features {
        min-height: 200px;
    }
    
    .project-outcome {
        min-height: 100px;
        padding: var(--space-md); /* Reduce padding */
    }
    
    .pricing-guarantee {
        height: auto;
        min-height: 50px;
        padding: var(--space-sm); /* Reduce padding */
    }
    
    /* Additional mobile text controls */
    .project-showcase-title {
        font-size: clamp(1rem, 5vw, 1.3rem);
    }
    
    .pricing-plan-name {
        font-size: clamp(1rem, 4vw, 1.2rem);
    }
    
    /* Ensure proper spacing on very small screens */
    .card-body {
        padding: var(--space-md);
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .project-showcase-title {
        font-size: clamp(0.9rem, 4vw, 1.1rem);
    }
    
    .pricing-plan-name {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
    
    .outcome-number {
        font-size: clamp(1.2rem, 6vw, 1.5rem);
    }
    
    .pricing-range {
        font-size: clamp(1rem, 5vw, 1.3rem);
    }
    
    .card-body {
        padding: var(--space-sm);
    }
    
    /* Adjust deliverable items for mobile */
    .deliverable-item {
        gap: var(--space-xs); /* Even smaller gap on mobile */
        padding: var(--space-sm) var(--space-md); /* Smaller padding on mobile */
    }
    
    .deliverable-icon {
        font-size: 1rem; /* Smaller icon on mobile */
        margin-top: 1px;
        line-height: 1;
        width: 1rem; /* Fixed width for mobile */
        max-width: 1rem;
    }
}

/* ========================================
   SCOPED CATEGORY COLOR OVERRIDES
   ======================================== */

/* Override accent colors within project showcase context only */
.single-project-showcase.showcase-advisory *:not([class*="specialty"]):not([class*="operational"]) {
    --accent-color: var(--advisory-primary) !important;
    --accent-secondary: var(--advisory-secondary) !important;
}

.single-project-showcase.showcase-specialty *:not([class*="advisory"]):not([class*="operational"]) {
    --accent-color: var(--specialty-primary) !important;
    --accent-secondary: var(--specialty-secondary) !important;
}

.single-project-showcase.showcase-operational *:not([class*="advisory"]):not([class*="specialty"]) {
    --accent-color: var(--operational-primary) !important;
    --accent-secondary: var(--operational-secondary) !important;
}

/* ========================================
   ENGAGEMENT TYPE BADGES
   ======================================== */

.engagement-type-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    border: 1px solid;
}

.engagement-type-badge.shift-left {
    background: var(--accent-alpha-100);
    color: var(--advisory-primary);
    border-color: var(--advisory-primary);
}

.engagement-type-badge.continuous-risk {
    background: var(--brand-alpha-100);
    color: var(--specialty-primary);
    border-color: var(--specialty-primary);
}

/* Operational uses purple but continuous-risk styling */
.timeline-carousel[data-category="operational"] .engagement-type-badge.continuous-risk {
    background: rgba(99, 102, 241, 0.1);
    color: var(--operational-primary);
    border-color: var(--operational-primary);
}

/* ========================================
   TIMELINE CAROUSEL CATEGORY COLORS
   ======================================== */

/* Advisory Category (Default - Green) */
.timeline-carousel[data-category="advisory"] .stat-item i {
    color: var(--advisory-primary);
}

.timeline-carousel[data-category="advisory"] .phase-icon i {
    color: white;
}

.timeline-carousel[data-category="advisory"] .indicator.active {
    background: var(--advisory-primary);
}

.timeline-carousel[data-category="advisory"] .timeline-card.active {
    border-color: var(--advisory-primary);
}

/* Specialty Category (Blue) */
.timeline-carousel[data-category="specialty"] .stat-item i {
    color: var(--specialty-primary);
}

.timeline-carousel[data-category="specialty"] .phase-icon i {
    color: white;
}

.timeline-carousel[data-category="specialty"] .indicator.active {
    background: var(--specialty-primary);
}

.timeline-carousel[data-category="specialty"] .timeline-card.active {
    border-color: var(--specialty-primary);
}

/* Operational Category (Purple) */
.timeline-carousel[data-category="operational"] .stat-item i {
    color: var(--operational-primary);
}

.timeline-carousel[data-category="operational"] .phase-icon i {
    color: white;
}

.timeline-carousel[data-category="operational"] .indicator.active {
    background: var(--operational-primary);
}

.timeline-carousel[data-category="operational"] .timeline-card.active {
    border-color: var(--operational-primary);
}

/* Navigation buttons category colors */
.timeline-carousel[data-category="advisory"] .nav-btn:hover {
    background: var(--accent-alpha-100);
    color: var(--advisory-primary);
    border-color: var(--advisory-primary);
}

.timeline-carousel[data-category="specialty"] .nav-btn:hover {
    background: var(--brand-alpha-100);
    color: var(--specialty-primary);
    border-color: var(--specialty-primary);
}

.timeline-carousel[data-category="operational"] .nav-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--operational-primary);
    border-color: var(--operational-primary);
}

/* Fix icon display issues - ensure icons show properly */
.timeline-carousel .stat-item i,
.timeline-carousel .phase-icon i {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 6 Pro";
    font-weight: 900;
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
}

/* Ensure specific icon characters display correctly */
.timeline-carousel .stat-item i.fas,
.timeline-carousel .phase-icon i.fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/* ========================================
   EXPERT PROFILE CAROUSEL STYLES
   ======================================== */

/* Expert Selection Tabs */
.expert-selector-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.expert-selector-tab {
    background: white;
    border: 2px solid var(--neutral-200);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 200px;
    text-align: left;
}

/* Individual tab hover colors */
.expert-selector-tab[data-expert="cloud-architect"]:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--accent-alpha-150);
}

.expert-selector-tab[data-expert="devsecops-lead"]:hover {
    border-color: var(--operational-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}

.expert-selector-tab[data-expert="security-architect"]:hover {
    border-color: var(--accent-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--color-brand-navy-alpha-20);
}

/* Individual tab colors when active - border only */
.expert-selector-tab[data-expert="cloud-architect"].active {
    border-color: var(--accent-color);
    border-width: 3px;
    background: white;
    color: inherit;
}

.expert-selector-tab[data-expert="devsecops-lead"].active {
    border-color: var(--operational-primary);
    border-width: 3px;
    background: white;
    color: inherit;
}

.expert-selector-tab[data-expert="security-architect"].active {
    border-color: var(--accent-secondary);
    border-width: 3px;
    background: white;
    color: inherit;
}

.expert-selector-tab .tab-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.expert-selector-tab.active .tab-icon {
    background: var(--color-white-alpha-10);
    color: inherit;
}

/* Individual tab icon colors when not active */
.expert-selector-tab[data-expert="cloud-architect"] .tab-icon {
    color: var(--accent-color);
}

.expert-selector-tab[data-expert="devsecops-lead"] .tab-icon {
    color: var(--operational-primary);
}

.expert-selector-tab[data-expert="security-architect"] .tab-icon {
    color: var(--accent-secondary);
}

.expert-selector-tab .tab-content {
    flex: 1;
}

.expert-selector-tab .tab-title {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.expert-selector-tab .tab-subtitle {
    display: block;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Expert-specific mobile touch feedback - higher specificity */
.expert-selector-tab:active {
    transform: scale(0.96) !important;
    transition: all 0.1s ease !important;
}

.expert-selector-tab[data-expert="cloud-architect"]:active {
    background-color: rgba(var(--advisory-rgb), 0.08) !important;
}

.expert-selector-tab[data-expert="devsecops-lead"]:active {
    background-color: rgba(var(--operational-rgb), 0.08) !important;
}

.expert-selector-tab[data-expert="security-architect"]:active {
    background-color: rgba(var(--specialty-rgb), 0.08) !important;
}

/* Fallback for other expert types */
.expert-selector-tab:not([data-expert]):active {
    background-color: var(--active-overlay) !important;
}

/* Expert Profile Showcase */
.expert-profile-showcase {
    position: relative;
    min-height: 900px;
    padding: var(--space-lg) 0;
}

.expert-profile {
    display: none;
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    border: 1px solid var(--neutral-200);
    box-shadow: 0 4px 20px var(--black-alpha-80);
    min-height: 800px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.expert-profile.active {
    display: block;
    animation: fadeInUp 0.6s ease-out;
}

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

/* Profile Header */
.profile-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
}

.expertise-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.expertise-badge.cloud-security {
    background: var(--accent-color);
    color: white;
}

.expertise-badge.devsecops {
    background: var(--operational-primary);
    color: white;
}

.expertise-badge.security-architecture {
    background: var(--accent-secondary);
    color: white;
}

.profile-title {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.profile-title .emphasis {
    font-weight: 600;
}

.profile-description {
    font-size: 1.1rem;
    color: var(--neutral-600);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* Profile Stats */
.profile-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.profile-stats .stat-item {
    text-align: center;
}

.profile-stats .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--accent-color);
    line-height: 1;
}

.profile-stats .stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Profile Details */
.profile-photo {
    text-align: center;
    margin-bottom: 2rem;
}

.location-badge {
    background: var(--neutral-100);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--neutral-600);
    display: inline-flex;
    align-items: center;
}

.profile-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.experience-list .experience-item {
    margin-bottom: 0.75rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent-color);
    color: var(--neutral-600);
    line-height: 1.5;
}

/* Expert-specific experience item border colors */
.expert-profile[data-expert="cloud-architect"] .experience-item {
    border-left-color: var(--accent-color);
}

.expert-profile[data-expert="devsecops-lead"] .experience-item {
    border-left-color: var(--operational-primary);
}

.expert-profile[data-expert="security-architect"] .experience-item {
    border-left-color: var(--accent-secondary);
}

.specialty-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.specialty-tag {
    background: var(--neutral-100);
    color: var(--accent-color);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--accent-alpha-200);
}

/* Consistent neutral color for specialty tags across all profiles */
.expert-profile .specialty-tag {
    color: var(--neutral-600);
    border: 1px solid rgba(102, 102, 102, 0.2);
}

.cost-comparison-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cost-item.us-cost {
    color: var(--neutral-600);
    font-size: 0.95rem;
}

.cost-savings {
    background: var(--accent-color);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Consistent neutral color for all profile content */
.expert-profile .text-primary {
    color: var(--color-neutral-600) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .expert-selector-tabs {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .expert-selector-tab {
        min-width: auto;
        padding: 1.25rem 1.5rem;
    }
    
    .expert-profile {
        padding: 1.5rem;
    }
    
    .profile-header {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
    
    .profile-stats {
        gap: 1.5rem;
    }
    
    .profile-stats .stat-value {
        font-size: 1.5rem;
    }
    
    .cost-comparison-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .specialty-tags .specialty-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

/* ======================================================================
   Cost Comparison Story - Clean AngelList Style
   ====================================================================== */

.cost-comparison-story {
    padding: var(--space-lg) 0;
}

/* Cost Sections */
.cost-section {
    padding: var(--space-sm) 0;
    position: relative;
}

.cost-section:nth-child(even) {
    background: var(--secondary-bg);
}

/* Sticky Content (AngelList pb-7 sm:sticky sm:top-20 style) */
.sticky-content {
    position: relative;
    padding-bottom: var(--space-sm);
}

@media (min-width: 768px) {
    .sticky-content {
        position: sticky;
        top: var(--space-xl);
        padding-bottom: var(--space-md);
    }
}

/* Cost Content */
.cost-content {
    max-width: 500px;
}

/* Cost Badges - Clean and Simple */
.cost-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
}

.cost-badge.problem {
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
    border: 1px solid rgba(var(--color-danger-rgb), 0.2);
}

.cost-badge.warning {
    background: rgba(var(--color-warning-rgb), 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(var(--color-warning-rgb), 0.2);
}

.cost-badge.solution {
    background: var(--accent-alpha-100);
    color: var(--accent-color);
    border: 1px solid var(--accent-alpha-200);
}

/* Typography - Clean and Modern */
.cost-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    line-height: 1.2;
}

.cost-subtitle {
    font-size: 1.2rem;
    color: var(--neutral-600);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

/* Cost Breakdown - Simple List */
.cost-breakdown {
    background: white;
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: var(--space-xl) 0;
}

.cost-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid #f0f0f0;
}

.cost-line:last-child {
    border-bottom: none;
}

.cost-line.total-line {
    border-top: 2px solid #e0e0e0;
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
}

.cost-amount {
    font-weight: 600;
    color: var(--neutral-700);
}

.cost-amount.total {
    color: var(--color-danger);
    font-size: 1.2rem;
}

.cost-insight {
    color: var(--neutral-600);
    line-height: 1.6;
    margin-top: var(--space-lg);
}

/* Cost Facts - Simple Stats */
.cost-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.fact-item {
    text-align: center;
}

.fact-stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.fact-label {
    font-size: 0.9rem;
    color: var(--neutral-600);
    line-height: 1.3;
}

/* Cost Quote - Simple Testimonial */
.cost-quote {
    background: var(--white-alpha-800);
    padding: var(--space-lg);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 4px 4px 0;
    margin: var(--space-xl) 0;
    font-style: italic;
    line-height: 1.6;
}

.cost-quote cite {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--neutral-600);
    font-style: normal;
}

/* Solution Highlights - Clean Feature List */
.solution-highlights {
    margin: var(--space-xl) 0;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.highlight-item i {
    width: 40px;
    height: 40px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.highlight-item strong {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.highlight-item small {
    display: block;
    color: var(--neutral-600);
    font-size: 0.9rem;
}

/* Solution Price - Prominent Display */
.solution-price {
    background: white;
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    margin: var(--space-xl) 0;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-xs);
}

.price-label {
    font-size: 1rem;
    color: var(--neutral-600);
    margin-bottom: var(--space-sm);
}

.savings-highlight {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Cost Visual - Simple Graphics Container */
.cost-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

/* Stock-style Rising Cost Chart - Traditional Hiring Cost */
.cost-graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    padding: var(--space-xl) 0;
    position: relative;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cost-graph.animate {
    transform: translateX(0);
    opacity: 1;
}

/* CSS Parallax Rising Cost Chart Container - Wide Format */
.cost-chart-container {
    background: white;
    border-radius: 20px;
    padding: var(--space-xl);
    border: 1px solid rgba(231, 76, 60, 0.15);
    width: 100%;
    max-width: 600px;
    height: 280px;
    margin: var(--space-sm) 0;
    position: relative;
    box-shadow: 0 12px 32px var(--black-alpha-100);
    overflow: hidden;
}

/* SVG Chart styling */
.cost-chart-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.chart-grid {
    opacity: 0;
    transition: opacity 1s ease;
}

.chart-grid.animate {
    opacity: 1;
}

.chart-fade-overlay {
    opacity: 0;
    transition: opacity 2s ease;
}

.chart-fade-overlay.animate {
    opacity: 1;
}

.cost-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 1px 3px rgba(231, 76, 60, 0.3));
}

.cost-line.animate {
    stroke-dashoffset: 0;
}

.cost-point-svg {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    filter: drop-shadow(0 1px 3px rgba(255, 107, 53, 0.4));
}

.cost-point-svg.animate {
    opacity: 1;
}

.cost-point-svg.stable {
    animation: none;
    transform: scale(1);
}

.point-pulse.animate {
    opacity: 1;
}

.point-pulse.stable {
    animation: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
}

/* CSS overlay points for pulse effects */
.cost-point {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, 50%);
}

.point-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(255, 107, 53, 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.point-pulse.animate {
    opacity: 1;
    animation: costPointPulse 3s ease-in-out infinite;
}

@keyframes costPointPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0.1;
    }
}

@keyframes costDotPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Responsive sizing */
@media (max-width: 768px) {
    .cost-graph {
        max-width: 420px;
    }
    
    .stock-chart {
        height: 250px;
        padding: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .stock-chart {
        height: 220px;
        padding: var(--space-md);
    }
}

/* Simple statement for traditional hiring section */
.simple-statement {
    margin: var(--space-md) 0;
}

.simple-statement p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--neutral-700);
    margin: 0;
}

/* Prominent NYC-Style Skyline - Consulting Firms */
.consulting-skyline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 520px;
    padding: var(--space-sm) 0;
    position: relative;
}

.skyline-container {
    background: var(--color-white-alpha-10);
    border-radius: 20px;
    padding: var(--space-md);
    border: 1px solid rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 280px;
    margin: var(--space-sm) 0;
    position: relative;
    box-shadow: 0 12px 32px var(--black-alpha-100);
}

.consulting-building {
    position: relative;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(300px);
    opacity: 0;
    box-shadow: 0 8px 20px var(--black-alpha-150);
}

.consulting-building.animate {
    transform: translateY(0);
    opacity: 1;
}

/* Building 1 - Art Deco Style (Left, Outer - Taller) */
.building-1 {
    width: 48px;
    height: 240px;
    background: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-navy-hover));
    clip-path: polygon(0 100%, 0 25%, 20% 20%, 20% 15%, 80% 15%, 80% 20%, 100% 25%, 100% 100%);
    animation-delay: 0.1s;
    z-index: 3;
    margin-right: -12px;
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.35);
}

/* Building 2 - Modern Glass Tower (Left-Center - Shorter) */
.building-2 {
    width: 42px;
    height: 160px;
    background: linear-gradient(135deg, var(--color-brand-cyan), var(--color-brand-cyan-hover));
    border-radius: 0 0 0 0;
    animation-delay: 0.3s;
    z-index: 4;
    margin-right: -15px;
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.3);
}

/* Building 5 - Tallest with Sharp Spire (CENTER - Empire State Style - Background) */
.building-5.tallest {
    width: 50px;
    height: 320px;
    background: linear-gradient(135deg, var(--color-brand-navy-hover), var(--color-brand-navy));
    clip-path: polygon(0 100%, 0 35%, 15% 30%, 15% 20%, 25% 15%, 25% 8%, 35% 5%, 50% 0%, 65% 5%, 75% 8%, 75% 15%, 85% 20%, 85% 30%, 100% 35%, 100% 100%);
    animation-delay: 1.2s;
    z-index: 1;
    margin-right: -15px;
    box-shadow: 0 25px 50px rgba(30, 64, 175, 0.5);
    opacity: 0.85;
}

/* Building 4 - Pointed Top (Right-Center - Shorter) */
.building-4 {
    width: 38px;
    height: 155px;
    background: linear-gradient(135deg, var(--color-brand-cyan), var(--color-brand-cyan-active));
    clip-path: polygon(0 100%, 0 20%, 50% 0%, 100% 20%, 100% 100%);
    animation-delay: 0.7s;
    z-index: 2;
    margin-right: -8px;
    box-shadow: 0 12px 30px rgba(96, 165, 250, 0.3);
}

/* Building 3 - Classic Stepped (Right, Outer - Tallest) */
.building-3 {
    width: 52px;
    height: 270px;
    background: linear-gradient(135deg, var(--color-brand-cyan-active), var(--color-brand-cyan));
    clip-path: polygon(0 100%, 0 60%, 15% 60%, 15% 40%, 85% 40%, 85% 60%, 100% 60%, 100% 100%);
    animation-delay: 0.5s;
    z-index: 3;
    box-shadow: 0 22px 45px rgba(59, 130, 246, 0.4);
}

/* Window patterns using pseudo-elements */
.consulting-building::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    right: 15%;
    bottom: 5%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 12px,
        var(--white-alpha-200) 12px,
        var(--white-alpha-200) 14px
    ),
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,0.15) 6px,
        rgba(255,255,255,0.15) 7px
    );
    opacity: 0.8;
}

/* Corporate building lights/windows effect */
.consulting-building::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 18%;
    right: 18%;
    bottom: 12%;
    background: 
        radial-gradient(circle at 25% 20%, rgba(251, 191, 36, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 75% 25%, rgba(251, 191, 36, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 30% 65%, rgba(251, 191, 36, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 70% 75%, rgba(251, 191, 36, 0.4) 2px, transparent 3px),
        radial-gradient(circle at 45% 85%, rgba(251, 191, 36, 0.4) 2px, transparent 3px);
    background-size: 100% 100%;
    animation: corporateLights 4s ease-in-out infinite alternate;
}

@keyframes corporateLights {
    0% { opacity: 0.7; }
    50% { opacity: 0.9; }
    100% { opacity: 0.8; }
}

/* Responsive sizing for prominent NYC skyline with dramatic heights */
@media (max-width: 768px) {
    .consulting-skyline {
        max-width: 420px;
    }
    
    .skyline-container {
        height: 340px;
        padding: var(--space-lg);
    }
    
    .building-1 { width: 40px; height: 180px; margin-right: -10px; }
    .building-2 { width: 35px; height: 120px; margin-right: -12px; }
    .building-5.tallest { width: 42px; height: 220px; margin-right: -12px; }
    .building-4 { width: 32px; height: 115px; margin-right: -6px; }
    .building-3 { width: 44px; height: 200px; }
}

@media (max-width: 480px) {
    .consulting-skyline {
        max-width: 360px;
    }
    
    .skyline-container {
        height: 280px;
        padding: var(--space-md);
    }
    
    .building-1 { width: 34px; height: 150px; margin-right: -8px; }
    .building-2 { width: 30px; height: 100px; margin-right: -10px; }
    .building-5.tallest { width: 36px; height: 190px; margin-right: -10px; }
    .building-4 { width: 28px; height: 95px; margin-right: -5px; }
    .building-3 { width: 38px; height: 165px; }
}

@keyframes fadeInValue {
    to {
        opacity: 1;
    }
}

/* eXsecute Logo SVG Assembly Animation */
.logo-assembly-parallax {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    padding: var(--space-xl) 0;
    position: relative;
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo-assembly-parallax.animate {
    transform: translateX(0);
    opacity: 1;
}

.logo-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    margin: var(--space-sm) 0;
    position: relative;
    overflow: visible;
}

.logo-assembly-svg {
    width: 240px;
    height: 240px;
    position: relative;
    overflow: visible;
}

.logo-green-part {
    transform: translateX(400px) scale(0.8) rotate(157.4deg);
    transform-origin: 111.37115px 86.573694px;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 4px 12px var(--accent-alpha-300));
}

.logo-green-part.animate {
    transform: translateX(0) scale(1) rotate(157.4deg);
    opacity: 1;
}

.logo-blue-part {
    transform: translateX(-400px) scale(0.8);
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 4px 12px var(--color-brand-navy-alpha-30));
}

.logo-blue-part.animate {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.logo-assembly-svg.completed .logo-green-part,
.logo-assembly-svg.completed .logo-blue-part {
    filter: drop-shadow(0 6px 20px var(--black-alpha-150));
}

/* ========================================================================
   4-PART LOGO SEQUENTIAL ANIMATION (LEFT TO RIGHT)
   ======================================================================== */

/* Container for the logo merge animation */
.logo-merge-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    position: relative;
    min-height: 450px;
}

.logo-merge-container {
    position: relative;
    width: 60%;
    max-width: 350px;
    height: 350px;
}

/* Individual logo parts - all positioned at same center point */
.logo-part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform-origin: center center;
    opacity: 0;
    /* Cross-browser compatibility */
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
}

.logo-part-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Prevent image dragging on mobile */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    /* Prevent tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Starting positions - each part comes from the left in sequence */
.logo-part-1,
.logo-part-2,
.logo-part-3,
.logo-part-4 {
    /* All start from left, off-screen */
    transform: translateX(-150%) scale(0.8);
    -webkit-transform: translateX(-150%) scale(0.8);
    filter: drop-shadow(0 8px 24px rgba(16, 185, 129, 0.3));
    -webkit-filter: drop-shadow(0 8px 24px rgba(16, 185, 129, 0.3));
}

/* Animated state - sequential left-to-right reveal */
.logo-merge-container.active .logo-part-1 {
    animation: slideInFromLeft 0.6s ease-out forwards;
    -webkit-animation: slideInFromLeft 0.6s ease-out forwards;
}

.logo-merge-container.active .logo-part-2 {
    animation: slideInFromLeft 0.6s ease-out 0.15s forwards;
    -webkit-animation: slideInFromLeft 0.6s ease-out 0.15s forwards;
}

.logo-merge-container.active .logo-part-3 {
    animation: slideInFromLeft 0.6s ease-out 0.3s forwards;
    -webkit-animation: slideInFromLeft 0.6s ease-out 0.3s forwards;
}

.logo-merge-container.active .logo-part-4 {
    animation: slideInFromLeft 0.6s ease-out 0.45s forwards;
    -webkit-animation: slideInFromLeft 0.6s ease-out 0.45s forwards;
}

/* Keyframe animation - slide in from left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-150%) scale(0.8);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.2));
    }
}

@-webkit-keyframes slideInFromLeft {
    0% {
        -webkit-transform: translateX(-150%) scale(0.8);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0) scale(1);
        opacity: 1;
        -webkit-filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.2));
    }
}

/* Tablet responsive adjustments */
@media (max-width: 992px) {
    .logo-merge-animation {
        max-width: 500px;
        min-height: 350px;
        padding: var(--space-xl) var(--space-md);
    }

    .logo-merge-container {
        width: 60%;
        max-width: 300px;
        height: 300px;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .logo-merge-animation {
        max-width: 100%;
        min-height: 300px;
        padding: var(--space-lg) var(--space-sm);
    }

    .logo-merge-container {
        width: 70%;
        max-width: 260px;
        height: 260px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .logo-merge-animation {
        min-height: 280px;
        padding: var(--space-md) var(--space-xs);
    }

    .logo-merge-container {
        width: 80%;
        max-width: 220px;
        height: 220px;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .logo-merge-container.active .logo-part-1,
    .logo-merge-container.active .logo-part-2,
    .logo-merge-container.active .logo-part-3,
    .logo-merge-container.active .logo-part-4 {
        animation: none;
        -webkit-animation: none;
        transform: translateX(0) scale(1);
        -webkit-transform: translateX(0) scale(1);
        opacity: 1;
        transition: opacity 0.3s ease;
    }
}

.logo-left-part {
    left: -150px;
    color: var(--accent-color);
    background: linear-gradient(135deg, var(--accent-alpha-100), var(--accent-alpha-50));
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    border: 2px solid var(--accent-alpha-200);
    box-shadow: 0 8px 24px var(--accent-alpha-150);
}

.logo-right-part {
    right: -150px;
    color: var(--accent-secondary);
    background: linear-gradient(135deg, var(--brand-alpha-100), var(--color-brand-navy-alpha-10));
    border-radius: 12px;
    padding: var(--space-lg) var(--space-xl);
    border: 2px solid var(--brand-alpha-200);
    box-shadow: 0 8px 24px var(--color-brand-navy-alpha-20);
}

.logo-part.animate {
    opacity: 1;
}

.logo-left-part.animate {
    left: 20px;
}

.logo-right-part.animate {
    right: 20px;
}

.assembled-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: var(--neutral-700);
    opacity: 0;
    animation: fadeInAssembled 0.8s ease-out 2s forwards;
    text-shadow: 0 2px 8px var(--black-alpha-100);
}

.savings-indicator {
    background: rgba(40, 167, 69, 0.1);
    color: var(--accent-color);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(40, 167, 69, 0.2);
    opacity: 0;
    animation: fadeInValue 1s ease-out 2.5s forwards;
    margin-top: var(--space-lg);
}

.assembly-label {
    font-size: 1rem;
    color: var(--neutral-600);
    text-align: center;
    margin-top: var(--space-lg);
    font-weight: 500;
    opacity: 0;
    animation: fadeInLabel 0.8s ease-out 2.8s forwards;
}

@keyframes fadeInAssembled {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Responsive adjustments for OLD logo assembly animation (not in use) */
@media (max-width: 768px) {
    .logo-assembly-container {
        width: 240px;
        height: 100px;
    }

    .logo-old-part {
        font-size: 2rem;
        height: 60px;
        padding: var(--space-md) var(--space-lg);
    }

    .assembled-logo {
        font-size: 2.2rem;
    }

    .logo-left-part.animate {
        left: 10px;
    }

    .logo-right-part.animate {
        right: 10px;
    }
}

.breakdown-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.breakdown-bars {
    margin-bottom: var(--space-lg);
}

.breakdown-bar {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
    position: relative;
}

.breakdown-bar:last-child {
    margin-bottom: 0;
}

.bar-label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--neutral-700);
    font-weight: 500;
    margin-right: var(--space-sm);
}

.bar-percentage {
    font-weight: 600;
    color: var(--neutral-700);
    min-width: 40px;
    text-align: right;
    margin-right: var(--space-sm);
}

.bar-visual {
    height: 8px;
    background: var(--color-neutral-200);
    border-radius: 4px;
    position: relative;
    min-width: 100px;
    overflow: hidden;
}

.bar-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--width, 0%);
    background: var(--color, #ccc);
    border-radius: 4px;
    transition: width 1s ease-out;
    animation: expandBar 1.5s ease-out forwards;
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes expandBar {
    to {
        transform: scaleX(1);
    }
}

.breakdown-bar.overhead .bar-visual::after {
    --color: linear-gradient(90deg, var(--color-warning), var(--color-warning-hover));
}

.breakdown-bar.management .bar-visual::after {
    --color: linear-gradient(90deg, var(--color-brand-cyan), var(--color-brand-cyan-hover));
}

.breakdown-bar.junior .bar-visual::after {
    --color: linear-gradient(90deg, var(--color-danger), var(--color-danger-hover));
}

.breakdown-bar.junior .bar-visual.highlighted::after {
    --color: linear-gradient(90deg, var(--color-danger), var(--color-danger-hover));
    box-shadow: 0 0 10px var(--color-danger-alpha-30);
}

.breakdown-insight {
    text-align: center;
    color: var(--color-danger);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Cost Comparison Simple - Clean Bar Chart */
.cost-comparison-simple {
    background: white;
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
}

.comparison-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.comparison-bars {
    margin-bottom: var(--space-lg);
}

.comparison-item {
    margin-bottom: var(--space-lg);
}

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

.item-label {
    font-size: 0.9rem;
    color: var(--neutral-700);
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.item-bar {
    position: relative;
    height: 40px;
    background: var(--color-bg-overlay);
    border-radius: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: all 1s ease-out;
    animation: growWidth 1.5s ease-out forwards;
    transform: scaleX(0);
    transform-origin: left;
}

@keyframes growWidth {
    to {
        transform: scaleX(1);
    }
}

.comparison-item.traditional .bar-fill {
    background: linear-gradient(90deg, var(--color-danger), var(--color-danger-hover));
}

.comparison-item.consulting .bar-fill {
    background: linear-gradient(90deg, var(--color-warning), var(--color-warning-hover));
}

.comparison-item.exsecute .bar-fill.highlighted {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3);
}

.bar-amount {
    position: absolute;
    right: var(--space-md);
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.savings-callout {
    text-align: center;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 991px) {
    .cost-title {
        font-size: 2rem;
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
    
    .cost-facts {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: var(--space-md);
    }
    
    .sticky-content {
        position: relative;
        padding-bottom: var(--space-sm);
    }
}

@media (max-width: 767px) {
    .cost-section {
        padding: var(--space-md) 0;
    }
    
    .cost-title {
        font-size: 1.8rem;
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .total-amount {
        font-size: 2rem;
    }
    
    .cost-visual {
        min-height: 280px;
    }
    
    .cost-buildup-animation,
    .consulting-breakdown,
    .cost-comparison-simple {
        max-width: 100%;
    }
}

/* ========================================

/* ========================================
   NOTIFICATION TOAST STYLES
   ======================================== */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 500px;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease-out;
    font-size: 0.95rem;
    line-height: 1.5;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Notification type styles matching Bootstrap alerts */
.notification.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-left: 4px solid #198754;
}

.notification.alert-danger,
.notification.alert-error {
    background-color: #f8d7da;
    color: #842029;
    border-left: 4px solid #dc3545;
}

.notification.alert-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-left: 4px solid #ffc107;
}

.notification.alert-info {
    background-color: #cff4fc;
    color: #055160;
    border-left: 4px solid #0dcaf0;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .notification {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .notification.show {
        transform: translateY(0);
    }
    
    .notification {
        transform: translateY(-100px);
    }
}

/* ========================================
   FLASH MESSAGES (Global)
   ======================================== */

.flash-messages {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 500px;
    min-width: 300px;
}

.flash-messages .alert {
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

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

/* Mobile responsive */
@media (max-width: 576px) {
    .flash-messages {
        top: 70px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}