/* Minimal critical CSS for above-the-fold content */
        :root {
            /* Primary Colors - Sky Blue Palette */
            --primary-50: #f0f9ff;
            --primary-100: #e0f2fe;
            --primary-200: #bae6fd;
            --primary-300: #7dd3fc;
            --primary-400: #38bdf8;
            --primary-500: #0ea5e9;
            --primary-600: #0284c7;
            --primary-700: #0369a1;
            --primary-800: #075985;
            --primary-900: #0c4a6e;
            
            /* Accent Colors - Amber Palette */
            --accent-50: #fffbeb;
            --accent-100: #fef3c7;
            --accent-200: #fde68a;
            --accent-300: #fcd34d;
            --accent-400: #fbbf24;
            --accent-500: #f59e0b;
            --accent-600: #d97706;
            --accent-700: #b45309;
            --accent-800: #92400e;
            --accent-900: #78350f;
            
            /* Neutral Colors - Gray Palette */
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            
            /* Semantic Colors */
            --success-50: #ecfdf5;
            --success-500: #10b981;
            --success-700: #047857;
            --warning-50: #fffbeb;
            --warning-500: #f59e0b;
            --warning-700: #b45309;
            --error-50: #fef2f2;
            --error-500: #ef4444;
            --error-700: #b91c1c;
            
            /* Theme Colors */
            --primary-color: var(--primary-600);
            --secondary-color: var(--primary-500);
            --accent-color: var(--accent-500);
            --text-color: var(--gray-900);
            --text-light: var(--gray-600);
            --text-muted: var(--gray-500);
            --bg-color: #ffffff;
            --bg-secondary: var(--gray-50);
            --bg-tertiary: var(--gray-100);
            --border-color: var(--gray-200);
            --border-light: var(--gray-100);
            
            /* Typography Scale */
            --font-xs: 0.75rem;      /* 12px */
            --font-sm: 0.875rem;     /* 14px */
            --font-base: 1rem;       /* 16px */
            --font-lg: 1.125rem;     /* 18px */
            --font-xl: 1.25rem;      /* 20px */
            --font-2xl: 1.5rem;      /* 24px */
            --font-3xl: 1.875rem;    /* 30px */
            --font-4xl: 2.25rem;     /* 36px */
            --font-5xl: 3rem;        /* 48px */
            --font-6xl: 3.75rem;     /* 60px */
            --font-7xl: 4.5rem;      /* 72px */
            
            /* Font Weights */
            --font-light: 300;
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;
            --font-extrabold: 800;
            --font-black: 900;
            
            /* 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-7: 1.75rem;   /* 28px */
            --space-8: 2rem;      /* 32px */
            --space-10: 2.5rem;   /* 40px */
            --space-12: 3rem;     /* 48px */
            --space-14: 3.5rem;   /* 56px */
            --space-16: 4rem;     /* 64px */
            --space-20: 5rem;     /* 80px */
            --space-24: 6rem;     /* 96px */
            --space-32: 8rem;     /* 128px */
            
            /* Shadow System */
            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
            
            /* Border Radius */
            --radius-sm: 0.25rem;    /* 4px */
            --radius-md: 0.375rem;   /* 6px */
            --radius-lg: 0.5rem;     /* 8px */
            --radius-xl: 0.75rem;    /* 12px */
            --radius-2xl: 1rem;      /* 16px */
            --radius-3xl: 1.5rem;    /* 24px */
            --radius-full: 9999px;
            
            /* Transitions */
            --transition-fast: 150ms;
            --transition-base: 200ms;
            --transition-slow: 300ms;
            --transition-slower: 500ms;
            
            /* Easing Functions */
            --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-out: cubic-bezier(0, 0, 0.2, 1);
            --ease-in: cubic-bezier(0.4, 0, 1, 1);
            --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
            
            /* Z-index Scale */
            --z-dropdown: 1000;
            --z-sticky: 1020;
            --z-fixed: 1030;
            --z-modal-backdrop: 1040;
            --z-modal: 1050;
            --z-popover: 1060;
            --z-tooltip: 1070;
            
            /* Legacy Support */
            --transition-speed: var(--transition-base);
            --border-radius: var(--radius-lg);
            --max-width: 1200px;
        }

        /* Dark Mode Variables - Enhanced */
        [data-theme="dark"] {
            /* Primary Colors - Adjusted for dark mode */
            --primary-color: var(--primary-500);
            --secondary-color: var(--primary-400);
            --accent-color: var(--accent-400);
            
            /* Text Colors */
            --text-color: var(--gray-100);
            --text-light: var(--gray-400);
            --text-muted: var(--gray-500);
            
            /* Background Colors */
            --bg-color: #0f172a;
            --bg-secondary: #1e293b;
            --bg-tertiary: #334155;
            
            /* Border Colors */
            --border-color: #334155;
            --border-light: #1e293b;
            
            /* Shadows - Enhanced for dark mode */
            --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
            --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        }

        /* ==================== Reset & Base Styles ==================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            transition: background-color var(--transition-speed), color var(--transition-speed);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color var(--transition-speed);
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: none;
            transition: all var(--transition-speed);
        }

        input, textarea, select {
            font-family: inherit;
            font-size: inherit;
        }

        /* ==================== Utility Classes ==================== */
        .container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 20px;
        }

        .section {
            padding: 80px 0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .section-subtitle {
            text-align: center;
            color: var(--text-light);
            margin-bottom: 3rem;
            font-size: 1.1rem;
        }