/* Extracted Body Styles */

                .bento-bg-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    background: linear-gradient(135deg, var(--bg-color-start), var(--bg-color-end));
                }

                /* Source - Dynamic Data Flow Network */
                .bg-source {
                    --bg-color-start: #E3F2FD;
                    --bg-color-end: #FFFFFF;
                }

                .source-network {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .data-particle {
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: #1976D2;
                    border-radius: 50%;
                    box-shadow: 0 0 20px rgba(25, 118, 210, 0.6), 0 0 40px rgba(25, 118, 210, 0.3);
                    animation: particleFlow 8s linear infinite;
                }

                .data-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
                .data-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; animation-duration: 9s; }
                .data-particle:nth-child(3) { left: 45%; top: 30%; animation-delay: 2s; animation-duration: 6s; }
                .data-particle:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.5s; animation-duration: 8s; }
                .data-particle:nth-child(5) { left: 75%; top: 40%; animation-delay: 1.5s; animation-duration: 7.5s; }
                .data-particle:nth-child(6) { left: 85%; top: 15%; animation-delay: 2.5s; animation-duration: 8.5s; }
                .data-particle:nth-child(7) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 7s; }
                .data-particle:nth-child(8) { left: 35%; top: 45%; animation-delay: 1.2s; animation-duration: 9.5s; }
                .data-particle:nth-child(9) { left: 55%; top: 85%; animation-delay: 2.8s; animation-duration: 6.5s; }
                .data-particle:nth-child(10) { left: 70%; top: 25%; animation-delay: 0.8s; animation-duration: 8.2s; }

                .connection-line {
                    position: absolute;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.3), transparent);
                    transform-origin: left center;
                    animation: lineFlow 6s ease-in-out infinite;
                }

                .connection-line:nth-child(11) { top: 25%; left: 10%; width: 40%; transform: rotate(15deg); animation-delay: 0s; }
                .connection-line:nth-child(12) { top: 45%; left: 20%; width: 35%; transform: rotate(-10deg); animation-delay: 1s; }
                .connection-line:nth-child(13) { top: 65%; left: 15%; width: 45%; transform: rotate(5deg); animation-delay: 2s; }
                .connection-line:nth-child(14) { top: 35%; left: 50%; width: 30%; transform: rotate(-20deg); animation-delay: 0.5s; }
                .connection-line:nth-child(15) { top: 75%; left: 45%; width: 40%; transform: rotate(12deg); animation-delay: 1.5s; }

                .pulse-ring {
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    border: 2px solid rgba(25, 118, 210, 0.4);
                    border-radius: 50%;
                    animation: pulseExpand 3s ease-out infinite;
                }

                .pulse-ring:nth-child(16) { top: 20%; left: 15%; animation-delay: 0s; }
                .pulse-ring:nth-child(17) { top: 60%; left: 70%; animation-delay: 1s; }
                .pulse-ring:nth-child(18) { top: 40%; left: 45%; animation-delay: 2s; }

                @keyframes particleFlow {
                    0% { transform: translate(0, 0) scale(1); opacity: 0; }
                    10% { opacity: 1; }
                    90% { opacity: 1; }
                    100% { transform: translate(120px, -80px) scale(0.3); opacity: 0; }
                }

                @keyframes lineFlow {
                    0%, 100% { opacity: 0.2; transform: scaleX(0.8); }
                    50% { opacity: 0.6; transform: scaleX(1.2); }
                }

                @keyframes pulseExpand {
                    0% { transform: scale(0.5); opacity: 0.6; }
                    100% { transform: scale(2.5); opacity: 0; }
                }

                /* Leda - Dynamic Compass Navigation */
                .bg-leda {
                    --bg-color-start: #FFE4D6;
                    --bg-color-end: #FFF5EE;
                }

                .leda-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.85;
                }

                .compass-main {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 300px;
                    height: 300px;
                }

                .orbit-ring {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border: 2px solid rgba(230, 81, 0, 0.25);
                    border-radius: 50%;
                    animation: orbitRotate 20s linear infinite;
                }

                .orbit-ring:nth-child(1) { width: 100%; height: 100%; }
                .orbit-ring:nth-child(2) { width: 70%; height: 70%; animation-duration: 15s; animation-direction: reverse; }
                .orbit-ring:nth-child(3) { width: 40%; height: 40%; animation-duration: 10s; }

                .direction-marker {
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: rgba(230, 81, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 15px rgba(230, 81, 0, 0.5);
                    animation: markerGlow 2s ease-in-out infinite;
                }

                .direction-marker:nth-child(4) { top: 0; left: 50%; transform: translate(-50%, -50%); }
                .direction-marker:nth-child(5) { bottom: 0; left: 50%; transform: translate(-50%, 50%); animation-delay: 0.5s; }
                .direction-marker:nth-child(6) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: 1s; }
                .direction-marker:nth-child(7) { top: 50%; right: 0; transform: translate(50%, -50%); animation-delay: 1.5s; }

                .sweep-line {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 3px;
                    height: 50%;
                    background: linear-gradient(to bottom, rgba(230, 81, 0, 0.8), transparent);
                    transform: translate(-50%, -100%);
                    transform-origin: center bottom;
                    animation: radarSweep 4s linear infinite;
                    box-shadow: 0 0 20px rgba(230, 81, 0, 0.5);
                }

                .nav-particle {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(255, 111, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 10px rgba(255, 111, 0, 0.4);
                    animation: navFloat 5s ease-in-out infinite;
                }

                .nav-particle:nth-child(9) { top: 20%; left: 30%; animation-delay: 0s; }
                .nav-particle:nth-child(10) { top: 70%; left: 60%; animation-delay: 1s; }
                .nav-particle:nth-child(11) { top: 40%; left: 80%; animation-delay: 2s; }
                .nav-particle:nth-child(12) { top: 80%; left: 25%; animation-delay: 1.5s; }

                @keyframes orbitRotate {
                    from { transform: translate(-50%, -50%) rotate(0deg); }
                    to { transform: translate(-50%, -50%) rotate(360deg); }
                }

                @keyframes radarSweep {
                    from { transform: translate(-50%, -100%) rotate(0deg); }
                    to { transform: translate(-50%, -100%) rotate(360deg); }
                }

                @keyframes markerGlow {
                    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
                    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
                }

                @keyframes navFloat {
                    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
                    50% { transform: translate(20px, -30px) scale(1.3); opacity: 0.9; }
                }

                /* Tree - Living Growth System */
                .bg-tree {
                    --bg-color-start: #E8F5E9;
                    --bg-color-end: #F1F8E9;
                }

                .tree-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .energy-wave {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 200%;
                    height: 40%;
                    background: radial-gradient(ellipse at center bottom, rgba(56, 142, 60, 0.15), transparent);
                    animation: energyPulse 4s ease-in-out infinite;
                }

                .growth-spiral {
                    position: absolute;
                    width: 3px;
                    height: 150px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.5), transparent);
                    transform-origin: bottom center;
                    animation: spiralGrow 6s ease-in-out infinite;
                }

                .growth-spiral:nth-child(2) { bottom: 10%; left: 30%; transform: rotate(-15deg); animation-delay: 0s; }
                .growth-spiral:nth-child(3) { bottom: 15%; left: 50%; animation-delay: 1s; }
                .growth-spiral:nth-child(4) { bottom: 10%; right: 30%; transform: rotate(15deg); animation-delay: 2s; }

                .floating-leaf {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    background: rgba(56, 142, 60, 0.6);
                    border-radius: 50% 0;
                    box-shadow: 0 0 15px rgba(56, 142, 60, 0.3);
                    animation: leafDrift 8s ease-in-out infinite;
                }

                .floating-leaf:nth-child(5) { top: 20%; left: 20%; animation-delay: 0s; animation-duration: 9s; }
                .floating-leaf:nth-child(6) { top: 40%; left: 70%; animation-delay: 2s; animation-duration: 7s; }
                .floating-leaf:nth-child(7) { top: 60%; left: 40%; animation-delay: 4s; animation-duration: 10s; }
                .floating-leaf:nth-child(8) { top: 30%; right: 20%; animation-delay: 1s; animation-duration: 8s; }
                .floating-leaf:nth-child(9) { top: 70%; left: 60%; animation-delay: 3s; animation-duration: 9.5s; }

                .root-energy {
                    position: absolute;
                    bottom: 0;
                    width: 2px;
                    height: 100px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.6), transparent);
                    animation: rootPulse 3s ease-in-out infinite;
                }

                .root-energy:nth-child(10) { left: 20%; transform: rotate(-25deg); animation-delay: 0s; }
                .root-energy:nth-child(11) { left: 40%; transform: rotate(-10deg); animation-delay: 0.5s; }
                .root-energy:nth-child(12) { right: 40%; transform: rotate(10deg); animation-delay: 1s; }
                .root-energy:nth-child(13) { right: 20%; transform: rotate(25deg); animation-delay: 1.5s; }

                .bio-glow {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, rgba(56, 142, 60, 0.2), transparent);
                    border-radius: 50%;
                    animation: glowExpand 5s ease-in-out infinite;
                }

                .bio-glow:nth-child(14) { top: 25%; left: 15%; animation-delay: 0s; }
                .bio-glow:nth-child(15) { top: 50%; right: 20%; animation-delay: 1.5s; }

                @keyframes energyPulse {
                    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.25; }
                    50% { transform: translateX(-50%) scale(1.2); opacity: 0.45; }
                }

                @keyframes spiralGrow {
                    0%, 100% { transform: scaleY(0.8) translateY(0); opacity: 0.4; }
                    50% { transform: scaleY(1.2) translateY(-20px); opacity: 0.7; }
                }

                @keyframes leafDrift {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
                    25% { transform: translate(30px, -40px) rotate(90deg); opacity: 0.8; }
                    50% { transform: translate(20px, -80px) rotate(180deg); opacity: 0.6; }
                    75% { transform: translate(-10px, -60px) rotate(270deg); opacity: 0.7; }
                }

                @keyframes rootPulse {
                    0%, 100% { opacity: 0.4; transform: scaleY(1); }
                    50% { opacity: 0.7; transform: scaleY(1.3); }
                }

                @keyframes glowExpand {
                    0%, 100% { transform: scale(0.8); opacity: 0.15; }
                    50% { transform: scale(1.5); opacity: 0.35; }
                }

                /* Stack - Digital Matrix System */
                .bg-stack {
                    --bg-color-start: #F5F5F5;
                    --bg-color-end: #FAFAFA;
                }

                .stack-matrix {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .tech-layer {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80%;
                    height: 40px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.15), transparent);
                    border: 1px solid rgba(97, 97, 97, 0.25);
                    border-radius: 8px;
                    animation: layerSlide 5s ease-in-out infinite;
                    box-shadow: 0 0 20px rgba(97, 97, 97, 0.1);
                }

                .tech-layer:nth-child(1) { top: 15%; animation-delay: 0s; }
                .tech-layer:nth-child(2) { top: 30%; animation-delay: 1s; }
                .tech-layer:nth-child(3) { top: 45%; animation-delay: 2s; }
                .tech-layer:nth-child(4) { top: 60%; animation-delay: 1.5s; }
                .tech-layer:nth-child(5) { top: 75%; animation-delay: 0.5s; }

                .code-stream {
                    position: absolute;
                    width: 2px;
                    height: 0;
                    background: linear-gradient(to bottom, rgba(97, 97, 97, 0.6), transparent);
                    animation: streamFlow 3s ease-in infinite;
                }

                .code-stream:nth-child(6) { top: 0; left: 20%; animation-delay: 0s; }
                .code-stream:nth-child(7) { top: 0; left: 40%; animation-delay: 0.8s; }
                .code-stream:nth-child(8) { top: 0; left: 60%; animation-delay: 1.6s; }
                .code-stream:nth-child(9) { top: 0; left: 80%; animation-delay: 2.4s; }

                .data-bit {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(66, 66, 66, 0.6);
                    border-radius: 2px;
                    box-shadow: 0 0 10px rgba(66, 66, 66, 0.3);
                    animation: bitFloat 4s ease-in-out infinite;
                }

                .data-bit:nth-child(10) { top: 20%; left: 15%; animation-delay: 0s; }
                .data-bit:nth-child(11) { top: 35%; right: 20%; animation-delay: 0.5s; }
                .data-bit:nth-child(12) { top: 55%; left: 25%; animation-delay: 1s; }
                .data-bit:nth-child(13) { top: 70%; right: 15%; animation-delay: 1.5s; }
                .data-bit:nth-child(14) { top: 85%; left: 50%; animation-delay: 2s; }

                .scan-line {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.4), transparent);
                    box-shadow: 0 0 15px rgba(97, 97, 97, 0.2);
                    animation: scanMove 6s linear infinite;
                }

                @keyframes layerSlide {
                    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
                    50% { transform: translateX(-50%) translateY(-15px); opacity: 0.7; }
                }

                @keyframes streamFlow {
                    0% { height: 0; opacity: 0; }
                    50% { height: 150px; opacity: 0.8; }
                    100% { height: 300px; opacity: 0; }
                }

                @keyframes bitFloat {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
                    50% { transform: translate(25px, -35px) rotate(180deg); opacity: 0.8; }
                }

                @keyframes scanMove {
                    0% { top: 0; opacity: 0; }
                    25% { opacity: 0.8; }
                    75% { opacity: 0.8; }
                    100% { top: 100%; opacity: 0; }
                }

                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .compass-main { width: 200px; height: 200px; }
                    .tech-layer { width: 90%; height: 30px; }
                    .growth-spiral { height: 100px; }
                }
            

                .bento-bg-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    background: linear-gradient(135deg, var(--bg-color-start), var(--bg-color-end));
                }

                /* Source - Dynamic Data Flow Network */
                .bg-source {
                    --bg-color-start: #E3F2FD;
                    --bg-color-end: #FFFFFF;
                }

                .source-network {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .data-particle {
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: #1976D2;
                    border-radius: 50%;
                    box-shadow: 0 0 20px rgba(25, 118, 210, 0.6), 0 0 40px rgba(25, 118, 210, 0.3);
                    animation: particleFlow 8s linear infinite;
                }

                .data-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
                .data-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; animation-duration: 9s; }
                .data-particle:nth-child(3) { left: 45%; top: 30%; animation-delay: 2s; animation-duration: 6s; }
                .data-particle:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.5s; animation-duration: 8s; }
                .data-particle:nth-child(5) { left: 75%; top: 40%; animation-delay: 1.5s; animation-duration: 7.5s; }
                .data-particle:nth-child(6) { left: 85%; top: 15%; animation-delay: 2.5s; animation-duration: 8.5s; }
                .data-particle:nth-child(7) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 7s; }
                .data-particle:nth-child(8) { left: 35%; top: 45%; animation-delay: 1.2s; animation-duration: 9.5s; }
                .data-particle:nth-child(9) { left: 55%; top: 85%; animation-delay: 2.8s; animation-duration: 6.5s; }
                .data-particle:nth-child(10) { left: 70%; top: 25%; animation-delay: 0.8s; animation-duration: 8.2s; }

                .connection-line {
                    position: absolute;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.3), transparent);
                    transform-origin: left center;
                    animation: lineFlow 6s ease-in-out infinite;
                }

                .connection-line:nth-child(11) { top: 25%; left: 10%; width: 40%; transform: rotate(15deg); animation-delay: 0s; }
                .connection-line:nth-child(12) { top: 45%; left: 20%; width: 35%; transform: rotate(-10deg); animation-delay: 1s; }
                .connection-line:nth-child(13) { top: 65%; left: 15%; width: 45%; transform: rotate(5deg); animation-delay: 2s; }
                .connection-line:nth-child(14) { top: 35%; left: 50%; width: 30%; transform: rotate(-20deg); animation-delay: 0.5s; }
                .connection-line:nth-child(15) { top: 75%; left: 45%; width: 40%; transform: rotate(12deg); animation-delay: 1.5s; }

                .pulse-ring {
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    border: 2px solid rgba(25, 118, 210, 0.4);
                    border-radius: 50%;
                    animation: pulseExpand 3s ease-out infinite;
                }

                .pulse-ring:nth-child(16) { top: 20%; left: 15%; animation-delay: 0s; }
                .pulse-ring:nth-child(17) { top: 60%; left: 70%; animation-delay: 1s; }
                .pulse-ring:nth-child(18) { top: 40%; left: 45%; animation-delay: 2s; }

                @keyframes particleFlow {
                    0% { transform: translate(0, 0) scale(1); opacity: 0; }
                    10% { opacity: 1; }
                    90% { opacity: 1; }
                    100% { transform: translate(120px, -80px) scale(0.3); opacity: 0; }
                }

                @keyframes lineFlow {
                    0%, 100% { opacity: 0.2; transform: scaleX(0.8); }
                    50% { opacity: 0.6; transform: scaleX(1.2); }
                }

                @keyframes pulseExpand {
                    0% { transform: scale(0.5); opacity: 0.6; }
                    100% { transform: scale(2.5); opacity: 0; }
                }

                /* Leda - Dynamic Compass Navigation */
                .bg-leda {
                    --bg-color-start: #FFE4D6;
                    --bg-color-end: #FFF5EE;
                }

                .leda-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.85;
                }

                .compass-main {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 300px;
                    height: 300px;
                }

                .orbit-ring {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border: 2px solid rgba(230, 81, 0, 0.25);
                    border-radius: 50%;
                    animation: orbitRotate 20s linear infinite;
                }

                .orbit-ring:nth-child(1) { width: 100%; height: 100%; }
                .orbit-ring:nth-child(2) { width: 70%; height: 70%; animation-duration: 15s; animation-direction: reverse; }
                .orbit-ring:nth-child(3) { width: 40%; height: 40%; animation-duration: 10s; }

                .direction-marker {
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: rgba(230, 81, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 15px rgba(230, 81, 0, 0.5);
                    animation: markerGlow 2s ease-in-out infinite;
                }

                .direction-marker:nth-child(4) { top: 0; left: 50%; transform: translate(-50%, -50%); }
                .direction-marker:nth-child(5) { bottom: 0; left: 50%; transform: translate(-50%, 50%); animation-delay: 0.5s; }
                .direction-marker:nth-child(6) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: 1s; }
                .direction-marker:nth-child(7) { top: 50%; right: 0; transform: translate(50%, -50%); animation-delay: 1.5s; }

                .sweep-line {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 3px;
                    height: 50%;
                    background: linear-gradient(to bottom, rgba(230, 81, 0, 0.8), transparent);
                    transform: translate(-50%, -100%);
                    transform-origin: center bottom;
                    animation: radarSweep 4s linear infinite;
                    box-shadow: 0 0 20px rgba(230, 81, 0, 0.5);
                }

                .nav-particle {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(255, 111, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 10px rgba(255, 111, 0, 0.4);
                    animation: navFloat 5s ease-in-out infinite;
                }

                .nav-particle:nth-child(9) { top: 20%; left: 30%; animation-delay: 0s; }
                .nav-particle:nth-child(10) { top: 70%; left: 60%; animation-delay: 1s; }
                .nav-particle:nth-child(11) { top: 40%; left: 80%; animation-delay: 2s; }
                .nav-particle:nth-child(12) { top: 80%; left: 25%; animation-delay: 1.5s; }

                @keyframes orbitRotate {
                    from { transform: translate(-50%, -50%) rotate(0deg); }
                    to { transform: translate(-50%, -50%) rotate(360deg); }
                }

                @keyframes radarSweep {
                    from { transform: translate(-50%, -100%) rotate(0deg); }
                    to { transform: translate(-50%, -100%) rotate(360deg); }
                }

                @keyframes markerGlow {
                    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
                    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
                }

                @keyframes navFloat {
                    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
                    50% { transform: translate(20px, -30px) scale(1.3); opacity: 0.9; }
                }

                /* Tree - Living Growth System */
                .bg-tree {
                    --bg-color-start: #E8F5E9;
                    --bg-color-end: #F1F8E9;
                }

                .tree-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .energy-wave {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 200%;
                    height: 40%;
                    background: radial-gradient(ellipse at center bottom, rgba(56, 142, 60, 0.15), transparent);
                    animation: energyPulse 4s ease-in-out infinite;
                }

                .growth-spiral {
                    position: absolute;
                    width: 3px;
                    height: 150px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.5), transparent);
                    transform-origin: bottom center;
                    animation: spiralGrow 6s ease-in-out infinite;
                }

                .growth-spiral:nth-child(2) { bottom: 10%; left: 30%; transform: rotate(-15deg); animation-delay: 0s; }
                .growth-spiral:nth-child(3) { bottom: 15%; left: 50%; animation-delay: 1s; }
                .growth-spiral:nth-child(4) { bottom: 10%; right: 30%; transform: rotate(15deg); animation-delay: 2s; }

                .floating-leaf {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    background: rgba(56, 142, 60, 0.6);
                    border-radius: 50% 0;
                    box-shadow: 0 0 15px rgba(56, 142, 60, 0.3);
                    animation: leafDrift 8s ease-in-out infinite;
                }

                .floating-leaf:nth-child(5) { top: 20%; left: 20%; animation-delay: 0s; animation-duration: 9s; }
                .floating-leaf:nth-child(6) { top: 40%; left: 70%; animation-delay: 2s; animation-duration: 7s; }
                .floating-leaf:nth-child(7) { top: 60%; left: 40%; animation-delay: 4s; animation-duration: 10s; }
                .floating-leaf:nth-child(8) { top: 30%; right: 20%; animation-delay: 1s; animation-duration: 8s; }
                .floating-leaf:nth-child(9) { top: 70%; left: 60%; animation-delay: 3s; animation-duration: 9.5s; }

                .root-energy {
                    position: absolute;
                    bottom: 0;
                    width: 2px;
                    height: 100px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.6), transparent);
                    animation: rootPulse 3s ease-in-out infinite;
                }

                .root-energy:nth-child(10) { left: 20%; transform: rotate(-25deg); animation-delay: 0s; }
                .root-energy:nth-child(11) { left: 40%; transform: rotate(-10deg); animation-delay: 0.5s; }
                .root-energy:nth-child(12) { right: 40%; transform: rotate(10deg); animation-delay: 1s; }
                .root-energy:nth-child(13) { right: 20%; transform: rotate(25deg); animation-delay: 1.5s; }

                .bio-glow {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, rgba(56, 142, 60, 0.2), transparent);
                    border-radius: 50%;
                    animation: glowExpand 5s ease-in-out infinite;
                }

                .bio-glow:nth-child(14) { top: 25%; left: 15%; animation-delay: 0s; }
                .bio-glow:nth-child(15) { top: 50%; right: 20%; animation-delay: 1.5s; }

                @keyframes energyPulse {
                    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.25; }
                    50% { transform: translateX(-50%) scale(1.2); opacity: 0.45; }
                }

                @keyframes spiralGrow {
                    0%, 100% { transform: scaleY(0.8) translateY(0); opacity: 0.4; }
                    50% { transform: scaleY(1.2) translateY(-20px); opacity: 0.7; }
                }

                @keyframes leafDrift {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
                    25% { transform: translate(30px, -40px) rotate(90deg); opacity: 0.8; }
                    50% { transform: translate(20px, -80px) rotate(180deg); opacity: 0.6; }
                    75% { transform: translate(-10px, -60px) rotate(270deg); opacity: 0.7; }
                }

                @keyframes rootPulse {
                    0%, 100% { opacity: 0.4; transform: scaleY(1); }
                    50% { opacity: 0.7; transform: scaleY(1.3); }
                }

                @keyframes glowExpand {
                    0%, 100% { transform: scale(0.8); opacity: 0.15; }
                    50% { transform: scale(1.5); opacity: 0.35; }
                }

                /* Stack - Digital Matrix System */
                .bg-stack {
                    --bg-color-start: #F5F5F5;
                    --bg-color-end: #FAFAFA;
                }

                .stack-matrix {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .tech-layer {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80%;
                    height: 40px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.15), transparent);
                    border: 1px solid rgba(97, 97, 97, 0.25);
                    border-radius: 8px;
                    animation: layerSlide 5s ease-in-out infinite;
                    box-shadow: 0 0 20px rgba(97, 97, 97, 0.1);
                }

                .tech-layer:nth-child(1) { top: 15%; animation-delay: 0s; }
                .tech-layer:nth-child(2) { top: 30%; animation-delay: 1s; }
                .tech-layer:nth-child(3) { top: 45%; animation-delay: 2s; }
                .tech-layer:nth-child(4) { top: 60%; animation-delay: 1.5s; }
                .tech-layer:nth-child(5) { top: 75%; animation-delay: 0.5s; }

                .code-stream {
                    position: absolute;
                    width: 2px;
                    height: 0;
                    background: linear-gradient(to bottom, rgba(97, 97, 97, 0.6), transparent);
                    animation: streamFlow 3s ease-in infinite;
                }

                .code-stream:nth-child(6) { top: 0; left: 20%; animation-delay: 0s; }
                .code-stream:nth-child(7) { top: 0; left: 40%; animation-delay: 0.8s; }
                .code-stream:nth-child(8) { top: 0; left: 60%; animation-delay: 1.6s; }
                .code-stream:nth-child(9) { top: 0; left: 80%; animation-delay: 2.4s; }

                .data-bit {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(66, 66, 66, 0.6);
                    border-radius: 2px;
                    box-shadow: 0 0 10px rgba(66, 66, 66, 0.3);
                    animation: bitFloat 4s ease-in-out infinite;
                }

                .data-bit:nth-child(10) { top: 20%; left: 15%; animation-delay: 0s; }
                .data-bit:nth-child(11) { top: 35%; right: 20%; animation-delay: 0.5s; }
                .data-bit:nth-child(12) { top: 55%; left: 25%; animation-delay: 1s; }
                .data-bit:nth-child(13) { top: 70%; right: 15%; animation-delay: 1.5s; }
                .data-bit:nth-child(14) { top: 85%; left: 50%; animation-delay: 2s; }

                .scan-line {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.4), transparent);
                    box-shadow: 0 0 15px rgba(97, 97, 97, 0.2);
                    animation: scanMove 6s linear infinite;
                }

                @keyframes layerSlide {
                    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
                    50% { transform: translateX(-50%) translateY(-15px); opacity: 0.7; }
                }

                @keyframes streamFlow {
                    0% { height: 0; opacity: 0; }
                    50% { height: 150px; opacity: 0.8; }
                    100% { height: 300px; opacity: 0; }
                }

                @keyframes bitFloat {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
                    50% { transform: translate(25px, -35px) rotate(180deg); opacity: 0.8; }
                }

                @keyframes scanMove {
                    0% { top: 0; opacity: 0; }
                    25% { opacity: 0.8; }
                    75% { opacity: 0.8; }
                    100% { top: 100%; opacity: 0; }
                }

                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .compass-main { width: 200px; height: 200px; }
                    .tech-layer { width: 90%; height: 30px; }
                    .growth-spiral { height: 100px; }
                }
            

                .bento-bg-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    background: linear-gradient(135deg, var(--bg-color-start), var(--bg-color-end));
                }

                /* Source - Dynamic Data Flow Network */
                .bg-source {
                    --bg-color-start: #E3F2FD;
                    --bg-color-end: #FFFFFF;
                }

                .source-network {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .data-particle {
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: #1976D2;
                    border-radius: 50%;
                    box-shadow: 0 0 20px rgba(25, 118, 210, 0.6), 0 0 40px rgba(25, 118, 210, 0.3);
                    animation: particleFlow 8s linear infinite;
                }

                .data-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
                .data-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; animation-duration: 9s; }
                .data-particle:nth-child(3) { left: 45%; top: 30%; animation-delay: 2s; animation-duration: 6s; }
                .data-particle:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.5s; animation-duration: 8s; }
                .data-particle:nth-child(5) { left: 75%; top: 40%; animation-delay: 1.5s; animation-duration: 7.5s; }
                .data-particle:nth-child(6) { left: 85%; top: 15%; animation-delay: 2.5s; animation-duration: 8.5s; }
                .data-particle:nth-child(7) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 7s; }
                .data-particle:nth-child(8) { left: 35%; top: 45%; animation-delay: 1.2s; animation-duration: 9.5s; }
                .data-particle:nth-child(9) { left: 55%; top: 85%; animation-delay: 2.8s; animation-duration: 6.5s; }
                .data-particle:nth-child(10) { left: 70%; top: 25%; animation-delay: 0.8s; animation-duration: 8.2s; }

                .connection-line {
                    position: absolute;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.3), transparent);
                    transform-origin: left center;
                    animation: lineFlow 6s ease-in-out infinite;
                }

                .connection-line:nth-child(11) { top: 25%; left: 10%; width: 40%; transform: rotate(15deg); animation-delay: 0s; }
                .connection-line:nth-child(12) { top: 45%; left: 20%; width: 35%; transform: rotate(-10deg); animation-delay: 1s; }
                .connection-line:nth-child(13) { top: 65%; left: 15%; width: 45%; transform: rotate(5deg); animation-delay: 2s; }
                .connection-line:nth-child(14) { top: 35%; left: 50%; width: 30%; transform: rotate(-20deg); animation-delay: 0.5s; }
                .connection-line:nth-child(15) { top: 75%; left: 45%; width: 40%; transform: rotate(12deg); animation-delay: 1.5s; }

                .pulse-ring {
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    border: 2px solid rgba(25, 118, 210, 0.4);
                    border-radius: 50%;
                    animation: pulseExpand 3s ease-out infinite;
                }

                .pulse-ring:nth-child(16) { top: 20%; left: 15%; animation-delay: 0s; }
                .pulse-ring:nth-child(17) { top: 60%; left: 70%; animation-delay: 1s; }
                .pulse-ring:nth-child(18) { top: 40%; left: 45%; animation-delay: 2s; }

                @keyframes particleFlow {
                    0% { transform: translate(0, 0) scale(1); opacity: 0; }
                    10% { opacity: 1; }
                    90% { opacity: 1; }
                    100% { transform: translate(120px, -80px) scale(0.3); opacity: 0; }
                }

                @keyframes lineFlow {
                    0%, 100% { opacity: 0.2; transform: scaleX(0.8); }
                    50% { opacity: 0.6; transform: scaleX(1.2); }
                }

                @keyframes pulseExpand {
                    0% { transform: scale(0.5); opacity: 0.6; }
                    100% { transform: scale(2.5); opacity: 0; }
                }

                /* Leda - Dynamic Compass Navigation */
                .bg-leda {
                    --bg-color-start: #FFE4D6;
                    --bg-color-end: #FFF5EE;
                }

                .leda-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.85;
                }

                .compass-main {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 300px;
                    height: 300px;
                }

                .orbit-ring {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border: 2px solid rgba(230, 81, 0, 0.25);
                    border-radius: 50%;
                    animation: orbitRotate 20s linear infinite;
                }

                .orbit-ring:nth-child(1) { width: 100%; height: 100%; }
                .orbit-ring:nth-child(2) { width: 70%; height: 70%; animation-duration: 15s; animation-direction: reverse; }
                .orbit-ring:nth-child(3) { width: 40%; height: 40%; animation-duration: 10s; }

                .direction-marker {
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: rgba(230, 81, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 15px rgba(230, 81, 0, 0.5);
                    animation: markerGlow 2s ease-in-out infinite;
                }

                .direction-marker:nth-child(4) { top: 0; left: 50%; transform: translate(-50%, -50%); }
                .direction-marker:nth-child(5) { bottom: 0; left: 50%; transform: translate(-50%, 50%); animation-delay: 0.5s; }
                .direction-marker:nth-child(6) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: 1s; }
                .direction-marker:nth-child(7) { top: 50%; right: 0; transform: translate(50%, -50%); animation-delay: 1.5s; }

                .sweep-line {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 3px;
                    height: 50%;
                    background: linear-gradient(to bottom, rgba(230, 81, 0, 0.8), transparent);
                    transform: translate(-50%, -100%);
                    transform-origin: center bottom;
                    animation: radarSweep 4s linear infinite;
                    box-shadow: 0 0 20px rgba(230, 81, 0, 0.5);
                }

                .nav-particle {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(255, 111, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 10px rgba(255, 111, 0, 0.4);
                    animation: navFloat 5s ease-in-out infinite;
                }

                .nav-particle:nth-child(9) { top: 20%; left: 30%; animation-delay: 0s; }
                .nav-particle:nth-child(10) { top: 70%; left: 60%; animation-delay: 1s; }
                .nav-particle:nth-child(11) { top: 40%; left: 80%; animation-delay: 2s; }
                .nav-particle:nth-child(12) { top: 80%; left: 25%; animation-delay: 1.5s; }

                @keyframes orbitRotate {
                    from { transform: translate(-50%, -50%) rotate(0deg); }
                    to { transform: translate(-50%, -50%) rotate(360deg); }
                }

                @keyframes radarSweep {
                    from { transform: translate(-50%, -100%) rotate(0deg); }
                    to { transform: translate(-50%, -100%) rotate(360deg); }
                }

                @keyframes markerGlow {
                    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
                    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
                }

                @keyframes navFloat {
                    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
                    50% { transform: translate(20px, -30px) scale(1.3); opacity: 0.9; }
                }

                /* Tree - Living Growth System */
                .bg-tree {
                    --bg-color-start: #E8F5E9;
                    --bg-color-end: #F1F8E9;
                }

                .tree-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .energy-wave {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 200%;
                    height: 40%;
                    background: radial-gradient(ellipse at center bottom, rgba(56, 142, 60, 0.15), transparent);
                    animation: energyPulse 4s ease-in-out infinite;
                }

                .growth-spiral {
                    position: absolute;
                    width: 3px;
                    height: 150px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.5), transparent);
                    transform-origin: bottom center;
                    animation: spiralGrow 6s ease-in-out infinite;
                }

                .growth-spiral:nth-child(2) { bottom: 10%; left: 30%; transform: rotate(-15deg); animation-delay: 0s; }
                .growth-spiral:nth-child(3) { bottom: 15%; left: 50%; animation-delay: 1s; }
                .growth-spiral:nth-child(4) { bottom: 10%; right: 30%; transform: rotate(15deg); animation-delay: 2s; }

                .floating-leaf {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    background: rgba(56, 142, 60, 0.6);
                    border-radius: 50% 0;
                    box-shadow: 0 0 15px rgba(56, 142, 60, 0.3);
                    animation: leafDrift 8s ease-in-out infinite;
                }

                .floating-leaf:nth-child(5) { top: 20%; left: 20%; animation-delay: 0s; animation-duration: 9s; }
                .floating-leaf:nth-child(6) { top: 40%; left: 70%; animation-delay: 2s; animation-duration: 7s; }
                .floating-leaf:nth-child(7) { top: 60%; left: 40%; animation-delay: 4s; animation-duration: 10s; }
                .floating-leaf:nth-child(8) { top: 30%; right: 20%; animation-delay: 1s; animation-duration: 8s; }
                .floating-leaf:nth-child(9) { top: 70%; left: 60%; animation-delay: 3s; animation-duration: 9.5s; }

                .root-energy {
                    position: absolute;
                    bottom: 0;
                    width: 2px;
                    height: 100px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.6), transparent);
                    animation: rootPulse 3s ease-in-out infinite;
                }

                .root-energy:nth-child(10) { left: 20%; transform: rotate(-25deg); animation-delay: 0s; }
                .root-energy:nth-child(11) { left: 40%; transform: rotate(-10deg); animation-delay: 0.5s; }
                .root-energy:nth-child(12) { right: 40%; transform: rotate(10deg); animation-delay: 1s; }
                .root-energy:nth-child(13) { right: 20%; transform: rotate(25deg); animation-delay: 1.5s; }

                .bio-glow {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, rgba(56, 142, 60, 0.2), transparent);
                    border-radius: 50%;
                    animation: glowExpand 5s ease-in-out infinite;
                }

                .bio-glow:nth-child(14) { top: 25%; left: 15%; animation-delay: 0s; }
                .bio-glow:nth-child(15) { top: 50%; right: 20%; animation-delay: 1.5s; }

                @keyframes energyPulse {
                    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.25; }
                    50% { transform: translateX(-50%) scale(1.2); opacity: 0.45; }
                }

                @keyframes spiralGrow {
                    0%, 100% { transform: scaleY(0.8) translateY(0); opacity: 0.4; }
                    50% { transform: scaleY(1.2) translateY(-20px); opacity: 0.7; }
                }

                @keyframes leafDrift {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
                    25% { transform: translate(30px, -40px) rotate(90deg); opacity: 0.8; }
                    50% { transform: translate(20px, -80px) rotate(180deg); opacity: 0.6; }
                    75% { transform: translate(-10px, -60px) rotate(270deg); opacity: 0.7; }
                }

                @keyframes rootPulse {
                    0%, 100% { opacity: 0.4; transform: scaleY(1); }
                    50% { opacity: 0.7; transform: scaleY(1.3); }
                }

                @keyframes glowExpand {
                    0%, 100% { transform: scale(0.8); opacity: 0.15; }
                    50% { transform: scale(1.5); opacity: 0.35; }
                }

                /* Stack - Digital Matrix System */
                .bg-stack {
                    --bg-color-start: #F5F5F5;
                    --bg-color-end: #FAFAFA;
                }

                .stack-matrix {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .tech-layer {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80%;
                    height: 40px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.15), transparent);
                    border: 1px solid rgba(97, 97, 97, 0.25);
                    border-radius: 8px;
                    animation: layerSlide 5s ease-in-out infinite;
                    box-shadow: 0 0 20px rgba(97, 97, 97, 0.1);
                }

                .tech-layer:nth-child(1) { top: 15%; animation-delay: 0s; }
                .tech-layer:nth-child(2) { top: 30%; animation-delay: 1s; }
                .tech-layer:nth-child(3) { top: 45%; animation-delay: 2s; }
                .tech-layer:nth-child(4) { top: 60%; animation-delay: 1.5s; }
                .tech-layer:nth-child(5) { top: 75%; animation-delay: 0.5s; }

                .code-stream {
                    position: absolute;
                    width: 2px;
                    height: 0;
                    background: linear-gradient(to bottom, rgba(97, 97, 97, 0.6), transparent);
                    animation: streamFlow 3s ease-in infinite;
                }

                .code-stream:nth-child(6) { top: 0; left: 20%; animation-delay: 0s; }
                .code-stream:nth-child(7) { top: 0; left: 40%; animation-delay: 0.8s; }
                .code-stream:nth-child(8) { top: 0; left: 60%; animation-delay: 1.6s; }
                .code-stream:nth-child(9) { top: 0; left: 80%; animation-delay: 2.4s; }

                .data-bit {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(66, 66, 66, 0.6);
                    border-radius: 2px;
                    box-shadow: 0 0 10px rgba(66, 66, 66, 0.3);
                    animation: bitFloat 4s ease-in-out infinite;
                }

                .data-bit:nth-child(10) { top: 20%; left: 15%; animation-delay: 0s; }
                .data-bit:nth-child(11) { top: 35%; right: 20%; animation-delay: 0.5s; }
                .data-bit:nth-child(12) { top: 55%; left: 25%; animation-delay: 1s; }
                .data-bit:nth-child(13) { top: 70%; right: 15%; animation-delay: 1.5s; }
                .data-bit:nth-child(14) { top: 85%; left: 50%; animation-delay: 2s; }

                .scan-line {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.4), transparent);
                    box-shadow: 0 0 15px rgba(97, 97, 97, 0.2);
                    animation: scanMove 6s linear infinite;
                }

                @keyframes layerSlide {
                    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
                    50% { transform: translateX(-50%) translateY(-15px); opacity: 0.7; }
                }

                @keyframes streamFlow {
                    0% { height: 0; opacity: 0; }
                    50% { height: 150px; opacity: 0.8; }
                    100% { height: 300px; opacity: 0; }
                }

                @keyframes bitFloat {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
                    50% { transform: translate(25px, -35px) rotate(180deg); opacity: 0.8; }
                }

                @keyframes scanMove {
                    0% { top: 0; opacity: 0; }
                    25% { opacity: 0.8; }
                    75% { opacity: 0.8; }
                    100% { top: 100%; opacity: 0; }
                }

                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .compass-main { width: 200px; height: 200px; }
                    .tech-layer { width: 90%; height: 30px; }
                    .growth-spiral { height: 100px; }
                }
            

                .bento-bg-container {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    overflow: hidden;
                    background: linear-gradient(135deg, var(--bg-color-start), var(--bg-color-end));
                }

                /* Source - Dynamic Data Flow Network */
                .bg-source {
                    --bg-color-start: #E3F2FD;
                    --bg-color-end: #FFFFFF;
                }

                .source-network {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .data-particle {
                    position: absolute;
                    width: 6px;
                    height: 6px;
                    background: #1976D2;
                    border-radius: 50%;
                    box-shadow: 0 0 20px rgba(25, 118, 210, 0.6), 0 0 40px rgba(25, 118, 210, 0.3);
                    animation: particleFlow 8s linear infinite;
                }

                .data-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 7s; }
                .data-particle:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; animation-duration: 9s; }
                .data-particle:nth-child(3) { left: 45%; top: 30%; animation-delay: 2s; animation-duration: 6s; }
                .data-particle:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.5s; animation-duration: 8s; }
                .data-particle:nth-child(5) { left: 75%; top: 40%; animation-delay: 1.5s; animation-duration: 7.5s; }
                .data-particle:nth-child(6) { left: 85%; top: 15%; animation-delay: 2.5s; animation-duration: 8.5s; }
                .data-particle:nth-child(7) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 7s; }
                .data-particle:nth-child(8) { left: 35%; top: 45%; animation-delay: 1.2s; animation-duration: 9.5s; }
                .data-particle:nth-child(9) { left: 55%; top: 85%; animation-delay: 2.8s; animation-duration: 6.5s; }
                .data-particle:nth-child(10) { left: 70%; top: 25%; animation-delay: 0.8s; animation-duration: 8.2s; }

                .connection-line {
                    position: absolute;
                    height: 2px;
                    background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.3), transparent);
                    transform-origin: left center;
                    animation: lineFlow 6s ease-in-out infinite;
                }

                .connection-line:nth-child(11) { top: 25%; left: 10%; width: 40%; transform: rotate(15deg); animation-delay: 0s; }
                .connection-line:nth-child(12) { top: 45%; left: 20%; width: 35%; transform: rotate(-10deg); animation-delay: 1s; }
                .connection-line:nth-child(13) { top: 65%; left: 15%; width: 45%; transform: rotate(5deg); animation-delay: 2s; }
                .connection-line:nth-child(14) { top: 35%; left: 50%; width: 30%; transform: rotate(-20deg); animation-delay: 0.5s; }
                .connection-line:nth-child(15) { top: 75%; left: 45%; width: 40%; transform: rotate(12deg); animation-delay: 1.5s; }

                .pulse-ring {
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    border: 2px solid rgba(25, 118, 210, 0.4);
                    border-radius: 50%;
                    animation: pulseExpand 3s ease-out infinite;
                }

                .pulse-ring:nth-child(16) { top: 20%; left: 15%; animation-delay: 0s; }
                .pulse-ring:nth-child(17) { top: 60%; left: 70%; animation-delay: 1s; }
                .pulse-ring:nth-child(18) { top: 40%; left: 45%; animation-delay: 2s; }

                @keyframes particleFlow {
                    0% { transform: translate(0, 0) scale(1); opacity: 0; }
                    10% { opacity: 1; }
                    90% { opacity: 1; }
                    100% { transform: translate(120px, -80px) scale(0.3); opacity: 0; }
                }

                @keyframes lineFlow {
                    0%, 100% { opacity: 0.2; transform: scaleX(0.8); }
                    50% { opacity: 0.6; transform: scaleX(1.2); }
                }

                @keyframes pulseExpand {
                    0% { transform: scale(0.5); opacity: 0.6; }
                    100% { transform: scale(2.5); opacity: 0; }
                }

                /* Leda - Dynamic Compass Navigation */
                .bg-leda {
                    --bg-color-start: #FFE4D6;
                    --bg-color-end: #FFF5EE;
                }

                .leda-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.85;
                }

                .compass-main {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 300px;
                    height: 300px;
                }

                .orbit-ring {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border: 2px solid rgba(230, 81, 0, 0.25);
                    border-radius: 50%;
                    animation: orbitRotate 20s linear infinite;
                }

                .orbit-ring:nth-child(1) { width: 100%; height: 100%; }
                .orbit-ring:nth-child(2) { width: 70%; height: 70%; animation-duration: 15s; animation-direction: reverse; }
                .orbit-ring:nth-child(3) { width: 40%; height: 40%; animation-duration: 10s; }

                .direction-marker {
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    background: rgba(230, 81, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 15px rgba(230, 81, 0, 0.5);
                    animation: markerGlow 2s ease-in-out infinite;
                }

                .direction-marker:nth-child(4) { top: 0; left: 50%; transform: translate(-50%, -50%); }
                .direction-marker:nth-child(5) { bottom: 0; left: 50%; transform: translate(-50%, 50%); animation-delay: 0.5s; }
                .direction-marker:nth-child(6) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: 1s; }
                .direction-marker:nth-child(7) { top: 50%; right: 0; transform: translate(50%, -50%); animation-delay: 1.5s; }

                .sweep-line {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 3px;
                    height: 50%;
                    background: linear-gradient(to bottom, rgba(230, 81, 0, 0.8), transparent);
                    transform: translate(-50%, -100%);
                    transform-origin: center bottom;
                    animation: radarSweep 4s linear infinite;
                    box-shadow: 0 0 20px rgba(230, 81, 0, 0.5);
                }

                .nav-particle {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(255, 111, 0, 0.7);
                    border-radius: 50%;
                    box-shadow: 0 0 10px rgba(255, 111, 0, 0.4);
                    animation: navFloat 5s ease-in-out infinite;
                }

                .nav-particle:nth-child(9) { top: 20%; left: 30%; animation-delay: 0s; }
                .nav-particle:nth-child(10) { top: 70%; left: 60%; animation-delay: 1s; }
                .nav-particle:nth-child(11) { top: 40%; left: 80%; animation-delay: 2s; }
                .nav-particle:nth-child(12) { top: 80%; left: 25%; animation-delay: 1.5s; }

                @keyframes orbitRotate {
                    from { transform: translate(-50%, -50%) rotate(0deg); }
                    to { transform: translate(-50%, -50%) rotate(360deg); }
                }

                @keyframes radarSweep {
                    from { transform: translate(-50%, -100%) rotate(0deg); }
                    to { transform: translate(-50%, -100%) rotate(360deg); }
                }

                @keyframes markerGlow {
                    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
                    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
                }

                @keyframes navFloat {
                    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
                    50% { transform: translate(20px, -30px) scale(1.3); opacity: 0.9; }
                }

                /* Tree - Living Growth System */
                .bg-tree {
                    --bg-color-start: #E8F5E9;
                    --bg-color-end: #F1F8E9;
                }

                .tree-scene {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .energy-wave {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 200%;
                    height: 40%;
                    background: radial-gradient(ellipse at center bottom, rgba(56, 142, 60, 0.15), transparent);
                    animation: energyPulse 4s ease-in-out infinite;
                }

                .growth-spiral {
                    position: absolute;
                    width: 3px;
                    height: 150px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.5), transparent);
                    transform-origin: bottom center;
                    animation: spiralGrow 6s ease-in-out infinite;
                }

                .growth-spiral:nth-child(2) { bottom: 10%; left: 30%; transform: rotate(-15deg); animation-delay: 0s; }
                .growth-spiral:nth-child(3) { bottom: 15%; left: 50%; animation-delay: 1s; }
                .growth-spiral:nth-child(4) { bottom: 10%; right: 30%; transform: rotate(15deg); animation-delay: 2s; }

                .floating-leaf {
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    background: rgba(56, 142, 60, 0.6);
                    border-radius: 50% 0;
                    box-shadow: 0 0 15px rgba(56, 142, 60, 0.3);
                    animation: leafDrift 8s ease-in-out infinite;
                }

                .floating-leaf:nth-child(5) { top: 20%; left: 20%; animation-delay: 0s; animation-duration: 9s; }
                .floating-leaf:nth-child(6) { top: 40%; left: 70%; animation-delay: 2s; animation-duration: 7s; }
                .floating-leaf:nth-child(7) { top: 60%; left: 40%; animation-delay: 4s; animation-duration: 10s; }
                .floating-leaf:nth-child(8) { top: 30%; right: 20%; animation-delay: 1s; animation-duration: 8s; }
                .floating-leaf:nth-child(9) { top: 70%; left: 60%; animation-delay: 3s; animation-duration: 9.5s; }

                .root-energy {
                    position: absolute;
                    bottom: 0;
                    width: 2px;
                    height: 100px;
                    background: linear-gradient(to top, rgba(56, 142, 60, 0.6), transparent);
                    animation: rootPulse 3s ease-in-out infinite;
                }

                .root-energy:nth-child(10) { left: 20%; transform: rotate(-25deg); animation-delay: 0s; }
                .root-energy:nth-child(11) { left: 40%; transform: rotate(-10deg); animation-delay: 0.5s; }
                .root-energy:nth-child(12) { right: 40%; transform: rotate(10deg); animation-delay: 1s; }
                .root-energy:nth-child(13) { right: 20%; transform: rotate(25deg); animation-delay: 1.5s; }

                .bio-glow {
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, rgba(56, 142, 60, 0.2), transparent);
                    border-radius: 50%;
                    animation: glowExpand 5s ease-in-out infinite;
                }

                .bio-glow:nth-child(14) { top: 25%; left: 15%; animation-delay: 0s; }
                .bio-glow:nth-child(15) { top: 50%; right: 20%; animation-delay: 1.5s; }

                @keyframes energyPulse {
                    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.25; }
                    50% { transform: translateX(-50%) scale(1.2); opacity: 0.45; }
                }

                @keyframes spiralGrow {
                    0%, 100% { transform: scaleY(0.8) translateY(0); opacity: 0.4; }
                    50% { transform: scaleY(1.2) translateY(-20px); opacity: 0.7; }
                }

                @keyframes leafDrift {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
                    25% { transform: translate(30px, -40px) rotate(90deg); opacity: 0.8; }
                    50% { transform: translate(20px, -80px) rotate(180deg); opacity: 0.6; }
                    75% { transform: translate(-10px, -60px) rotate(270deg); opacity: 0.7; }
                }

                @keyframes rootPulse {
                    0%, 100% { opacity: 0.4; transform: scaleY(1); }
                    50% { opacity: 0.7; transform: scaleY(1.3); }
                }

                @keyframes glowExpand {
                    0%, 100% { transform: scale(0.8); opacity: 0.15; }
                    50% { transform: scale(1.5); opacity: 0.35; }
                }

                /* Stack - Digital Matrix System */
                .bg-stack {
                    --bg-color-start: #F5F5F5;
                    --bg-color-end: #FAFAFA;
                }

                .stack-matrix {
                    position: absolute;
                    inset: 0;
                    opacity: 0.8;
                }

                .tech-layer {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80%;
                    height: 40px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.15), transparent);
                    border: 1px solid rgba(97, 97, 97, 0.25);
                    border-radius: 8px;
                    animation: layerSlide 5s ease-in-out infinite;
                    box-shadow: 0 0 20px rgba(97, 97, 97, 0.1);
                }

                .tech-layer:nth-child(1) { top: 15%; animation-delay: 0s; }
                .tech-layer:nth-child(2) { top: 30%; animation-delay: 1s; }
                .tech-layer:nth-child(3) { top: 45%; animation-delay: 2s; }
                .tech-layer:nth-child(4) { top: 60%; animation-delay: 1.5s; }
                .tech-layer:nth-child(5) { top: 75%; animation-delay: 0.5s; }

                .code-stream {
                    position: absolute;
                    width: 2px;
                    height: 0;
                    background: linear-gradient(to bottom, rgba(97, 97, 97, 0.6), transparent);
                    animation: streamFlow 3s ease-in infinite;
                }

                .code-stream:nth-child(6) { top: 0; left: 20%; animation-delay: 0s; }
                .code-stream:nth-child(7) { top: 0; left: 40%; animation-delay: 0.8s; }
                .code-stream:nth-child(8) { top: 0; left: 60%; animation-delay: 1.6s; }
                .code-stream:nth-child(9) { top: 0; left: 80%; animation-delay: 2.4s; }

                .data-bit {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: rgba(66, 66, 66, 0.6);
                    border-radius: 2px;
                    box-shadow: 0 0 10px rgba(66, 66, 66, 0.3);
                    animation: bitFloat 4s ease-in-out infinite;
                }

                .data-bit:nth-child(10) { top: 20%; left: 15%; animation-delay: 0s; }
                .data-bit:nth-child(11) { top: 35%; right: 20%; animation-delay: 0.5s; }
                .data-bit:nth-child(12) { top: 55%; left: 25%; animation-delay: 1s; }
                .data-bit:nth-child(13) { top: 70%; right: 15%; animation-delay: 1.5s; }
                .data-bit:nth-child(14) { top: 85%; left: 50%; animation-delay: 2s; }

                .scan-line {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, rgba(97, 97, 97, 0.4), transparent);
                    box-shadow: 0 0 15px rgba(97, 97, 97, 0.2);
                    animation: scanMove 6s linear infinite;
                }

                @keyframes layerSlide {
                    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
                    50% { transform: translateX(-50%) translateY(-15px); opacity: 0.7; }
                }

                @keyframes streamFlow {
                    0% { height: 0; opacity: 0; }
                    50% { height: 150px; opacity: 0.8; }
                    100% { height: 300px; opacity: 0; }
                }

                @keyframes bitFloat {
                    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.4; }
                    50% { transform: translate(25px, -35px) rotate(180deg); opacity: 0.8; }
                }

                @keyframes scanMove {
                    0% { top: 0; opacity: 0; }
                    25% { opacity: 0.8; }
                    75% { opacity: 0.8; }
                    100% { top: 100%; opacity: 0; }
                }

                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .compass-main { width: 200px; height: 200px; }
                    .tech-layer { width: 90%; height: 30px; }
                    .growth-spiral { height: 100px; }
                }
            

                .privacy-section {
                    min-height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 0px 0px;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
                }

                .privacy-visual-container {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                }

                .privacy-diagram {
                    position: relative;
                    width: 100%;
                    height: 350px;
                }

                /* Desktop Styles */
                .desktop .flow-path {
                    position: absolute;
                    top: 70%;
                    left: 8%;
                    right: 8%;
                    width: auto;
                    height: 3px;
                    background: linear-gradient(to right, #BACB99 0%, #A9E2FF 50%, #F69B75 100%);
                    transform: translateY(-50%);
                    opacity: 0.5;
                }

                .desktop .path-marker {
                    position: absolute;
                    top: 70%;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: white;
                    border: 3px solid #BACB99;
                    transform: translate(-50%, -50%);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                    z-index: 0;
                }

                .desktop .path-marker.marker-1 {
                    left: 8%;
                    top: 70%;
                    border-color: #BACB99;
                }

                .desktop .path-marker.marker-2 {
                    left: 50%;
                    top: 70%;
                    border-color: #A9E2FF;
                }

                .desktop .path-marker.marker-3 {
                    left: 92%;
                    top: 70%;
                    border-color: #F69B75;
                }

                .desktop .data-visual {
                    position: absolute;
                    top: 70%;
                    left: 8%;
                    transform: translateY(-50%);
                    animation: dataFlowDesktop 8s ease-in-out infinite;
                    z-index: 1;
                }

                @keyframes dataFlowDesktop {
                    0% {
                        left: calc(8% - 0px);
                    }
                    20% {
                        left: calc(8% - 0px);
                    }
                    40% {
                        left: calc(50% - 100px);
                    }
                    50% {
                        left: calc(50% - 100px);
                    }
                    70% {
                        left: calc(92% - 200px);
                    }
                    100% {
                        left: calc(92% - 200px);
                    }
                }

                .desktop .station {
                    position: absolute;
                    top: 38%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 12px;
                    z-index: 5;
                }

                .desktop .station.left {
                    left: 8%;
                }

                .desktop .station.center {
                    left: 50%;
                }

                .desktop .station.right {
                    left: 92%;
                }

                .desktop .process-indicator {
                    position: absolute;
                    top: 38%;
                    transform: translate(-50%, -50%);
                }

                .desktop .process-indicator.encrypt {
                    left: 29%;
                }

                .desktop .process-indicator.strip {
                    left: 71%;
                }

                /* Mobile Styles */
                .mobile .privacy-section {
                    padding: 30px 16px;
                }

                .mobile .privacy-diagram {
                    height: 500px;
                }

                .mobile .flow-path {
                    position: absolute;
                    top: 15%;
                    bottom: 15%;
                    left: 70%;
                    right: auto;
                    width: 3px;
                    height: 70%;
                    transform: translateX(-50%);
                    background: linear-gradient(to bottom, #BACB99 0%, #A9E2FF 50%, #F69B75 100%);
                    opacity: 0.5;
                }

                .mobile .path-marker {
                    position: absolute;
                    left: 70%;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: white;
                    border: 3px solid #BACB99;
                    transform: translate(-50%, -50%);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                    z-index: 0;
                }

                .mobile .path-marker.marker-1 {
                    top: 15%;
                    border-color: #BACB99;
                }

                .mobile .path-marker.marker-2 {
                    top: 50%;
                    border-color: #A9E2FF;
                }

                .mobile .path-marker.marker-3 {
                    top: 85%;
                    border-color: #F69B75;
                }

                .mobile .data-visual {
                    position: absolute;
                    top: 15%;
                    left: 70%;
                    transform: translate(-50%, -50%);
                    animation: dataFlowMobile 8s ease-in-out infinite;
                    z-index: 1;
                }

                @keyframes dataFlowMobile {
                    0% {
                        top: 15%;
                    }
                    20% {
                        top: 15%;
                    }
                    40% {
                        top: 50%;
                    }
                    50% {
                        top: 50%;
                    }
                    70% {
                        top: 85%;
                    }
                    100% {
                        top: 85%;
                    }
                }

                .mobile .data-card {
                    min-height: 90px;
                    min-width: 160px;
                    width: 160px;
                }

                .mobile .station {
                    position: absolute;
                    left: 30%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 12px;
                    z-index: 5;
                }

                .mobile .station.left {
                    top: 15%;
                }

                .mobile .station.center {
                    top: 50%;
                }

                .mobile .station.right {
                    top: 85%;
                }

                .mobile .process-indicator {
                    position: absolute;
                    left: 30%;
                    transform: translate(-50%, -50%);
                }

                .mobile .process-indicator.encrypt {
                    top: 32.5%;
                }

                .mobile .process-indicator.strip {
                    top: 67.5%;
                }

                /* Common Styles */
                .path-marker::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 8px;
                    height: 8px;
                    background: currentColor;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    animation: markerPulse 2s ease-in-out infinite;
                }

                .path-marker.marker-1::after {
                    color: #BACB99;
                }

                .path-marker.marker-2::after {
                    color: #A9E2FF;
                    animation-delay: 0.7s;
                }

                .path-marker.marker-3::after {
                    color: #F69B75;
                    animation-delay: 1.4s;
                }

                @keyframes markerPulse {
                    0%, 100% {
                        opacity: 0;
                        transform: translate(-50%, -50%) scale(0.5);
                    }
                    50% {
                        opacity: 1;
                        transform: translate(-50%, -50%) scale(1);
                    }
                }

                .data-card {
                    background: white;
                    padding: 16px 20px;
                    border-radius: 12px;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                    min-width: 200px;
                    transition: all 0.3s ease;
                }

                .data-row {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin: 4px 0;
                    font-size: 13px;
                    color: #2c2c2c;
                }

                .data-label {
                    font-weight: 600;
                    color: #6b6b6b;
                    min-width: 60px;
                }

                .data-value {
                    font-weight: 500;
                }

                .data-visual[data-stage="1"] .name-original {
                    display: block;
                }
                .data-visual[data-stage="1"] .name-encrypted,
                .data-visual[data-stage="1"] .name-null {
                    display: none;
                }

                .data-visual[data-stage="2"] .name-original,
                .data-visual[data-stage="2"] .name-null {
                    display: none;
                }
                .data-visual[data-stage="2"] .name-encrypted {
                    display: block;
                }

                .data-visual[data-stage="3"] .name-original,
                .data-visual[data-stage="3"] .name-encrypted {
                    display: none;
                }
                .data-visual[data-stage="3"] .name-null {
                    display: block;
                }

                .name-encrypted {
                    font-family: 'Courier New', monospace;
                    color: #BACB99;
                    letter-spacing: 1px;
                }

                .name-null {
                    color: #A9E2FF;
                    font-style: italic;
                }

                .station-circle {
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    transition: transform 0.4s ease;
                    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
                }

                .station:hover .station-circle {
                    transform: scale(1.08);
                }

                .station-circle.user {
                    background: linear-gradient(135deg, #BACB99 0%, #c8d9a8 100%);
                }

                .station-circle.encryption {
                    background: linear-gradient(135deg, #A9E2FF 0%, #c0ebff 100%);
                    animation: pulse 3s ease-in-out infinite;
                }

                .station-circle.ai {
                    background: linear-gradient(135deg, #F69B75 0%, #f8b395 100%);
                }

                @keyframes pulse {
                    0%, 100% {
                        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
                    }
                    50% {
                        box-shadow: 0 15px 60px rgba(169, 226, 255, 0.4);
                    }
                }

                .station-label {
                    font-size: 14px;
                    font-weight: 600;
                    color: white;
                    text-align: center;
                    letter-spacing: 0.5px;
                }

                .icon-wrapper {
                    width: 48px;
                    height: 48px;
                    position: relative;
                }

                .fingerprint-icon {
                    width: 100%;
                    height: 100%;
                }

                .vault-icon {
                    width: 100%;
                    height: 100%;
                    position: relative;
                }

                .vault-door {
                    animation: vaultSpin 4s linear infinite;
                }

                @keyframes vaultSpin {
                    0%, 70% {
                        transform: rotate(0deg);
                    }
                    85% {
                        transform: rotate(180deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }

                .neural-icon {
                    width: 100%;
                    height: 100%;
                }

                .neural-node {
                    animation: neuralPulse 2s ease-in-out infinite;
                }

                .neural-node:nth-child(2) {
                    animation-delay: 0.3s;
                }

                .neural-node:nth-child(3) {
                    animation-delay: 0.6s;
                }

                @keyframes neuralPulse {
                    0%, 100% {
                        opacity: 0.3;
                    }
                    50% {
                        opacity: 1;
                    }
                }

                .shield-badge {
                    position: absolute;
                    top: -6px;
                    right: -6px;
                    width: 38px;
                    height: 38px;
                    background: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
                    animation: bounce 2s ease-in-out infinite;
                }

                @keyframes bounce {
                    0%, 100% {
                        transform: translateY(0);
                    }
                    50% {
                        transform: translateY(-5px);
                    }
                }

                .blind-icon {
                    position: absolute;
                    top: -6px;
                    right: -6px;
                    width: 38px;
                    height: 38px;
                    background: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
                }

                .process-indicator {
                    background: white;
                    padding: 8px 16px;
                    border-radius: 20px;
                    font-size: 11px;
                    font-weight: 600;
                    color: #BACB99;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    z-index: 5;
                }

                .indicator-icon {
                    width: 14px;
                    height: 14px;
                }