.glass-panel {
            background: rgba(14, 19, 31, 0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }
        .text-energy-flow {
            background: linear-gradient(135deg, #00d2ff, #00e478);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* Interactive Node Cards */
        .node-card {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                        filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            z-index: 10;
        }
        
        #hierarchy-container.has-selection .node-card:not(.selected-node) {
            opacity: 0.35;
            transform: scale(0.96);
            filter: grayscale(30%) blur(0.5px);
        }
        
        #hierarchy-container.has-selection .node-card.selected-node {
            opacity: 1;
            transform: scale(1.04);
            z-index: 20;
            box-shadow: 0 0 35px rgba(0, 210, 255, 0.3);
            border-color: rgba(0, 210, 255, 0.6);
        }
        
        .node-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 35px -10px rgba(0, 228, 120, 0.25);
            border-color: rgba(0, 228, 120, 0.5);
        }
        
        #hierarchy-container.has-selection .node-card.selected-node:hover {
            transform: translateY(-8px) scale(1.06);
            box-shadow: 0 15px 40px -10px rgba(0, 210, 255, 0.4);
            border-color: rgba(0, 210, 255, 0.8);
        }

        /* SVG Connectors */
        .connector-path {
            stroke: url(#connector-grad);
            stroke-width: 2.5;
            fill: none;
            filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.6));
            stroke-linecap: round;
            transition: stroke-dashoffset 0.1s ease-out;
        }

        /* Animations */
        .header-scan-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(0,210,255,0.8) 50%, transparent 100%);
            background-size: 200% 100%;
            animation: scanLine 3s linear infinite;
        }
        @keyframes scanLine {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @keyframes headerGlow {
            0%, 100% { box-shadow: 0 4px 30px rgba(0, 210, 255, 0.05); }
            50% { box-shadow: 0 4px 40px rgba(0, 228, 120, 0.15); }
        }

        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .bio-content {
            display: none;
        }

        /* ═══════════════════════════════════════════════ */
        /* MOBILE ENHANCEMENTS                           */
        /* ═══════════════════════════════════════════════ */

        /* Mobile Scroll-Focus (Rolodex Effect) */
        @media (max-width: 639px) {
            .node-card {
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                            opacity 0.4s ease,
                            box-shadow 0.4s ease !important;
            }
            .node-card.mobile-dimmed {
                transform: scale(0.93);
                opacity: 0.5;
                box-shadow: none !important;
            }
            .node-card.mobile-focus {
                transform: scale(1.02);
                opacity: 1;
                box-shadow: 0 0 35px rgba(0, 210, 255, 0.35), 0 0 70px rgba(0, 210, 255, 0.1) !important;
                border-color: rgba(0, 210, 255, 0.4) !important;
            }

            /* Tier-level chip on mobile */
            .mobile-tier-chip {
                display: inline-block;
                background: rgba(0, 210, 255, 0.08);
                border: 1px solid rgba(0, 210, 255, 0.2);
                border-radius: 999px;
                padding: 4px 14px;
                font-size: 9px;
                letter-spacing: 0.15em;
                text-transform: uppercase;
                color: #a5e7ff;
                font-weight: 600;
                backdrop-filter: blur(6px);
                margin-bottom: 16px;
            }

            /* Mobile spine energy node dot */
            .mobile-spine-node {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 28px;
                position: relative;
            }
            .mobile-spine-node::before {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #00d2ff;
                box-shadow: 0 0 12px rgba(0, 210, 255, 0.9), 0 0 24px rgba(0, 210, 255, 0.4);
                animation: spineNodePulse 2s ease-in-out infinite;
            }
            @keyframes spineNodePulse {
                0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(0,210,255,0.9), 0 0 20px rgba(0,210,255,0.4); }
                50% { transform: scale(1.5); box-shadow: 0 0 16px rgba(0,210,255,1), 0 0 40px rgba(0,210,255,0.6); }
            }

            /* Mobile Swipe Carousel Wrapper — Full-bleed so first & last card center correctly */
            .mobile-swipe-row {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: flex-start !important;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                gap: 16px;
                /* Break out of parent padding to be full viewport width */
                width: 100vw;
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
                /* Side padding = half the gap between viewport and card */
                padding: 8px 9vw 20px 9vw !important;
                scroll-padding-inline: 9vw;
                scrollbar-width: none;
                box-sizing: border-box;
            }
            .mobile-swipe-row::-webkit-scrollbar {
                display: none;
            }
            .mobile-swipe-row > .node-card {
                flex: 0 0 82vw;
                max-width: 82vw;
                scroll-snap-align: center;
            }

            /* Carousel dot indicator */
            .swipe-dots {
                display: flex !important;
                gap: 6px;
                justify-content: center;
                margin-top: 4px;
            }
            .swipe-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: rgba(165, 231, 255, 0.25);
                transition: all 0.3s ease;
            }
            .swipe-dot.active {
                width: 18px;
                border-radius: 3px;
                background: #00d2ff;
                box-shadow: 0 0 8px rgba(0, 210, 255, 0.7);
            }

            /* Swipe hint label */
            .swipe-hint {
                display: flex !important;
                align-items: center;
                gap: 5px;
                font-size: 10px;
                color: rgba(165,231,255,0.5);
                letter-spacing: 0.1em;
                justify-content: center;
                margin-bottom: 6px;
                animation: swipeHintFade 3s ease-in-out 1s forwards;
                opacity: 1;
            }
            @keyframes swipeHintFade {
                0% { opacity: 1; }
                100% { opacity: 0; }
            }
        }

        /* Hide mobile-only elements on desktop */
        .mobile-spine-node,
        .mobile-tier-chip,
        .swipe-dots,
        .swipe-hint {
            display: none;
        }

        /* ═══════════════════════════════════════════════ */
        /* CINEMATIC MODAL — ENHANCED ANIMATION SYSTEM   */
        /* ═══════════════════════════════════════════════ */

        /* Modal Base */
        #bio-modal {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
        }
        #bio-modal.active {
            visibility: visible;
            opacity: 1;
        }

        /* Modal Card Entry */
        #bio-modal #modal-card {
            transform: scale(0.85) translateY(30px);
            opacity: 0;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #bio-modal.active #modal-card {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        /* Modal Card Breathing */
        @keyframes breatheScale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.003); }
        }
        #bio-modal.active #modal-card {
            animation: breatheScale 4s ease-in-out infinite 1s;
        }

        /* ── Staggered Entry for Modal Children ── */
        .modal-el {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .modal-el.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Rotating Energy Rings ── */
        @keyframes rotateClockwise {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes rotateCounterClockwise {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }
        .animate-ring-cw {
            animation: rotateClockwise 10s linear infinite;
        }
        .animate-ring-ccw {
            animation: rotateCounterClockwise 14s linear infinite;
        }

        /* ── Pulsing Border Glow on Profile ── */
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 20px rgba(0,210,255,0.4), 0 0 40px rgba(0,210,255,0.1); }
            50% { box-shadow: 0 0 30px rgba(0,210,255,0.7), 0 0 60px rgba(0,228,120,0.2); }
        }
        .modal-profile-glow {
            animation: pulseGlow 3s ease-in-out infinite;
        }

        /* ── Profile Image Entry ── */
        @keyframes profileReveal {
            0% { transform: scale(0.5); opacity: 0; filter: blur(8px); }
            60% { transform: scale(1.08); opacity: 1; filter: blur(0px); }
            100% { transform: scale(1); opacity: 1; filter: blur(0px); }
        }
        .modal-profile-animate {
            animation: profileReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* ── Orbiting Particles ── */
        @keyframes orbitParticle {
            0% { transform: rotate(var(--start-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--start-angle))); }
            100% { transform: rotate(calc(var(--start-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--start-angle) + 360deg))); }
        }
        .orbit-particle {
            position: absolute;
            width: var(--size, 4px);
            height: var(--size, 4px);
            background: var(--color, #00d2ff);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin-top: calc(var(--size, 4px) / -2);
            margin-left: calc(var(--size, 4px) / -2);
            filter: drop-shadow(0 0 4px var(--color, #00d2ff));
            animation: orbitParticle var(--duration, 6s) linear infinite;
            opacity: 0.8;
        }

        /* ── SVG Divider Line Draw ── */
        @keyframes drawLine {
            0% { stroke-dashoffset: 100%; opacity: 0; }
            30% { opacity: 1; }
            100% { stroke-dashoffset: 0%; opacity: 1; }
        }
        .modal-divider-line {
            stroke-dasharray: 100%;
            stroke-dashoffset: 100%;
            opacity: 0;
        }
        .modal-divider-line.animate {
            animation: drawLine 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* ── Close Button Rotate-In ── */
        @keyframes rotateIn {
            0% { transform: rotate(-90deg) scale(0); opacity: 0; }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }
        .modal-close-animate {
            animation: rotateIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* ── Enhanced Sparkles ── */
        @keyframes modalSparkle {
            0%, 100% { opacity: 0; transform: scale(0.2) translateY(0); }
            40% { opacity: 0.9; }
            50% { opacity: 0.7; transform: scale(1.2) translateY(-25px); }
        }
        .modal-sparkle-dot {
            position: absolute;
            border-radius: 50%;
            filter: drop-shadow(0 0 6px var(--sparkle-color, #00d2ff));
            animation: modalSparkle var(--sparkle-dur, 4s) ease-in-out infinite;
            background: var(--sparkle-color, #a5e7ff);
        }

        /* ── Card Click Ripple ── */
        @keyframes rippleWave {
            0% { transform: scale(0); opacity: 0.5; }
            100% { transform: scale(4); opacity: 0; }
        }
        .card-ripple {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,210,255,0.3), transparent 70%);
            width: 80px;
            height: 80px;
            margin: -40px 0 0 -40px;
            pointer-events: none;
            animation: rippleWave 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* ── Name Gradient Shimmer ── */
        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        .name-shimmer {
            background: linear-gradient(90deg, #ffffff 0%, #a5e7ff 25%, #ffffff 50%, #00e478 75%, #ffffff 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shimmer 3s linear infinite 0.5s;
        }

        /* Floating HTML Elements */
        @keyframes floatSlow {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-30px) scale(1.05); }
        }
        @keyframes floatSlower {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(40px) scale(0.95); }
        }
        .animate-float-slow {
            animation: floatSlow 15s ease-in-out infinite;
        }
        .animate-float-slower {
            animation: floatSlower 20s ease-in-out infinite;
        }

        /* Sticky Header Transition */
        #main-header {
            height: 85px;
            transition: height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
        }
        #main-header.scrolled {
            height: 70px;
            background-color: rgba(11, 15, 25, 0.75);
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* Text Reveal Animation */
        @keyframes revealFromBottom {
            0% {
                transform: translateY(100%);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .reveal-container {
            overflow: hidden;
        }
        .reveal-text {
            animation: revealFromBottom 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        /* Mugin Tech Gradient hover */
        .mugin-tech {
            background: linear-gradient(135deg, #00d2ff 0%, #00e478 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: filter 0.3s ease;
            animation: gradientMove 3s ease infinite;
        }
        .mugin-tech:hover {
            filter: drop-shadow(0 0 8px rgba(0, 228, 120, 0.6));
        }
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* ═══════════════════════════════════════════════ */
        /* LOGO IMAGE ANIMATIONS                         */
        /* ═══════════════════════════════════════════════ */
        #logo-link {
            display: inline-block;
        }

        /* Logo image: fade+scale in on load */
        @keyframes logoEntry {
            0%   { opacity: 0; transform: scale(0.8) translateY(6px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        .logo-img {
            animation: logoEntry 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
            transition: filter 0.4s ease, transform 0.4s ease;
            /* MAGIC TRICK: Invert turns black to white, and blue/orange to their opposites. 
               Hue-rotate 180deg perfectly swaps the blue/orange BACK to their original colors! */
            filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 10px rgba(0,210,255,0.25)) drop-shadow(0 0 6px rgba(255,120,0,0.15));
        }
        #logo-link:hover .logo-img {
            filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 18px rgba(0,210,255,0.5)) drop-shadow(0 0 12px rgba(255,120,0,0.35)) brightness(1.15);
            transform: scale(1.04);
        }

        /* Outer glow ring that pulses around the logo */
        @keyframes logoRingPulse {
            0%, 100% { opacity: 0.25; transform: scaleX(1)   scaleY(1); }
            50%       { opacity: 0.55; transform: scaleX(1.04) scaleY(1.15); }
        }
        .logo-orbit-ring {
            position: absolute;
            inset: -8px -12px;
            border-radius: 60px;
            border: 1.5px solid rgba(0, 210, 255, 0.35);
            box-shadow: 0 0 12px rgba(0,210,255,0.2), inset 0 0 8px rgba(0,210,255,0.05);
            pointer-events: none;
            animation: logoRingPulse 3s ease-in-out infinite;
            z-index: 1;
        }

        /* Energy dot that orbits the logo continuously */
        @keyframes logoDotOrbit {
            0%   { transform: rotate(0deg)   translateX(calc(50% + 16px)) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(calc(50% + 16px)) rotate(-360deg); }
        }
        .logo-orbit-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -4px;
            border-radius: 50%;
            background: #00d2ff;
            box-shadow: 0 0 10px #00d2ff, 0 0 20px rgba(0,210,255,0.6);
            pointer-events: none;
            animation: logoDotOrbit 4s linear infinite;
            z-index: 1;
        }