/* =============================================================================
           ZIVVY DESIGN SYSTEM TOKENS
           ============================================================================= */
        :root {
            /* Spacing */
            --space-xxs: 4px;
            --space-xs: 8px;
            --space-s: 12px;
            --space-m: 16px;
            --space-l: 24px;
            --space-xl: 32px;
            --space-xxl: 48px;
            --space-section: 96px;
            --container-max: 1200px;

            /* Primary Purple Scale - using standard naming */
            /* Removed: now using global --primary-50 through --primary-950 */

            /* Tertiary Gold Scale - using standard naming */
            /* Removed: now using global --tertiary-50 through --tertiary-950 */
            --tertiary-harvest-gold: hsl(32, 95%, 44%);
            --gold-dim: hsl(51, 100%, 50%, 0.15);

            /* Surface Colors */
            --surface-background: hsl(0, 0%, 98%);
            --surface-border: hsl(0, 0%, 88%);
            --surface-variant: hsl(0, 0%, 96%);

            /* Dark Mode */
            --near-black: hsl(258, 33%, 6%);
            --dark-surface: hsl(256, 25%, 12%);

            /* Text Colors */
            --text-primary: hsl(0, 0%, 13%);
            --text-secondary: hsl(0, 0%, 40%);
            --text-tertiary: hsl(0, 0%, 60%);
            --text-inverse: hsl(0, 0%, 100%);

            /* Semantic Colors */
            --zivvy-success-50: hsl(152, 81%, 96%);
            --zivvy-success-500: hsl(160, 84%, 39%);
            --zivvy-success-600: hsl(161, 94%, 30%);
            --zivvy-danger-50: hsl(0, 86%, 97%);
            --zivvy-danger-500: hsl(0, 84%, 60%);
            --zivvy-danger-600: hsl(0, 72%, 51%);

            /* Typography */
            --font-display: "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
            --font-text: "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
            --font-handwritten: 'Caveat', cursive;
            --font-serif: 'Fraunces', Georgia, serif;

            --type-display-xl: clamp(40px, 5vw, 64px);
            --type-display-lg: clamp(32px, 4vw, 48px);
            --type-display-md: clamp(28px, 3.5vw, 40px);
            --type-display-sm: clamp(24px, 3vw, 32px);
            --type-heading-2: clamp(20px, 2.2vw, 24px);
            --type-body-lg: 18px;
            --type-body-md: 16px;
            --type-body-sm: 14px;
            --type-body-xs: 12px;

            --weight-regular: 400;
            --weight-medium: 500;
            --weight-semibold: 600;
            --weight-bold: 700;
            --weight-black: 900;

            --line-tight: 1.1;
            --line-snug: 1.25;
            --line-normal: 1.5;
            --line-relaxed: 1.625;
            --tracking-tight: -0.025em;

            /* Shadows */
            --shadow-2: 0 2px 4px hsl(0, 0%, 0%, 0.08);
            --shadow-4: 0 8px 16px hsl(0, 0%, 0%, 0.12);
            --shadow-5: 0 16px 32px hsl(0, 0%, 0%, 0.15);

            /* Animation */
            --timing-fast: 150ms;
            --timing-base: 300ms;
            --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

            /* Radius */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --radius-full: 9999px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            -webkit-font-smoothing: antialiased;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-text);
            font-size: var(--type-body-md);
            line-height: var(--line-normal);
            color: var(--text-primary);
            background-color: var(--surface-background);
        }

        /* =============================================================================
           NAVIGATION
           ============================================================================= */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 72px;
            background: hsl(0, 0%, 100%, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--surface-border);
            z-index: 1000;
            display: flex;
            align-items: center;
            padding: 0 var(--space-xl);
        }

        .nav-container {
            max-width: var(--container-max);
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo {
            font-size: 24px;
            font-weight: var(--weight-black);
            color: var(--primary-600);
            text-decoration: none;
            letter-spacing: -0.02em;
        }

        .nav-links {
            display: flex;
            gap: var(--space-xl);
            align-items: center;
        }

        .nav-link {
            font-size: var(--type-body-md);
            font-weight: var(--weight-medium);
            color: var(--text-secondary);
            text-decoration: none;
            transition: color var(--timing-fast);
        }

        .nav-link:hover { color: var(--text-primary); }

        /* Mobile Menu Toggle */
        .nav-toggle {
            display: none;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 8px;
            z-index: 1001;
        }

        .nav-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--text-primary);
            margin: 5px 0;
            transition: all 0.3s ease;
        }

        .nav-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .nav-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* Mobile Navigation Styles */
        @media (max-width: 768px) {
            .nav {
                overflow: visible !important;
            }

            .nav-container {
                overflow: visible !important;
            }

            .nav-toggle {
                display: block;
                position: relative;
                z-index: 1001;
            }

            .nav-links {
                display: flex !important;
                position: fixed !important;
                top: 0 !important;
                right: -100% !important;
                bottom: 0 !important;
                width: 280px !important;
                max-width: 85vw !important;
                height: 100vh !important;
                background: white !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                padding: 80px 24px 24px !important;
                box-shadow: -2px 0 12px hsl(0, 0%, 0%, 0.1) !important;
                transition: right 0.3s ease !important;
                z-index: 1000 !important;
                overflow-y: auto !important;
                gap: 0 !important;
                margin: 0 !important;
            }

            .nav-links.active {
                right: 0 !important;
            }

            .nav-link {
                width: 100%;
                padding: 12px 0;
                border-bottom: 1px solid var(--surface-border);
                text-align: left;
            }

            .nav-links .btn {
                width: 100%;
                margin-top: 8px;
            }
        }

        /* Overlay for mobile menu */
        .nav-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: hsl(0, 0%, 0%, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .nav-overlay.active {
            display: block;
            opacity: 1;
        }

        /* Button Styles */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-xs);
            font-family: var(--font-text);
            font-weight: var(--weight-medium);
            text-decoration: none;
            border: 2px solid transparent;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--timing-fast) var(--ease-default);
        }

        .btn-md {
            height: 44px;
            padding: 0 var(--space-l);
            font-size: var(--type-body-md);
        }

        .btn-lg {
            height: 52px;
            padding: 0 var(--space-xl);
            font-size: var(--type-body-lg);
        }

        .btn-primary {
            background: var(--primary-600);
            color: white;
            border-color: var(--primary-600);
            box-shadow: 0 2px 8px hsl(275, 86%, 36%, 0.25);
        }

        .btn-primary:hover {
            background: var(--primary-700);
            border-color: var(--primary-700);
            transform: translateY(-1px);
        }

        .btn-ghost {
            background: transparent;
            color: var(--text-secondary);
            border-color: var(--surface-border);
        }

        .btn-ghost:hover {
            background: var(--surface-variant);
            color: var(--text-primary);
        }

        .btn-cta-hero {
            background: var(--tertiary-400);
            color: var(--near-black);
            border-color: var(--tertiary-400);
            font-weight: var(--weight-semibold);
            box-shadow: 0 4px 16px hsl(51, 100%, 50%, 0.3);
        }

        .btn-cta-hero:hover {
            background: var(--tertiary-600);
            border-color: var(--tertiary-600);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px hsl(51, 100%, 50%, 0.4);
        }

        .btn-ghost-dark {
            background: transparent;
            color: hsl(0, 0%, 100%, 0.8);
            border-color: hsl(0, 0%, 100%, 0.2);
        }

        .btn-ghost-dark:hover {
            background: hsl(0, 0%, 100%, 0.1);
            color: white;
        }

        /* =============================================================================
           HERO SECTION - Dark with Glowing $47K Number
           ============================================================================= */
        .hero {
            min-height: 100vh;
            padding-top: 72px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: var(--near-black);
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 30%, hsl(275, 86%, 36%, 0.15) 0%, transparent 60%);
            pointer-events: none;
        }

        /* Spotlight Cone Effect */
        .hero-spotlight {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1200px;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .hero-spotlight svg {
            width: 100%;
            height: 100%;
        }

        @keyframes beamPulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }

        .beam-animated {
            animation: beamPulse 4s ease-in-out infinite;
        }

        .hero-container {
            max-width: var(--container-max);
            width: 100%;
            margin: 0 auto;
            padding: var(--space-section) var(--space-xl);
            position: relative;
            z-index: 1;
        }

        .hero-content {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) var(--space-m);
            background: hsl(0, 0%, 100%, 0.05);
            border: 1px solid hsl(0, 0%, 100%, 0.1);
            border-radius: var(--radius-full);
            font-size: var(--type-body-sm);
            font-weight: var(--weight-medium);
            color: hsl(0, 0%, 100%, 0.7);
            margin-bottom: var(--space-l);
            order: -1;
        }

        .hero-badge-icon { color: var(--tertiary-400); }

        /* THE GLOWING NUMBER - The Hero */
        .hero-number {
            font-family: var(--font-display);
            font-size: clamp(72px, 12vw, 140px);
            font-weight: var(--weight-black);
            line-height: 1;
            letter-spacing: var(--tracking-tight);
            margin-bottom: var(--space-l);
            position: relative;
            display: inline-block;
        }

        .hero-number-value {
            background: linear-gradient(135deg, var(--tertiary-400) 0%, hsl(39, 100%, 50%) 50%, var(--tertiary-400) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            z-index: 1;
            animation: numberPulse 4s ease-in-out infinite;
        }

        .hero-number-glow {
            position: absolute;
            inset: -30px;
            background: radial-gradient(ellipse at center, 
                hsl(51, 100%, 50%, 0.4) 0%, 
                hsl(39, 100%, 50%, 0.2) 30%, 
                transparent 60%
            );
            filter: blur(40px);
            z-index: 0;
            animation: glowPulse 4s ease-in-out infinite;
        }

        @keyframes numberPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        @keyframes glowPulse {
            0%, 100% { opacity: 0.6; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.15); }
        }

        .hero-headline {
            font-family: var(--font-display);
            font-size: var(--type-display-lg);
            font-weight: var(--weight-bold);
            line-height: var(--line-tight);
            letter-spacing: var(--tracking-tight);
            color: var(--text-inverse);
            margin-bottom: var(--space-m);
        }

        .hero-subheadline {
            font-size: var(--type-body-lg);
            color: hsl(0, 0%, 100%, 0.7);
            line-height: var(--line-relaxed);
            max-width: 600px;
            margin: 0 auto var(--space-xl);
        }

        .hero-cta-group {
            display: flex;
            gap: var(--space-m);
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: var(--space-xxl);
        }

        .hero-proof {
            display: flex;
            justify-content: center;
            gap: var(--space-xxl);
            flex-wrap: wrap;
        }

        .proof-item { text-align: center; }

        .proof-value {
            font-size: var(--type-display-sm);
            font-weight: var(--weight-bold);
            color: var(--primary-500);
            margin-bottom: var(--space-xxs);
        }

        .proof-label {
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.5);
        }

        /* =============================================================================
           BENEFIT SECTIONS - The Three Steps
           ============================================================================= */
        .benefit-section {
            padding: var(--space-section) var(--space-xl);
            position: relative;
            z-index: 1;
        }

        .benefit-section-dark { background: var(--near-black); }
        .benefit-section-light { background: var(--surface-background); }

        .benefit-container {
            max-width: var(--container-max);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-xxl);
            align-items: center;
        }

        .benefit-content { max-width: 480px; }

        /* Handwritten Step Labels - Caveat Font */
        .benefit-step {
            font-family: var(--font-handwritten);
            font-size: 32px;
            font-weight: 500;
            color: var(--primary-500);
            margin-bottom: var(--space-s);
            position: relative;
            display: inline-block;
        }

        .benefit-section-dark .benefit-step {
            color: var(--tertiary-400);
        }

        /* Underline accent for handwritten labels */
        .benefit-step::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60%;
            height: 2px;
            background: currentColor;
            opacity: 0.3;
            border-radius: 2px;
        }

        .benefit-title {
            font-family: var(--font-display);
            font-size: var(--type-display-sm);
            font-weight: var(--weight-bold);
            line-height: var(--line-snug);
            color: var(--text-primary);
            margin-bottom: var(--space-m);
        }

        .benefit-section-dark .benefit-title { color: var(--text-inverse); }

        .benefit-description {
            font-size: var(--type-body-lg);
            color: var(--text-secondary);
            line-height: var(--line-relaxed);
            margin-bottom: var(--space-l);
        }

        .benefit-section-dark .benefit-description { color: hsl(0, 0%, 100%, 0.7); }

        .benefit-features {
            display: flex;
            flex-direction: column;
            gap: var(--space-s);
        }

        .benefit-feature {
            display: flex;
            align-items: flex-start;
            gap: var(--space-s);
            font-size: var(--type-body-md);
            color: var(--text-primary);
        }

        .benefit-section-dark .benefit-feature { color: hsl(0, 0%, 100%, 0.9); }

        .benefit-feature .material-symbols-rounded {
            color: var(--zivvy-success-500);
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .benefit-visual {
            border-radius: var(--radius-xl);
            overflow: hidden;
            position: relative;
        }

        .benefit-container.reverse { direction: rtl; }
        .benefit-container.reverse > * { direction: ltr; }

        /* =============================================================================
           EMBEDDED SCAN ANIMATION
           ============================================================================= */
        .scan-embed {
            background: var(--dark-surface);
            border-radius: var(--radius-xl);
            padding: var(--space-l);
            position: relative;
            overflow: hidden;
            aspect-ratio: 4/3;
            border: 1px solid hsl(271, 91%, 65%, 0.2);
        }

        .scan-visual-mini {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: linear-gradient(180deg, hsl(264, 67%, 35%, 0.1) 0%, transparent 50%);
        }

        .scan-beam-mini {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                transparent 0%,
                hsl(275, 86%, 36%, 0.3) 45%,
                hsl(271, 91%, 65%, 0.5) 50%,
                hsl(275, 86%, 36%, 0.3) 55%,
                transparent 100%
            );
            transform: translateX(-100%);
            animation: beamSweep 4s ease-in-out infinite;
        }

        @keyframes beamSweep {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .scan-line-mini {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--primary-500) 20%,
                var(--tertiary-400) 50%,
                var(--primary-500) 80%,
                transparent 100%
            );
            box-shadow: 0 0 15px var(--primary-500);
            animation: scanDown 3s ease-in-out infinite;
        }

        @keyframes scanDown {
            0%, 100% { top: 10%; opacity: 0.3; }
            50% { top: 90%; opacity: 1; }
        }

        .data-field-mini { position: absolute; inset: 0; }

        .data-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            opacity: 0;
            animation: dotReveal 4s ease-out infinite;
        }

        .data-dot.gray { background: var(--text-tertiary); }
        .data-dot.gold { background: var(--tertiary-400); box-shadow: 0 0 8px hsl(51, 100%, 50%, 0.5); }

        .data-dot:nth-child(1) { left: 15%; top: 20%; animation-delay: 0.2s; }
        .data-dot:nth-child(2) { left: 30%; top: 45%; animation-delay: 0.5s; }
        .data-dot:nth-child(3) { left: 50%; top: 25%; animation-delay: 0.8s; }
        .data-dot:nth-child(4) { left: 70%; top: 55%; animation-delay: 1.1s; }
        .data-dot:nth-child(5) { left: 85%; top: 35%; animation-delay: 1.4s; }
        .data-dot:nth-child(6) { left: 25%; top: 70%; animation-delay: 0.3s; }
        .data-dot:nth-child(7) { left: 60%; top: 75%; animation-delay: 0.9s; }
        .data-dot:nth-child(8) { left: 40%; top: 40%; animation-delay: 1.2s; }

        @keyframes dotReveal {
            0%, 10% { opacity: 0; transform: scale(0.5); }
            30%, 70% { opacity: 1; transform: scale(1); }
            100% { opacity: 0.3; transform: scale(0.8); }
        }

        .discovery-core-mini {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--tertiary-400);
            opacity: 0;
            animation: coreReveal 4s ease infinite;
            animation-delay: 1.5s;
            box-shadow: 0 0 30px hsl(51, 100%, 50%, 0.6);
        }

        @keyframes coreReveal {
            0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
            40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
            60%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }

        .discovery-ring-mini {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid var(--tertiary-400);
            opacity: 0;
        }

        .discovery-ring-mini.ring-1 {
            width: 60px;
            height: 60px;
            animation: ringPulse 4s ease-out infinite;
            animation-delay: 1.8s;
        }

        .discovery-ring-mini.ring-2 {
            width: 90px;
            height: 90px;
            animation: ringPulse 4s ease-out infinite;
            animation-delay: 2s;
        }

        @keyframes ringPulse {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            20% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
        }

        .scan-stats-mini {
            position: absolute;
            bottom: var(--space-m);
            left: var(--space-m);
            right: var(--space-m);
            display: flex;
            justify-content: space-between;
            gap: var(--space-s);
        }

        .scan-stat-mini {
            background: hsl(0, 0%, 0%, 0.6);
            border-radius: var(--radius-md);
            padding: var(--space-xs) var(--space-s);
            text-align: center;
            flex: 1;
        }

        .scan-stat-mini-value {
            font-size: var(--type-body-sm);
            font-weight: var(--weight-bold);
            color: var(--tertiary-400);
        }

        .scan-stat-mini-label {
            font-size: 10px;
            color: hsl(0, 0%, 100%, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* =============================================================================
           PHOTOGRAPHY VISUALS
           ============================================================================= */
        .photo-visual {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            background: var(--near-black);
        }

        .photo-visual img {
            width: 100%;
            height: auto;
            display: block;
            filter: contrast(1.05);
        }

        .photo-visual::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 60%, hsl(0, 0%, 0%, 0.5) 100%);
            pointer-events: none;
        }

        .photo-caption {
            position: absolute;
            bottom: var(--space-l);
            left: var(--space-l);
            right: var(--space-l);
            z-index: 1;
        }

        .photo-caption-text {
            font-family: var(--font-handwritten);
            font-size: 24px;
            color: hsl(0, 0%, 100%, 0.9);
        }

        /* =============================================================================
           FEATURE CARD SECTIONS WITH BASS-INSPIRED ICONS
           ============================================================================= */
        .section {
            padding: var(--space-section) var(--space-xl);
            position: relative;
            z-index: 1;
        }

        .section-container {
            max-width: var(--container-max);
            margin: 0 auto;
        }

        .section-alt { background: white; }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: var(--space-l);
        }

        .feature-card {
            background: white;
            border: 1px solid var(--surface-border);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            transition: all var(--timing-base) var(--ease-default);
        }

        .feature-card:hover {
            border-color: var(--primary-200);
            box-shadow: var(--shadow-4);
            transform: translateY(-4px);
        }

        /* Bass-Inspired Icon Containers */
        .feature-icon {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-l);
        }

        .feature-icon svg {
            width: 100%;
            height: 100%;
        }

        .feature-title {
            font-size: var(--type-heading-2);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: var(--space-s);
        }

        .feature-description {
            font-size: var(--type-body-md);
            color: var(--text-secondary);
            line-height: var(--line-relaxed);
            margin-bottom: var(--space-m);
        }

        .feature-stat {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            font-size: var(--type-body-sm);
            font-weight: var(--weight-semibold);
            color: var(--zivvy-success-600);
            background: var(--zivvy-success-50);
            padding: var(--space-xs) var(--space-s);
            border-radius: var(--radius-full);
        }

        .feature-stat-warning {
            color: var(--zivvy-danger-600);
            background: var(--zivvy-danger-50);
        }

        /* =============================================================================
           BREAKOUT TESTIMONIAL - Grid-Breaking Social Proof
           ============================================================================= */
        .testimonial-breakout {
            background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);
            margin: 0 -100vw;
            margin-left: calc(-50vw + 50%);
            margin-right: calc(-50vw + 50%);
            padding: calc(var(--space-xxl) * 1.5) calc(50vw - 50%) calc(var(--space-xxl) * 2.5);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .testimonial-breakout::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(135deg, transparent 0%, hsl(51, 100%, 50%, 0.1) 100%);
            pointer-events: none;
        }

        .testimonial-breakout-inner {
            max-width: var(--container-max);
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: var(--space-xxl);
            position: relative;
            z-index: 1;
        }

        .breakout-quote-mark {
            font-size: 120px;
            font-family: Georgia, serif;
            color: var(--tertiary-400);
            line-height: 1;
            opacity: 0.3;
            flex-shrink: 0;
            margin-top: -20px;
        }

        .breakout-content { flex: 1; }

        .breakout-quote {
            font-family: var(--font-serif);
            font-size: clamp(20px, 2.2vw, 26px);
            font-weight: 400;
            color: var(--text-inverse);
            line-height: var(--line-normal);
            margin-bottom: var(--space-l);
        }

        .breakout-quote strong {
            color: var(--tertiary-400);
            font-weight: 500;
        }

        .breakout-attribution {
            display: flex;
            align-items: center;
            gap: var(--space-m);
        }

        .breakout-avatar {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            object-fit: cover;
            border: 2px solid hsl(0, 0%, 100%, 0.2);
        }

        .breakout-author-name {
            font-size: var(--type-body-md);
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
            margin-bottom: 2px;
        }

        .breakout-author-title {
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.7);
        }

        .breakout-result {
            text-align: center;
            background: hsl(0, 0%, 0%, 0.2);
            padding: var(--space-l) var(--space-xl);
            border-radius: var(--radius-lg);
            flex-shrink: 0;
        }

        .breakout-result-value {
            font-size: 36px;
            font-weight: var(--weight-bold);
            color: var(--tertiary-400);
            line-height: 1;
            margin-bottom: var(--space-xxs);
        }

        .breakout-result-label {
            font-size: var(--type-body-xs);
            color: hsl(0, 0%, 100%, 0.6);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* =============================================================================
           CTA SECTION - Final Dark Bookend
           ============================================================================= */
        .cta-section {
            padding: var(--space-section) var(--space-xl);
            background: var(--near-black);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 50%, hsl(275, 86%, 36%, 0.2) 0%, transparent 60%);
            pointer-events: none;
        }

        .cta-container {
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .cta-title {
            font-family: var(--font-display);
            font-size: var(--type-display-md);
            font-weight: var(--weight-bold);
            color: white;
            margin-bottom: var(--space-m);
        }

        .cta-description {
            font-size: var(--type-body-lg);
            color: hsl(0, 0%, 100%, 0.7);
            line-height: var(--line-relaxed);
            margin-bottom: var(--space-xl);
        }

        .cta-note {
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.5);
            margin-top: var(--space-m);
        }

        /* =============================================================================
           FOOTER
           ============================================================================= */
        .footer {
            background: var(--text-primary);
            color: white;
            padding: var(--space-xxl) var(--space-xl) var(--space-l);
        }

        .footer-container {
            max-width: var(--container-max);
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: var(--space-xxl);
            margin-bottom: var(--space-xxl);
        }

        .footer-brand { max-width: 280px; }

        .footer-logo {
            font-size: 24px;
            font-weight: var(--weight-black);
            color: white;
            margin-bottom: var(--space-m);
        }

        .footer-tagline {
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.6);
            line-height: var(--line-relaxed);
        }

        .footer-col h4 {
            font-size: var(--type-body-sm);
            font-weight: var(--weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: hsl(0, 0%, 100%, 0.4);
            margin-bottom: var(--space-m);
        }

        .footer-col a {
            display: block;
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.8);
            text-decoration: none;
            margin-bottom: var(--space-s);
            transition: color var(--timing-fast);
        }

        .footer-col a:hover { color: white; }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            padding-top: var(--space-l);
            border-top: 1px solid hsl(0, 0%, 100%, 0.1);
            font-size: var(--type-body-xs);
            color: hsl(0, 0%, 100%, 0.4);
        }

        /* =============================================================================
           RESPONSIVE
           ============================================================================= */
        @media (max-width: 900px) {
            .nav-links { display: none; }

            .benefit-container,
            .benefit-container.reverse {
                grid-template-columns: 1fr;
                direction: ltr;
                gap: var(--space-xl);
            }

            .benefit-content { max-width: 100%; }

            .testimonial-breakout-inner {
                flex-direction: column;
                text-align: center;
            }

            .breakout-quote-mark {
                font-size: 80px;
                margin-top: 0;
            }

            .breakout-attribution { justify-content: center; }

            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 600px) {
            .hero-cta-group {
                flex-direction: column;
                align-items: stretch;
            }

            .hero-proof { gap: var(--space-l); }

            .footer-grid { grid-template-columns: 1fr; }

            .footer-bottom {
                flex-direction: column;
                gap: var(--space-s);
                text-align: center;
            }

            .scan-stats-mini { flex-wrap: wrap; }
            .scan-stat-mini { flex: 1 1 45%; }
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            .scan-beam-mini,
            .scan-line-mini,
            .data-dot,
            .discovery-core-mini,
            .discovery-ring-mini,
            .hero-number-value,
            .hero-number-glow {
                animation: none;
            }
            .discovery-core-mini { opacity: 1; }
        }

        /* =============================================================================
           TESTIMONIALS SECTION
           ============================================================================= */
        .testimonials-section {
            padding: var(--space-section) var(--space-xl);
            position: relative;
            overflow: hidden;
            background: var(--surface-background);
            z-index: 1;
        }

        .testimonials-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(circle at 20% 20%, var(--primary-100) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, hsl(51, 100%, 50%, 0.05) 0%, transparent 40%);
            pointer-events: none;
        }

        .testimonials-container {
            max-width: var(--container-max);
            margin: 0 auto;
            position: relative;
        }

        .testimonials-header {
            text-align: center;
            margin-bottom: 64px;
        }

        .testimonials-eyebrow {
            font-family: var(--font-handwritten);
            font-size: 24px;
            color: var(--primary-600);
            margin-bottom: var(--space-s);
        }

        .testimonials-title {
            font-size: var(--type-display-md);
            font-weight: var(--weight-bold);
            color: var(--near-black);
            letter-spacing: var(--tracking-tight);
            margin-bottom: var(--space-m);
        }

        .testimonials-subtitle {
            font-size: var(--type-body-lg);
            color: var(--text-secondary);
            max-width: 500px;
            margin: 0 auto;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-l);
            position: relative;
        }

        /* Hero Testimonial - Full Width Dark Card */
        .testimonial-hero {
            grid-column: 1 / -1;
            background: var(--near-black);
            border-radius: var(--radius-xl);
            padding: var(--space-xxl);
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: var(--space-xxl);
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .testimonial-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 60%;
            height: 200%;
            background: radial-gradient(ellipse at center, hsl(275, 86%, 36%, 0.2) 0%, transparent 60%);
            pointer-events: none;
        }

        .testimonial-hero::after {
            content: '';
            position: absolute;
            top: var(--space-xxl);
            left: var(--space-xxl);
            bottom: var(--space-xxl);
            width: 3px;
            background: linear-gradient(180deg, var(--tertiary-400), var(--gold-dim));
            border-radius: 2px;
        }

        .hero-image-container {
            position: relative;
            z-index: 1;
        }

        .hero-image {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: var(--radius-lg);
            filter: grayscale(20%);
        }

        .hero-result-badge {
            position: absolute;
            bottom: -16px;
            right: -16px;
            background: var(--tertiary-400);
            color: var(--near-black);
            padding: var(--space-s) var(--space-l);
            border-radius: var(--radius-md);
            font-size: var(--type-body-sm);
            font-weight: var(--weight-bold);
            box-shadow: 0 8px 24px hsl(51, 100%, 50%, 0.3);
        }

        .hero-result-badge span {
            display: block;
            font-size: 11px;
            font-weight: var(--weight-medium);
            opacity: 0.7;
            margin-bottom: 2px;
        }

        .hero-testimonial-content {
            position: relative;
            z-index: 1;
            padding-left: var(--space-l);
        }

        .hero-quote {
            font-family: var(--font-serif);
            font-size: clamp(22px, 2.5vw, 28px);
            font-weight: 400;
            color: var(--text-inverse);
            line-height: var(--line-normal);
            margin-bottom: var(--space-xl);
            position: relative;
        }

        .hero-quote::before {
            content: '"';
            position: absolute;
            top: -20px;
            left: -40px;
            font-size: 80px;
            font-family: Georgia, serif;
            color: var(--primary-800);
            line-height: 1;
            opacity: 0.5;
        }

        .hero-attribution {
            display: flex;
            align-items: center;
            gap: var(--space-m);
        }

        .hero-author-name {
            font-size: var(--type-body-md);
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
            margin-bottom: 2px;
        }

        .hero-author-title {
            font-size: var(--type-body-sm);
            color: var(--text-tertiary);
        }

        .hero-stats {
            display: flex;
            gap: var(--space-l);
            padding-left: var(--space-l);
            border-left: 1px solid hsl(0, 0%, 100%, 0.1);
        }

        .hero-stat { text-align: center; }

        .hero-stat-value {
            font-size: 20px;
            font-weight: var(--weight-bold);
            color: var(--tertiary-400);
        }

        .hero-stat-label {
            font-size: 11px;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Standard Testimonial Cards */
        .testimonial-card {
            background: white;
            border-radius: 20px;
            padding: var(--space-xl);
            position: relative;
            border: 1px solid var(--surface-border);
            transition: all var(--timing-base) var(--ease-default);
        }

        .testimonial-card:hover {
            border-color: var(--primary-200);
            box-shadow: var(--shadow-4);
            transform: translateY(-4px);
        }

        .testimonial-card.offset-up { margin-top: -32px; }
        .testimonial-card.offset-down { margin-top: 32px; }

        .card-quote {
            font-family: var(--font-serif);
            font-size: var(--type-body-lg);
            font-weight: 400;
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: var(--space-l);
        }

        .card-quote mark {
            background: var(--gold-dim);
            color: inherit;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
        }

        .card-footer {
            display: flex;
            align-items: center;
            gap: var(--space-m);
        }

        .card-avatar {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            object-fit: cover;
            filter: grayscale(30%);
        }

        .card-author { flex: 1; }

        .card-author-name {
            font-size: var(--type-body-sm);
            font-weight: var(--weight-semibold);
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .card-author-title {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .card-result { text-align: right; }

        .card-result-value {
            font-size: var(--type-body-md);
            font-weight: var(--weight-bold);
            color: var(--zivvy-success-600);
        }

        .card-result-label {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        /* Mini Testimonials - Infinite Auto-Scroll */
        /* Wrapper to constrain overflow and apply mask */
        .mini-testimonials-wrapper {
            grid-column: 1 / -1;
            overflow: hidden;
            margin-top: var(--space-m);
            position: relative;
            /* Break out of container constraints to fill viewport width */
            width: 100vw;
            margin-left: calc(50% - 50vw);
            /* Fade edges to indicate infinite scroll */
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        }

        .mini-testimonials {
            display: flex;
            gap: var(--space-m);
            padding: var(--space-m) 0 var(--space-l) 0;
            /* Infinite scroll animation - 50s for smooth slow scroll */
            animation: infinite-scroll 50s linear infinite;
            /* Explicit width to ensure all duplicated cards fit */
            width: max-content;
            will-change: transform;
        }

        @keyframes infinite-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Move by exactly one set of cards (7 cards × 280px + 6 gaps of 16px each) */
                /* 7 cards = 1960px, 6 gaps = 96px, total = 2056px */
                transform: translateX(calc(-1960px - (var(--space-m) * 6)));
            }
        }

        /* Pause animation on hover */
        .mini-testimonials-wrapper:hover .mini-testimonials {
            animation-play-state: paused;
        }

        .mini-card {
            flex: 0 0 280px;
            min-width: 280px;
            background: linear-gradient(135deg, hsl(240, 28%, 14%) 0%, hsl(224, 48%, 16%) 100%);
            border: 1px solid color-mix(in srgb, var(--tertiary-400) 20%, transparent);
            border-radius: 14px;
            padding: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px hsl(0, 0%, 0%, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .mini-card:hover {
            border-color: color-mix(in srgb, var(--tertiary-400) 50%, transparent);
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 24px color-mix(in srgb, var(--tertiary-400) 25%, transparent),
                        0 4px 12px hsl(0, 0%, 0%, 0.4);
            background: linear-gradient(135deg, hsl(240, 29%, 17%) 0%, hsl(221, 45%, 18%) 100%);
            z-index: 10;
        }

        .mini-quote {
            font-size: var(--type-body-sm);
            color: hsl(0, 0%, 100%, 0.85);
            line-height: var(--line-normal);
            margin-bottom: var(--space-m);
            font-style: italic;
        }

        .mini-footer {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        .mini-avatar {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            object-fit: cover;
            filter: grayscale(20%);
            border: 2px solid color-mix(in srgb, var(--tertiary-400) 30%, transparent);
        }

        .mini-author-name {
            font-size: 13px;
            font-weight: var(--weight-semibold);
            color: hsl(0, 0%, 100%, 0.95);
        }

        .mini-author-title {
            font-size: 11px;
            color: var(--tertiary-400);
        }

        /* Mini CTA Card - "Will You Be Next?" */
        .mini-card-cta {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, hsl(240, 28%, 14%) 0%, hsl(224, 48%, 16%) 100%);
            border: 2px dashed color-mix(in srgb, var(--tertiary-400) 40%, transparent);
            cursor: pointer;
            position: relative;
        }

        .mini-card-cta:hover {
            background: linear-gradient(135deg, hsl(240, 29%, 17%) 0%, hsl(221, 45%, 18%) 100%);
            border-color: color-mix(in srgb, var(--tertiary-400) 70%, transparent);
        }

        .mini-cta-silhouette {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: all 0.3s ease;
            overflow: hidden;
            border-radius: 14px;
        }

        .mini-cta-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.3;
            transition: all 0.3s ease;
        }

        .mini-card-cta:hover .mini-cta-image {
            opacity: 0.5;
        }

        .mini-card-cta:hover .mini-cta-image {
            transform: scale(1.05);
        }

        .mini-cta-text {
            font-size: 18px;
            font-weight: var(--weight-bold);
            color: hsl(0, 0%, 100%, 0.95);
            text-align: center;
            margin: 0;
            letter-spacing: 0.02em;
            position: relative;
            z-index: 2;
        }

        /* Proof Strip */
        .proof-strip {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            gap: var(--space-xxl);
            padding: var(--space-xl);
            background: white;
            border-radius: var(--radius-lg);
            border: 1px solid var(--surface-border);
            margin-top: var(--space-l);
        }

        .proof-strip .proof-item { text-align: center; }

        .proof-strip .proof-value {
            font-size: 28px;
            font-weight: var(--weight-bold);
            color: var(--primary-600);
            margin-bottom: var(--space-xxs);
        }

        .proof-strip .proof-label {
            font-size: 13px;
            color: var(--text-secondary);
        }

        /* =============================================================================
           SECTION DIVIDERS - Visual Transitions
           ============================================================================= */
        .zivvy-divider {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 50;
            height: 0;
            overflow: visible;
            pointer-events: none;
        }

        /* Aperture Divider - Focus/Analysis */
        .divider-aperture {
            height: 0;
            margin-top: -48px;
        }

        .divider-aperture .aperture-ring {
            width: 56px;
            height: 56px;
            border: 3px solid var(--primary-600);
            border-radius: 50%;
            position: relative;
            background: var(--near-black);
            box-shadow: 0 0 0 6px var(--near-black), 0 0 20px hsl(275, 86%, 36%, 0.4);
        }

        .divider-aperture .aperture-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background: var(--tertiary-400);
            border-radius: 50%;
            box-shadow: 0 0 20px hsl(51, 100%, 50%, 0.6);
        }

        .divider-aperture.animated .aperture-ring {
            animation: aperture-rotate 8s linear infinite;
        }

        .divider-aperture.animated .aperture-center {
            animation: aperture-glow 3s ease-in-out infinite;
        }

        @keyframes aperture-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes aperture-glow {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1);
                box-shadow: 0 0 20px hsl(51, 100%, 50%, 0.6);
            }
            50% { 
                transform: translate(-50%, -50%) scale(1.2);
                box-shadow: 0 0 32px hsl(51, 100%, 50%, 0.8);
            }
        }

        /* Triangle Ascent Divider - Growth/Momentum */
        .divider-triangle {
            height: 0;
            margin-top: -48px;
        }

        .divider-triangle .base-line {
            position: absolute;
            left: 20%;
            right: 20%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
            opacity: 0.5;
        }

        .divider-triangle .triangle {
            width: 0;
            height: 0;
            border-left: 18px solid transparent;
            border-right: 18px solid transparent;
            border-bottom: 28px solid var(--tertiary-400);
            filter: drop-shadow(0 0 16px hsl(51, 100%, 50%, 0.6));
        }

        .divider-triangle.dark .base-line {
            background: hsl(0, 0%, 100%, 0.25);
        }

        .divider-triangle.animated .triangle {
            animation: triangle-rise 4s ease-in-out infinite;
        }

        @keyframes triangle-rise {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        /* Orbital Divider - Automation/System */
        .divider-orbital {
            height: 0;
            margin-top: -48px;
        }

        .divider-orbital .orbit-track {
            width: 60px;
            height: 60px;
            border: 2px solid var(--primary-600);
            border-radius: 50%;
            position: relative;
            background: var(--near-black);
            box-shadow: 0 0 0 6px var(--near-black), 0 0 20px hsl(275, 86%, 36%, 0.4);
        }

        .divider-orbital .orbit-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: var(--primary-600);
            border-radius: 50%;
        }

        .divider-orbital .orbit-dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--tertiary-400);
            border-radius: 50%;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 12px hsl(51, 100%, 50%, 0.6);
        }

        .divider-orbital.animated .orbit-dot {
            animation: orbit-spin 4s linear infinite;
            transform-origin: 50% calc(50% + 28px);
        }

        @keyframes orbit-spin {
            from { transform: translateX(-50%) rotate(0deg) translateY(0); }
            to { transform: translateX(-50%) rotate(360deg) translateY(0); }
        }

        /* Crescent Rise Divider - Poetic/Testimonials */
        .divider-crescent {
            height: 0;
            margin-top: -48px;
        }

        .divider-crescent .horizon {
            position: absolute;
            width: 160px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
            opacity: 0.5;
        }

        .divider-crescent .crescent {
            width: 28px;
            height: 28px;
            border: 3px solid var(--tertiary-400);
            border-radius: 50%;
            clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
            box-shadow: 0 0 24px hsl(51, 100%, 50%, 0.7);
            background: transparent;
        }

        .divider-crescent.animated .crescent {
            animation: crescent-glow 3s ease-in-out infinite;
        }

        @keyframes crescent-glow {
            0%, 100% { 
                box-shadow: 0 0 20px hsl(51, 100%, 50%, 0.6);
                transform: translateY(0);
            }
            50% { 
                box-shadow: 0 0 32px hsl(51, 100%, 50%, 0.8);
                transform: translateY(-3px);
            }
        }

        /* Diamond Pulse Divider - Value/Pricing */
        .divider-diamond {
            height: 0;
            margin-top: -48px;
        }

        .divider-diamond .diamond-line {
            position: absolute;
            width: 240px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-200), transparent);
            opacity: 0.5;
        }

        .divider-diamond .diamond {
            width: 18px;
            height: 18px;
            background: var(--tertiary-400);
            transform: rotate(45deg);
            box-shadow: 0 0 24px hsl(51, 100%, 50%, 0.6);
        }

        .divider-diamond.animated .diamond {
            animation: diamond-pulse 2.5s ease-in-out infinite;
        }

        @keyframes diamond-pulse {
            0%, 100% { 
                transform: rotate(45deg) scale(1);
                box-shadow: 0 0 24px hsl(51, 100%, 50%, 0.6);
            }
            50% { 
                transform: rotate(45deg) scale(1.2);
                box-shadow: 0 0 36px hsl(51, 100%, 50%, 0.8);
            }
        }

        /* Spark Divider - Insight/Revelation */
        .divider-spark {
            height: 0;
            margin-top: -48px;
        }

        .divider-spark .spark-container {
            position: relative;
            width: 56px;
            height: 56px;
            background: var(--near-black);
            border-radius: 50%;
            box-shadow: 0 0 0 6px var(--near-black), 0 0 20px hsl(275, 86%, 36%, 0.4);
        }

        .divider-spark .spark-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--tertiary-400);
            border-radius: 50%;
            box-shadow: 0 0 16px hsl(51, 100%, 50%, 0.7);
        }

        .divider-spark .spark-ray {
            position: absolute;
            width: 2px;
            height: 12px;
            background: linear-gradient(to top, var(--tertiary-400), transparent);
            top: 50%;
            left: 50%;
            transform-origin: center bottom;
        }

        .divider-spark .spark-ray:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
        .divider-spark .spark-ray:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg); }
        .divider-spark .spark-ray:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg); }
        .divider-spark .spark-ray:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg); }
        .divider-spark .spark-ray:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg); }
        .divider-spark .spark-ray:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg); }
        .divider-spark .spark-ray:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg); }
        .divider-spark .spark-ray:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg); }

        .divider-spark.animated .spark-center {
            animation: spark-pulse 2s ease-in-out infinite;
        }

        .divider-spark.animated .spark-ray {
            animation: spark-ray-pulse 2s ease-in-out infinite;
        }

        @keyframes spark-pulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.3); }
        }

        @keyframes spark-ray-pulse {
            0%, 100% { opacity: 0.6; height: 12px; }
            50% { opacity: 1; height: 16px; }
        }

        /* Reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            .divider-aperture.animated .aperture-ring,
            .divider-aperture.animated .aperture-center,
            .divider-triangle.animated .triangle,
            .divider-orbital.animated .orbit-dot,
            .divider-crescent.animated .crescent,
            .divider-diamond.animated .diamond,
            .divider-spark.animated .spark-center,
            .divider-spark.animated .spark-ray {
                animation: none;
            }
        }

        /* =============================================================================
           UI MOCKUPS - Product Screenshots
           ============================================================================= */
        .ui-mockup-section {
            padding: var(--space-xxl) var(--space-xl);
            background: var(--near-black);
            position: relative;
            z-index: 1;
        }

        .ui-mockup-container {
            max-width: var(--container-max);
            margin: 0 auto;
        }

        .ui-mockup-header {
            text-align: center;
            margin-bottom: var(--space-xl);
        }

        .ui-mockup-eyebrow {
            font-family: var(--font-handwritten);
            font-size: 20px;
            color: var(--primary-200);
            margin-bottom: var(--space-xs);
        }

        .ui-mockup-title {
            font-size: var(--type-display-sm);
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
        }

        .mockups-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-xl);
        }

        .mockups-row.single {
            grid-template-columns: 1fr;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Scan Results Mockup */
        .scan-results-mockup {
            background: linear-gradient(180deg, var(--near-black) 0%, hsl(256, 41%, 7%) 100%);
            border: 1px solid hsl(271, 91%, 65%, 0.2);
            border-radius: var(--radius-xl);
            padding: var(--space-xl);
            position: relative;
            overflow: hidden;
        }

        .scan-results-mockup::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, hsl(51, 100%, 50%, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .scan-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-xl);
            position: relative;
            z-index: 1;
        }

        .scan-header-left h3 {
            font-size: 18px;
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
            margin-bottom: 4px;
        }

        .scan-header-left p {
            font-size: 13px;
            color: var(--text-tertiary);
        }

        .scan-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: hsl(160, 84%, 39%, 0.15);
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: var(--weight-medium);
            color: var(--zivvy-success-600);
        }

        .scan-total-found {
            text-align: center;
            padding: var(--space-xl) 0;
            position: relative;
            z-index: 1;
        }

        .scan-total-label {
            font-size: 12px;
            font-weight: var(--weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--text-tertiary);
            margin-bottom: var(--space-s);
        }

        .scan-total-value {
            font-size: clamp(48px, 8vw, 72px);
            font-weight: 900;
            letter-spacing: -0.03em;
            line-height: 1;
            color: var(--tertiary-400);
            text-shadow: 0 0 20px hsl(51, 100%, 50%, 0.4), 0 0 40px hsl(51, 100%, 50%, 0.2);
            margin-bottom: var(--space-xs);
        }

        .scan-total-context {
            font-size: 14px;
            color: var(--text-tertiary);
        }

        .scan-breakdown {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-m);
            margin-top: var(--space-l);
            position: relative;
            z-index: 1;
        }

        .breakdown-card {
            background: hsl(0, 0%, 100%, 0.03);
            border: 1px solid hsl(0, 0%, 100%, 0.06);
            border-radius: var(--radius-lg);
            padding: var(--space-l);
            transition: all 0.3s ease;
        }

        .breakdown-card:hover {
            background: hsl(0, 0%, 100%, 0.05);
            border-color: hsl(271, 91%, 65%, 0.3);
        }

        .breakdown-card.highlight {
            border-color: var(--tertiary-400);
            background: var(--gold-dim);
        }

        .breakdown-header {
            display: flex;
            align-items: center;
            gap: var(--space-s);
            margin-bottom: var(--space-m);
        }

        .breakdown-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .breakdown-icon.danger { background: hsl(0, 84%, 60%, 0.15); }
        .breakdown-icon.danger .material-symbols-rounded { color: hsl(0, 84%, 60%); }
        .breakdown-icon.warning { background: hsl(38, 92%, 50%, 0.15); }
        .breakdown-icon.warning .material-symbols-rounded { color: hsl(38, 92%, 50%); }
        .breakdown-icon.gold { background: var(--gold-dim); }
        .breakdown-icon.gold .material-symbols-rounded { color: var(--tertiary-400); }

        .breakdown-title {
            font-size: 13px;
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
        }

        .breakdown-subtitle {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        .breakdown-amount {
            font-size: 24px;
            font-weight: var(--weight-bold);
            color: var(--text-inverse);
            margin-bottom: var(--space-xxs);
        }

        .breakdown-card.highlight .breakdown-amount { color: var(--tertiary-400); }

        .breakdown-detail {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        .breakdown-detail strong { color: hsl(0, 84%, 60%); }

        /* At-Risk Members Mockup */
        .at-risk-mockup {
            background: var(--near-black);
            border: 1px solid hsl(0, 84%, 60%, 0.3);
            border-radius: var(--radius-xl);
            overflow: hidden;
        }

        .at-risk-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-l);
            background: linear-gradient(90deg, hsl(0, 84%, 60%, 0.15) 0%, transparent 100%);
            border-bottom: 1px solid hsl(0, 84%, 60%, 0.2);
        }

        .at-risk-header-left {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        .at-risk-icon {
            width: 36px;
            height: 36px;
            background: hsl(0, 84%, 60%);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .at-risk-icon .material-symbols-rounded {
            color: white;
            font-size: 20px;
        }

        .at-risk-header h3 {
            font-size: 15px;
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
        }

        .at-risk-header p {
            font-size: 12px;
            color: var(--text-tertiary);
        }

        .at-risk-badge {
            background: hsl(0, 84%, 60%);
            color: white;
            font-size: 12px;
            font-weight: var(--weight-semibold);
            padding: 6px 12px;
            border-radius: var(--radius-sm);
        }

        .at-risk-list { padding: var(--space-m); }

        .at-risk-member {
            display: flex;
            align-items: center;
            gap: var(--space-m);
            padding: var(--space-m);
            background: hsl(0, 0%, 100%, 0.02);
            border: 1px solid hsl(0, 0%, 100%, 0.04);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-s);
            transition: all 0.2s ease;
        }

        .at-risk-member:last-child { margin-bottom: 0; }
        .at-risk-member:hover { background: hsl(0, 0%, 100%, 0.04); }
        .at-risk-member.critical { border-left: 3px solid hsl(0, 84%, 60%); }
        .at-risk-member.warning { border-left: 3px solid hsl(38, 92%, 50%); }

        .member-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: var(--weight-semibold);
            color: white;
            flex-shrink: 0;
        }

        .member-info { flex: 1; min-width: 0; }

        .member-name {
            font-size: 13px;
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
            margin-bottom: 2px;
        }

        .member-detail {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        .member-signals {
            display: flex;
            gap: var(--space-xs);
            flex-shrink: 0;
        }

        .signal-tag {
            font-size: 10px;
            font-weight: var(--weight-medium);
            padding: 3px 6px;
            border-radius: 4px;
            white-space: nowrap;
        }

        .signal-tag.attendance { background: hsl(0, 84%, 60%, 0.15); color: hsl(0, 84%, 60%); }
        .signal-tag.payment { background: hsl(38, 92%, 50%, 0.15); color: hsl(38, 92%, 50%); }
        .signal-tag.engagement { background: hsl(271, 91%, 65%, 0.15); color: var(--primary-500); }

        .member-revenue {
            text-align: right;
            flex-shrink: 0;
            min-width: 70px;
        }

        .member-revenue-value {
            font-size: 14px;
            font-weight: var(--weight-bold);
            color: hsl(0, 84%, 60%);
        }

        .member-revenue-label {
            font-size: 10px;
            color: var(--text-tertiary);
        }

        /* Priority Queue Mockup */
        .priority-mockup {
            background: linear-gradient(180deg, var(--near-black) 0%, hsl(256, 41%, 7%) 100%);
            border: 1px solid hsl(271, 91%, 65%, 0.2);
            border-radius: var(--radius-xl);
            padding: var(--space-l);
        }

        .priority-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-l);
        }

        .priority-header-left h3 {
            font-size: 16px;
            font-weight: var(--weight-semibold);
            color: var(--text-inverse);
            margin-bottom: 4px;
        }

        .priority-header-left p {
            font-size: 12px;
            color: var(--text-tertiary);
        }

        .priority-date {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .priority-progress {
            display: flex;
            align-items: center;
            gap: var(--space-m);
            padding: var(--space-m);
            background: hsl(160, 84%, 39%, 0.1);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-l);
        }

        .progress-ring {
            width: 44px;
            height: 44px;
            position: relative;
        }

        .progress-ring svg { transform: rotate(-90deg); }
        .progress-ring-bg { fill: none; stroke: hsl(0, 0%, 100%, 0.1); stroke-width: 4; }
        .progress-ring-fill { fill: none; stroke: var(--zivvy-success-600); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 45; }

        .progress-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: var(--weight-bold);
            color: var(--zivvy-success-600);
        }

        .progress-info { flex: 1; }
        .progress-info strong { font-size: 13px; color: var(--text-inverse); display: block; margin-bottom: 2px; }
        .progress-info span { font-size: 11px; color: var(--text-tertiary); }

        .priority-potential { text-align: right; }
        .priority-potential-value { font-size: 18px; font-weight: var(--weight-bold); color: var(--tertiary-400); }
        .priority-potential-label { font-size: 10px; color: var(--text-tertiary); }

        .priority-list { display: flex; flex-direction: column; gap: var(--space-s); }

        .priority-item {
            display: flex;
            align-items: center;
            gap: var(--space-m);
            padding: var(--space-m);
            background: hsl(0, 0%, 100%, 0.02);
            border: 1px solid hsl(0, 0%, 100%, 0.04);
            border-radius: var(--radius-md);
            transition: all 0.2s;
        }

        .priority-item:hover { background: hsl(0, 0%, 100%, 0.04); }
        .priority-item.completed { opacity: 0.5; }
        .priority-item.completed .priority-check { background: var(--zivvy-success-600); border-color: var(--zivvy-success-600); }
        .priority-item.completed .priority-check .material-symbols-rounded { opacity: 1; }

        .priority-check {
            width: 22px;
            height: 22px;
            border: 2px solid hsl(0, 0%, 100%, 0.3);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .priority-check .material-symbols-rounded { font-size: 14px; color: white; opacity: 0; }

        .priority-rank {
            width: 24px;
            height: 24px;
            background: var(--primary-800);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: var(--weight-bold);
            color: var(--primary-200);
            flex-shrink: 0;
        }

        .priority-item:first-child .priority-rank { background: var(--gold-dim); color: var(--tertiary-400); }

        .priority-content { flex: 1; min-width: 0; }
        .priority-title { font-size: 13px; font-weight: var(--weight-medium); color: var(--text-inverse); margin-bottom: 2px; }
        .priority-meta { font-size: 11px; color: var(--text-tertiary); }

        .priority-impact { text-align: right; flex-shrink: 0; }
        .priority-impact-value { font-size: 13px; font-weight: var(--weight-semibold); color: var(--zivvy-success-600); }
        .priority-impact-label { font-size: 10px; color: var(--text-tertiary); }

        /* Automation Dashboard Mockup */
        .automation-mockup {
            background: var(--near-black);
            border: 1px solid hsl(271, 91%, 65%, 0.15);
            border-radius: var(--radius-xl);
            overflow: hidden;
        }

        .automation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-l);
            background: linear-gradient(90deg, hsl(275, 86%, 36%, 0.15) 0%, transparent 100%);
            border-bottom: 1px solid hsl(271, 91%, 65%, 0.1);
        }

        .automation-header-left {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        .automation-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-600) 100%);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .automation-icon .material-symbols-rounded { color: white; font-size: 20px; }

        .automation-header h3 { font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-inverse); }
        .automation-header p { font-size: 12px; color: var(--text-tertiary); }

        .automation-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--zivvy-success-600);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--zivvy-success-600);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .automation-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background: hsl(0, 0%, 100%, 0.05);
        }

        .automation-cell {
            background: var(--near-black);
            padding: var(--space-l);
        }

        .automation-metric {
            display: flex;
            align-items: flex-start;
            gap: var(--space-s);
        }

        .metric-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .metric-icon.billing { background: hsl(160, 84%, 39%, 0.15); }
        .metric-icon.billing .material-symbols-rounded { color: var(--zivvy-success-600); }
        .metric-icon.recovery { background: var(--gold-dim); }
        .metric-icon.recovery .material-symbols-rounded { color: var(--tertiary-400); }
        .metric-icon.reminders { background: hsl(198, 93%, 60%, 0.15); }
        .metric-icon.reminders .material-symbols-rounded { color: hsl(198, 93%, 60%); }
        .metric-icon.marketing { background: hsl(271, 91%, 65%, 0.15); }
        .metric-icon.marketing .material-symbols-rounded { color: var(--primary-500); }

        .metric-content { flex: 1; }
        .metric-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; }
        .metric-value { font-size: 22px; font-weight: var(--weight-bold); color: var(--text-inverse); line-height: 1; margin-bottom: 4px; }
        .metric-detail { font-size: 10px; color: var(--text-tertiary); }
        .metric-detail.positive { color: var(--zivvy-success-600); }

        .automation-feed {
            padding: var(--space-m) var(--space-l);
            border-top: 1px solid hsl(0, 0%, 100%, 0.05);
        }

        .feed-label {
            font-size: 10px;
            font-weight: var(--weight-semibold);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-tertiary);
            margin-bottom: var(--space-s);
        }

        .feed-item {
            display: flex;
            align-items: center;
            gap: var(--space-s);
            padding: var(--space-xs) 0;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .feed-item .material-symbols-rounded { font-size: 14px; color: var(--text-tertiary); }
        .feed-item.success .material-symbols-rounded { color: var(--zivvy-success-600); }
        .feed-time { font-size: 10px; color: var(--text-tertiary); margin-left: auto; font-family: monospace; }

        /* UI Mockups Responsive */
        @media (max-width: 900px) {
            .mockups-row { grid-template-columns: 1fr; }
            .scan-breakdown { grid-template-columns: 1fr; }
            .automation-grid { grid-template-columns: 1fr; }
            .member-signals { display: none; }
        }

        /* Testimonials Responsive */
        @media (max-width: 900px) {
            .testimonial-hero {
                grid-template-columns: 1fr;
                padding: var(--space-xl);
            }

            .testimonial-hero::after {
                top: var(--space-xl);
                left: var(--space-xl);
                bottom: auto;
                width: calc(100% - var(--space-xxl));
                height: 3px;
            }

            .hero-image-container {
                max-width: 200px;
                margin: 0 auto;
            }

            .hero-testimonial-content {
                padding-left: 0;
                padding-top: var(--space-l);
            }

            .hero-quote::before {
                position: static;
                display: block;
                margin-bottom: -40px;
            }

            .hero-stats {
                flex-wrap: wrap;
                border-left: none;
                padding-left: 0;
                padding-top: var(--space-m);
                border-top: 1px solid hsl(0, 0%, 100%, 0.1);
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .testimonial-card.offset-up,
            .testimonial-card.offset-down {
                margin-top: 0;
            }

            .proof-strip {
                flex-wrap: wrap;
                gap: var(--space-xl);
            }

            .proof-strip .proof-item {
                flex: 1 1 120px;
            }
        }