.icon-showcase-section {

                margin-top: 60px;

                margin-bottom: 50px;

                text-align: center;

                --canvas-w: 1200px;

                --canvas-h: 480px;

                --canvas-scale: 1;

            }

            @media (max-width: 1200px) {

                .icon-showcase-section {

                    --canvas-scale: 0.85;

                }

            }

            @media (max-width: 992px) {

                .icon-showcase-section {

                    --canvas-scale: 0.7;

                }

            }

            

            /* Portrait/Vertical Mode for Mobile screen */

            @media (max-width: 768px) {

                .icon-showcase-section {

                    --canvas-w: 480px;

                    --canvas-h: 750px;

                    --canvas-scale: 0.85;

                }

            }

            @media (max-width: 480px) {

                .icon-showcase-section {

                    --canvas-w: 480px;

                    --canvas-h: 750px;

                    --canvas-scale: 0.75;

                }

            }

            @media (max-width: 400px) {

                .icon-showcase-section {

                    --canvas-w: 480px;

                    --canvas-h: 750px;

                    --canvas-scale: 0.65;

                }

            }



            .icon-showcase-title {

                font-size: 24px;

                font-weight: 800;

                background: linear-gradient(135deg, #fbbf24, #f59e0b);

                -webkit-background-clip: text;

                -webkit-text-fill-color: transparent;

                margin-bottom: 8px;

            }

            .icon-showcase-sub {

                color: var(--text-2);

                font-size: 14px;

                margin-bottom: 28px;

                max-width: 650px;

                margin-left: auto;

                margin-right: auto;

                line-height: 1.5;

            }

            /* Map container constraints */

            .icon-map-outer-wrapper {

                position: relative;

                width: 100%;

                overflow: hidden;

                border-radius: 24px;

                margin-bottom: 24px;

            }

            

            .icon-map-canvas {

                position: relative;

                width: 100%;

                max-width: var(--canvas-w);

                height: calc(var(--canvas-h) * var(--canvas-scale, 1));

                margin: 0 auto;

                background: radial-gradient(circle at center, rgba(251, 191, 36, 0.08) 0%, rgba(15, 10, 25, 0) 70%), rgba(255, 255, 255, 0.01);

                border: 1px solid rgba(255, 255, 255, 0.06);

                border-radius: 24px;

                overflow: hidden;

                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);

                transition: all 0.3s ease;

                display: flex;

                align-items: center;

                justify-content: center;

            }

            

            body[data-mode="light"] .icon-map-canvas {

                background: radial-gradient(circle at center, rgba(251, 191, 36, 0.1) 0%, rgba(255, 255, 255, 0) 70%), #ffffff;

                border-color: rgba(0, 0, 0, 0.08);

                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);

            }



            .icon-map-grid-bg {

                position: absolute;

                inset: 0;

                background-size: 40px 40px;

                background-image: 

                    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),

                    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);

                z-index: 0;

            }

            

            body[data-mode="light"] .icon-map-grid-bg {

                background-image: 

                    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),

                    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);

            }



            .icon-map-content {

                position: absolute;

                width: var(--canvas-w);

                height: var(--canvas-h);

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));

                transform-origin: center center;

                flex-shrink: 0;

                transition: all 0.3s ease;

                opacity: 0; /* Fade in once initialized in JS to prevent initial layout flash */

            }



            /* Central App Icon Node */

            .center-app-node {

                position: absolute;

                top: 50%;

                left: 50%;

                transform: translate(-50%, -50%);

                width: 120px;

                height: 120px;

                z-index: 5;

                display: flex;

                align-items: center;

                justify-content: center;

            }

            

            .center-app-pulse {

                position: absolute;

                inset: -12px;

                border-radius: 32px;

                background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);

                animation: centerPulse 3s infinite ease-in-out;

                z-index: 1;

            }

            

            .center-app-inner {

                position: relative;

                width: 100%;

                height: 100%;

                border-radius: 28px;

                background: linear-gradient(135deg, #1f1a24, #0f0a14);

                border: 3px solid #fbbf24;

                display: flex;

                flex-direction: column;

                align-items: center;

                justify-content: center;

                box-shadow: 0 12px 36px rgba(251, 191, 36, 0.4), inset 0 0 15px rgba(251, 191, 36, 0.2);

                z-index: 2;

                overflow: hidden;

                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            }

            

            .center-app-inner img {

                width: 100%;

                height: 100%;

                object-fit: cover;

                transition: transform 0.4s ease;

            }

            

            .center-app-node:hover .center-app-inner {

                transform: scale(1.1);

                box-shadow: 0 15px 45px rgba(251, 191, 36, 0.6), inset 0 0 20px rgba(251, 191, 36, 0.4);

            }

            

            .center-app-node:hover .center-app-inner img {

                transform: scale(1.05);

            }

            

            body[data-mode="light"] .center-app-inner {

                background: linear-gradient(135deg, #fffbeb, #fef3c7);

                border-color: #d97706;

                box-shadow: 0 10px 25px rgba(217, 119, 6, 0.25);

            }



            /* Floating Node Styling - JS will translate3d these nodes */

            .floating-icon-node {

                position: absolute;

                z-index: 2;

                background: transparent !important;

                border: none !important;

                box-shadow: none !important;

                left: 0;

                top: 0;

                width: var(--size-dt);

                height: var(--size-dt);

                will-change: transform;

            }

            @media (max-width: 768px) {

                .floating-icon-node {

                    width: var(--size-mb);

                    height: var(--size-mb);

                }

            }



            /* Interactive inner box inside node to isolate transform scale from translation */

            .floating-icon-inner {

                position: relative;

                width: 100%;

                height: 100%;

                border-radius: 22%;

                display: flex;

                align-items: center;

                justify-content: center;

                cursor: pointer;

                background: transparent !important;

                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;

            }



            .floating-icon-inner img {

                width: 100%;

                height: 100%;

                object-fit: cover;

                border-radius: 22%;

                display: block;

            }



            .floating-icon-inner:hover {

                transform: scale(1.15);

                z-index: 10;

            }



            /* Frozen and expanded node class */

            .floating-icon-inner.frozen {

                transform: scale(1.25) !important;

                filter: drop-shadow(0 15px 30px rgba(251, 191, 36, 0.8)) !important;

                z-index: 100 !important;

            }



            /* Themes Glows */

            .node-theme-gold {

                filter: drop-shadow(0 6px 12px rgba(251, 191, 36, 0.35));

            }

            .node-theme-gold:hover, .node-theme-gold.frozen {

                filter: drop-shadow(0 12px 24px rgba(251, 191, 36, 0.7)) drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));

            }



            .node-theme-purple {

                filter: drop-shadow(0 6px 12px rgba(167, 139, 250, 0.35));

            }

            .node-theme-purple:hover, .node-theme-purple.frozen {

                filter: drop-shadow(0 12px 24px rgba(167, 139, 250, 0.7)) drop-shadow(0 0 10px rgba(167, 139, 250, 0.4));

            }



            .node-theme-pink {

                filter: drop-shadow(0 6px 12px rgba(244, 114, 182, 0.35));

            }

            .node-theme-pink:hover, .node-theme-pink.frozen {

                filter: drop-shadow(0 12px 24px rgba(244, 114, 182, 0.7)) drop-shadow(0 0 10px rgba(244, 114, 182, 0.4));

            }



            .node-theme-blue {

                filter: drop-shadow(0 6px 12px rgba(56, 189, 248, 0.35));

            }

            .node-theme-blue:hover, .node-theme-blue.frozen {

                filter: drop-shadow(0 12px 24px rgba(56, 189, 248, 0.7)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));

            }



            .node-theme-green {

                filter: drop-shadow(0 6px 12px rgba(74, 222, 128, 0.35));

            }

            .node-theme-green:hover, .node-theme-green.frozen {

                filter: drop-shadow(0 12px 24px rgba(74, 222, 128, 0.7)) drop-shadow(0 0 10px rgba(74, 222, 128, 0.4));

            }



            @keyframes centerPulse {

                0%, 100% { transform: scale(1); opacity: 0.5; }

                50% { transform: scale(1.15); opacity: 0.8; }

            }