@keyframes slideIn {
            0% { 
                opacity: 0; 
                transform: translateY(30px); 
            }
            8%, 25% { 
                opacity: 1; 
                transform: translateY(0); 
            }
            33%, 100% { 
                opacity: 0; 
                transform: translateY(-30px); 
            }
        }
        
        .headline-slide {
            animation: slideIn 12s infinite;
            position: absolute;
            inset: 0;
            opacity: 0;
        }
        
        .headline-slide:nth-child(2) {
            animation-delay: 4s;
        }
        
        .headline-slide:nth-child(3) {
            animation-delay: 8s;
        }
        
        .text-shadow-lift {
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .frosted-glass {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #111;
        }
     
        /* Cult Beauty inspired clean aesthetics */
        .clean-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            transition: all 0.2s ease;
        }
        
        .clean-card:hover {
            border-color: #FF2F92;
            box-shadow: 0 4px 12px rgba(255, 47, 146, 0.1);
        }
        
        .minimal-shadow {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        /* Enhanced Particles Animation */
        .particles-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
            border-radius: 50%;
            opacity: 0.8;
            animation: float 20s infinite linear;
        }

        .particle:nth-child(odd) {
            background: radial-gradient(circle, rgba(255, 47, 146, 0.8) 0%, rgba(255, 47, 146, 0.4) 50%, transparent 100%);
        }

        .particle:nth-child(3n) {
            background: radial-gradient(circle, rgba(31, 184, 198, 0.8) 0%, rgba(31, 184, 198, 0.4) 50%, transparent 100%);
        }

        .particle:nth-child(5n) {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.8) 0%, rgba(139, 92, 246, 0.4) 50%, transparent 100%);
        }

        .particle:nth-child(7n) {
            background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 215, 0, 0.4) 50%, transparent 100%);
        }

        .particle:nth-child(11n) {
            background: radial-gradient(circle, rgba(255, 105, 180, 0.8) 0%, rgba(255, 105, 180, 0.4) 50%, transparent 100%);
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0.5);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
                transform: translateY(90vh) translateX(10px) rotate(36deg) scale(1);
            }
            50% {
                opacity: 0.6;
                transform: translateY(50vh) translateX(50px) rotate(180deg) scale(1.2);
            }
            90% {
                opacity: 0.8;
                transform: translateY(10vh) translateX(90px) rotate(324deg) scale(0.8);
            }
            100% {
                transform: translateY(-100px) translateX(100px) rotate(360deg) scale(0.3);
                opacity: 0;
            }
        }

        /* Additional floating elements for white backgrounds */
        .dynamic-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .dynamic-particle {
            position: absolute;
            border-radius: 50%;
            animation: dynamicFloat 25s infinite linear;
        }

        @keyframes dynamicFloat {
            0% {
                transform: translateY(100vh) translateX(-50px) rotate(0deg) scale(0.3);
                opacity: 0;
            }
            15% {
                opacity: 0.9;
                transform: translateY(85vh) translateX(0px) rotate(54deg) scale(1);
            }
            50% {
                opacity: 0.7;
                transform: translateY(50vh) translateX(25px) rotate(180deg) scale(1.3);
            }
            85% {
                opacity: 0.9;
                transform: translateY(15vh) translateX(50px) rotate(306deg) scale(0.9);
            }
            100% {
                transform: translateY(-150px) translateX(75px) rotate(360deg) scale(0.2);
                opacity: 0;
            }
        }

        /* Benefits Card Hover Effects */
        .benefit-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .benefit-card:hover {
            transform: scale(1.05);
            box-shadow: 0 20px 40px rgba(255, 47, 146, 0.2);
        }

        .benefit-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .benefit-card:hover::before {
            opacity: 1;
            animation: sparkle 1.5s ease-in-out infinite;
        }

        @keyframes sparkle {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            transition: all 0.2s ease;
        }

        .benefit-emoji {
            font-size: 18px;
            min-width: 24px;
            text-align: center;
            transition: all 0.2s ease;
        }

        .benefit-card:hover .benefit-emoji {
            transform: scale(1.2);
            filter: drop-shadow(0 0 8px rgba(255, 47, 146, 0.6));
        }

        /* Flip Card Styles */
        .flip-card {
            perspective: 1000px;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card.flipped .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .flip-card-back {
            transform: rotateY(180deg);
        }

        /* Locked Page Dramatic Effects */
        .locked-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .locked-particle {
            position: absolute;
            background: linear-gradient(45deg, rgba(255, 47, 146, 0.8), rgba(31, 184, 198, 0.8));
            border-radius: 50%;
            opacity: 0.7;
            animation: matrixFall 8s infinite linear;
        }

        @keyframes matrixFall {
            0% {
                transform: translateY(-100px) translateX(0px) rotate(0deg) scale(0.5);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
                transform: translateY(10vh) translateX(5px) rotate(36deg) scale(1);
            }
            50% {
                opacity: 0.6;
                transform: translateY(50vh) translateX(15px) rotate(180deg) scale(1.2);
            }
            90% {
                opacity: 0.8;
                transform: translateY(90vh) translateX(25px) rotate(324deg) scale(0.8);
            }
            100% {
                transform: translateY(110vh) translateX(30px) rotate(360deg) scale(0.3);
                opacity: 0;
            }
        }

        /* Glitch Effect */
        .glitch-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(255, 47, 146, 0.03) 2px,
                rgba(255, 47, 146, 0.03) 4px
            );
            animation: glitchMove 3s infinite;
        }

        @keyframes glitchMove {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            60% { transform: translateX(-1px); }
            80% { transform: translateX(1px); }
        }

        /* Dramatic Text Glow */
        .text-glow {
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2), 0 0 60px rgba(255, 255, 255, 0.1);
        }

        /* Pulsing Border Animation */
        @keyframes borderPulse {
            0%, 100% { 
                border-color: rgba(255, 47, 146, 0.3);
                box-shadow: 0 0 20px rgba(255, 47, 146, 0.2);
            }
            33% { 
                border-color: rgba(31, 184, 198, 0.3);
                box-shadow: 0 0 20px rgba(31, 184, 198, 0.2);
            }
            66% { 
                border-color: rgba(139, 92, 246, 0.3);
                box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
            }
        }

        .border-pulse {
            animation: borderPulse 3s infinite;
        }
    </style>

<style>
/* === FIX IMAGE SHAPE DURING SLIDESHOW === */
#asherHero {
position: relative;
width: min(680px, 95vw);
height: 480px;                 /* fixed stage height, adjust if you want taller */
overflow: hidden;
border-radius: 16px;
}

#asherHeroImg {
position: absolute;
inset: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;           /* keep proportions */
transition: opacity 0.4s ease;
background-color: transparent; /* no background */
}

/* Make sure modal images stay centered and don’t resize jump */
.asher-gallery__img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: #000;
}

/* Thumbnails stay consistent squares */
.asher-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Allow smooth horizontal scrolling on mobile thumbs */
@media (max-width: 768px) {
#heroHiddenProducts {
display: flex;
overflow-x: auto;
gap: 12px;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
#heroHiddenProducts button {
flex: 0 0 auto;
width: 32%;
}
}

/* Make images clickable cursor */
img{cursor:pointer;}


html{scroll-behavior:smooth;}