/* =========================================================
           ThirdEyee Pro - Master Integrated CSS (Header, Body, Footer)
           ========================================================= */
        :root {
            --primary: #8b5cf6;        /* Vivid Purple */
            --primary-dark: #6d28d9;    
            --primary-glow: rgba(139, 92, 246, 0.2); 
            --accent-1: #06b6d4;        /* Cyan */
            --accent-2: #ec4899;        /* Hot Pink */
            --success: #10b981;          
            --danger: #f43f5e;          
            
            --main-bg: #f8fafc;          /* Soft Off-White Background */
            --section-bg: #f1f5f9;      /* Slightly darker for contrast sections */
            --card-bg: #ffffff;          /* Pure White Cards */
            --input-bg: #ffffff;    
            
            --text-main: #0f172a;        /* Dark Slate Text */
            --text-muted: #64748b;      /* Medium Slate Gray */
            --border-color: #e2e8f0;    /* Light Border */
            
            --transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        :focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 6px; }

        @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;
            }
            body { cursor: auto !important; }
        }

        /* ════════════════════════════════════════════
           SCROLL PROGRESS BAR (SMOOTH HARDWARE ACCELERATED)
        ════════════════════════════════════════════ */
        .scroll-progress { 
            position: fixed; top: 0; left: 0; height: 4px; width: 100%; 
            background: linear-gradient(90deg, var(--primary), var(--accent-1), var(--accent-2)); 
            z-index: 10001; 
            transform-origin: left; 
            transform: scaleX(0); 
            will-change: transform; 
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--main-bg);
            color: var(--text-main);
            line-height: 1.7;
            overflow-x: hidden;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        h1, h2, h3, h4, h5, h6 { color: var(--text-main); }

        @keyframes slideInLeft { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
        @keyframes popIn { 0% { transform: scale(0.92) translateY(30px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
        @keyframes liquidAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes auroraPulse { 0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); } 70% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }

        /* ════════════════════════════════════════════
           LOADING SCREEN SPECIFIC
        ════════════════════════════════════════════ */
        #loadingScreen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--main-bg); z-index: 99999;
            display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.5rem;
            transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), filter 0.9s ease;
        }
        #loadingScreen.hide { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(4); filter: blur(20px); }

        .loading-brand-box { display: flex; flex-direction: column; align-items: center; gap: 15px; animation: popIn 1s ease-out forwards; }
        
        .ld-tagline { font-family: 'Outfit', sans-serif; font-size: 0.88rem; color: var(--primary); letter-spacing: 3px; text-transform: uppercase; font-weight: 600; animation: popIn 0.8s 0.3s ease-out both; }
        .ld-bar-track { width: clamp(200px, 30vw, 320px); height: 4px; background: rgba(0,0,0,0.08); border-radius: 99px; overflow: hidden; animation: popIn 0.8s 0.5s ease-out both; }
        .ld-bar-fill { height: 100%; border-radius: 99px; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent-1), var(--accent-2)); background-size: 200% 100%; animation: ldBarFill 2.4s cubic-bezier(0.4,0,0.2,1) forwards, liquidAurora 1.2s linear infinite; }
        @keyframes ldBarFill { 0%{width:0%} 60%{width:75%} 85%{width:90%} 100%{width:100%} }
        .loading-brand-box .cyber-eye-svg { animation: eyeOpenSequence 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
        .loading-brand-box .eye-pupil { opacity: 0; animation: irisFadeIn 2.6s ease forwards; }
        @keyframes eyeOpenSequence {
            0%, 14% { transform: scaleY(0.06); opacity: 0.6; }
            45% { transform: scaleY(0.5); opacity: 0.85; }
            70% { transform: scaleY(1.08); opacity: 1; }
            85% { transform: scaleY(0.94); }
            100% { transform: scaleY(1); opacity: 1; }
        }
        @keyframes irisFadeIn { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; } }

        .container-custom { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

        /* HEADER / NAVBAR STYLES */
        .navbar-custom {
            position: fixed; top: 0; left: 0; width: 100%;
            background: rgba(255, 255, 255, 0.3); 
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); padding: 0.8rem 0; 
            box-shadow: none;
        }
        .navbar-custom.scrolled { 
            background: rgba(235, 245, 255, 0.85); 
            border-bottom: 1px solid rgba(6, 182, 212, 0.2); 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
            padding: 0.5rem 0; 
        }
        .nav-container { max-width: 1440px; margin: 0 auto; padding: 0 1rem; }

        .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-left: -15px; }
        .brand-title { font-family: 'Playfair Display', serif; font-weight: 900; color: #0f172a; margin-bottom: 0; font-size: 26px; }
        .brand-text-glow { background: linear-gradient(90deg, #4f46e5, #0ea5e9, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        .navbar-nav .nav-link {
            color: var(--text-muted) !important; font-weight: 600; position: relative;
            transition: all 0.4s ease; padding: 0.6rem 1.25rem; border-radius: 12px; font-size: 1.05rem;
        }
        .navbar-nav .nav-link:hover { color: var(--primary) !important; background: rgba(139, 92, 246, 0.08); transform: translateY(-2px); }
        .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--primary); transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
        .navbar-nav .nav-link:hover::after { width: 60%; }

        @media (min-width: 992px) {
            .nav-container { position: relative; }
            .navbar-nav { position: absolute; left: 50%; transform: translateX(-50%); margin: 0 !important; }
        }
        .navbar-toggler-icon { filter: invert(1); }

        /* EYE ANIMATION */
        .eye-wrapper { display: inline-flex; align-items: center; justify-content: center; animation: eyeGlowPulse 3.5s infinite ease-in-out; }
        .cyber-eye-svg { transform-origin: center center; will-change: transform; filter: drop-shadow(0px 2px 4px rgba(15, 23, 42, 0.15)); }
        .eye-pupil { transition: transform 0.1s ease-out; transform-origin: 50px 30px; }
        .navbar-custom .cyber-eye-svg { animation: eyeBlink 5.5s infinite cubic-bezier(0.25, 1, 0.5, 1); animation-delay: 1s; }
        @keyframes eyeGlowPulse { 0%, 100% { filter: drop-shadow(0px 2px 4px rgba(15, 23, 42, 0.15)); transform: scale(1); } 50% { filter: drop-shadow(0px 6px 10px rgba(15, 23, 42, 0.1)); transform: scale(1.03); } }
        @keyframes eyeBlink { 0%, 93%, 97%, 100% { transform: scaleY(1) scaleX(1); } 95% { transform: scaleY(0.05) scaleX(1.05); } }

        /* BUTTONS */
        .btn-custom {
            padding: 0.75rem 1.75rem; border-radius: 12px; font-weight: 700; text-decoration: none;
            transition: var(--transition); cursor: pointer; border: none; font-size: 1rem;
            display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            position: relative; overflow: hidden; will-change: transform;
        }
        .btn-custom::after {
            content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none;
        }
        .btn-custom:hover::after { left: 130%; }
        
        .btn-primary-premium {
            background: linear-gradient(270deg, var(--primary), var(--accent-1), var(--primary)); background-size: 300% 300%;
            color: #ffffff !important; animation: liquidAurora 6s ease infinite; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
        }
        .btn-primary-premium:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4); }
        .btn-outline-custom { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); }
        .btn-outline-custom:hover { background: rgba(139, 92, 246, 0.08); color: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(139, 92, 246, 0.1); }
        .btn-white-custom { background: var(--text-main); color: var(--dark-bg); font-weight: 800; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1); }
        .btn-white-custom:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2); background: var(--accent-1); color: white; }
        .btn-outline-white-custom { background: transparent; color: var(--text-main); border: 2px solid rgba(255, 255, 255, 0.2); }
        .btn-outline-white-custom:hover { border-color: var(--accent-1); color: var(--accent-1); transform: translateY(-3px); }
        .arrow { display: inline-block; transition: transform 0.3s ease; }
        .arrow-link:hover .arrow { transform: translateX(5px); }

        /* SCROLL FADE (FAST & SMOOTH) */
        .scroll-fade { 
            opacity: 0; 
            transform: translateY(20px); 
            transition: opacity 0.4s ease-out, transform 0.4s ease-out; 
        }
        .scroll-fade.visible { 
            opacity: 1; 
            transform: translateY(0); 
        }

        /* SECTION HELPERS & TAGS */
        .section-padding { padding: 8rem 0; }
        .section-tag {
            color: var(--primary); background: rgba(139, 92, 246, 0.1);
            padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 15px;
            border: 1px solid rgba(139, 92, 246, 0.2); transition: var(--transition);
        }
        .section-tag:hover { box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); transform: translateY(-2px); }
        .section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; color: var(--text-main); margin-bottom: 1rem; line-height: 1.2; }
        .section-description { font-size: 1.2rem; color: var(--text-muted); max-width: 720px; margin: 0 auto; line-height: 1.8; }

        /* HERO SECTION */
        .hero-section {
            min-height: 100vh; display: flex; align-items: center; padding-top: 130px; padding-bottom: 5rem;
            position: relative; overflow: hidden; background: var(--main-bg);
        }
        .hero-section::before {
            content: ''; position: absolute; width: 900px; height: 900px;
            background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%); border-radius: 50%;
            top: -450px; right: -300px; animation: floatOrb 20s ease-in-out infinite; pointer-events: none;
        }
        .hero-section::after {
            content: ''; position: absolute; width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%); border-radius: 50%;
            bottom: -200px; left: -100px; animation: floatOrb 28s ease-in-out infinite reverse; pointer-events: none;
        }
        @keyframes floatOrb { 0%, 100% { transform: translate(0,0) rotate(0deg); } 33% { transform: translate(30px,-30px) rotate(120deg); } 66% { transform: translate(-20px,20px) rotate(240deg); } }

        .hero-text h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text-main); }
        .hero-text .highlight { background: linear-gradient(135deg, var(--primary), var(--accent-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .hero-text p { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-muted); margin-bottom: 2rem; line-height: 1.8; opacity: 0; animation: fadeInUp 0.8s ease-out 0.2s both; animation-play-state: paused; }
        .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeInUp 0.8s ease-out 0.4s both; animation-play-state: paused; }
        .hero-stats { margin-top: 3rem; opacity: 0; animation: fadeInUp 0.8s ease-out 0.6s both; animation-play-state: paused; }
        .stat { text-align: center; }
        .stat-number { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; color: var(--text-main); display: block; line-height: 1; margin-bottom: 0.4rem; }
        .stat-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem; font-weight: 600; text-transform: uppercase; }

        .live-pulse { display: inline-block; width: 10px; height: 10px; background: var(--accent-1); border-radius: 50%; margin-right: 8px; animation: auroraPulse 2s infinite; }

        .line-mask { display: block; overflow: hidden; padding-bottom: 0.12em; }
        .word-reveal { display: inline-block; opacity: 0; transform: translateY(105%) rotate(4deg); filter: blur(6px); animation: wordIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-play-state: paused; animation-delay: calc(var(--d, 0) * 0.08s); }
        @keyframes wordIn { to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }

        .hero-image { position: relative; opacity: 0; animation: fadeInRight 1s ease-out 0.3s both; animation-play-state: paused; }
        body.loaded .hero-text p, body.loaded .hero-buttons, body.loaded .hero-stats, body.loaded .hero-image, body.loaded .word-reveal { animation-play-state: running; }
        .hero-image-card { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.1); border: 1px solid var(--border-color); transition: transform 0.15s ease-out, box-shadow 0.5s ease; background: var(--card-bg); }
        .hero-image-card:hover { box-shadow: 0 40px 90px rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); }
        .hero-image-card img, .dashboard-graphic { width: 100%; display: block; }

        .dash-live-dot { animation: dashDotPulse 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
        @keyframes dashDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.4); } }
        .dash-bar { animation: dashBarPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
        @keyframes dashBarPulse { 0%, 100% { transform: scaleY(0.82); } 50% { transform: scaleY(1.18); } }
        .dash-shimmer { animation: dashShimmerSweep 3s ease-in-out infinite; }
        @keyframes dashShimmerSweep { 0% { transform: translateX(0); } 100% { transform: translateX(640px); } }
        .dash-live-ping { animation: dashLivePing 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
        @keyframes dashLivePing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }
        .dash-hour-line { opacity: 0.9; }
        .dash-hour-dot { animation: dashHourGlow 2.4s ease-in-out infinite; }
        @keyframes dashHourGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
        .dash-cursor-group { animation: dashCursorMove 9s ease-in-out infinite; transform-box: view-box; }
        @keyframes dashCursorMove { 0%, 22% { transform: translate(180px, 210px); } 33%, 55% { transform: translate(400px, 210px); } 66%, 88% { transform: translate(150px, 290px); } 100% { transform: translate(180px, 210px); } }
        .dash-ripple { animation: dashRipplePing 9s ease-out infinite; transform-box: fill-box; transform-origin: center; }
        .dash-ripple-a { animation-delay: 0s; } .dash-ripple-b { animation-delay: 3s; } .dash-ripple-c { animation-delay: 6s; }
        @keyframes dashRipplePing { 0% { transform: scale(1); opacity: 0.7; } 8% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }

        .floating-card {
            position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
            padding: 1.5rem; border-radius: 16px; border: 1px solid var(--border-color);
            box-shadow: 0 10px 40px rgba(0,0,0,0.08); animation: floatCard 4s ease-in-out infinite; z-index: 10; min-width: 140px;
        }
        .card-1 { top: 10%; left: -10%; animation-delay: 0s; }
        .card-2 { bottom: 15%; right: -10%; animation-delay: 1.5s; }
        @keyframes floatCard { 0%, 100% { transform: translate(var(--px, 0px), var(--py, 0px)) translateY(0); } 50% { transform: translate(var(--px, 0px), var(--py, 0px)) translateY(-15px); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1); } }

        /* FEATURE & SOLUTIONS CARDS */
        .feature-card, .solutions-card, .testimonial-card {
            background: var(--card-bg);
            border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            border: 1px solid var(--border-color); height: 100%; position: relative;
            transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; overflow: hidden;
        }
        .feature-card:hover, .solutions-card:hover, .testimonial-card:hover {
            transform: translateY(-8px); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3);
        }

        .feature-card::before, .solutions-card::before, .testimonial-card::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; opacity: 0;
            transition: opacity 0.5s ease;
            background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.12), rgba(6, 182, 212, 0.06) 45%, transparent 70%);
            pointer-events: none;
        }
        .feature-card:hover::before, .solutions-card:hover::before, .testimonial-card:hover::before { opacity: 1; }
        .feature-card > *, .solutions-card > *, .testimonial-card > * { position: relative; z-index: 1; }
        
        .stat-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 20px; transition: var(--transition); }
        .icon-purple { background: rgba(139, 92, 246, 0.1); color: var(--primary); }
        .icon-cyan { background: rgba(6, 182, 212, 0.1); color: var(--accent-1); }
        .icon-pink { background: rgba(236, 72, 153, 0.1); color: var(--accent-2); }
        .feature-card:hover .stat-icon { transform: scale(1.1) rotate(-5deg); box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); color: #ffffff; background: var(--primary); }
        
        .feature-card h3, .solutions-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; color: var(--text-main); transition: color 0.3s ease; }
        .solutions-card:hover h3 { color: var(--primary); }
        .feature-card p, .solutions-card p { color: var(--text-muted); line-height: 1.8; margin-bottom: 0; }
        .solutions-card p { margin-bottom: 1.5rem; }
        .card-link { display: inline-flex; align-items: center; color: var(--primary); font-weight: 700; text-decoration: none; gap: 0.5rem; transition: gap 0.3s ease; font-size: 1rem; }
        .card-link:hover { gap: 1rem; color: var(--primary-dark); }
        .card-link svg { width: 20px; height: 20px; transition: transform 0.3s ease; }

        /* TESTIMONIALS */
        .testimonials-section { padding: 8rem 0; background: var(--section-bg); position: relative; overflow: hidden; border-top: 1px solid var(--border-color); }
        .testimonials-section::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(6,182,212,0.05) 0%, transparent 70%); border-radius: 50%; top: -280px; left: -150px; pointer-events: none; }
        .testimonials-section::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.05), transparent 70%); border-radius: 50%; bottom: -150px; right: -100px; pointer-events: none; }
        
        .testimonial-stars { color: #f59e0b; font-size: 1.2rem; margin-bottom: 1rem; }
        .testimonial-text { color: var(--text-main); line-height: 1.8; margin-bottom: 1.5rem; font-style: italic; opacity: 0.9; }
        .testimonial-author { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--border-color); padding-top: 15px; }
        .author-avatar { width: 50px; height: 50px; border-radius: 14px; background: rgba(139, 92, 246, 0.1); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: var(--primary); flex-shrink: 0; transition: transform 0.3s ease; }
        .testimonial-card:hover .author-avatar { transform: scale(1.1) rotate(5deg); background: var(--primary); color: white; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }
        .author-info h4 { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; color: var(--text-main); }
        .author-info p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

        /* CTA SECTION */
        .cta-section {
            padding: 8rem 0; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white; text-align: center; position: relative; overflow: hidden;
        }
        .cta-section::before {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 1000px; height: 500px; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1) 0%, transparent 60%); pointer-events: none;
        }
        .cta-blob { position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; background: rgba(255, 255, 255, 0.12); animation: floatOrb 18s ease-in-out infinite; }
        .cta-blob-1 { width: 280px; height: 280px; top: -80px; left: 8%; }
        .cta-blob-2 { width: 220px; height: 220px; bottom: -60px; right: 10%; animation-duration: 24s; animation-direction: reverse; }
        .cta-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
        .cta-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; margin-bottom: 1.5rem; line-height: 1.2; color: #ffffff; }
        .cta-content p { font-size: 1.3rem; margin-bottom: 2.5rem; color: rgba(255,255,255,0.9); line-height: 1.8; }

        .btn-white-premium { background: #ffffff; color: var(--primary); font-weight: 800; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .btn-white-premium:hover { transform: translateY(-3px) scale(1.05); background: var(--accent-1); color: #ffffff; }
        .btn-outline-white { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; }
        .btn-outline-white:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); transform: translateY(-3px); color: #ffffff;}

        /* =========================================================
           ULTIMATE CLEAN DARK FOOTER (PILLAR PAGES & ACCORDION)
           ========================================================= */
        .footer { 
            background: #0f172a; 
            color: #94a3b8; 
            padding: 5rem 0 0 0; 
            position: relative; 
            border-top: 1px solid rgba(139, 92, 246, 0.2); 
            overflow: hidden; 
            font-family: 'Outfit', sans-serif;
            margin-top: 0;
        }
        .footer-column { 
            margin-bottom: 2rem; 
            position: relative;
            z-index: 2;
        }
        .footer-column h4 { 
            font-size: 1.15rem; 
            margin-bottom: 1.2rem; 
            color: #ffffff; 
            font-weight: 800; 
            font-family: 'Playfair Display', serif; 
            letter-spacing: 0.5px; 
        }
        .footer-column h4.mt-4 {
            margin-top: 2.5rem !important; 
        }
        .footer-links { 
            list-style: none; 
            padding: 0; 
            margin: 0; 
        }
        .footer-links li { 
            margin-bottom: 0.8rem; 
        }
        .footer-links a { 
            color: #94a3b8; 
            font-weight: 500; 
            text-decoration: none !important; 
            transition: all 0.3s ease; 
            display: inline-block; 
            position: relative; 
            font-size: 0.95rem; 
            outline: none;
        }
        .footer-links a:hover,
        .footer-links a:focus,
        .footer-links a:active { 
            color: var(--primary); 
            transform: translateX(5px); 
            text-decoration: none !important; 
        }
        .footer-links a::after {
            display: none !important; 
        }
        
        /* --- Footer Social Icons --- */
        .footer-social { 
            display: flex; 
            gap: 1rem; 
            align-items: center; 
            flex-wrap: wrap;
            margin-top: 2rem; 
        }
        .social-icon { 
            width: 42px; 
            height: 42px; 
            border-radius: 12px; 
            background: #1e293b; 
            border: 1px solid rgba(255, 255, 255, 0.1); 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: var(--transition); 
            text-decoration: none; 
            color: #cbd5e1; 
        }
        .social-icon:hover { 
            background: rgba(139, 92, 246, 0.1); 
            transform: translateY(-4px); 
            border-color: var(--primary); 
            color: var(--primary); 
            box-shadow: 0 8px 15px rgba(139, 92, 246, 0.15); 
        }

        /* --- Footer Bottom Section (Copyright Centered) --- */
        .footer-bottom { 
            background: #0b0f19; 
            padding: 1.5rem 0; 
            margin-top: 3rem; 
            border-top: 1px solid rgba(255, 255, 255, 0.05); 
            position: relative;
            z-index: 2;
            text-align: center; 
        }
        .footer-copyright {
            color: #64748b; 
            font-size: 0.95rem; 
            font-weight: 500;
            margin: 0;
        }

        /* =========================================================
           ALL-SCREEN RESPONSIVE FIXES (Desktop, Tablet, Mobile)
           ========================================================= */

        /* 1. Prevent Accordion Bugs on Tablet & Desktop (768px and above) */
        @media (min-width: 768px) {
            .footer-column h4 { pointer-events: none; } /* Disable JS clicks */
            .footer-column h4::after { display: none !important; } /* Hide '+' icons completely */
            .footer-links {
                max-height: none !important;
                opacity: 1 !important;
                overflow: visible !important;
            }
        }

        /* 2. Tablet Specific Spacing (768px to 991px) */
        @media (min-width: 768px) and (max-width: 991px) {
            .footer { padding-top: 4rem; }
            .footer-column { margin-bottom: 2.5rem; }
            .footer-column h4.mt-4 { margin-top: 2rem !important; }
        }
        
        /* 3. Mobile View (Below 768px) - Force 1 Column Accordion */
        @media (max-width: 767px) {
            .footer { padding-top: 2rem; }
            
            /* CRITICAL FIX: Overrides Bootstrap grid to FORCE single column */
            .footer-column { 
                flex: 0 0 100% !important;
                max-width: 100% !important;
                margin-top: 0 !important; 
                margin-bottom: 0 !important; 
                padding: 0 !important; 
                border-bottom: none !important; 
            }
            
            /* Heading Styling - Equal Top & Bottom Spacing */
            .footer-column h4 { 
                cursor: pointer; 
                padding: 1.25rem 0 !important; 
                margin: 0 !important; 
                display: flex; 
                justify-content: space-between; 
                align-items: center; 
                user-select: none;
                pointer-events: auto; /* Enable JS clicks for mobile */
            }
            
            /* Force second headings in same column to match perfectly */
            .footer-column h4.mt-4 {
                margin-top: 0 !important; 
            }
            
            /* Plus (+) Icon */
            .footer-column h4::after { 
                content: '+'; 
                font-size: 1.5rem; 
                font-weight: 300; 
                color: var(--primary); 
                transition: transform 0.3s; 
            }
            
            /* Minus (-) Icon when open */
            .footer-column h4.active::after { 
                content: '−'; 
                color: #ec4899; 
                transform: rotate(180deg); 
            }
            
            /* Hide links by default on Mobile */
            .footer-links { 
                max-height: 0; 
                overflow: hidden; 
                opacity: 0; 
                transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; 
            }
            
            /* Show links ONLY under the clicked active heading */
            .footer-column h4.active + .footer-links { 
                max-height: 600px; 
                opacity: 1; 
                padding-top: 0.5rem; 
                padding-bottom: 1rem; 
            }
            
            /* Keep Social Icons visible and spaced properly */
            .footer-social {
                display: flex;
                justify-content: flex-start;
                margin-top: 1rem !important;
                padding-bottom: 1rem;
            }
            
            .footer-bottom {
                margin-top: 0;
                padding: 1.5rem 1rem;
            }
        }

    

        /* RESPONSIVE FIXES */
        @media (max-width: 991px) {
            .section-padding { padding: 5rem 0; }
            .testimonials-section, .cta-section { padding: 5rem 0; }
            .navbar-custom { padding: 0.5rem 0; }
        }
        @media (max-width: 768px) {
            .container-custom { padding: 0 1.5rem; }
            .hero-section { padding-top: 100px; min-height: auto; padding-bottom: 3rem; }
            .floating-card { display: none; }
            .navbar-custom .navbar-collapse { 
                background: rgba(240, 248, 255, 0.95); padding: 1.5rem; border-radius: 16px; 
                margin-top: 1rem; border: 1px solid rgba(6, 182, 212, 0.2); box-shadow: 0 15px 40px rgba(0,0,0,0.08); 
                backdrop-filter: blur(20px);
            }
            .footer { padding-top: 4rem; }
            .footer-column { border-bottom: 1px solid rgba(6, 182, 212, 0.15); padding: 1.5rem 0; margin-bottom: 0; }
            .footer-column:last-child { border-bottom: none; }
            .footer-column h4 { cursor: pointer; padding: 0.5rem 0; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; user-select: none; }
            .footer-column h4::after { content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--primary); transition: transform 0.3s; }
            .footer-column.active h4::after { content: '−'; color: var(--accent-2); transform: rotate(180deg); }
            .footer-links { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; }
            .footer-column.active .footer-links { max-height: 600px; opacity: 1; padding-top: 1.5rem; padding-bottom: 0.5rem; }
            .footer-social { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; margin-top: 0; }
            .footer-column.active .footer-social { max-height: 200px; opacity: 1; padding-top: 1.5rem; }
            .brand-title { font-size: 30px; }
        }