/* Pipeline visualization */
        .engine-visual {
            position: relative;
            height: min(60vh, 560px);
            border: 1px solid rgba(42, 42, 40, 0.9);
            border-radius: 1.25rem;
            background: transparent;
            overflow: hidden;
        }
        .engine-visual::before {
            content: ''; position: absolute; inset: 0;
            border-radius: inherit;
            box-shadow: inset 0 0 100px rgba(159, 227, 184, 0.05);
            pointer-events: none;
        }
        @media (max-width: 1024px) { .engine-visual { height: 340px; margin-top: 2.5rem; } }
        .engine-step { cursor: pointer; }
        .engine-step:hover { opacity: 0.7 !important; }

        /* Custom Buttons - CRO Upgrades */
        .btn-primary {
            background-color: var(--ink);
            color: var(--paper);
            padding: 1.1rem 2.2rem;
            border-radius: 999px;
            font-weight: 600;
            font-size: 1.05rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        .btn-primary::after {
            content: ''; position: absolute; inset: 0; border-radius: 999px;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); opacity: 0; transition: opacity 0.3s;
        }
        .btn-primary:hover { 
            transform: translateY(-3px); 
            background-color: #222; 
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.3);
        }
        .btn-primary:hover::after { opacity: 1; }
        
        /* Highlighting CTA Pulse */
        @keyframes pulse-ring {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(30, 94, 58, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(30, 94, 58, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(30, 94, 58, 0); }
        }
        .btn-pulse { animation: pulse-ring 2.5s infinite cubic-bezier(0.66, 0, 0, 1); }

        .btn-secondary {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 1.1rem 2.2rem; border-radius: 999px; font-weight: 500; font-size: 1.05rem;
            border: 1px solid var(--line); color: var(--ink); background: transparent;
            transition: all 0.3s ease;
        }
        .btn-secondary:hover { border-color: var(--ink); background: var(--paper-2); transform: translateY(-2px); }

        .badge-verified {
            background-color: rgba(30, 94, 58, 0.1); color: var(--verified);
            padding: 0.25rem 0.75rem; border-radius: 999px;
            border: 1px solid rgba(30, 94, 58, 0.2);
            display: inline-flex; align-items: center; gap: 0.35rem;
        }

        .svg-draw path, .svg-draw line, .svg-draw rect, .svg-draw circle, .svg-draw ellipse {
            stroke-dasharray: 1000; stroke-dashoffset: 1000;
        }

        html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
        .lenis.lenis-stopped { overflow: hidden; }

        @keyframes scrolldown {
            0% { transform: scaleY(0); transform-origin: top; }
            50% { transform: scaleY(1); transform-origin: top; }
            51% { transform: scaleY(1); transform-origin: bottom; }
            100% { transform: scaleY(0); transform-origin: bottom; }
        }

        header.nav {
            position: fixed; inset: 0 0 auto 0; z-index: 100;
            display: flex; align-items: center; justify-content: space-between;
            padding: 1.1rem var(--gutter);
            transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            border-bottom: 1px solid transparent;
            transform: translateZ(0);
        }
        header.nav.scrolled {
            /* Solid fill — backdrop-filter blur causes scroll jank on fixed nav */
            background: color-mix(in srgb, var(--paper) 94%, transparent);
            border-bottom-color: var(--line);
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        }
        .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
        .brand .dot { width: 22px; height: 22px; }
        .nav-links { display: flex; align-items: center; gap: 2rem; }
        .nav-links a.link { font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; text-decoration: none; transition: color 0.25s; }
        .nav-links a.link:hover { color: var(--ink); }
        .btn-nav {
            display: inline-flex; align-items: center; gap: 0.6rem;
            padding: 0.75rem 1.4rem; border-radius: 100px;
            font-weight: 600; font-size: 0.92rem;
            background: var(--ink); color: var(--paper); text-decoration: none;
            transition: background 0.3s, transform 0.4s var(--ease), box-shadow 0.3s;
        }
        .btn-nav:hover { background: var(--verified); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,94,58,0.2); }
        .btn-nav .arr { transition: transform 0.4s var(--ease); }
        .btn-nav:hover .arr { transform: translateX(4px); }
        .nav-login { border: 1px solid var(--line); padding: 0.5rem 1rem; border-radius: 100px; }
        .nav-login:hover { border-color: var(--ink); }

        /* Mobile navigation */
        .nav-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--paper) 92%, transparent); cursor: pointer; }
        .nav-burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
        .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-burger.is-open span:nth-child(2) { opacity: 0; }
        .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
        .nav-mobile { position: fixed; top: var(--nav-height, calc(2.2rem + 42px)); left: var(--gutter); right: var(--gutter); z-index: 99; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: color-mix(in srgb, var(--paper) 98%, transparent); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(14,14,12,0.35); opacity: 0; transform: translateY(-10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none; visibility: hidden; }
        .nav-mobile[hidden] { display: none !important; }
        .nav-mobile.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
        .nav-mobile a { padding: 0.85rem 1rem; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; transition: background 0.2s; }
        .nav-mobile a:hover { background: var(--paper-2); }
        .nav-mobile a.btn-nav { color: var(--paper); justify-content: center; margin-top: 0.4rem; }
        @media (max-width: 860px) { .nav-links { display: none; } .nav-burger { display: flex; } }
        @media (min-width: 861px) { .nav-mobile { display: none !important; } }

        .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
        .pad { padding-block: clamp(5rem, 12vh, 10rem); }
        .eyebrow {
            font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em;
            text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
            display: inline-flex; align-items: center; gap: 0.6rem;
        }
        .eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: var(--ink-soft); opacity: 0.6; }
        .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; }
        .lead { color: var(--ink-soft); max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.6; }
        .sec-head { max-width: 38ch; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
        .sec-head h2 { margin: 1.1rem 0; }
        
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
        .reveal.in { opacity: 1; transform: none; }
        .reveal.d1 { transition-delay: 0.08s; }
        .reveal.d2 { transition-delay: 0.16s; }
        .reveal.d3 { transition-delay: 0.24s; }