:root {
            --charcoal: #171717;
            --violet: #726A95;
            --lime: #B6EB7A;
        }

        body {
            background-color: var(--charcoal);
            color: #FFFFFF;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        
        /* Typography */
        h1, h2, h3, h4, .headline { 
            letter-spacing: -0.02em;
        }

        /* Hero Light Streaks Animation */
        .hero-container {
            position: relative;
            background: linear-gradient(rgba(23, 23, 23, 0.6), rgba(23, 23, 23, 0.9)), 
                        url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&q=80&w=1920');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        .light-streak {
            position: absolute;
            width: 2px;
            height: 100px;
            background: var(--lime);
            filter: blur(4px);
            opacity: 0.3;
            animation: streakMove 5s linear infinite;
        }

        @keyframes streakMove {
            0% { transform: translateY(-100%) translateX(0) rotate(45deg); opacity: 0; }
            50% { opacity: 0.5; }
            100% { transform: translateY(1000%) translateX(500px) rotate(45deg); opacity: 0; }
        }

        /* Custom UI Components */
        .glass-header {
            background: rgba(23, 23, 23, 0.8);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(114, 106, 149, 0.2);
        }

        .nav-link {
            position: relative;
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: #FFFFFF;
            transition: 0.3s;
        }

        .nav-link:hover { color: var(--lime); }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--lime);
            box-shadow: 0 0 10px var(--lime);
            transition: 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        .btn-lime {
            background: var(--lime);
            color: var(--charcoal);
            font-weight: 800;
            padding: 0.75rem 2rem;
            border-radius: 4px;
            transition: 0.3s transform ease, 0.3s box-shadow;
        }
        .btn-lime:hover { 
            transform: scale(1.05); 
            box-shadow: 0 0 20px rgba(182, 235, 122, 0.4);
        }

        .btn-outline-violet {
            border: 2px solid var(--violet);
            color: #FFFFFF;
            padding: 0.75rem 2rem;
            border-radius: 4px;
            transition: 0.3s;
        }
        .btn-outline-violet:hover {
            background: var(--violet);
            color: var(--charcoal);
        }

        /* Sections */
        .reveal { opacity: 0; transform: translateY(30px); transition: 1s all ease; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .garage-card {
            background: #1e1e1e;
            border: 1px solid #333;
            transition: 0.4s;
        }
        .garage-card:hover {
            transform: scale(1.03);
            border-color: var(--lime);
        }

        /* Timeline Styles */
        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--lime);
            transform: translateX(-50%);
        }

        .timeline-node {
            width: 20px;
            height: 20px;
            background: var(--violet);
            border: 4px solid var(--charcoal);
            border-radius: 50%;
            z-index: 10;
            transition: 0.3s;
        }

        /* Chart Animation */
        .chart-bar {
            height: 8px;
            background: var(--violet);
            border-radius: 4px;
            width: 0;
            transition: 1.5s width ease-in-out;
        }
        .reveal.active .chart-bar { width: var(--target-width); }

        /* Hide Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--charcoal); }
        ::-webkit-scrollbar-thumb { background: var(--violet); }