/* <style> */
        /* General Resets */
        body { font-family: 'Inter', sans-serif; color: #4A5568; background-color: #F8F7FF; overflow-x: hidden; width: 100%; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; color: #0A2540; }
        * { box-sizing: border-box; }
        
        .glass-nav {
            background: rgba(253, 252, 253, 0.85); 
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(122, 168, 255, 0.2);
        }

        .reveal { opacity: 0; transform: translateY(20px); transition: all 0.7s cubic-bezier(0.5, 0, 0, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* =======================================================
           🚀 100% BULLETPROOF MARQUEE (Zero Squish, Zero Stacking) 🚀 
           ======================================================= */
        .marquee-container {
            display: flex;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        .marquee-track {
    display: flex !important;
    flex-direction: row !important; 
    flex-wrap: nowrap !important;   
    width: max-content !important;  
    animation: scroll-left 30s linear infinite;
    will-change: transform;
}

        .marquee-track-slow {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: max-content !important;
            animation: scroll-left 45s linear infinite; 
        }
        
        .marquee-track:hover, .marquee-track-slow:hover {
            animation-play-state: paused;
            cursor: pointer;
        }

        .marquee-item-set {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center;
            flex-shrink: 0 !important; 
        }
        
        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } 
        }

        /* Fade In for Tabs */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
        .tab-pane { display: none; }
        .tab-pane.active { display: block; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Buttons & Cards */
        .btn-candy { background: linear-gradient(135deg, #7AA8FF, #FF9AEF); transition: all 0.4s ease; }
        .btn-candy:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(122, 168, 255, 0.4); }

        .flip-card { background-color: transparent; perspective: 1000px; height: 320px; }
        .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
        .flip-card:hover .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; border-radius: 2rem; box-shadow: 0 15px 35px -5px rgba(122, 168, 255, 0.12); }
        .flip-card-front { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L400,0 L400,90 C250,160 150,-20 0,110 Z' fill='%23FF9AEF' opacity='0.15'/%3E%3Cpath d='M0,0 L400,0 L400,50 C300,110 100,-10 0,70 Z' fill='%237AA8FF' opacity='0.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top center; background-size: 100% 130px; color: #0A2540; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(122, 168, 255, 0.2); padding: 1.5rem; }
        .flip-card-back { background: linear-gradient(135deg, #7AA8FF, #FF9AEF); color: white; transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px solid rgba(255,255,255,0.4); }

        /* Mobile Fixes */
        @media screen and (max-width: 500px) {
            html { font-size: 13.5px !important; } 
            .break-long-words { word-break: break-all !important; }
        }
    /* </style> */