/* =============================================================================
           COLOR SCHEME SYSTEM - Respects user's system preference
           ============================================================================= */
        :root {
            /* Light mode colors (default) */
            --bg-primary: hsl(0, 0%, 100%);
            --bg-secondary: hsl(210, 17%, 98%);
            --bg-nav: hsl(0, 0%, 100%, 0.95);
            --text-primary: hsl(0, 0%, 10%);
            --text-secondary: hsl(0, 0%, 29%);
            --text-accent: hsl(260, 35%, 42%);
            --border-color: hsl(260, 35%, 42%, 0.3);
            --card-bg: hsl(0, 0%, 100%);
            --card-bg-hover: hsl(250, 100%, 98%);
            --overlay-bg: hsl(0, 0%, 100%, 0.75);
            --icon-color: hsl(260, 35%, 42%);
            --badge-bg: hsl(250, 100%, 98%);
            --badge-text: hsl(260, 35%, 42%);
            --nav-icon-bg: hsl(260, 35%, 42%, 0.1);
            --nav-icon-border: hsl(260, 35%, 42%, 0.2);
            --nav-icon-color: hsl(260, 35%, 42%);
            color-scheme: light;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                /* Dark mode colors */
                --bg-primary: hsl(258, 33%, 6%);
                --bg-secondary: hsl(256, 25%, 12%);
                --bg-nav: hsl(258, 33%, 6%, 0.95);
                --text-primary: hsl(0, 0%, 100%);
                --text-secondary: hsl(269, 97%, 85%);
                --text-accent: hsl(269, 97%, 85%);
                --border-color: hsl(271, 91%, 65%, 0.2);
                --card-bg: hsl(256, 25%, 12%, 0.6);
                --card-bg-hover: hsl(256, 25%, 12%, 0.9);
                --overlay-bg: hsl(258, 33%, 6%, 0.75);
                --icon-color: hsl(269, 97%, 85%);
                --badge-bg: hsl(271, 91%, 65%, 0.1);
                --badge-text: hsl(269, 97%, 85%);
                --nav-icon-bg: hsl(271, 91%, 65%, 0.1);
                --nav-icon-border: hsl(271, 91%, 65%, 0.2);
                --nav-icon-color: hsl(269, 97%, 85%);
                color-scheme: dark;
            }
        }

        body {
            background: var(--bg-primary) !important;
            color: var(--text-primary) !important;
        }

        /* Logo color switching for light/dark mode */
        .menu-header img {
            filter: none; /* White logo by default (dark mode) */
        }

        @media (prefers-color-scheme: light) {
            .menu-header img {
                filter: invert(1) brightness(0); /* Black logo in light mode */
            }
        }

        /* Apply color scheme to text elements */
        h1, h2, h3, h4, h5, h6 {
            color: var(--text-primary) !important;
        }

        /* Badge styling */
        .badge {
            color: var(--badge-text) !important;
        }

        /* Material icons */
        .material-symbols-rounded {
            color: var(--icon-color) !important;
        }

        /* Business Type Cards (Image-based) */
        .business-type-card {
            box-shadow: 0 4px 12px hsl(0, 0%, 0%, 0.1);
        }

        .business-type-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px hsl(271, 91%, 65%, 0.2);
        }

        .business-type-card.selected {
            box-shadow: 0 8px 32px hsl(271, 91%, 65%, 0.4);
            outline: 3px solid hsl(271, 91%, 65%);
            outline-offset: -3px;
        }

        .business-type-card.selected .material-symbols-rounded {
            color: hsl(271, 91%, 65%) !important;
        }

        /* Option cards (for other steps) */
        .option-card {
            background: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }

        .option-card:hover {
            background: var(--card-bg-hover) !important;
        }

        .option-card.selected {
            background: hsl(271, 91%, 65%, 0.1) !important;
            border-color: hsl(271, 91%, 65%) !important;
        }

        .option-card span {
            color: var(--text-primary) !important;
        }

        /* Navigation icon buttons */
        nav button {
            background: var(--nav-icon-bg) !important;
            border-color: var(--nav-icon-border) !important;
        }

        nav button .material-symbols-rounded {
            color: var(--nav-icon-color) !important;
        }

        /* =============================================================================
           SCAN ANIMATION COMPONENT - Embedded from zivvy-scan-animation.html
           ============================================================================= */
        .scan-theater {
            --near-black: hsl(258, 33%, 6%);
            --deep-plum: hsl(264, 67%, 35%);
            --vivid-purple: hsl(275, 86%, 36%);
            --amethyst: hsl(271, 91%, 65%);
            --soft-violet: hsl(269, 97%, 85%);
            --gold: hsl(51, 100%, 50%);
            --gold-dim: hsl(51, 100%, 50%, 0.3);
            --white: hsl(0, 0%, 100%);
            --gray-600: hsl(0, 0%, 40%);
            --gray-400: hsl(0, 0%, 60%);
            --success: hsl(160, 84%, 39%);
            --danger: hsl(0, 84%, 60%);
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 48px;
            position: relative;
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 20px 60px hsl(0, 0%, 0%, 0.3);
        }

        .phase-indicator {
            text-align: center;
            margin-bottom: 32px;
        }

        .phase-label {
            font-family: 'Caveat', cursive;
            font-size: 24px;
            font-weight: 500;
            color: var(--soft-violet);
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }

        .phase-title {
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--gray-400);
            margin-top: 8px;
        }

        .scan-visual-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            background: linear-gradient(180deg,
                hsl(264, 67%, 35%, 0.1) 0%,
                transparent 50%,
                hsl(264, 67%, 35%, 0.05) 100%
            );
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid hsl(271, 91%, 65%, 0.2);
        }

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

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

        .scan-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--amethyst) 20%,
                var(--gold) 50%,
                var(--amethyst) 80%,
                transparent 100%
            );
            box-shadow:
                0 0 20px var(--amethyst),
                0 0 40px hsl(271, 91%, 65%, 0.5);
            animation: scanDown 3s ease-in-out infinite;
            z-index: 2;
        }

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

        .data-field {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 3;
        }

        .data-particle {
            position: absolute;
            border-radius: 2px;
            opacity: 0;
            animation: particleReveal 4s ease-out infinite;
        }

        .data-particle.small {
            width: 4px;
            height: 4px;
            background: var(--gray-600);
        }

        .data-particle.medium {
            width: 8px;
            height: 8px;
            background: var(--deep-plum);
        }

        .data-particle.found {
            background: var(--gold) !important;
            box-shadow: 0 0 12px var(--gold-dim);
        }

        .data-particle:nth-child(1) { left: 12%; top: 25%; animation-delay: 0.2s; }
        .data-particle:nth-child(2) { left: 28%; top: 45%; animation-delay: 0.5s; }
        .data-particle:nth-child(3) { left: 45%; top: 30%; animation-delay: 0.8s; }
        .data-particle:nth-child(4) { left: 62%; top: 55%; animation-delay: 1.1s; }
        .data-particle:nth-child(5) { left: 78%; top: 35%; animation-delay: 1.4s; }
        .data-particle:nth-child(6) { left: 18%; top: 65%; animation-delay: 0.3s; }
        .data-particle:nth-child(7) { left: 35%; top: 75%; animation-delay: 0.7s; }
        .data-particle:nth-child(8) { left: 55%; top: 20%; animation-delay: 1.0s; }
        .data-particle:nth-child(9) { left: 72%; top: 70%; animation-delay: 1.3s; }
        .data-particle:nth-child(10) { left: 85%; top: 50%; animation-delay: 1.6s; }
        .data-particle:nth-child(11) { left: 22%; top: 40%; animation-delay: 0.4s; }
        .data-particle:nth-child(12) { left: 40%; top: 60%; animation-delay: 0.9s; }
        .data-particle:nth-child(13) { left: 58%; top: 42%; animation-delay: 1.2s; }
        .data-particle:nth-child(14) { left: 75%; top: 25%; animation-delay: 0.6s; }
        .data-particle:nth-child(15) { left: 90%; top: 65%; animation-delay: 1.5s; }

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

        .discovery-zone {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 4;
        }

        .discovery-ring {
            position: absolute;
            border-radius: 50%;
            border: 2px solid var(--gold);
            opacity: 0;
        }

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

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

        .discovery-ring.ring-3 {
            width: 140px;
            height: 140px;
            animation: ringPulse 4s ease-out infinite;
            animation-delay: 2.4s;
        }

        @keyframes ringPulse {
            0% {
                opacity: 0;
                transform: scale(0.5);
            }
            20% {
                opacity: 0.8;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(1.5);
            }
        }

        .discovery-core {
            width: 40px;
            height: 40px;
            background: var(--gold);
            border-radius: 50%;
            opacity: 0;
            animation: coreReveal 4s ease infinite;
            animation-delay: 1.8s;
            box-shadow:
                0 0 30px var(--gold),
                0 0 60px hsl(51, 100%, 50%, 0.4);
        }

        @keyframes coreReveal {
            0%, 30% {
                opacity: 0;
                transform: scale(0);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            70%, 100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .stats-panel {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 32px;
        }

        .stat-card {
            background: hsl(264, 67%, 35%, 0.15);
            border: 1px solid hsl(271, 91%, 65%, 0.2);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--amethyst), transparent);
            opacity: 0;
            animation: statScan 4s ease-in-out infinite;
        }

        .stat-card:nth-child(1)::before { animation-delay: 0s; }
        .stat-card:nth-child(2)::before { animation-delay: 0.5s; }
        .stat-card:nth-child(3)::before { animation-delay: 1s; }

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

        .stat-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--gray-400);
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--white);
            font-variant-numeric: tabular-nums;
        }

        .stat-value.counting {
            color: var(--amethyst);
        }

        .stat-value.found {
            color: var(--gold);
            text-shadow: 0 0 20px hsl(51, 100%, 50%, 0.5);
        }

        .stat-value.danger {
            color: var(--danger);
        }

        .stat-detail {
            font-size: 12px;
            color: var(--gray-600);
            margin-top: 4px;
        }

        .category-list {
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .category-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            background: hsl(0, 0%, 100%, 0.02);
            border-radius: 8px;
            border-left: 3px solid transparent;
            opacity: 0;
            transform: translateX(-20px);
            animation: categoryReveal 0.5s ease forwards;
        }

        .category-item:nth-child(1) { animation-delay: 1.5s; border-left-color: var(--danger); }
        .category-item:nth-child(2) { animation-delay: 2.0s; border-left-color: var(--danger); }
        .category-item:nth-child(3) { animation-delay: 2.5s; border-left-color: var(--danger); }

        @keyframes categoryReveal {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .category-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .category-icon.attrition,
        .category-icon.trial,
        .category-icon.pricing {
            background: hsl(0, 84%, 60%, 0.15);
        }

        .category-icon svg {
            width: 20px;
            height: 20px;
        }

        .category-info {
            flex: 1;
        }

        .category-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 2px;
        }

        .category-desc {
            font-size: 12px;
            color: var(--gray-400);
        }

        .category-amount {
            font-size: 18px;
            font-weight: 700;
            color: var(--gold);
            text-align: right;
        }

        .category-amount span {
            display: block;
            font-size: 11px;
            font-weight: 500;
            color: var(--gray-400);
        }

        .progress-section {
            margin-top: 32px;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .progress-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--gray-400);
        }

        .progress-percent {
            font-size: 13px;
            font-weight: 600;
            color: var(--amethyst);
            font-variant-numeric: tabular-nums;
        }

        .progress-track {
            height: 6px;
            background: hsl(264, 67%, 35%, 0.3);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--deep-plum), var(--amethyst), var(--gold));
            border-radius: 3px;
            width: 0%;
            animation: progressFill 8s ease-out forwards;
        }

        @keyframes progressFill {
            0% { width: 0%; }
            20% { width: 15%; }
            40% { width: 35%; }
            60% { width: 60%; }
            80% { width: 85%; }
            100% { width: 100%; }
        }

        @media (max-width: 700px) {
            .scan-theater {
                padding: 24px 0;
            }

            .stats-panel {
                grid-template-columns: 1fr;
            }

            .stat-value {
                font-size: 24px;
            }

            .category-item {
                flex-wrap: wrap;
            }

            .category-amount {
                width: 100%;
                text-align: left;
                margin-top: 8px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .scan-beam,
            .scan-line,
            .data-particle,
            .discovery-ring,
            .discovery-core,
            .stat-card::before,
            .category-item,
            .progress-fill {
                animation: none;
            }

            .category-item {
                opacity: 1;
                transform: none;
            }

            .discovery-core {
                opacity: 1;
            }

            .progress-fill {
                width: 75%;
            }
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }