html, body { 
    font-family: 'Inter', sans-serif; 
    max-width: 100%;
}

        .logo {
            width: 5rem;
        }


    .active-dot { background-color: #ec4899 !important; } /* Tailwind's pink-500 */

    @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease forwards;
}

    /*FEATURED Elements start hidden and slightly lower */ 
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

/* This class will be added by JavaScript */
.reveal-item.active {
    opacity: 1;
    transform: translateY(0);
}

     /* Marquee Animation */
    @keyframes slow-marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .animate-slow-marquee {
        animation: slow-marquee 30s linear infinite;
    }

    /* Entry Animation */
    .reveal-up {
        opacity: 0;
        transform: translateY(30px);
        animation: revealIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes revealIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }