:root {
            --brand-pink: #df1b70;
            --brand-blue: #3da1d2;
            --text-dark: #1a202c;
            --brand-pink-light: #fdf2f7;
            --brand-blue-light: #f0f9ff;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* Decorative mesh background */
        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(at 0% 0%, rgba(223, 27, 112, 0.05) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(61, 161, 210, 0.05) 0px, transparent 50%);
            z-index: -1;
        }

        /* Hero Fan Layout Styles */
        .fan-container {
            perspective: 2000px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 500px;
            margin-top: 2rem;
        }

        .fan-card {
            position: absolute;
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: bottom center;
            cursor: pointer;
            box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
            background: white;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 1.5rem;
            overflow: hidden;
        }

        /* Dynamic Fan Positions - Adjusted for Desktop */
        @media (min-width: 1024px) {
            .card-1 { transform: translateX(-320px) rotate(-20deg) scale(0.8); z-index: 10; filter: brightness(0.7) blur(1px); }
            .card-2 { transform: translateX(-160px) rotate(-10deg) scale(0.9); z-index: 20; filter: brightness(0.85); }
            .card-3 { transform: translateX(0) rotate(0deg) scale(1); z-index: 30; } 
            .card-4 { transform: translateX(160px) rotate(10deg) scale(0.9); z-index: 20; filter: brightness(0.85); }
            .card-5 { transform: translateX(320px) rotate(20deg) scale(0.8); z-index: 10; filter: brightness(0.7) blur(1px); }
            
            .fan-container:hover .fan-card {
                filter: brightness(0.5) blur(2px);
                transform: scale(0.8);
            }

            .fan-container .fan-card:hover {
                filter: brightness(1) blur(0) !important;
                transform: scale(1.1) translateY(-40px) rotate(0deg) !important;
                z-index: 100 !important;
                box-shadow: 0 40px 80px -15px rgba(223, 27, 112, 0.25);
            }
        }

        /* Responsive stack for mobile */
        @media (max-width: 1023px) {
            .fan-container { height: auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
            .fan-card { position: relative; transform: none !important; width: 90% !important; height: auto !important; opacity: 1 !important; filter: none !important; }
        }

        .text-gradient {
            background: linear-gradient(to right, var(--brand-pink), var(--brand-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .btn-brand {
            background-color: var(--brand-pink);
            transition: all 0.3s ease;
        }

        .btn-brand:hover {
            background-color: var(--brand-blue);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -5px rgba(61, 161, 210, 0.4);
        }

        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(to right, var(--brand-pink), var(--brand-blue));
            z-index: 1000;
            width: 0%;
        }

        .image-zoom-container {
            overflow: hidden;
        }

        .zoom-image {
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hover-zoom:hover .zoom-image {
            transform: scale(1.1);
        }

        .play-overlay {
            background: linear-gradient(135deg, rgba(223, 27, 112, 0.4), rgba(61, 161, 210, 0.4));
            backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .hover-zoom:hover .play-overlay {
            opacity: 1;
        }