#preloader {
                position: fixed;
                inset: 0;
                z-index: 99999;
                background: linear-gradient(135deg, var(--sh-topbar) 0%, var(--sh-ink) 40%, var(--sh-topbar-2) 100%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                transition: opacity .5s cubic-bezier(.4,0,.2,1), visibility .5s;
            }
            #preloader.hide {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            /* Animated background grid */
            .pl-grid {
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
                background-size: 60px 60px;
                animation: plGridMove 20s linear infinite;
            }
            @keyframes plGridMove {
                to { background-position: 60px 60px; }
            }

            /* Floating shapes */
            .pl-shapes {
                position: absolute;
                inset: 0;
                pointer-events: none;
                overflow: hidden;
            }
            .pl-shape {
                position: absolute;
                border-radius: 50%;
                opacity: 0;
                animation: plShapeFloat 3s ease-in-out infinite;
            }
            .pl-shape:nth-child(1) {
                width: 120px; height: 120px;
                background: radial-gradient(circle, rgba(31,107,92,.18), transparent 70%);
                top: 15%; left: 10%;
                animation-delay: 0s; animation-duration: 4s;
            }
            .pl-shape:nth-child(2) {
                width: 80px; height: 80px;
                background: radial-gradient(circle, rgba(42,143,124,.14), transparent 70%);
                top: 60%; right: 15%;
                animation-delay: .5s; animation-duration: 3.5s;
            }
            .pl-shape:nth-child(3) {
                width: 60px; height: 60px;
                background: radial-gradient(circle, rgba(201,162,39,.12), transparent 70%);
                bottom: 20%; left: 25%;
                animation-delay: 1s; animation-duration: 3s;
            }
            .pl-shape:nth-child(4) {
                width: 100px; height: 100px;
                background: radial-gradient(circle, rgba(31,107,92,.12), transparent 70%);
                top: 30%; right: 25%;
                animation-delay: 1.5s; animation-duration: 4.5s;
            }
            .pl-shape:nth-child(5) {
                width: 50px; height: 50px;
                background: radial-gradient(circle, rgba(201,162,39,.1), transparent 70%);
                top: 75%; left: 60%;
                animation-delay: .8s; animation-duration: 3.2s;
            }
            @keyframes plShapeFloat {
                0%   { opacity: 0; transform: translateY(30px) scale(.8); }
                50%  { opacity: 1; transform: translateY(-15px) scale(1); }
                100% { opacity: 0; transform: translateY(30px) scale(.8); }
            }

            /* Floating e-commerce icons */
            .pl-icons {
                position: absolute;
                inset: 0;
                pointer-events: none;
            }
            .pl-icon {
                position: absolute;
                color: rgba(255,255,255,.06);
                font-size: 24px;
                animation: plIconDrift linear infinite;
            }
            .pl-icon:nth-child(1)  { top: 12%; left: 8%;  font-size: 20px; animation-duration: 6s; animation-delay: 0s; }
            .pl-icon:nth-child(2)  { top: 25%; right: 12%; font-size: 28px; animation-duration: 7s; animation-delay: .3s; }
            .pl-icon:nth-child(3)  { top: 55%; left: 5%;   font-size: 22px; animation-duration: 5s; animation-delay: .8s; }
            .pl-icon:nth-child(4)  { top: 70%; right: 8%;  font-size: 18px; animation-duration: 8s; animation-delay: .5s; }
            .pl-icon:nth-child(5)  { top: 40%; left: 15%;  font-size: 26px; animation-duration: 6.5s; animation-delay: 1s; }
            .pl-icon:nth-child(6)  { top: 80%; left: 40%;  font-size: 20px; animation-duration: 7.5s; animation-delay: .2s; }
            .pl-icon:nth-child(7)  { top: 18%; left: 55%;  font-size: 16px; animation-duration: 5.5s; animation-delay: 1.2s; }
            .pl-icon:nth-child(8)  { top: 65%; right: 25%; font-size: 24px; animation-duration: 6s; animation-delay: .7s; }
            @keyframes plIconDrift {
                0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
                20%  { opacity: 1; }
                80%  { opacity: 1; }
                100% { transform: translateY(-80px) rotate(20deg); opacity: 0; }
            }

            /* Center content */
            .pl-content {
                position: relative;
                z-index: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0;
            }

            /* Logo image */
            .pl-logo-img {
                width: 100px;
                height: auto;
                margin-bottom: 16px;
                animation: plLogoEnter .8s cubic-bezier(.22,1,.36,1) both;
                filter: drop-shadow(0 4px 20px var(--sh-accent-glow));
            }
            @keyframes plLogoEnter {
                from { opacity: 0; transform: scale(.5) translateY(20px); }
                to   { opacity: 1; transform: scale(1) translateY(0); }
            }

            /* Brand text */
            .pl-brand {
                font-family: var(--font-sans);
                font-size: 32px;
                font-weight: 700;
                color: #fff;
                letter-spacing: -1px;
                margin-bottom: 6px;
                animation: plTextEnter .7s cubic-bezier(.22,1,.36,1) .2s both;
            }
            .pl-brand span {
                background: linear-gradient(135deg, var(--sh-accent), var(--sh-accent-mid));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            @keyframes plTextEnter {
                from { opacity: 0; transform: translateY(15px); }
                to   { opacity: 1; transform: translateY(0); }
            }

            /* Tagline */
            .pl-tagline {
                font-family: var(--font-sans);
                font-size: 13px;
                color: rgba(255,255,255,.4);
                letter-spacing: 2px;
                text-transform: uppercase;
                margin-bottom: 36px;
                animation: plTextEnter .7s cubic-bezier(.22,1,.36,1) .35s both;
            }

            /* Progress bar */
            .pl-progress {
                width: 180px;
                height: 3px;
                background: rgba(255,255,255,.08);
                border-radius: 3px;
                overflow: hidden;
                animation: plTextEnter .5s ease .5s both;
            }
            .pl-progress-bar {
                height: 100%;
                width: 0%;
                background: linear-gradient(90deg, var(--sh-accent), var(--sh-accent-mid));
                border-radius: 3px;
                animation: plProgress 2.5s cubic-bezier(.4,0,.2,1) .6s forwards;
                box-shadow: 0 0 12px var(--sh-accent-glow);
            }
            @keyframes plProgress {
                0%   { width: 0%; }
                30%  { width: 45%; }
                60%  { width: 70%; }
                85%  { width: 88%; }
                100% { width: 100%; }
            }

            /* Orbiting dots around logo */
            .pl-orbit {
                position: absolute;
                width: 160px;
                height: 160px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, calc(-50% - 30px));
                pointer-events: none;
            }
            .pl-orbit-dot {
                position: absolute;
                width: 6px;
                height: 6px;
                background: var(--sh-accent);
                border-radius: 50%;
                top: 50%;
                left: 50%;
                margin: -3px 0 0 -3px;
                box-shadow: 0 0 8px var(--sh-accent-glow);
            }
            .pl-orbit-dot:nth-child(1) {
                animation: plOrbit 2.5s linear infinite;
            }
            .pl-orbit-dot:nth-child(2) {
                animation: plOrbit 2.5s linear infinite;
                animation-delay: -.83s;
                background: var(--sh-accent-mid);
                box-shadow: 0 0 8px rgba(42, 143, 124, 0.45);
            }
            .pl-orbit-dot:nth-child(3) {
                animation: plOrbit 2.5s linear infinite;
                animation-delay: -1.67s;
                background: var(--sh-highlight);
                box-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
            }
            @keyframes plOrbit {
                to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
            }

            /* Responsive */
            @media (max-width: 480px) {
                .pl-logo-img { width: 70px; }
                .pl-brand { font-size: 26px; }
                .pl-tagline { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 28px; }
                .pl-progress { width: 140px; }
                .pl-orbit { width: 120px; height: 120px; }
                .pl-icon { display: none; }
            }