:root {
            --p-green: #76BA99;
            --s-green: #ADCF9F;
            --muted: #CED89E;
            --glow: #FFDCAE;
            --bg-deep: #060907;
            --card-bg: rgba(10, 15, 12, 0.95);
        }

        * {
            margin: 0; padding: 0; box-sizing: border-box;
            font-family: 'Nova Square', sans-serif;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-deep);
            color: #ffffff;
            overflow-x: hidden;
        }

        /* --- LEGIBILITY & UI --- */
        .text-neon {
            color: var(--p-green);
            text-shadow: 0 0 8px rgba(118, 186, 153, 0.6);
        }
        .heading-glow {
            text-shadow: 0 0 15px var(--p-green);
            letter-spacing: 2px;
        }
        .glass-panel {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(118, 186, 153, 0.2);
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        }

        /* --- ANIMATED BACKGROUND --- */
        #bg-canvas {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1; pointer-events: none;
        }

        /* --- NAVIGATION --- */
        nav.scrolled {
            background: rgba(6, 9, 7, 0.9);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--p-green);
            padding: 0.75rem 1rem;
        }

        /* --- ASYMMETRY --- */
        .skew-right { transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
        .skew-left { transform: perspective(1000px) rotateY(5deg) rotateX(-2deg); }
        .overlap-up { margin-top: -50px; z-index: 10; }

        /* --- BUTTONS --- */
        .btn-glow {
            background: var(--glow);
            color: #000;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px var(--glow);
            font-weight: 900;
        }
        .btn-glow:hover {
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 0 25px var(--glow);
        }

        /* --- PAGE HANDLING --- */
        .page-section {
            display: none;
            min-height: 100vh;
            animation: slideIn 0.5s ease-out forwards;
        }
        .page-section.active { display: block; }

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

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-deep); }
        ::-webkit-scrollbar-thumb { background: var(--p-green); border-radius: 10px; }

        /* Mobile Menu */
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }