:root {
            --bg-black: #000000;
            --accent-light: #a4ff5e;
            --neon-lime: #a4ff5e;
        }

        body {
            font-family: 'Arimo', sans-serif;
            background-color: var(--bg-black);
            color: var(--accent-light);
            overflow-x: hidden;
        }

        /* Typography */
        h1, h2, h3, h4 {
            font-weight: 700;
            letter-spacing: -0.02em;
            text-transform: uppercase;
        }

        /* Nav Transitions */
        .page-node { display: none; opacity: 0; }
        .page-node.active { display: block; opacity: 1; animation: fadeIn 0.6s ease forwards; }

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

        /* Custom Scrollbar for Neon Look */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--bg-black); }
        ::-webkit-scrollbar-thumb { background: #a4ff5e; }

        /* Split Section Heights */
        .split-section { min-height: 80vh; display: flex; flex-wrap: wrap; }
        .split-box { flex: 1; min-width: 50%; display: flex; flex-direction: column; justify-content: center; padding: 10%; position: relative; overflow: hidden; }
        @media (max-width: 1024px) { .split-box { min-width: 100%; min-height: 50vh; } }

        /* Neon Glows */
        .hover-glow:hover { text-shadow: 0 0 10px var(--neon-lime); color: var(--neon-lime) !important; }
        .btn-neon { border: 1px solid var(--accent-light); transition: all 0.3s ease; }
        .btn-neon:hover { border-color: var(--neon-lime); color: var(--bg-black); background: var(--neon-lime); box-shadow: 0 0 20px rgba(241, 255, 94, 0.4); }

        /* Image Effects */
        .img-zoom-container { overflow: hidden; }
        .img-zoom-container img { transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .img-zoom-container:hover img { transform: scale(1.1); }

        /* Vertical Auto-Scroll Text */
        .scroll-text-container { height: 300px; overflow: hidden; position: relative; }
        .scroll-content { animation: scrollVertical 20s linear infinite; }
        @keyframes scrollVertical {
            0% { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }

        /* Modal */
        #modal-overlay { transition: all 0.3s ease; }
        #modal-container { transform: translateY(30px); transition: transform 0.4s ease; }
        body.modal-open #modal-container { transform: translateY(0); }

        /* Hamburger */
        #mobile-menu { transform: translateX(100%); transition: transform 0.4s ease; }
        #mobile-menu.active { transform: translateX(0); }