:root {
            --accent-pink: #FFEDF3;
            --accent-green: #EBFFD8;
        }

        body {
            font-family: 'Josefin Sans', sans-serif;
            background-color: #ffffff;
            color: #000000;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Running Path Line */
        .running-path {
            position: fixed;
            left: 50%;
            top: 0;
            width: 1px;
            height: 100vh;
            background: rgba(0,0,0,0.05);
            z-index: 0;
            pointer-events: none;
        }
        .runner-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #000;
            border-radius: 50%;
            left: -3.5px;
            animation: moveDown 5s infinite linear;
        }

        @keyframes moveDown {
            0% { top: -20px; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100vh; opacity: 0; }
        }

        /* Hero Animation */
        .hero-bg {
            background-size: cover;
            background-position: center;
            opacity: 0.15;
            filter: grayscale(1);
            animation: zoomSlow 20s infinite alternate;
        }

        @keyframes zoomSlow {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        /* Navigation */
        .nav-link {
            position: relative;
            padding-bottom: 2px;
            transition: color 0.3s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 1px;
            background: currentColor;
            transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        .scrolled-header {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }

        /* Horizontal Motion Strip */
        .motion-strip {
            display: flex;
            width: fit-content;
            animation: marquee 60s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Split Layers */
        .layer-panel {
            transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
            flex: 1;
            overflow: hidden;
            min-height: 180px;
        }
        .layer-panel:hover {
            flex: 3;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #000; }

        /* Page View transitions */
        .page-view { display: none; }
        .page-view.active { 
            display: block; 
            animation: fadeInBlur 1s ease-out;
        }

        @keyframes fadeInBlur {
            from { opacity: 0; filter: blur(20px); transform: translateY(20px); }
            to { opacity: 1; filter: blur(0); transform: translateY(0); }
        }

        /* Glitch Effect */
        .glitch {
            position: relative;
            animation: glitch 3s infinite;
        }
        @keyframes glitch {
            0% { transform: translate(0); }
            1% { transform: translate(-2px, 2px); }
            2% { transform: translate(2px, -2px); }
            3% { transform: translate(0); }
            100% { transform: translate(0); }
        }

        /* Burst Cards */
        .burst-card {
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .burst-card:hover {
            transform: scale(1.05) rotate(0deg) !important;
            z-index: 50;
        }

        /* Stat Circles */
        .stat-circle {
            transition: stroke-dashoffset 2s ease-in-out;
        }