:root {
            --brand-violet: #8b5cf6;
            --bg-dark: #0f172a;
            --bg-card: #1e293b;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: #cbd5e1;
            overflow-x: hidden;
            scroll-behavior: smooth;
            -webkit-tap-highlight-color: transparent;
        }

        h1, h2, h3, h4, .font-display {
            font-family: 'Exo 2', sans-serif;
            font-weight: 800;
        }
        
        .bg-brand-accent { background-color: var(--brand-violet); }
        .text-brand-accent { color: var(--brand-violet); }
        
        /* Fixed Header Glassmorphism */
        header#main-navbar {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Game Card Styling */
        .game-card {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-card);
        }
        .game-card:hover { transform: translateY(-4px); }
        
        .game-card .play-overlay {
            opacity: 0;
            transition: all 0.3s ease-in-out;
            background: rgba(15, 23, 42, 0.4);
            backdrop-filter: blur(4px);
        }
        .game-card:hover .play-overlay { opacity: 1; }

        .game-card .game-image {
            transition: transform 0.5s ease, filter 0.4s ease;
        }
        .game-card:hover .game-image {
            transform: scale(1.1);
            filter: blur(6px);
        }
        
        /* Carousel Logic */
         #hero-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* responsive height */
    overflow: hidden;
}

#hero-carousel .carousel-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

#hero-carousel .carousel-item.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

#hero-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* ensures entire image is visible */
    object-position: center center;
    background-color: #000;       /* fallback fill for empty spaces */
    transition: transform 0.8s, filter 0.6s;
}


#hero-carousel .carousel-item.active:hover img {
    filter: blur(12px);
    transform: scale(1.08);
}

/* Optional: dots */
#hero-carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 20;
}

#hero-carousel-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

#hero-carousel-dots button.active {
    background: white;
}


        
        /* Scroll Utilities */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .glossy-btn {
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease;
        }
        .glossy-btn:active { transform: scale(0.95); }
        .glossy-btn::after {
            content: '';
            position: absolute;
            top: -50%; left: -50%; width: 200%; height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
            transform: rotate(45deg);
            transition: 0.5s;
        }
        .glossy-btn:hover::after { left: 100%; top: 100%; }
        
        .nav-link.active {
            color: var(--brand-violet);
            position: relative;
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0; right: 0;
            height: 2px; background: var(--brand-violet);
            border-radius: 2px;
        }

        .plan-card {
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            border-width: 2px;
            border-color: #334155;
        }
        .plan-card.active {
            border-color: #8b5cf6;
            background-color: rgba(139, 92, 246, 0.1);
        }

        .fade-in-section {
            animation: fadeIn 0.5s ease forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }