/* Custom Utilities */
        .text-gradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

@keyframes navShimmer {
            0%   { transform: translateX(-120%) skewX(-20deg); opacity: 1; }
            12%  { transform: translateX(220%)  skewX(-20deg); opacity: 1; }
            12.1%, 100% { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
        }
        .nav-sheen-ray {
            position: absolute;
            top: 0; left: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
            animation: navShimmer 5s ease 2s infinite;
            opacity: 0;
            pointer-events: none;
        }

@keyframes heroPulseRed { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);} 50%{box-shadow:0 0 0 8px rgba(239,68,68,0);} }
                    #hero-chaos    { transition: opacity 1s ease, transform 1s ease; }
                    #hero-planvion { transition: opacity 1s ease, transform 1s ease; }
                    #hero-switch-overlay { transition: opacity 0.4s ease; }
                    #hero-label-chaos, #hero-label-planvion { transition: opacity 0.6s ease; }

@keyframes tapRipple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }

.showcase-tab { background: #f4f4f4; color: #6b7280; }
        .showcase-tab:hover { background: #ffe9e5; color: #FF785F; }
        .active-tab { background: #FF785F !important; color: #fff !important; }
        .showcase-panel { position: relative; }

@keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .demo-step { display: flex; }
        .demo-step.hidden { display: none; }
        #btn-step1:active { transform: scale(0.97); }
        #success-overlay.visible { opacity: 1 !important; pointer-events: auto !important; }

.hours-btn.active-hours {
            border-color: #FF785F;
            color: #FF785F;
            background-color: #fff5f3;
        }
        input[type=range].accent-primary::-webkit-slider-thumb {
            width: 20px;
            height: 20px;
        }