:root {
            --navy: #0D1B2A;
            --gold: #FFB400;
            --teal: #00FFC6;
            --white: #FFFFFF;
        }

        body {
            background-color: var(--navy);
            color: var(--white);
            margin: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* --- Animations --- */
        @keyframes neonPulse {
            0%, 100% { text-shadow: 0 0 10px var(--teal), 0 0 20px var(--teal); }
            50% { text-shadow: 0 0 20px var(--teal), 0 0 40px var(--teal); }
        }

        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes float3D {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(5deg); }
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .neon-text { animation: neonPulse 2s infinite; }
        
        .typewriter-text {
            overflow: hidden;
            white-space: nowrap;
            border-right: 3px solid var(--teal);
            animation: typewriter 3s steps(40, end), blink-caret .75s step-end infinite;
        }

        @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--teal); } }

        .float-element { animation: float3D 6s ease-in-out infinite; }

        /* --- Hexagon Grid --- */
        .hex-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, 180px);
            grid-auto-rows: 200px;
            gap: 20px;
            justify-content: center;
        }

        .hexagon {
            width: 180px;
            height: 200px;
            background: rgba(0, 255, 198, 0.1);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            transition: all 0.4s;
            border: 1px solid var(--teal);
            cursor: pointer;
        }
        .hexagon:hover {
            background: var(--teal);
            color: var(--navy);
            transform: scale(1.1);
            box-shadow: 0 0 30px var(--teal);
        }

        /* --- Custom UI --- */
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s;
        }
        .glass-card:hover {
            border-color: var(--teal);
            box-shadow: 0 0 20px rgba(0, 255, 198, 0.3);
        }

        .btn-glow-teal {
            background: transparent;
            border: 2px solid var(--teal);
            color: var(--teal);
            box-shadow: 0 0 10px var(--teal);
            transition: all 0.3s;
        }
        .btn-glow-teal:hover {
            background: var(--teal);
            color: var(--navy);
            box-shadow: 0 0 30px var(--teal);
        }

        .btn-glow-gold {
            background: var(--gold);
            color: var(--navy);
            box-shadow: 0 0 15px var(--gold);
            transition: all 0.3s;
        }
        .btn-glow-gold:hover {
            transform: scale(1.05);
            box-shadow: 0 0 40px var(--gold);
        }

        .page-view { display: none; }
        .page-view.active { display: block; }

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

        /* Marquee */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            background: rgba(255,180,0,0.05);
            padding: 20px 0;
            border-top: 1px solid rgba(255,180,0,0.2);
            border-bottom: 1px solid rgba(255,180,0,0.2);
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 20s linear infinite;
        }