:root {
            --charcoal: #1F1B24;
            --vibrant-orange: #FF5A3C;
            --neon-green: #6EF3C0;
            --text-gray: #D1D1D1;
        }

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

        h1, h2, h3, .heading-font {
            font-family: 'Montserrat Alternates', sans-serif;
            font-weight: 700;
        }

        /* Hero Diagonal Split */
        .hero-container {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            background: linear-gradient(135deg, var(--charcoal) 50%, var(--neon-green) 50.1%);
        }

        .vertical-video-wrap {
            position: absolute;
            left: 5%;
            top: 10%;
            width: 300px;
            height: 80%;
            overflow: hidden;
            border-radius: 20px;
            z-index: 5;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            transform: translateY(calc(var(--scroll) * -0.2px));
        }

        .video-placeholder {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: url('https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?q=80&w=2069') center/cover;
            filter: grayscale(1) contrast(1.2);
            animation: pulse 4s infinite alternate;
        }

        @keyframes pulse {
            from { filter: grayscale(1) brightness(0.8); }
            to { filter: grayscale(0.5) brightness(1.1); }
        }

        /* Parallax Text */
        .parallax-text {
            transform: translateY(calc(var(--scroll) * 0.1px));
        }

        .neon-shadow {
            text-shadow: 0 0 20px rgba(110, 243, 192, 0.4);
        }

        /* Header */
        header {
            background: rgba(31, 27, 36, 0.8);
            backdrop-filter: blur(10px);
            transition: all 0.3s;
        }

        .nav-link {
            position: relative;
            cursor: pointer;
            font-weight: 500;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--neon-green);
            transition: 0.3s;
            box-shadow: 0 0 10px var(--neon-green);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* Buttons */
        .btn-primary {
            background-color: var(--vibrant-orange);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(255, 90, 60, 0.4);
        }

        .btn-outline {
            border: 2px solid var(--vibrant-orange);
            color: var(--vibrant-orange);
        }

        .btn-outline:hover {
            background-color: var(--vibrant-orange);
            color: white;
        }

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

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Page Management */
        .page { display: none; }
        .page.active { display: block; animation: fadeIn 0.5s ease-in; }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Floating Icons */
        .floating-icon {
            animation: float 3s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

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