        :root { scroll-behavior: smooth; }
        body { 
            background-color: #FFFFFF; 
            color: #31326F; 
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
        }

        /* System Navigation Transition */
        #main-nav.scrolled {
            box-shadow: 0 4px 20px rgba(49, 50, 111, 0.05);
            padding: 0.75rem 2rem;
        }

        /* Page Transitions */
        .page-view { display: none; }
        .page-view.active { display: block; animation: systemFade 0.6s ease-out; }
        @keyframes systemFade {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Workflow Animation System */
        .process-card {
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
        }

        .process-card.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .process-card.reverse {
            transform: scale(0.9) translateZ(-50px);
            opacity: 0.5;
            filter: blur(4px);
        }

        /* Hero Parallax */
        .hero-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            transition: transform 0.1s ease-out;
        }

        /* Custom UI Elements */
        .system-divider {
            height: 1px;
            background: linear-gradient(90deg, #31326F 0%, rgba(49, 50, 111, 0) 100%);
            width: 100%;
            margin: 2rem 0;
        }

        .float-card {
            box-shadow: 0 30px 60px -12px rgba(49, 50, 111, 0.15);
            animation: cardFloat 6s ease-in-out infinite;
        }
        @keyframes cardFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Interactive Steps */
        .step-node {
            position: relative;
            z-index: 10;
        }
        .step-node::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 100%;
            height: 2px;
            background: #A8FBD3;
            z-index: -1;
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
