:root {
            --ds-primary: #4C3BCF;
            --ds-dark: #481E14;
            --ds-light-bg: #F8FAFC;
            --ds-border: #E2E8F0;
        }

        body {
            font-family: 'IBM Plex Sans', sans-serif;
            color: #1E293B;
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        .code-font { font-family: 'IBM Plex Mono', monospace; }

        /* Animation Keyframes */
        @keyframes flowLine {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: 0; }
        }

        @keyframes bgPulse {
            0%, 100% { transform: scale(1); opacity: 0.05; }
            50% { transform: scale(1.1); opacity: 0.1; }
        }

        /* Hero Background Animation */
        .hero-bg-anim {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: radial-gradient(var(--ds-primary) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.05;
            animation: bgPulse 10s ease-in-out infinite;
            z-index: -1;
        }

        /* SaaS UI Cards */
        .ds-card {
            background: white;
            border: 1px solid var(--ds-border);
            border-radius: 16px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }
        .ds-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
            border-color: var(--ds-primary);
        }

        /* Custom Navigation */
        .nav-link {
            font-weight: 500;
            color: #64748b;
            transition: all 0.2s;
            position: relative;
            cursor: pointer;
        }
        .nav-link:hover { color: var(--ds-primary); }
        .nav-link::after {
            content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
            background: var(--ds-primary); transition: width 0.3s;
        }
        .nav-link:hover::after { width: 100%; }

        /* Workflow Connector */
        .connector-line {
            height: 2px;
            background: linear-gradient(90deg, var(--ds-primary), #A78BFA);
            position: relative;
            overflow: hidden;
        }
        .connector-line::after {
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, white, transparent);
            animation: flowLineAnim 2s infinite;
        }
        @keyframes flowLineAnim { 100% { left: 100%; } }

        /* Multi-page System */
        .page-view { display: none; }
        .page-view.active { display: block; animation: fadeIn 0.5s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Image Masking */
        .img-overlay {
            background: linear-gradient(to bottom, transparent, rgba(72, 30, 20, 0.8));
        }

        /* Mobile Hamburger */
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            transform: translateX(100%);
        }
        #mobile-menu.open { transform: translateX(0); }

        /* Stats Pulse */
        .status-pulse {
            width: 8px; height: 8px; background: #10B981; border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }