:root {
            --neon: #08FFC8;
            --bg: #0A3442;
        }

        body {
            background-color: var(--bg);
            color: #FFFFFF;
            font-family: 'Outfit', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .bebas {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 0.05em;
        }

        /* --- Custom Animations --- */
        @keyframes bgZoom {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .animate-bg {
            animation: bgZoom 20s infinite ease-in-out;
        }

        .png-slide {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 90%;
            object-fit: contain;
            opacity: 0;
            transform: translateX(100px) scale(0.95);
            transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8));
            pointer-events: none;
        }

        .png-slide.active {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        /* --- Navigation Styling --- */
        header.scrolled {
            background: rgba(10, 52, 66, 0.95);
            backdrop-filter: blur(15px);
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(8, 255, 200, 0.2);
        }

        /* --- Card Staggering --- */
        .card-stagger {
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .card-stagger:hover {
            transform: translateY(-15px) scale(1.02);
            z-index: 50;
        }

        /* --- Scroll Reveal --- */
        .reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- Multipage Logic --- */
        .page-container { display: none; }
        .page-container.active { display: block; animation: fadeIn 0.6s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* --- UI Elements --- */
        .neon-btn {
            border: 2px solid var(--neon);
            color: var(--neon);
            transition: all 0.3s ease;
        }
        .neon-btn:hover {
            background: var(--neon);
            color: var(--bg);
            box-shadow: 0 0 30px var(--neon);
        }
        
        .overlay-shape {
            position: absolute;
            background: var(--neon);
            opacity: 0.05;
            filter: blur(100px);
            border-radius: 50%;
            z-index: -1;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--neon); border-radius: 10px; }