/**
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║              CONNECT21 GLOBAL DESIGN SYSTEM                            ║
 * ║              Single Source of Truth for All Styling                   ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 * 
 * Based on: index.html design patterns
 * Purpose: Unified look and feel across entire website
 * 
 * USAGE:
 * Include this file in every page AFTER Tailwind CSS:
 * <link rel="stylesheet" href="css/global-design-system.css">
 * 
 * This file defines:
 * - Typography (headings, paragraphs, font sizes)
 * - Color system and theme
 * - Spacing and layout
 * - Component styles (cards, buttons, badges)
 * - Icons and visual elements
 * - Responsive design patterns
 * - Dark mode support
 */

/* ========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================================================== */

:root {
    /* Color Palette */
    --c21-vibrant-blue: #0085CA;
    --c21-deep-blue: #003DA5;
    --c21-digital-orange: #FF8200;
    --c21-navy: #002D72;
    --c21-burnt-orange: #C75B12;
    
    /* Light Mode */
    --c21-bg: #F8F8F8;
    --c21-bg-secondary: #EBEBEB;
    --c21-surface: #FFFFFF;
    --c21-text-primary: #07203F;
    --c21-text-secondary: #4A5568;
    --c21-text-tertiary: #718096;
    --c21-border: #E2E8F0;
    
    /* Dark Mode */
    --c21-dark-bg: #0A0F1C;
    --c21-dark-bg-secondary: #121826;
    --c21-dark-surface: #1A2332;
    --c21-dark-border: #2D3748;
    
    /* Typography - Brand Fonts */
    --font-primary: 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', 'Courier', monospace;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    --text-8xl: 6rem;        /* 96px */
    
    /* Spacing Scale */
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode color overrides */
.dark {
    --c21-bg: var(--c21-dark-bg);
    --c21-bg-secondary: var(--c21-dark-bg-secondary);
    --c21-surface: var(--c21-dark-surface);
    --c21-border: var(--c21-dark-border);
    --c21-text-primary: #FFFFFF;
    --c21-text-secondary: #E5E7EB;
    --c21-text-tertiary: #9CA3AF;
}

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

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--c21-text-primary);
    background-color: var(--c21-bg);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* RTL Support - Prevent layout jumping */
html[dir="rtl"] {
    overflow-x: hidden;
}

html[dir="rtl"] body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* ========================================================================
   TYPOGRAPHY SYSTEM
   ======================================================================== */

/* Heading Styles - Override Tailwind */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-black) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: var(--c21-text-primary) !important;
    margin-bottom: var(--space-6) !important;
}

/* Dark mode headings need light text */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: #F1F5F9 !important; /* Light gray/white for dark backgrounds */
}

h1 {
    font-size: var(--text-5xl) !important;
    font-weight: var(--font-weight-black) !important;
}

h2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-extrabold);
}

h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
}

h4 {
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
}

h5 {
    font-size: var(--text-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
}

h6 {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Responsive heading sizes */
@media (min-width: 640px) {
    h1 { font-size: var(--text-6xl); }
    h2 { font-size: var(--text-5xl); }
}

@media (min-width: 1024px) {
    h1 { font-size: var(--text-7xl); }
    h2 { font-size: var(--text-6xl); }
    h3 { font-size: var(--text-4xl); }
}

@media (min-width: 1536px) {
    h1 { font-size: var(--text-8xl); }
}

/* Paragraph and Text - Override Tailwind */
p {
    margin-bottom: var(--space-4) !important;
    line-height: 1.7 !important;
    color: var(--c21-text-secondary) !important;
}

/* Dark mode paragraphs need lighter text */
.dark p {
    color: #D1D5DB !important; /* Light gray for dark backgrounds */
}

/* White text paragraphs (for dark backgrounds) */
p.text-white,
p.text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* REMOVED: section.bg-gradient-to-r and section.bg-gradient-to-br rules
 * These were making ALL paragraphs white inside gradient sections,
 * including light gradient sections with white cards where text should be dark.
 * Now only specific dark gradient sections (from-c21-*) get white text.
 */

.lead-text {
    font-size: var(--text-xl) !important;
    line-height: 1.8 !important;
    color: var(--c21-text-secondary) !important;
}

.subtitle {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--c21-digital-orange) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4) !important;
}

.small-text {
    font-size: var(--text-sm) !important;
    color: var(--c21-text-tertiary) !important;
}

/* Links */
a {
    color: var(--c21-vibrant-blue) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

a:hover {
    color: var(--c21-deep-blue) !important;
}

/* Exception: Button-styled links should keep their specified text colors */
a.bg-c21-vibrant-blue,
a.bg-c21-deep-blue,
a.bg-c21-digital-orange,
a.bg-c21-navy,
a[class*="bg-c21-"][class*="text-white"],
a.inline-flex[class*="bg-c21-"],
button a,
.btn,
a.btn {
    color: white !important;
}

a.bg-c21-vibrant-blue:hover,
a.bg-c21-deep-blue:hover,
a.bg-c21-digital-orange:hover,
a.bg-c21-navy:hover {
    color: white !important;
}

/* Exception: Outline buttons and bordered buttons keep their color classes */
a.bg-white[class*="text-c21-"],
a.bg-white.text-c21-vibrant-blue,
a[class*="border-2"][class*="text-c21-"],
a.rounded-full[class*="text-c21-"],
button.bg-white[class*="text-c21-"] {
    color: var(--c21-vibrant-blue) !important;
}

a.bg-white[class*="text-c21-"]:hover,
a.bg-white.text-c21-vibrant-blue:hover {
    color: white !important;
    background-color: var(--c21-vibrant-blue) !important;
}

/* Exception: Links in CTA sections should be white */
section[class*="bg-gradient-to"] a {
    color: white !important;
}

section[class*="bg-gradient-to"] a.bg-white {
    color: var(--c21-vibrant-blue) !important;
}

/* ========================================================================
   BUTTON SYSTEM
   ======================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-xl);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
    background: linear-gradient(135deg, var(--c21-vibrant-blue), var(--c21-deep-blue));
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--c21-digital-orange);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-secondary:hover {
    background: var(--c21-burnt-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    border-color: var(--c21-vibrant-blue);
    color: var(--c21-vibrant-blue);
}

.btn-outline:hover {
    background: var(--c21-vibrant-blue);
    color: white;
}

.btn-ghost {
    background: rgba(0, 133, 202, 0.1);
    color: var(--c21-vibrant-blue);
}

.btn-ghost:hover {
    background: rgba(0, 133, 202, 0.2);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}

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

.card {
    background: var(--c21-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--c21-text-primary);
    margin-bottom: var(--space-4);
}

.card-description {
    font-size: var(--text-base);
    color: var(--c21-text-secondary);
    line-height: 1.7;
}

/* ========================================================================
   BADGE SYSTEM
   ======================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.badge-primary {
    background: rgba(0, 133, 202, 0.1);
    color: var(--c21-vibrant-blue);
}

.badge-success {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

.badge-warning {
    background: rgba(255, 130, 0, 0.1);
    color: var(--c21-digital-orange);
}

.badge-info {
    background: rgba(0, 212, 255, 0.1);
    color: #00D4FF;
}

/* ========================================================================
   ICON SYSTEM
   ======================================================================== */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon-xl {
    width: 3rem;
    height: 3rem;
}

/* Icon containers */
.icon-circle {
    border-radius: var(--radius-full);
    padding: var(--space-4);
    background: rgba(0, 133, 202, 0.1);
}

.icon-square {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: rgba(0, 133, 202, 0.1);
}

/* Lucide icon styling */
.lucide {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2;
}

/* Font Awesome icon styling */
.fa, .fas, .far, .fal, .fab {
    font-size: 1.5rem;
}

/* Replace emoji/text icons with proper icons */
.feature-icon,
.stat-icon,
.service-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 133, 202, 0.1), rgba(0, 61, 165, 0.1));
    border-radius: var(--radius-xl);
    color: var(--c21-vibrant-blue);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}

/* ========================================================================
   SECTION LAYOUTS
   ======================================================================== */

section {
    padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
    section {
        padding: var(--space-24) 0;
    }
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-title h2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-black);
    margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
    .section-title h2 {
        font-size: var(--text-6xl);
    }
}

.section-subtitle {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--c21-vibrant-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* ========================================================================
   GRADIENT BACKGROUNDS
   ======================================================================== */

.gradient-mesh-bg {
    background: 
        radial-gradient(at 40% 20%, rgba(0, 133, 202, 0.15) 0%, transparent 50%),
        radial-gradient(at 80% 80%, rgba(255, 130, 0, 0.12) 0%, transparent 50%),
        var(--c21-bg);
}

.dark .gradient-mesh-bg {
    background:
        radial-gradient(at 40% 20%, rgba(0, 163, 255, 0.1) 0%, transparent 50%),
        radial-gradient(at 80% 80%, rgba(255, 169, 64, 0.08) 0%, transparent 50%),
        var(--c21-dark-bg);
}

.gradient-text {
    background: linear-gradient(135deg, var(--c21-vibrant-blue) 0%, var(--c21-deep-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================================================
   STATS/METRICS DISPLAY - Override All Tailwind Classes
   ======================================================================== */

.stat-card {
    text-align: center !important;
    padding: var(--space-6) !important;
}

/* Override ALL stat number styling */
.stat-number,
div[class*="text-4xl"][class*="font-black"],
div[class*="text-5xl"][class*="font-bold"],
div[class*="text-5xl"][class*="font-black"],
div[class*="text-6xl"][class*="font-bold"],
div[class*="text-6xl"][class*="font-black"] {
    font-size: var(--text-5xl) !important;
    font-weight: var(--font-weight-black) !important;
    color: var(--c21-vibrant-blue) !important;
    line-height: 1 !important;
    margin-bottom: var(--space-2) !important;
}

/* Responsive stat numbers */
@media (min-width: 1024px) {
    .stat-number,
    div[class*="text-4xl"][class*="font-black"],
    div[class*="text-5xl"][class*="font-bold"],
    div[class*="text-5xl"][class*="font-black"],
    div[class*="text-6xl"][class*="font-bold"],
    div[class*="text-6xl"][class*="font-black"] {
        font-size: var(--text-6xl) !important;
    }
}

@media (min-width: 1536px) {
    .stat-number,
    div[class*="text-4xl"][class*="font-black"],
    div[class*="text-5xl"][class*="font-bold"],
    div[class*="text-5xl"][class*="font-black"],
    div[class*="text-6xl"][class*="font-bold"],
    div[class*="text-6xl"][class*="font-black"] {
        font-size: var(--text-7xl) !important;
    }
}

/* Exception: Keep orange for specific stats in index.html */
.text-c21-digital-orange[class*="text-4xl"],
.text-c21-digital-orange[class*="text-5xl"],
.text-c21-digital-orange[class*="text-6xl"] {
    color: var(--c21-digital-orange) !important;
}

/* Exception: Keep white for gradient background stats */
section[class*="bg-gradient"] .stat-number,
section[class*="bg-gradient"] div[class*="text-5xl"][class*="font-bold"],
div[class*="bg-gradient"] div[class*="text-5xl"][class*="font-bold"] {
    color: white !important;
}

.stat-label {
    font-size: var(--text-base) !important;
    color: var(--c21-text-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* ========================================================================
   FEATURE GRIDS
   ======================================================================== */

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    padding: var(--space-8);
    background: var(--c21-surface);
    border-radius: var(--radius-2xl);
    transition: all var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ========================================================================
   LISTS
   ======================================================================== */

.list-checkmark {
    list-style: none;
    padding: 0;
}

.list-checkmark li {
    padding-left: var(--space-8);
    position: relative;
    margin-bottom: var(--space-4);
}

.list-checkmark li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c21-vibrant-blue);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xl);
}

/* ========================================================================
   FORMS
   ======================================================================== */

.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--c21-text-primary);
    margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    border: 2px solid var(--c21-border);
    border-radius: var(--radius-lg);
    background: var(--c21-surface);
    color: var(--c21-text-primary);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--c21-vibrant-blue);
    box-shadow: 0 0 0 3px rgba(0, 133, 202, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ========================================================================
   HERO SECTION SYSTEM - Text Contrast Override
   ======================================================================== */

/* Override hero section text colors for better contrast on light gradient backgrounds */
section.pt-32 nav a,
section.pt-32 nav span,
section[class*="pt-32"] nav a,
section[class*="pt-32"] nav span {
    color: var(--c21-text-primary) !important;
}

section.pt-32 nav a:hover,
section[class*="pt-32"] nav a:hover {
    color: var(--c21-vibrant-blue) !important;
}

/* Hero paragraph text */
section.pt-32 p.text-xl,
section[class*="pt-32"] p.text-xl,
section.pt-32 p[class*="text-xl"],
section[class*="pt-32"] p[class*="text-xl"] {
    color: var(--c21-text-secondary) !important;
}

/* Main hero section (index.html) - light background overrides */
section.min-h-screen.bg-white p.text-gray-600,
section.min-h-screen.bg-white p[class*="text-gray"] {
    color: var(--c21-text-secondary) !important;
}

/* Ensure outline buttons are visible on white backgrounds */
section.min-h-screen.bg-white a.bg-white,
section.bg-white a.bg-white[class*="border"],
section.bg-white button.bg-white {
    border-color: var(--c21-vibrant-blue) !important;
    border-width: 2px !important;
}

section.min-h-screen.bg-white a.bg-white:hover,
section.bg-white a.bg-white[class*="border"]:hover {
    background-color: var(--c21-vibrant-blue) !important;
    color: white !important;
}

/* Hero badge text colors - ensure they stay as designed */
section.pt-32 .bg-c21-warm-gold\\/10 span,
section[class*="pt-32"] .bg-c21-warm-gold\\/10 span {
    color: #C75B12 !important; /* c21-burnt-orange for better contrast */
}

section.pt-32 .bg-c21-bright-orange\\/10 span,
section[class*="pt-32"] .bg-c21-bright-orange\\/10 span {
    color: #C75B12 !important; /* c21-burnt-orange for better contrast */
}

section.pt-32 .bg-c21-electric-cyan\\/10 span,
section[class*="pt-32"] .bg-c21-electric-cyan\\/10 span {
    color: #0066A1 !important; /* Darker cyan for better contrast */
}

section.pt-32 .bg-c21-vibrant-blue\\/10 span,
section[class*="pt-32"] .bg-c21-vibrant-blue\\/10 span {
    color: var(--c21-deep-blue) !important; /* Darker blue for better contrast */
}

/* Hero Section Badge Spacing - Prevent clipping with fixed nav */
/* Navigation is h-20 (80px), pt-32 is 128px, so we need extra spacing at the top */
section.pt-32 > div > div > .inline-block.px-4.py-2,
section[class*="pt-32"] > div > div > .inline-block.px-4.py-2 {
    margin-top: 3rem !important;
}

/* For cases where badge is in a centered container */
section.pt-32 .text-center > .inline-block.rounded-full,
section[class*="pt-32"] .text-center > .inline-block.rounded-full {
    margin-top: 3rem !important;
}

/* More specific selector to ensure it applies to first badge in hero */
section.pt-32 div[class*="text-center"] > div.inline-block:first-child,
section[class*="pt-32"] div[class*="text-center"] > div.inline-block:first-child {
    margin-top: 3rem !important;
}

/* RTL Support for badge spacing */
[dir="rtl"] section.pt-32 > div > div > .inline-block.px-4.py-2,
[dir="rtl"] section[class*="pt-32"] > div > div > .inline-block.px-4.py-2,
[dir="rtl"] section.pt-32 .text-center > .inline-block.rounded-full,
[dir="rtl"] section[class*="pt-32"] .text-center > .inline-block.rounded-full,
[dir="rtl"] section.pt-32 div[class*="text-center"] > div.inline-block:first-child,
[dir="rtl"] section[class*="pt-32"] div[class*="text-center"] > div.inline-block:first-child {
    margin-top: 3rem !important;
}

/* Case Study Card Stats - Fix clipping issues */
.case-study-card .grid > div {
    overflow: visible !important;
}

.case-study-card .text-2xl,
.case-study-card .text-3xl {
    overflow: visible !important;
    white-space: nowrap;
}

.case-study-card .text-xs {
    overflow: visible !important;
    line-height: 1.4;
}

/* ========================================================================
   CTA SECTION SYSTEM - Consistent Across All Pages
   ======================================================================== */

/* All CTA sections should have consistent styling */
section[class*="bg-gradient-to"],
section[class*="from-c21-vibrant-blue"],
section[class*="from-c21-warm-gold"],
section[class*="from-c21-bright-orange"],
section[class*="from-c21-electric-cyan"],
section[class*="from-c21-deep-blue"] {
    padding-top: var(--space-16) !important;
    padding-bottom: var(--space-16) !important;
}

@media (min-width: 1024px) {
    section[class*="bg-gradient-to"],
    section[class*="from-c21-vibrant-blue"],
    section[class*="from-c21-warm-gold"],
    section[class*="from-c21-bright-orange"],
    section[class*="from-c21-electric-cyan"],
    section[class*="from-c21-deep-blue"] {
        padding-top: var(--space-20) !important;
        padding-bottom: var(--space-20) !important;
    }
}

/* CTA Headings - ONLY for dark gradient backgrounds */
section[class*="from-c21-vibrant-blue"] h2,
section[class*="from-c21-warm-gold"] h2,
section[class*="from-c21-bright-orange"] h2,
section[class*="from-c21-electric-cyan"] h2,
section[class*="from-c21-deep-blue"] h2 {
    font-size: var(--text-4xl) !important;
    font-weight: var(--font-weight-black) !important;
    color: white !important;
    margin-bottom: var(--space-6) !important;
    line-height: 1.2 !important;
}

/* Exception: Cards inside light gradient sections keep their own colors */
section[class*="from-blue-50"] .bg-white h1,
section[class*="from-blue-50"] .bg-white h2,
section[class*="from-blue-50"] .bg-white h3,
section[class*="from-blue-50"] .bg-white h4,
section[class*="from-gray-50"] .bg-white h1,
section[class*="from-gray-50"] .bg-white h2,
section[class*="from-gray-50"] .bg-white h3,
section[class*="from-gray-50"] .bg-white h4 {
    color: var(--c21-text-primary) !important;
}

@media (min-width: 768px) {
    section[class*="from-c21-vibrant-blue"] h2,
    section[class*="from-c21-warm-gold"] h2,
    section[class*="from-c21-bright-orange"] h2,
    section[class*="from-c21-electric-cyan"] h2,
    section[class*="from-c21-deep-blue"] h2 {
        font-size: var(--text-5xl) !important;
    }
}

@media (min-width: 1024px) {
    section[class*="from-c21-vibrant-blue"] h2,
    section[class*="from-c21-warm-gold"] h2,
    section[class*="from-c21-bright-orange"] h2,
    section[class*="from-c21-electric-cyan"] h2,
    section[class*="from-c21-deep-blue"] h2 {
        font-size: var(--text-6xl) !important;
    }
}

/* CTA Paragraphs - ONLY for dark gradient backgrounds */
section[class*="from-c21-vibrant-blue"] p,
section[class*="from-c21-warm-gold"] p,
section[class*="from-c21-bright-orange"] p,
section[class*="from-c21-electric-cyan"] p,
section[class*="from-c21-deep-blue"] p {
    font-size: var(--text-lg) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: var(--space-8) !important;
    line-height: 1.7 !important;
}

/* Exception: Paragraphs inside cards within light gradient sections keep their own colors */
section[class*="from-blue-50"] .bg-white p,
section[class*="from-gray-50"] .bg-white p {
    color: var(--c21-text-secondary) !important;
}

@media (min-width: 1024px) {
    section[class*="bg-gradient-to"] p,
    section[class*="from-c21-vibrant-blue"] p,
    section[class*="from-c21-warm-gold"] p,
    section[class*="from-c21-bright-orange"] p,
    section[class*="from-c21-electric-cyan"] p,
    section[class*="from-c21-deep-blue"] p {
        font-size: var(--text-xl) !important;
    }
}

@media (min-width: 1536px) {
    section[class*="bg-gradient-to"] p,
    section[class*="from-c21-vibrant-blue"] p,
    section[class*="from-c21-warm-gold"] p,
    section[class*="from-c21-bright-orange"] p,
    section[class*="from-c21-electric-cyan"] p,
    section[class*="from-c21-deep-blue"] p {
        font-size: var(--text-2xl) !important;
    }
}

/* CTA Buttons */
section[class*="bg-gradient-to"] button,
section[class*="bg-gradient-to"] a.px-8,
section[class*="from-c21-vibrant-blue"] button,
section[class*="from-c21-vibrant-blue"] a.px-8,
section[class*="from-c21-warm-gold"] button,
section[class*="from-c21-warm-gold"] a.px-8,
section[class*="from-c21-bright-orange"] button,
section[class*="from-c21-bright-orange"] a.px-8,
section[class*="from-c21-electric-cyan"] button,
section[class*="from-c21-electric-cyan"] a.px-8,
section[class*="from-c21-deep-blue"] button,
section[class*="from-c21-deep-blue"] a.px-8 {
    padding: var(--space-4) var(--space-8) !important;
    font-size: var(--text-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    border-radius: var(--radius-xl) !important;
    transition: all var(--transition-base) !important;
}

/* Primary CTA Button (White background) */
section[class*="bg-gradient-to"] button.bg-white,
section[class*="bg-gradient-to"] a.bg-white,
section[class*="from-c21-vibrant-blue"] button.bg-white,
section[class*="from-c21-vibrant-blue"] a.bg-white,
section[class*="from-c21-warm-gold"] button.bg-white,
section[class*="from-c21-warm-gold"] a.bg-white,
section[class*="from-c21-bright-orange"] button.bg-white,
section[class*="from-c21-bright-orange"] a.bg-white,
section[class*="from-c21-electric-cyan"] button.bg-white,
section[class*="from-c21-electric-cyan"] a.bg-white,
section[class*="from-c21-deep-blue"] button.bg-white,
section[class*="from-c21-deep-blue"] a.bg-white,
section[class*="from-c21-vibrant-blue"] a[href*="contact"],
section[class*="from-c21-warm-gold"] a[href*="contact"],
section[class*="from-c21-bright-orange"] a[href*="contact"],
section[class*="from-c21-electric-cyan"] a[href*="contact"],
section[class*="from-c21-deep-blue"] a[href*="contact"] {
    background-color: white !important;
    color: var(--c21-vibrant-blue) !important;
}

section[class*="bg-gradient-to"] button.bg-white:hover,
section[class*="bg-gradient-to"] a.bg-white:hover,
section[class*="from-c21-vibrant-blue"] button.bg-white:hover,
section[class*="from-c21-vibrant-blue"] a.bg-white:hover,
section[class*="from-c21-warm-gold"] button.bg-white:hover,
section[class*="from-c21-warm-gold"] a.bg-white:hover,
section[class*="from-c21-bright-orange"] button.bg-white:hover,
section[class*="from-c21-bright-orange"] a.bg-white:hover,
section[class*="from-c21-electric-cyan"] button.bg-white:hover,
section[class*="from-c21-electric-cyan"] a.bg-white:hover,
section[class*="from-c21-deep-blue"] button.bg-white:hover,
section[class*="from-c21-deep-blue"] a.bg-white:hover,
section[class*="from-c21-vibrant-blue"] a[href*="contact"]:hover,
section[class*="from-c21-warm-gold"] a[href*="contact"]:hover,
section[class*="from-c21-bright-orange"] a[href*="contact"]:hover,
section[class*="from-c21-electric-cyan"] a[href*="contact"]:hover,
section[class*="from-c21-deep-blue"] a[href*="contact"]:hover {
    background-color: var(--c21-digital-orange) !important;
    color: white !important;
    transform: translateY(-2px) scale(1.05) !important;
}

/* Secondary CTA Button (Outlined) */
section[class*="bg-gradient-to"] button.bg-transparent,
section[class*="bg-gradient-to"] a.bg-transparent,
section[class*="bg-gradient-to"] a[class*="bg-white/"],
section[class*="from-c21-vibrant-blue"] button.bg-transparent,
section[class*="from-c21-vibrant-blue"] a.bg-transparent,
section[class*="from-c21-vibrant-blue"] a[class*="bg-white/"],
section[class*="from-c21-warm-gold"] button.bg-transparent,
section[class*="from-c21-warm-gold"] a.bg-transparent,
section[class*="from-c21-warm-gold"] a[class*="bg-white/"],
section[class*="from-c21-bright-orange"] button.bg-transparent,
section[class*="from-c21-bright-orange"] a.bg-transparent,
section[class*="from-c21-bright-orange"] a[class*="bg-white/"],
section[class*="from-c21-electric-cyan"] button.bg-transparent,
section[class*="from-c21-electric-cyan"] a.bg-transparent,
section[class*="from-c21-electric-cyan"] a[class*="bg-white/"],
section[class*="from-c21-deep-blue"] button.bg-transparent,
section[class*="from-c21-deep-blue"] a.bg-transparent,
section[class*="from-c21-deep-blue"] a[class*="bg-white/"],
section[class*="from-c21-vibrant-blue"] a[href*="case-studies"],
section[class*="from-c21-warm-gold"] a[href*="case-studies"],
section[class*="from-c21-bright-orange"] a[href*="case-studies"],
section[class*="from-c21-electric-cyan"] a[href*="expo-legacy"],
section[class*="from-c21-deep-blue"] a[href*="case-studies"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 2px solid white !important;
}

section[class*="bg-gradient-to"] button.bg-transparent:hover,
section[class*="bg-gradient-to"] a.bg-transparent:hover,
section[class*="bg-gradient-to"] a[class*="bg-white/"]:hover,
section[class*="from-c21-vibrant-blue"] button.bg-transparent:hover,
section[class*="from-c21-vibrant-blue"] a.bg-transparent:hover,
section[class*="from-c21-vibrant-blue"] a[class*="bg-white/"]:hover,
section[class*="from-c21-warm-gold"] button.bg-transparent:hover,
section[class*="from-c21-warm-gold"] a.bg-transparent:hover,
section[class*="from-c21-warm-gold"] a[class*="bg-white/"]:hover,
section[class*="from-c21-bright-orange"] button.bg-transparent:hover,
section[class*="from-c21-bright-orange"] a.bg-transparent:hover,
section[class*="from-c21-bright-orange"] a[class*="bg-white/"]:hover,
section[class*="from-c21-electric-cyan"] button.bg-transparent:hover,
section[class*="from-c21-electric-cyan"] a.bg-transparent:hover,
section[class*="from-c21-electric-cyan"] a[class*="bg-white/"]:hover,
section[class*="from-c21-deep-blue"] button.bg-transparent:hover,
section[class*="from-c21-deep-blue"] a.bg-transparent:hover,
section[class*="from-c21-deep-blue"] a[class*="bg-white/"]:hover,
section[class*="from-c21-vibrant-blue"] a[href*="case-studies"]:hover,
section[class*="from-c21-warm-gold"] a[href*="case-studies"]:hover,
section[class*="from-c21-bright-orange"] a[href*="case-studies"]:hover,
section[class*="from-c21-electric-cyan"] a[href*="expo-legacy"]:hover,
section[class*="from-c21-deep-blue"] a[href*="case-studies"]:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    transform: scale(1.05) !important;
}

/* CTA Icon Containers (faq.html, media-center.html) */
section[class*="bg-gradient-to"] .w-20.h-20,
section[class*="from-c21-vibrant-blue"] .w-20.h-20,
section[class*="from-c21-warm-gold"] .w-20.h-20,
section[class*="from-c21-bright-orange"] .w-20.h-20,
section[class*="from-c21-electric-cyan"] .w-20.h-20,
section[class*="from-c21-deep-blue"] .w-20.h-20 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: var(--radius-2xl) !important;
    margin-bottom: var(--space-6) !important;
}

/* CTA Input Fields (media-center.html newsletter) */
section[class*="bg-gradient-to"] input[type="email"],
section[class*="from-c21-vibrant-blue"] input[type="email"],
section[class*="from-c21-warm-gold"] input[type="email"],
section[class*="from-c21-bright-orange"] input[type="email"],
section[class*="from-c21-electric-cyan"] input[type="email"],
section[class*="from-c21-deep-blue"] input[type="email"],
section[class*="from-c21-vibrant-blue"] input[type="email"] {
    padding: var(--space-4) var(--space-6) !important;
    border-radius: var(--radius-xl) !important;
    color: var(--c21-text-primary) !important;
    font-size: var(--text-base) !important;
    border: none !important;
}

section[class*="bg-gradient-to"] input[type="email"]::placeholder,
section[class*="from-c21-vibrant-blue"] input[type="email"]::placeholder,
section[class*="from-c21-warm-gold"] input[type="email"]::placeholder,
section[class*="from-c21-bright-orange"] input[type="email"]::placeholder,
section[class*="from-c21-electric-cyan"] input[type="email"]::placeholder,
section[class*="from-c21-deep-blue"] input[type="email"]::placeholder {
    color: var(--c21-text-tertiary) !important;
}

/* ========================================================================\n   TEXT SIZE & COLOR OVERRIDES - Force Design System\n   ======================================================================== */\n\n/* Override Tailwind text sizing utilities */\n.text-lg { font-size: var(--text-lg) !important; }\n.text-xl { font-size: var(--text-xl) !important; }\n.text-2xl { font-size: var(--text-2xl) !important; }\n.text-3xl { font-size: var(--text-3xl) !important; }\n.text-4xl { font-size: var(--text-4xl) !important; }\n.text-5xl { font-size: var(--text-5xl) !important; }\n.text-6xl { font-size: var(--text-6xl) !important; }\n.text-7xl { font-size: var(--text-7xl) !important; }\n.text-8xl { font-size: var(--text-8xl) !important; }\n\n/* Override Tailwind font weight utilities */\n.font-medium { font-weight: var(--font-weight-medium) !important; }\n.font-semibold { font-weight: var(--font-weight-semibold) !important; }\n.font-bold { font-weight: var(--font-weight-bold) !important; }\n.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }\n.font-black { font-weight: var(--font-weight-black) !important; }\n\n/* Override Tailwind text color utilities - but only for body text */\n/* CTA sections and special contexts handled separately above */\n.text-gray-900:not(section[class*=\"bg-gradient-to\"] *) {\n    color: var(--c21-text-primary) !important;\n}\n\n.text-gray-700:not(section[class*=\"bg-gradient-to\"] *) {\n    color: var(--c21-text-secondary) !important;\n}\n\n.text-gray-600:not(section[class*=\"bg-gradient-to\"] *) {\n    color: var(--c21-text-secondary) !important; \n}\n\n/* Dark mode text colors */\n.dark .text-white {\n    color: #FFFFFF !important;\n}\n\n/* ========================================================================\n   UTILITY CLASSES\n   ======================================================================== */\n\n/* Spacing */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-12 { margin-bottom: var(--space-12); }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display */
.lang-hidden { display: none !important; }  /* Language-specific hiding - does not conflict with Tailwind's .hidden */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* ========================================================================
   NAVIGATION SPECIFIC STYLES
   Forces correct colors for navigation menu items
   ======================================================================== */

/* Desktop dropdown trigger buttons - default state is DARK GRAY */
.nav-dropdown-trigger {
    color: #374151 !important; /* gray-700 */
}

.dark .nav-dropdown-trigger {
    color: #D1D5DB !important; /* gray-300 */
}

.nav-dropdown-trigger:hover {
    color: #FF8200 !important; /* Pantone 1575 C - Digital Orange */
}

/* Dropdown menu items - default state is DARK GRAY */
.nav-dropdown-item {
    color: #374151 !important; /* gray-700 */
}

.dark .nav-dropdown-item {
    color: #D1D5DB !important; /* gray-300 */
}

.nav-dropdown-item:hover {
    color: #FF8200 !important; /* Pantone 1575 C - Digital Orange */
}

/* Active/selected dropdown items stay BLUE */
.nav-dropdown-item.text-c21-vibrant-blue {
    color: #0085CA !important;
}

/* Primary navigation links - default state is DARK GRAY */
.nav-link {
    color: #374151 !important; /* gray-700 */
}

.dark .nav-link {
    color: #D1D5DB !important; /* gray-300 */
}

.nav-link:hover {
    color: #FF8200 !important; /* Pantone 1575 C - Digital Orange */
}

/* Active/selected nav links stay BLUE */
.nav-link.text-c21-vibrant-blue {
    color: #0085CA !important;
}

/* Mobile accordion triggers - default state is DARK GRAY */
.mobile-accordion-trigger {
    color: #374151 !important; /* gray-700 */
}

.dark .mobile-accordion-trigger {
    color: #D1D5DB !important; /* gray-300 */
}

/* Icons inside dropdown items stay BLUE always */
.nav-dropdown-item i[data-lucide],
.nav-dropdown-item .icon {
    color: #0085CA !important; /* Always blue */
}

/* Flexbox */
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--space-4); }

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

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

.fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--c21-vibrant-blue);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================================================
   GLOBAL FOOTER SYSTEM - Consistent Styling Across All Pages
   ======================================================================== */

/* Override Tailwind color classes in footer to ensure correct colors */
#global-footer footer {
    background-color: #0A0F1C !important;
    color: white !important;
}

#global-footer .text-c21-digital-orange {
    color: #FF8200 !important;
}

#global-footer .hover\:text-c21-digital-orange:hover {
    color: #FF8200 !important;
}

#global-footer .text-white {
    color: #FFFFFF !important;
}

#global-footer .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

#global-footer .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer links with proper contrast and hover states */
#global-footer a {
    transition: color 0.3s ease;
}

#global-footer a:hover {
    color: #FF8200 !important;
}

/* ========================================================================
   RTL (RIGHT-TO-LEFT) SUPPORT
   Prevents layout jumping and overflow issues in Arabic
   ======================================================================== */

/* Ensure all containers respect RTL boundaries */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
    box-sizing: border-box;
}

/* Fix max-width containers in RTL */
html[dir="rtl"] [class*="max-w-"],
html[dir="rtl"] .container {
    margin-left: auto;
    margin-right: auto;
}

/* Fix flexbox alignment in RTL */
html[dir="rtl"] .flex,
html[dir="rtl"] .inline-flex {
    direction: rtl;
}

/* Prevent fixed/absolute positioned elements from causing overflow */
html[dir="rtl"] [class*="fixed"],
html[dir="rtl"] [class*="absolute"] {
    max-width: 100vw;
}

/* Fix floating CTA buttons position in RTL */
html[dir="rtl"] .fixed.bottom-8.right-8 {
    right: auto !important;
    left: 2rem !important;
}

/* Prevent canvas and background elements from causing overflow */
html[dir="rtl"] canvas,
html[dir="rtl"] [class*="bg-gradient"] {
    max-width: 100%;
    overflow: hidden;
}

/* Fix section padding and spacing in RTL */
html[dir="rtl"] section {
    width: 100%;
    overflow-x: hidden;
}

/* Ensure grid layouts work in RTL */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* Fix text alignment in RTL */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

/* Swap margin/padding utilities in RTL */
html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Fix inline-flex direction for buttons */
html[dir="rtl"] .inline-flex {
    flex-direction: row-reverse;
}

/* Prevent Swiper carousel from causing overflow */
html[dir="rtl"] .swiper,
html[dir="rtl"] .swiper-container {
    direction: ltr; /* Keep Swiper LTR to prevent navigation issues */
}

/* Hero canvas positioning fix for RTL */
html[dir="rtl"] #heroCanvas {
    left: 0;
    right: 0;
    max-width: 100%;
}