/* ========== BASE RESETS ========== */
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
        body { margin: 0; background: #ECEFF1; color: #0F172A; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; }

        /* ========== SCROLL ANIMATIONS ========== */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
            will-change: transform, opacity;
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }
        .reveal-delay-5 { transition-delay: 0.5s; }

        /* ========== HERO CANVAS ========== */
        #hero-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* ========== NAVIGATION ========== */
        .nav-glass {
            background: rgba(236, 239, 241, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(25, 25, 112, 0.06);
            transition: all 0.3s ease;
        }
        .nav-scrolled {
            background: rgba(236, 239, 241, 0.95);
            box-shadow: 0 1px 24px rgba(25, 25, 112, 0.06);
        }

        /* ========== LOGO MARQUEE ========== */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .marquee-track { animation: marquee 35s linear infinite; }
        .marquee-track:hover { animation-play-state: paused; }

        /* ========== PIPELINE ANIMATION ========== */
        @keyframes pipelinePulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        @keyframes flowDot {
            0% { left: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { left: 100%; opacity: 0; }
        }
        .pipeline-dot {
            animation: flowDot 3s ease-in-out infinite;
        }
        .pipeline-dot-delay-1 { animation-delay: 0.8s; }
        .pipeline-dot-delay-2 { animation-delay: 1.6s; }

        /* ========== FEATURE CARDS ========== */
        .feature-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(25, 25, 112, 0.06);
            transition: all 0.4s cubic-bezier(.16,1,.3,1);
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 60px rgba(25, 25, 112, 0.08), 0 1px 3px rgba(25, 25, 112, 0.04);
            border-color: rgba(25, 25, 112, 0.12);
        }

        /* ========== DASHBOARD MOCKUP ========== */
        .dashboard-shell {
            background: #0F172A;
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 40px 120px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(255,255,255,0.03) inset;
        }

        /* ========== ANIMATED BARS ========== */
        .bar-animate {
            transform-origin: bottom;
            animation: barGrow 1.5s cubic-bezier(.16,1,.3,1) forwards;
            transform: scaleY(0);
        }
        @keyframes barGrow { to { transform: scaleY(1); } }

        /* ========== TERMINAL ========== */
        .terminal-shell {
            background: #0a0e1a;
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow: 0 40px 100px rgba(10, 14, 26, 0.4);
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        .cursor-blink { animation: blink 1s step-end infinite; }

        /* ========== PRICING CARDS ========== */
        .pricing-card {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(25, 25, 112, 0.06);
            transition: all 0.4s cubic-bezier(.16,1,.3,1);
        }
        .pricing-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 80px rgba(25, 25, 112, 0.1);
        }
        .pricing-featured {
            background: #191970;
            color: white;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .pricing-featured:hover {
            box-shadow: 0 24px 80px rgba(25, 25, 112, 0.25);
        }

        /* ========== CASE STUDY CARDS ========== */
        .case-card {
            background: rgba(255,255,255,0.5);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(25, 25, 112, 0.06);
            transition: all 0.4s cubic-bezier(.16,1,.3,1);
        }
        .case-card:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 20px 60px rgba(25, 25, 112, 0.08);
        }

        /* ========== CODE BLOCK ========== */
        .code-block {
            background: #0F172A;
            border: 1px solid rgba(255,255,255,0.06);
        }

        /* ========== MOBILE MENU ========== */
        #mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, opacity 0.35s ease;
            opacity: 0;
        }
        #mobile-menu.open {
            max-height: 400px;
            opacity: 1;
        }

        /* ========== FLOW LINE ANIMATION ========== */
        @keyframes dashFlow {
            to { stroke-dashoffset: -20; }
        }
        .flow-line-animated {
            stroke-dasharray: 6 4;
            animation: dashFlow 1s linear infinite;
        }

        /* ========== NODE PULSE ========== */
        @keyframes nodePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(25,25,112,0.2); }
            50% { box-shadow: 0 0 0 8px rgba(25,25,112,0); }
        }
        .node-pulse { animation: nodePulse 2.5s ease-in-out infinite; }

        /* ========== METRIC COUNTER ========== */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ========== SCROLLBAR ========== */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #ECEFF1; }
        ::-webkit-scrollbar-thumb { background: #B0BEC5; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #4F6D7A; }

        /* ========== STAT PILL ========== */
        .stat-pill {
            background: rgba(25, 25, 112, 0.06);
            border: 1px solid rgba(25, 25, 112, 0.08);
        }

        /* ========== GRAPH DOT PULSE ========== */
        @keyframes graphPulse {
            0%, 100% { r: 3; opacity: 1; }
            50% { r: 5; opacity: 0.6; }
        }