:root {
            --bg-body: #ffffff;
            --bg-hero: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
            --bg-metrics: #0f172a;
            --bg-about: #fdf8f2;
            --bg-services: #ffffff;
            --bg-showcase: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
            --bg-tech: #0b1329;
            --bg-reviews: #ffffff;
            --bg-cta: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
            --bg-contact: #090f1d;
            --bg-card: #ffffff;
            --text-primary: #0f172a;
            --text-secondary: #475569;
            --text-light: #ffffff;
            --brand-color: #059669;
            --brand-glow: rgba(5, 150, 105, 0.1);
            --border-line: #e2e8f0;
            --radius-main: 24px;
            --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        [data-theme="dark"] {
            --bg-body: #090d16;
            --bg-hero: linear-gradient(135deg, #061f14 0%, #0b1a30 100%);
            --bg-metrics: #050b14;
            --bg-about: #111622;
            --bg-services: #090d16;
            --bg-showcase: linear-gradient(180deg, #0d1321 0%, #080c16 100%);
            --bg-tech: #040811;
            --bg-reviews: #090d16;
            --bg-cta: linear-gradient(135deg, #022c22 0%, #01120e 100%);
            --bg-contact: #040811;
            --bg-card: #131b2e;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --brand-color: #34d399;
            --brand-glow: rgba(52, 211, 153, 0.15);
            --border-line: #1e293b;
        }

        /* Complete Browser Dynamic Pointer Override */
        @media (min-width: 992px) {
            html, body, a, button, select, input, textarea, .filter-btn, .swiper-pagination-bullet {
                cursor: none !important;
            }
            .custom-cursor {
                width: 32px; height: 32px;
                border: 2px solid var(--brand-color);
                border-radius: 50%;
                position: fixed;
                transform: translate(-50%, -50%);
                pointer-events: none;
                z-index: 99999;
                transition: width 0.2s, height 0.2s, background-color 0.2s;
                mix-blend-mode: difference;
            }
            .custom-cursor-dot {
                width: 6px; height: 6px;
                background-color: var(--brand-color);
                border-radius: 50%;
                position: fixed;
                transform: translate(-50%, -50%);
                pointer-events: none;
                z-index: 99999;
            }
            .custom-cursor.hovering-element {
                width: 55px; height: 55px;
                background-color: rgba(5, 150, 105, 0.15);
                border-color: var(--brand-color);
            }
        }

        body {
            background-color: var(--bg-body);
            color: var(--text-primary);
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Fixed Navigation Layout */
        .custom-navbar {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-line);
            transition: background-color 0.3s ease;
        }
        .custom-navbar .nav-link {
            color: var(--text-secondary) !important;
            transition: var(--transition-smooth);
            font-weight: 700;
            padding: 0.5rem 1rem !important;
        }
        .custom-navbar .nav-link:hover, 
        .custom-navbar .nav-link.active {
            color: var(--brand-color) !important;
        }
        
        /* Background Animated Architectural Layout Blocks */
        .section-hero { 
            background: var(--bg-hero); 
            position: relative; overflow: hidden; 
            background-size: 400% 400%;
            animation: gradientMove 15s ease infinite;
        }
        .section-metrics { 
            background: var(--bg-metrics); 
            color: var(--text-light) !important; 
            position: relative;
            overflow: hidden;
        }
        .section-metrics::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(5,150,105,0.1) 0%, transparent 60%);
            animation: rotatingPulse 20s linear infinite;
        }
        .section-about { 
            background: var(--bg-about); 
            position: relative; overflow: hidden;
        }
        .section-about::after {
            content: ''; position: absolute; bottom: 0; right: 0; width: 300px; height: 300px;
            background: var(--brand-glow); filter: blur(80px); border-radius: 50%;
            animation: floatingBlob 8s ease-in-out infinite alternate;
        }
        .section-services { 
            background: var(--bg-services); 
            position: relative; overflow: hidden;
        }
        .section-services::before {
            content: ''; position: absolute; top: 10%; left: 5%; width: 400px; height: 400px;
            background: rgba(56, 189, 248, 0.05); filter: blur(100px); border-radius: 50%;
            animation: floatingBlob 12s ease-in-out infinite alternate-reverse;
        }
        .section-showcase { 
            background: var(--bg-showcase); 
            background-size: 400% 400%;
            animation: gradientMove 20s ease infinite;
        }
        .section-reviews { 
            background: var(--bg-reviews); 
            position: relative; overflow: hidden;
        }
        .section-reviews::before {
            content: ''; position: absolute; top: 50%; left: 50%; width: 600px; height: 600px;
            background: var(--brand-glow); filter: blur(120px); transform: translate(-50%, -50%);
            animation: pulseCircle 6s ease-in-out infinite;
        }
        .section-cta {
            background: var(--bg-cta);
            position: relative; overflow: hidden;
            background-size: 400% 400%;
            animation: gradientMove 12s ease infinite;
        }
        .section-contact { 
            background: var(--bg-contact); 
            color: var(--text-light) !important; 
            position: relative; overflow: hidden;
        }
        .section-contact::before {
            content: ''; position: absolute; bottom: -10%; left: -10%; width: 50%; height: 50%;
            background: radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
            animation: rotatingPulse 25s linear infinite reverse;
        }

        /* Ambient Keyframe Core Registries */
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        @keyframes rotatingPulse {
            0% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }
        @keyframes floatingBlob {
            0% { transform: translateY(0px) scale(1); }
            100% { transform: translateY(-40px) scale(1.15); }
        }
        @keyframes pulseCircle {
            0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
        }

        h1, h2, h3, h4, h5, h6, .form-label { color: var(--text-primary); }
        .section-metrics h2, .section-metrics p,
        .section-cta h2, .section-cta p,
        .section-contact h2, .section-contact p, .section-contact label { color: #ffffff !important; }

        .interactive-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-line);
            border-radius: var(--radius-main);
            padding: 2.2rem;
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px -5px rgba(0,0,0,0.02);
            z-index: 2;
        }
        .interactive-card:hover {
            transform: translateY(-8px);
            border-color: var(--brand-color);
            box-shadow: 0 30px 50px -15px var(--brand-glow);
        }

        .status-pill {
            background-color: var(--bg-card);
            color: var(--brand-color) !important;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 0.6rem 1.4rem;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            border: 1px solid var(--border-line);
        }
        .live-dot {
            width: 10px; height: 10px;
            background-color: var(--brand-color);
            border-radius: 50%;
            animation: pulse-ring-emerald 2s infinite ease-in-out;
        }
        @keyframes pulse-ring-emerald {
            0% { transform: scale(0.8); opacity: 0.4; }
            50% { transform: scale(1.3); opacity: 1; }
            100% { transform: scale(0.8); opacity: 0.4; }
        }

        .action-button {
            background-color: var(--text-primary);
            color: var(--bg-body) !important;
            font-weight: 700;
            padding: 1rem 2rem;
            border-radius: 12px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            transition: var(--transition-smooth);
            border: none;
            white-space: nowrap;
        }

        .filter-btn {
            background: var(--bg-card);
            border: 1px solid var(--border-line);
            color: var(--text-secondary);
            padding: 0.6rem 1.4rem;
            border-radius: 10px;
            font-weight: 700;
            transition: var(--transition-smooth);
        }
        .filter-btn.active, .filter-btn:hover {
            background: var(--brand-color);
            color: #ffffff !important;
            border-color: var(--brand-color);
        }

        .portfolio-node.node-collapsed { display: none !important; }

        .form-input {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: gray !important;
            padding: 1.1rem;
            border-radius: 12px;
        }

        .toggle-widget {
            background-color: var(--bg-card);
            border: 1px solid var(--border-line);
            color: var(--text-primary);
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Swiper Adjustments */
        .swiper-pagination-bullet-active {
            background: var(--brand-color) !important;
            width: 24px !important;
            border-radius: 4px !important;
        }
        /* sidebar */