:root {
            --yt-red: #FF0000;
            --creator-orange: #FF8A00;
            --soft-gold: #D4AF37;
            --coffee-black: #111111;
            --off-white: #FFFFFF;
            --soft-gray: #F8F8F8;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--off-white);
            color: var(--coffee-black);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .heading-bold { font-family: 'Montserrat', sans-serif; font-weight: 700; }
        .font-impact { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; }

        /* Navigation Styling */
        .glass-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

        /* Card Interactions */
        .creator-card {
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .creator-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.15);
        }
        .creator-card:hover .card-img {
            transform: scale(1.1);
        }

        /* Responsive Grids */
        .responsive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2.5rem;
        }

        /* Buttons & UI */
        .btn-primary {
            background: var(--coffee-black);
            color: white;
            padding: 1rem 2.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.7rem;
            transition: all 0.4s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
        }
        .btn-primary:hover {
            background: var(--yt-red);
            box-shadow: 0 15px 30px rgba(255, 0, 0, 0.3);
            transform: translateY(-3px);
        }

        .btn-outline {
            border: 2px solid var(--coffee-black);
            padding: 1rem 2.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.7rem;
            transition: all 0.4s ease;
            border-radius: 999px;
        }
        .btn-outline:hover {
            background: var(--coffee-black);
            color: white;
            transform: translateY(-3px);
        }

        /* Rankings List */
        .rank-row {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        .rank-row:hover {
            background: var(--soft-gray);
            border-left-color: var(--yt-red);
            padding-left: 1rem;
        }

        /* Ranking Numbers (Large background) */
        .rank-bg-num {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            font-size: 6rem;
            line-height: 1;
            opacity: 0.05;
            position: absolute;
            right: 10%;
            bottom: 0;
            pointer-events: none;
        }

        /* Utility */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .hide { display: none !important; }
        
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Filter Pills */
        .filter-pill {
            padding: 0.7rem 1.8rem;
            border-radius: 50px;
            background: white;
            border: 1px solid #EAEAEA;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .filter-pill.active {
            background: var(--coffee-black);
            color: white;
            border-color: var(--coffee-black);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        /* Marquee Animation */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: fit-content;
            animation: marquee 40s linear infinite;
        }

        /* Modal Overlay */
        .modal-blur {
            backdrop-filter: blur(12px);
            background: rgba(255,255,255,0.85);
        }

        /* Custom Mobile Adjustments */
        @media (max-width: 640px) {
            h1 { font-size: 3rem !important; }
            .btn-primary, .btn-outline { width: 100%; }
        }