:root {
            /* Primary Brand Colors */
            --primary-color: var(--theme-primary, #FF6B35);
            --secondary-color: var(--theme-secondary, #001D3D);
            --accent-color: var(--theme-accent, #FFD23F);
            
            /* Enhanced Color Palette */
            --primary-light: #FF8A5B;
            --primary-dark: #E5541F;
            --secondary-light: #003459;
            --secondary-dark: #000F1A;
            --accent-light: #FFDB5C;
            --accent-dark: #E6BC23;
            
            /* Neutral Colors */
            --text-dark: #0E1A2B;
            --text-muted: #6B7A89;
            --text-light: #9CA3AF;
            --bg-light: #FAFBFC;
            --bg-white: #FFFFFF;
            --bg-section: #F8FAFC;
            
            /* Glass Morphism */
            --glass-bg: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.18);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            
            /* Enhanced Shadows */
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
            --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
            --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.15);
            
            /* Border Radius */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-2xl: 24px;
            --radius-3xl: 32px;
            --radius-full: 9999px;
            
            /* Spacing Scale */
            --space-1: 0.25rem;
            --space-2: 0.5rem;
            --space-3: 0.75rem;
            --space-4: 1rem;
            --space-5: 1.25rem;
            --space-6: 1.5rem;
            --space-8: 2rem;
            --space-10: 2.5rem;
            --space-12: 3rem;
            --space-16: 4rem;
            --space-20: 5rem;
            --space-24: 6rem;
            
            /* Typography Scale */
            --text-xs: 0.75rem;
            --text-sm: 0.875rem;
            --text-base: 1rem;
            --text-lg: 1.125rem;
            --text-xl: 1.25rem;
            --text-2xl: 1.5rem;
            --text-3xl: 1.875rem;
            --text-4xl: 2.25rem;
            --text-5xl: 3rem;
            --text-6xl: 3.75rem;
            
            /* 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);
            
            /* Gradients */
            --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
            --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
            --gradient-rainbow: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --gradient-sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            
            /* Dark mode support */
            --dark-bg-primary: #0F172A;
            --dark-bg-secondary: #1E293B;
            --dark-text-primary: #F8FAFC;
            --dark-text-secondary: #CBD5E1;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            line-height: 1.7;
            color: var(--text-dark);
            background: var(--bg-light);
            margin: 0;
            font-weight: 400;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            scroll-behavior: smooth;
        }

        * {
            box-sizing: border-box;
        }

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

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

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: var(--radius-full);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: var(--space-24) 0 var(--space-16);
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            animation: heroAnimation 20s ease-in-out infinite;
        }

        @keyframes heroAnimation {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }

        .hero-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(to top, rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 0) 100%);
            z-index: 1;
        }

        .section-block {
            padding: var(--space-16) 0;
            position: relative;
        }

        .section-block:nth-child(even) {
            background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-white) 100%);
        }

        .feature-card {
            border: none;
            border-radius: var(--radius-2xl);
            box-shadow: var(--shadow-lg);
            min-height: 280px;
            transition: all var(--transition-base);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            overflow: hidden;
            position: relative;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
        }

        .feature-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: var(--primary-color);
        }

        .feature-card:hover::before {
            height: 8px;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
            animation: heroAnimation 20s ease-in-out infinite;
        }

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

        .hero-title {
            font-size: clamp(2rem, 8vw, var(--text-6xl));
            font-weight: 800;
            margin-bottom: var(--space-6);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
            letter-spacing: -0.02em;
        }

        .hero-subtitle {
            font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
            margin-bottom: var(--space-8);
            opacity: 0.95;
            font-weight: 400;
            max-width: 600px;
            line-height: 1.6;
        }

        .hero-cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-4);
            margin-bottom: var(--space-6);
            align-items: center;
        }

        .hero-cta-primary {
            background: linear-gradient(135deg, #FDF2E9 0%, #FFFFFF 100%);
            color: var(--text-dark);
            font-weight: 700;
            border-radius: var(--radius-2xl);
            padding: var(--space-4) var(--space-8);
            border: none;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
            font-size: var(--text-lg);
            min-width: 200px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .hero-cta-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left var(--transition-slow);
        }

        .hero-cta-primary:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-2xl);
            color: var(--text-dark);
            text-decoration: none;
        }

        .hero-cta-primary:hover::before {
            left: 100%;
        }

        .hero-cta-secondary {
            border-radius: var(--radius-2xl);
            padding: var(--space-4) var(--space-6);
            border: 2px solid rgba(255, 255, 255, 0.3);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            color: white;
            font-weight: 600;
            transition: all var(--transition-base);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
        }

        .hero-cta-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
            color: white;
            text-decoration: none;
        }

        .hero-meta-note {
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: var(--space-2);
        }

        .ai-live-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--space-4);
            margin-top: var(--space-6);
        }

        .ai-live-metrics .metric {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl);
            padding: var(--space-5) var(--space-4);
            text-align: center;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        .ai-live-metrics .metric::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--gradient-accent);
        }

        .ai-live-metrics .metric:hover {
            transform: translateY(-4px);
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .ai-live-metrics .metric strong {
            font-size: var(--text-2xl);
            display: block;
            font-weight: 700;
            margin-bottom: var(--space-2);
            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ai-live-metrics .metric small {
            color: rgba(255, 255, 255, 0.8);
            font-size: var(--text-sm);
            font-weight: 500;
        }

        /* ============================================
            ENHANCED NAVIGATION STYLING
           ============================================ */

        .navbar {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.95) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            transition: all var(--transition-base);
            padding: var(--space-4) 0;
        }

        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.98) !important;
            box-shadow: var(--shadow-lg);
        }

        .navbar-brand {
            font-weight: 800;
            font-size: var(--text-xl);
            color: var(--primary-color) !important;
            transition: all var(--transition-fast);
        }

        .navbar-brand:hover {
            color: var(--primary-dark) !important;
            transform: scale(1.05);
        }

        .nav-link {
            font-weight: 500;
            color: var(--text-dark) !important;
            transition: all var(--transition-fast);
            position: relative;
            padding: var(--space-2) var(--space-4) !important;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: all var(--transition-fast);
            transform: translateX(-50%);
        }

        .nav-link:hover {
            color: var(--primary-color) !important;
            transform: translateY(-2px);
        }

        .nav-link:hover::before {
            width: 80%;
        }

        .navbar-toggler {
            border: none;
            padding: var(--space-2);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .navbar-toggler:hover {
            background: rgba(255, 107, 53, 0.1);
        }

        .navbar-toggler:focus {
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
        }

        /* ============================================
            ENHANCED CARD DESIGNS
           ============================================ */

        .ai-badge {
            background: var(--gradient-primary);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: 600;
            margin-bottom: var(--space-4);
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            box-shadow: var(--shadow-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all var(--transition-base);
            animation: floatBadge 3s ease-in-out infinite;
        }

        .ai-badge:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: var(--shadow-xl);
        }

        .confidence-indicator {
            font-size: var(--text-sm);
            opacity: 0.8;
            font-weight: 500;
        }

        .article-card {
            transition: all var(--transition-base);
            border: none;
            box-shadow: var(--shadow-md);
            height: 100%;
            border-radius: var(--radius-2xl);
            overflow: hidden;
            background: var(--bg-white);
            position: relative;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .article-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform var(--transition-base);
        }

        .article-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: var(--shadow-2xl);
            border-color: var(--primary-color);
        }

        .article-card:hover::before {
            transform: scaleX(1);
        }

        .article-card .card-img-top {
            transition: transform var(--transition-slow);
            height: 220px;
            object-fit: cover;
        }

        .article-card:hover .card-img-top {
            transform: scale(1.1);
        }

        .article-card .card-body {
            padding: var(--space-6);
        }

        .article-card .card-title {
            font-weight: 700;
            font-size: var(--text-xl);
            line-height: 1.4;
            margin-bottom: var(--space-3);
            color: var(--text-dark);
        }

        .article-card .card-text {
            color: var(--text-muted);
            line-height: 1.6;
            font-size: var(--text-base);
        }

        /* ============================================
            ENHANCED BUTTON STYLES
           ============================================ */

        .btn {
            position: relative;
            overflow: hidden;
            font-weight: 600;
            border-radius: var(--radius-xl);
            padding: var(--space-3) var(--space-6);
            transition: all var(--transition-base);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            border: none;
            font-size: var(--text-base);
            line-height: 1;
            cursor: pointer;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all var(--transition-slow);
            z-index: 0;
        }

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

        .btn > * {
            position: relative;
            z-index: 1;
        }

        .btn-primary {
            background: var(--gradient-primary);
            color: white;
            box-shadow: var(--shadow-lg);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
            color: white;
        }

        .btn-secondary {
            background: var(--gradient-secondary);
            color: white;
            box-shadow: var(--shadow-lg);
        }

        .btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
            color: white;
        }

        .btn-outline-primary {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
            box-shadow: var(--shadow-sm);
        }

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

        .btn-warning {
            background: var(--gradient-accent);
            color: var(--text-dark);
            box-shadow: var(--shadow-lg);
        }

        .btn-warning:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
            color: var(--text-dark);
        }

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

        .btn-sm {
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            border-radius: var(--radius-lg);
        }

        /* ============================================
            ENHANCED SECTION STYLING
           ============================================ */

        .trust-section {
            padding: var(--space-16) 0;
            background: var(--bg-white);
            position: relative;
        }

        .trust-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
        }

        .trust-section h3 {
            font-size: var(--text-4xl);
            font-weight: 800;
            margin-bottom: var(--space-4);
            color: var(--text-dark);
            text-align: center;
            background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .trust-badges {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--space-4);
            margin-bottom: var(--space-8);
        }

        .badge-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            border: 1px solid var(--glass-border);
            text-align: center;
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        .badge-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-primary);
        }

        .badge-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-color);
        }

        .badge-card strong {
            display: block;
            font-size: var(--text-2xl);
            color: var(--primary-color);
            font-weight: 800;
            margin-bottom: var(--space-2);
        }

        .badge-card span {
            color: var(--text-muted);
            font-weight: 500;
            font-size: var(--text-base);
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-6);
            margin-top: var(--space-8);
        }

        .testimonial-card {
            border-radius: var(--radius-2xl);
            padding: var(--space-8);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            position: relative;
            overflow: hidden;
            transition: all var(--transition-base);
        }

        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-accent);
        }

        .testimonial-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-2xl);
            border-color: rgba(255, 215, 0, 0.3);
        }

        .testimonial-card img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--accent-color);
            box-shadow: var(--shadow-md);
        }

        .testimonial-card p {
            margin: 0;
            color: var(--text-muted);
            font-style: italic;
            font-size: var(--text-lg);
            line-height: 1.7;
        }

        .testimonial-card .author {
            font-weight: 600;
            color: var(--text-dark);
            font-size: var(--text-base);
        }

        /* ============================================
            FLOATING ACTION BUTTONS & MODERN COMPONENTS
           ============================================ */

        .floating-action-btn {
            position: fixed;
            bottom: var(--space-8);
            right: var(--space-8);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--gradient-primary);
            color: white;
            border: none;
            box-shadow: var(--shadow-xl);
            cursor: pointer;
            transition: all var(--transition-base);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xl);
        }

        .floating-action-btn:hover {
            transform: scale(1.1);
            box-shadow: var(--shadow-2xl);
            color: white;
        }

        .floating-action-btn:active {
            transform: scale(0.95);
        }

        .scroll-to-top {
            bottom: var(--space-8);
            right: var(--space-8);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background: var(--gradient-primary);
            z-index: 9999;
            transition: width var(--transition-fast);
            border-radius: 0 4px 4px 0;
        }

        .scroll-indicator {
            position: fixed;
            right: var(--space-4);
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            opacity: 0.7;
            transition: opacity var(--transition-base);
        }

        .scroll-indicator:hover {
            opacity: 1;
        }

        .scroll-indicator .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
            margin: var(--space-2) 0;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .scroll-indicator .dot.active {
            background: var(--primary-color);
            transform: scale(1.5);
        }

        .scroll-indicator .dot:hover {
            background: var(--primary-color);
            transform: scale(1.2);
        }

        /* Enhanced Loading States */
        .loading-shimmer {
            background: linear-gradient(90deg, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.4) 50%, 
                rgba(255,255,255,0) 100%
            );
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }

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

        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
            border-radius: var(--radius-md);
        }

        .skeleton-text {
            height: 1rem;
            margin-bottom: var(--space-2);
        }

        .skeleton-title {
            height: 1.5rem;
            width: 70%;
            margin-bottom: var(--space-4);
        }

        .skeleton-image {
            height: 200px;
            width: 100%;
        }

        /* ============================================
            ENHANCED GUIDE SECTIONS
           ============================================ */

        .guide-category-section {
            padding: var(--space-16) 0;
            background: var(--bg-white);
            position: relative;
        }

        .guide-category-section h3 {
            font-size: var(--text-4xl);
            font-weight: 800;
            margin-bottom: var(--space-6);
            color: var(--text-dark);
            text-align: center;
            background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .guide-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--space-8);
            margin-top: var(--space-12);
        }

        .guide-card {
            border-radius: var(--radius-2xl);
            background: var(--bg-white);
            border: 1px solid rgba(0, 0, 0, 0.06);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            transition: all var(--transition-base);
            position: relative;
        }

        .guide-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform var(--transition-base);
        }

        .guide-card:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-2xl);
            border-color: var(--primary-color);
        }

        .guide-card:hover::before {
            transform: scaleX(1);
        }

        .guide-card img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }

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

        .guide-card-body {
            padding: var(--space-8);
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .guide-card-body h5 {
            margin: 0;
            font-size: var(--text-xl);
            color: var(--text-dark);
            font-weight: 700;
            line-height: 1.4;
        }

        .guide-card-body p {
            margin: 0;
            color: var(--text-muted);
            flex: 1;
            line-height: 1.6;
            font-size: var(--text-base);
        }

        .guide-card-body .btn-learn {
            align-self: flex-start;
            margin-top: auto;
            padding: var(--space-3) var(--space-6);
            border-radius: var(--radius-xl);
            font-weight: 600;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            background: transparent;
            transition: all var(--transition-base);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }

        .guide-card-body .btn-learn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            text-decoration: none;
        }

        /* ============================================
            ENHANCED FOOTER & FINAL TOUCHES
           ============================================ */

        footer {
            background: linear-gradient(135deg, var(--secondary-color) 0%, #000F1A 100%);
            color: #E2E8F0;
            padding: var(--space-16) 0;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
        }

        .footer-columns {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--space-8);
            margin-bottom: var(--space-12);
        }

        .footer-columns h5 {
            color: white;
            font-size: var(--text-xl);
            font-weight: 700;
            margin-bottom: var(--space-4);
            position: relative;
        }

        .footer-columns h5::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--gradient-primary);
        }

        .footer-columns a {
            color: #94A3B8;
            text-decoration: none;
            transition: all var(--transition-fast);
            display: inline-block;
            margin-bottom: var(--space-2);
            font-weight: 500;
        }

        .footer-columns a:hover {
            color: var(--primary-color);
            transform: translateX(4px);
        }

        .footer-note {
            margin-top: var(--space-8);
            text-align: center;
            font-size: var(--text-base);
            color: #64748B;
            padding-top: var(--space-8);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Enhanced Social Links */
        .social-links {
            display: flex;
            gap: var(--space-3);
            margin-top: var(--space-4);
        }

        .social-links a {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all var(--transition-base);
        }

        .social-links a:hover {
            background: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .confidence-bar {
            height: 4px;
            background: #e9ecef;
            border-radius: 2px;
            overflow: hidden;
        }

        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #28a745 100%);
            transition: width 0.3s ease;
        }

        /* ============================================
            ENHANCED MOBILE-FIRST RESPONSIVE DESIGN
           ============================================ */

        /* Extra Small Devices (phones, 320px and up) */
        @media (max-width: 575.98px) {
            :root {
                --space-4: 0.75rem;
                --space-6: 1rem;
                --space-8: 1.5rem;
                --space-12: 2rem;
                --space-16: 2.5rem;
            }
            
            .hero-section {
                min-height: 100vh;
                padding: var(--space-16) 0 var(--space-12);
                text-align: center;
            }
            
            .hero-title {
                font-size: clamp(1.75rem, 6vw, 2.5rem);
                line-height: 1.1;
                margin-bottom: var(--space-4);
            }
            
            .hero-subtitle {
                font-size: clamp(1rem, 4vw, 1.125rem);
                margin-bottom: var(--space-6);
                max-width: 100%;
            }
            
            .hero-cta-group {
                flex-direction: column;
                gap: var(--space-3);
                width: 100%;
            }
            
            .hero-cta-primary, 
            .hero-cta-secondary {
                width: 100%;
                min-width: unset;
                padding: var(--space-4) var(--space-6);
                font-size: var(--text-base);
            }
            
            .ai-badge {
                font-size: var(--text-xs);
                padding: var(--space-2) var(--space-3);
                margin-bottom: var(--space-3);
            }
            
            .navbar-brand {
                font-size: var(--text-lg);
            }
            
            .nav-link {
                padding: var(--space-3) var(--space-2) !important;
                text-align: center;
                font-size: var(--text-base);
            }
            
            .article-card .card-body {
                padding: var(--space-4);
            }
            
            .article-card .card-title {
                font-size: var(--text-lg);
            }
            
            .section-block {
                padding: var(--space-12) 0;
            }
            
            .feature-card {
                min-height: 200px;
                margin-bottom: var(--space-4);
            }
            
            .guide-grid {
                grid-template-columns: 1fr;
                gap: var(--space-6);
            }
            
            .btn {
                min-height: 48px; /* Touch-friendly minimum */
                font-size: var(--text-base);
            }
            
            .floating-action-btn {
                width: 56px;
                height: 56px;
                bottom: var(--space-6);
                right: var(--space-6);
                font-size: var(--text-lg);
            }
            
            .ai-live-metrics {
                grid-template-columns: 1fr;
                gap: var(--space-3);
            }
            
            .ai-live-metrics .metric {
                padding: var(--space-4);
            }
            
            .trust-section h3,
            .guide-category-section h3 {
                font-size: var(--text-2xl);
                margin-bottom: var(--space-4);
            }
            
            .trust-badges {
                grid-template-columns: 1fr;
                gap: var(--space-3);
            }
            
            .testimonial-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }
            
            .footer-columns {
                grid-template-columns: 1fr;
                gap: var(--space-6);
                text-align: center;
            }
        }

        /* Small Devices (landscape phones, 576px and up) */
        @media (min-width: 576px) and (max-width: 767.98px) {
            .hero-title {
                font-size: clamp(2rem, 7vw, 3rem);
                text-align: center;
            }
            
            .hero-subtitle {
                font-size: clamp(1.125rem, 4vw, 1.25rem);
                text-align: center;
            }
            
            .hero-cta-group {
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .article-card {
                margin-bottom: var(--space-6);
            }
            
            .trust-badges {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .testimonial-grid {
                grid-template-columns: 1fr;
            }
            
            .guide-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Medium Devices (tablets, 768px and up) */
        @media (min-width: 768px) and (max-width: 991.98px) {
            .hero-title {
                font-size: clamp(2.5rem, 6vw, 3.5rem);
            }
            
            .hero-section {
                padding: var(--space-20) 0 var(--space-16);
            }
            
            .trust-badges {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .testimonial-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .guide-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .ai-live-metrics {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Large Devices (desktops, 992px and up) */
        @media (min-width: 992px) and (max-width: 1199.98px) {
            .hero-title {
                font-size: clamp(3rem, 5vw, 4rem);
            }
            
            .trust-badges {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .testimonial-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .guide-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .ai-live-metrics {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Extra Large Devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .trust-badges {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .testimonial-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .guide-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .ai-live-metrics {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* ============================================
            ENHANCED TOUCH & MOBILE INTERACTIONS
           ============================================ */

        /* Touch-friendly interactions */
        @media (hover: none) and (pointer: coarse) {
            .btn:hover,
            .article-card:hover,
            .feature-card:hover,
            .guide-card:hover {
                transform: none;
            }
            
            .btn:active {
                transform: scale(0.95);
                transition-duration: 0.1s;
            }
            
            .article-card:active,
            .feature-card:active,
            .guide-card:active {
                transform: scale(0.98);
                transition-duration: 0.1s;
            }
        }

        /* Enhanced mobile navigation */
        @media (max-width: 991.98px) {
            .navbar {
                padding: var(--space-2) 0;
            }
            
            .navbar-nav {
                padding: var(--space-4) 0;
                background: rgba(255, 255, 255, 0.98);
                border-radius: var(--radius-lg);
                margin-top: var(--space-2);
                box-shadow: var(--shadow-lg);
            }
            
            .nav-link {
                padding: var(--space-3) var(--space-4) !important;
                text-align: center;
                border-radius: var(--radius-md);
                margin: var(--space-1) var(--space-2);
                transition: all var(--transition-fast);
            }
            
            .nav-link:hover {
                background: rgba(255, 107, 53, 0.1);
                transform: none;
            }
            
            .nav-link::before {
                display: none;
            }
            
            .dropdown-menu {
                text-align: center;
                border: none;
                box-shadow: var(--shadow-lg);
                background: var(--bg-white);
                border-radius: var(--radius-lg);
                padding: var(--space-3);
            }
            
            .navbar-toggler {
                border: 2px solid var(--primary-color);
                border-radius: var(--radius-md);
                padding: var(--space-2) var(--space-3);
            }
            
            .navbar-toggler:focus {
                box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
            }
        }

        /* Better spacing for mobile */
        @media (max-width: 767.98px) {
            .container,
            .container-fluid {
                padding-left: var(--space-4);
                padding-right: var(--space-4);
            }
            
            .py-5 {
                padding-top: var(--space-8) !important;
                padding-bottom: var(--space-8) !important;
            }
            
            .mb-5 {
                margin-bottom: var(--space-8) !important;
            }
            
            .display-5 {
                font-size: var(--text-3xl);
            }
            
            .lead {
                font-size: var(--text-lg);
                line-height: 1.6;
            }
            
            .card-img-top {
                height: 180px !important;
            }
            
            .rounded-circle {
                width: 48px !important;
                height: 48px !important;
            }
            
            .rounded-circle i {
                font-size: var(--text-lg) !important;
            }
        }

        /* Mobile modal improvements */
        @media (max-width: 575.98px) {
            .modal-dialog {
                margin: var(--space-4);
                max-width: calc(100% - 2rem);
            }
            
            .modal-body {
                padding: var(--space-6);
            }
            
            .modal-header {
                padding: var(--space-4) var(--space-6);
            }
            
            .modal-footer {
                padding: var(--space-4) var(--space-6);
                flex-direction: column;
                gap: var(--space-2);
            }
            
            .modal-footer .btn {
                width: 100%;
            }
        }

        /* Landscape phone adjustments */
        @media (max-width: 767.98px) and (orientation: landscape) {
            .hero-section {
                min-height: 100vh;
                padding: var(--space-12) 0;
            }
            
            .hero-title {
                font-size: clamp(1.5rem, 5vw, 2.25rem);
            }
            
            .hero-subtitle {
                font-size: var(--text-base);
            }
        }

        /* High DPI display optimizations */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .hero-section::before {
                background-size: 100% 100%;
            }
            
            .article-card .card-img-top,
            .guide-card img {
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }
        }

        /* Improved accessibility for mobile */
        @media (max-width: 767.98px) {
            /* Larger tap targets */
            .btn,
            .nav-link,
            a[role="button"] {
                min-height: 44px;
                min-width: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            
            /* Better focus indicators */
            .btn:focus,
            .nav-link:focus,
            .form-control:focus {
                outline: 2px solid var(--primary-color);
                outline-offset: 2px;
            }
            
            /* Improve readability */
            body {
                font-size: 16px; /* Prevent zoom on iOS */
                line-height: 1.6;
            }
        }

        /* ============================================
            ADVANCED ANIMATIONS & MICRO-INTERACTIONS
           ============================================ */

        /* Enhanced smooth transitions for all elements */
        * {
            transition: all var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Advanced scroll-triggered fade-in animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(60px);
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .fade-in-left {
            opacity: 0;
            transform: translateX(-60px);
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-right {
            opacity: 0;
            transform: translateX(60px);
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-scale {
            opacity: 0;
            transform: scale(0.8);
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .fade-in-scale.animate {
            opacity: 1;
            transform: scale(1);
        }

        .stagger-animation {
            transition-delay: calc(var(--stagger-delay, 0) * 100ms);
        }

        /* Enhanced article card animations with better physics */
        .article-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateZ(0); /* Hardware acceleration */
            will-change: transform, box-shadow;
        }

        .article-card:hover {
            transform: translateY(-16px) scale(1.02);
            box-shadow: 0 32px 64px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,107,53,0.1);
            z-index: 10;
        }

        /* Magnetic effect for buttons */
        .btn-magnetic {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-magnetic:hover {
            transform: translateY(-4px) scale(1.05);
        }

        /* Parallax scrolling effect */
        .parallax-element {
            transform: translateZ(0);
            will-change: transform;
        }

        /* Enhanced Malaysia-themed gradient animation */
        .malaysia-gradient {
            background: linear-gradient(-45deg, 
                #CC0000 0%, 
                #FFD700 25%, 
                #000080 50%, 
                #CC0000 75%, 
                #FFD700 100%
            );
            background-size: 400% 400%;
            animation: malaysianFlow 12s ease infinite;
        }

        @keyframes malaysianFlow {
            0%, 100% { 
                background-position: 0% 50%; 
                transform: scale(1);
            }
            25% { 
                background-position: 100% 50%; 
                transform: scale(1.02);
            }
            50% { 
                background-position: 100% 100%; 
                transform: scale(1);
            }
            75% { 
                background-position: 0% 100%; 
                transform: scale(1.02);
            }
        }

        /* Advanced floating animation for badges */
        .floating-badge {
            animation: floatBadge 4s ease-in-out infinite;
        }

        @keyframes floatBadge {
            0%, 100% { 
                transform: translateY(0px) rotate(0deg); 
            }
            25% { 
                transform: translateY(-8px) rotate(1deg); 
            }
            50% { 
                transform: translateY(-12px) rotate(0deg); 
            }
            75% { 
                transform: translateY(-8px) rotate(-1deg); 
            }
        }

        /* Enhanced pulse animation with glow */
        .pulse-glow {
            animation: pulseGlow 3s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { 
                box-shadow: 0 0 5px rgba(255, 215, 0, 0.3),
                           0 0 10px rgba(255, 215, 0, 0.1);
                transform: scale(1);
            }
            50% { 
                box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 
                           0 0 30px rgba(255, 215, 0, 0.4),
                           0 0 40px rgba(255, 215, 0, 0.2);
                transform: scale(1.05);
            }
        }

        /* Interactive feature icons with 3D effect */
        .feature-icon {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }

        .feature-icon:hover {
            transform: scale(1.2) rotateY(15deg) rotateX(5deg);
            filter: brightness(1.2);
        }

        /* Typewriter effect */
        .typewriter {
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid var(--primary-color);
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: var(--primary-color); }
        }

        /* Ripple effect for interactive elements */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .ripple:active::after {
            width: 300px;
            height: 300px;
        }

        /* Interactive Input Fields with advanced states */
        .interactive-input {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 2px solid transparent;
            background: rgba(255, 255, 255, 0.95);
            border-radius: var(--radius-lg);
            position: relative;
            overflow: hidden;
        }

        .interactive-input::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--gradient-primary);
            transform: scaleX(0);
            transition: transform var(--transition-base);
        }

        .interactive-input:focus {
            border-color: var(--primary-color);
            background: #ffffff;
            box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
            transform: scale(1.02);
        }

        .interactive-input:focus::before {
            transform: scaleX(1);
        }

        .interactive-input:hover {
            background: #ffffff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* ============================================
            FINAL POLISH & ACCESSIBILITY
           ============================================ */

        /* Enhanced text selection */
        ::selection {
            background: var(--gradient-primary);
            color: white;
            text-shadow: none;
        }

        ::-moz-selection {
            background: var(--gradient-primary);
            color: white;
            text-shadow: none;
        }

        /* Accessibility: Respect user's motion preferences */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            
            .fade-in-up, .fade-in-left, .fade-in-right, .fade-in-scale {
                opacity: 1;
                transform: none;
            }
            
            .floating-badge {
                animation: none;
            }
            
            .pulse-glow {
                animation: none;
            }
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :root {
                --primary-color: #CC0000;
                --secondary-color: #000000;
                --text-dark: #000000;
                --text-muted: #333333;
            }
            
            .article-card,
            .feature-card,
            .guide-card {
                border: 2px solid var(--text-dark);
            }
        }

        /* Print styles */
        @media print {
            .navbar,
            .floating-action-btn,
            .theme-toggle,
            .scroll-progress,
            .notification {
                display: none !important;
            }
            
            .hero-section {
                background: white !important;
                color: black !important;
            }
            
            .article-card,
            .feature-card,
            .guide-card {
                break-inside: avoid;
                border: 1px solid #ccc;
                margin-bottom: 1rem;
            }
        }

        /* Interactive number counter animation */
        .counter-number {
            display: inline-block;
            transition: all var(--transition-base);
        }

        .counter-animate {
            animation: countUp 2s ease-out;
        }

        @keyframes countUp {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Enhanced trending tags */
        .trending-tag {
            background: var(--gradient-primary);
            color: white;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            font-weight: 600;
            margin: var(--space-1);
            display: inline-block;
            transition: all var(--transition-base);
            text-decoration: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .trending-tag:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            color: white;
            text-decoration: none;
        }

        /* Enhanced update indicator */
        .update-indicator {
            position: fixed;
            bottom: var(--space-8);
            right: var(--space-8);
            background: var(--gradient-primary);
            color: white;
            padding: var(--space-3) var(--space-6);
            border-radius: var(--radius-2xl);
            font-size: var(--text-base);
            font-weight: 600;
            z-index: 1000;
            opacity: 0;
            transform: translateY(100px);
            transition: all var(--transition-base);
            box-shadow: var(--shadow-xl);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .update-indicator.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Confidence bar enhancements */
        .confidence-bar {
            height: 6px;
            background: var(--glass-bg);
            border-radius: var(--radius-full);
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
        }

        .confidence-fill {
            height: 100%;
            background: linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #28a745 100%);
            transition: width var(--transition-base);
            border-radius: var(--radius-full);
        }

        /* Enhanced social proof elements */
        .social-proof {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-4);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl);
            margin: var(--space-6) 0;
        }

        .social-proof-avatar {
            display: flex;
            gap: -var(--space-2);
        }

        .social-proof-avatar img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid white;
            margin-left: -var(--space-1);
        }

        .social-proof-text {
            font-size: var(--text-sm);
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Performance optimizations */
        .will-change-transform {
            will-change: transform;
        }

        .will-change-opacity {
            will-change: opacity;
        }

        .gpu-acceleration {
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        /* Final touch: smooth page load */
        body {
            opacity: 0;
            animation: pageLoad 0.5s ease-out forwards;
        }

        @keyframes pageLoad {
            to {
                opacity: 1;
            }
        }

        /* Ensure all interactive elements have proper cursor */
        .btn,
        .nav-link,
        .article-card,
        .feature-card,
        .guide-card,
        .floating-action-btn,
        .theme-toggle,
        .trending-tag {
            cursor: pointer;
        }

        /* Improve link accessibility */
        a:not(.btn) {
            color: var(--primary-color);
            text-decoration: underline;
            text-decoration-color: transparent;
            text-underline-offset: 4px;
            transition: all var(--transition-fast);
        }

        a:not(.btn):hover {
            text-decoration-color: var(--primary-color);
            color: var(--primary-dark);
        }

        a:not(.btn):focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Advanced Button Interactions with multiple states */
        .btn {
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateZ(0);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.5s ease;
            z-index: -1;
        }

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

        .btn:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .btn:active {
            transform: translateY(-1px) scale(0.98);
            transition-duration: 0.1s;
        }

        /* Glassmorphism effect enhancement */
        .glass-effect {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
        }

        /* Loading dots animation */
        .loading-dots {
            display: inline-flex;
            gap: 4px;
        }

        .loading-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--primary-color);
            animation: loadingDots 1.4s infinite ease-in-out;
        }

        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        .loading-dots span:nth-child(3) { animation-delay: 0s; }

        @keyframes loadingDots {
            0%, 80%, 100% { 
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% { 
                transform: scale(1.2);
                opacity: 1;
            }
        }

        /* Smooth page transitions */
        .page-transition {
            animation: pageSlideIn 0.5s ease-out;
        }

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

        /* ============================================
            DARK MODE & INTERACTIVE FEATURES
           ============================================ */

        /* Dark mode variables */
        [data-theme="dark"] {
            --bg-light: var(--dark-bg-primary);
            --bg-white: var(--dark-bg-secondary);
            --bg-section: #1A202C;
            --text-dark: var(--dark-text-primary);
            --text-muted: var(--dark-text-secondary);
            --text-light: #A0AEC0;
            --glass-bg: rgba(15, 23, 42, 0.7);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        /* Dark mode toggle button */
        .theme-toggle {
            position: fixed;
            bottom: var(--space-20);
            right: var(--space-8);
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            color: var(--text-dark);
            cursor: pointer;
            transition: all var(--transition-base);
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xl);
        }

        .theme-toggle:hover {
            transform: scale(1.1);
            background: var(--primary-color);
            color: white;
        }

        /* Enhanced search interface */
        .search-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-input {
            width: 100%;
            padding: var(--space-4) var(--space-12) var(--space-4) var(--space-6);
            border: 2px solid transparent;
            border-radius: var(--radius-2xl);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            font-size: var(--text-lg);
            color: var(--text-dark);
            transition: all var(--transition-base);
            box-shadow: var(--shadow-lg);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
            transform: scale(1.02);
        }

        .search-input::placeholder {
            color: var(--text-muted);
        }

        .search-button {
            position: absolute;
            right: var(--space-2);
            top: 50%;
            transform: translateY(-50%);
            background: var(--gradient-primary);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .search-button:hover {
            transform: translateY(-50%) scale(1.1);
        }

        /* Enhanced modal styling */
        .modal-content {
            border: none;
            border-radius: var(--radius-2xl);
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            box-shadow: var(--shadow-2xl);
        }

        .modal-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background: var(--gradient-primary);
            color: white;
            border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        }

        .modal-header .btn-close {
            filter: brightness(0) invert(1);
        }

        .modal-body {
            background: var(--bg-white);
            color: var(--text-dark);
        }

        .modal-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            background: var(--bg-white);
            border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
        }

        /* Notification system */
        .notification {
            position: fixed;
            top: var(--space-8);
            right: var(--space-8);
            max-width: 400px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-xl);
            padding: var(--space-6);
            box-shadow: var(--shadow-xl);
            transform: translateX(100%);
            transition: transform var(--transition-base);
            z-index: 9999;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            border-left: 4px solid #10B981;
        }

        .notification.error {
            border-left: 4px solid #EF4444;
        }

        .notification.warning {
            border-left: 4px solid #F59E0B;
        }

        .notification.info {
            border-left: 4px solid #3B82F6;
        }

        /* Enhanced form styling */
        .form-control {
            border: 2px solid transparent;
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            color: var(--text-dark);
            transition: all var(--transition-base);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
            background: var(--bg-white);
            transform: scale(1.01);
        }

        /* Enhanced dropdown styling */
        .dropdown-menu {
            border: none;
            border-radius: var(--radius-xl);
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            box-shadow: var(--shadow-xl);
            padding: var(--space-2);
        }

        .dropdown-item {
            border-radius: var(--radius-md);
            padding: var(--space-3) var(--space-4);
            transition: all var(--transition-fast);
            color: var(--text-dark);
        }

        .dropdown-item:hover {
            background: var(--primary-color);
            color: white;
            transform: translateX(4px);
        }

        /* Progress indicators */
        .progress {
            height: 8px;
            border-radius: var(--radius-full);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
        }

        .progress-bar {
            background: var(--gradient-primary);
            border-radius: var(--radius-full);
            transition: width var(--transition-base);
        }

        /* Enhanced tooltips */
        .tooltip-inner {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            color: var(--text-dark);
            border-radius: var(--radius-lg);
            padding: var(--space-3) var(--space-4);
            font-weight: 500;
        }

        /* Scroll Progress Indicator */
        /* ============================================
            ENHANCED TYPOGRAPHY & VISUAL HIERARCHY
           ============================================ */

        /* Advanced typography scale */
        h1, .h1 {
            font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        h2, .h2 {
            font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.01em;
            margin-bottom: var(--space-6);
            position: relative;
        }

        h2::after, .h2::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--gradient-primary);
            border-radius: var(--radius-full);
        }

        h3, .h3 {
            font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: var(--space-4);
        }

        h4, .h4 {
            font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: var(--space-3);
        }

        h5, .h5 {
            font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: var(--space-3);
        }

        h6, .h6 {
            font-size: clamp(var(--text-base), 1.5vw, var(--text-xl));
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: var(--space-2);
        }

        /* Enhanced paragraph styling */
        p {
            line-height: 1.7;
            margin-bottom: var(--space-4);
            color: var(--text-muted);
            font-weight: 400;
        }

        .lead {
            font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
            font-weight: 400;
            line-height: 1.6;
            color: var(--text-muted);
            margin-bottom: var(--space-6);
        }

        /* Enhanced text utilities */
        .text-gradient {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
        }

        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .text-highlight {
            background: linear-gradient(120deg, transparent 0%, rgba(255, 215, 0, 0.3) 0%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 80%;
        }

        /* Visual separators */
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            margin: var(--space-8) 0;
            border: none;
        }

        .divider-thick {
            height: 3px;
            background: var(--gradient-primary);
            border-radius: var(--radius-full);
            margin: var(--space-12) 0;
            border: none;
        }

        /* Enhanced spacing utilities */
        .section-spacing {
            padding: var(--space-20) 0;
        }

        .section-spacing-sm {
            padding: var(--space-12) 0;
        }

        .section-spacing-lg {
            padding: var(--space-24) 0;
        }

        /* Content containers with better spacing */
        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-6);
        }

        .content-container-narrow {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 var(--space-6);
        }

        .content-container-wide {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 var(--space-6);
        }

        /* Enhanced list styling */
        ul, ol {
            padding-left: var(--space-6);
        }

        li {
            margin-bottom: var(--space-2);
            line-height: 1.6;
        }

        .list-unstyled li {
            position: relative;
            padding-left: var(--space-6);
        }

        .list-unstyled li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: bold;
        }

        /* Enhanced blockquotes */
        blockquote {
            border-left: 4px solid var(--primary-color);
            padding-left: var(--space-6);
            margin: var(--space-8) 0;
            font-style: italic;
            font-size: var(--text-lg);
            color: var(--text-muted);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            padding: var(--space-6);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        }

        /* Enhanced code styling */
        code {
            background: var(--glass-bg);
            color: var(--primary-color);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-sm);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
        }

        pre {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            overflow-x: auto;
            margin: var(--space-6) 0;
        }

        /* Better visual hierarchy for sections */
        section {
            position: relative;
        }

        section:nth-child(even) {
            background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-white) 100%);
        }

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

        /* Enhanced focus states for accessibility */
        *:focus {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

        /* Skip link for accessibility */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--primary-color);
            color: white;
            padding: 8px;
            text-decoration: none;
            border-radius: var(--radius-md);
            transition: top var(--transition-fast);
        }

        .skip-link:focus {
            top: 6px;
        }