nav { position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%); width: fit-content; height: 60px; background: rgba(10, 10, 10, 0.4); backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; padding: 0 1.5rem 0 2rem; display: flex; align-items: center; gap: 2.5rem; z-index: 5000; }
        .hero { padding-top: 140px; }
        .reveal { opacity: 0; transform: translateY(15px); }
        .reveal.active { opacity: 1; transform: translateY(0); transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
        @media (max-width: 768px) { nav { width: 95vw; justify-content: space-between; } .nav-links { display: none; } .mobile-toggle { display: block; } }
        .mobile-overlay { display: none; visibility: hidden; }
        .overlay-link { display: none; }
        .mobile-overlay.active { display: flex !important; visibility: visible !important; }
        .mobile-overlay.active .overlay-link { display: block !important; opacity: 1 !important; visibility: visible !important; }
        html, body { overflow-x: hidden !important; }

        /* 3D Stacking Layer Depth CSS */
        .depth-card {
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
        }
        .depth-card-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(199, 0, 255, 0.05), rgba(42, 101, 229, 0.05));
            border-radius: inherit;
            z-index: 1;
            transition: opacity 0.5s;
            opacity: 0.5;
            pointer-events: none;
        }
        .depth-card:hover .depth-card-bg {
            opacity: 1;
        }
        .depth-card-content {
            position: relative;
            transform: translateZ(30px);
            z-index: 2;
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .depth-card-float {
            transform: translateZ(60px);
            z-index: 3;
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* Journey Timeline */
        .journey-timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem 0;
        }
        .journey-node {
            position: relative;
            width: 50%;
            margin-bottom: 4rem;
            z-index: 1;
        }
        .journey-node.left {
            left: 0;
            padding-right: 50px;
            text-align: right;
        }
        .journey-node.right {
            left: 50%;
            padding-left: 50px;
            text-align: left;
        }
        .journey-dot {
            position: absolute;
            top: 50px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 4px solid #0B0B0E;
            z-index: 2;
        }
        .journey-node.left .journey-dot {
            right: -12px;
        }
        .journey-node.right .journey-dot {
            left: -12px;
        }
        
        /* Logos in the empty space */
        .journey-logo {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 280px;
            max-width: 60%;
            opacity: 0.3; /* Increased base brightness */
            pointer-events: none;
            z-index: 0;
            filter: grayscale(100%);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .journey-node:hover .journey-logo {
            opacity: 0.5; /* Increased hover brightness */
            filter: grayscale(0%);
            transform: translateY(-50%) scale(1.05);
        }
        .journey-node.left .journey-logo {
            right: -75%;
        }
        .journey-node.right .journey-logo {
            left: -75%;
        }

        @media (max-width: 768px) {
            .journey-node {
                width: 100%;
                margin-bottom: 3rem;
            }
            .journey-node.left, .journey-node.right {
                left: 0;
                padding-left: 60px;
                padding-right: 15px;
                text-align: left;
            }
            .journey-node.left .journey-dot, .journey-node.right .journey-dot {
                left: 8px; /* 20px line - 12px dot radius = 8px */
                right: auto;
            }
            .journey-logo {
                display: none;
            }
        }