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

    :root {
        --bg-primary: #0a0b0d;
        --bg-secondary: #12151a;
        --bg-card: #1a1d23;
        --bg-hover: #1f2229;
        --accent: #646cff;
        --accent-dim: #4046d3;
        --text-primary: #ffffff;
        --text-secondary: #9ca3af;
        --text-muted: #6b7280;
        --border: rgba(255, 255, 255, 0.06);
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
        background: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
    }

    /* ===== HERO SECTION - DYNAMIC & IMMERSIVE ===== */

    .hero-section {
        margin-top: 0;
        padding-top: 20px; /* Spacer div handles navbar offset */
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        position: relative;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        min-height: auto;
        padding-bottom: 40px;
        z-index: 1;
        isolation: isolate;
        /* Hide scrollbars */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .hero-section::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #particleCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: 1;
        pointer-events: none;
    }

    .hero-grid-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(rgba(100, 108, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(100, 108, 255, 0.03) 1px, transparent 1px);
        background-size: 40px 40px;
        animation: gridMove 40s linear infinite;
        z-index: 2;
        pointer-events: none;
    }

    @keyframes gridMove {
        0% { transform: translate(0, 0); }
        100% { transform: translate(40px, 40px); }
    }

    .hero-content {
        position: relative;
        z-index: 10;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 24px;
        text-align: center;
    }

    /* Main title with glow */
    .hero-main-title {
        font-size: 2.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-bottom: 12px;
        position: relative;
        line-height: 1.2;
    }

    .hero-main-title span {
        background: linear-gradient(
            90deg,
            #ffffff 0%,
            #646cff 25%,
            #a78bfa 50%,
            #ec4899 75%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 6s linear infinite;
        filter: drop-shadow(0 0 15px rgba(100, 108, 255, 0.3));
    }

    @keyframes shimmer {
        0% { background-position: 0% center; }
        100% { background-position: 300% center; }
    }

    /* Tagline with typewriter */
    .hero-tagline {
        font-size: 1rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        font-weight: 400;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.5;
    }

    .typewriter {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        animation: typing 3s steps(80, end) 0.5s forwards;
        width: 0;
    }

    @keyframes typing {
        from { width: 0; }
        to { width: 100%; }
    }

    /* ===== TIERED STATS LAYOUT ===== */
    .hero-stats-container {
        max-width: 700px;
        margin: 0 auto 16px;
        position: relative;
        z-index: 3;
    }

    /* Primary Large Stats */
    .hero-stats-primary {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-bottom: 12px;
        flex-wrap: wrap;
        padding: 0 20px;
    }

    .hero-stat-large {
        flex: 1;
        min-width: 180px;
        max-width: 260px;
        padding: 18px 20px;
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.08), rgba(167, 139, 250, 0.04));
        backdrop-filter: blur(12px);
        border: 1px solid rgba(100, 108, 255, 0.25);
        border-radius: 14px;
        transform: translateY(30px);
        opacity: 0;
        animation: slideUp 0.8s ease forwards;
        box-shadow: 
            0 8px 32px rgba(100, 108, 255, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero-stat-large::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(60deg, #646cff, #a78bfa, #ec4899, #a78bfa, #646cff);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        opacity: 0;
        animation: borderRotate 6s linear infinite;
        transition: opacity 0.4s ease;
    }

    @keyframes borderRotate {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .hero-stat-large:hover::before {
        opacity: 1;
    }

    .hero-stat-large:hover {
        transform: translateY(-8px);
        box-shadow: 
            0 16px 48px rgba(100, 108, 255, 0.25),
            0 0 60px rgba(100, 108, 255, 0.15);
        border-color: rgba(100, 108, 255, 0.5);
    }

    .hero-stat-large .hero-stat-icon {
        font-size: 1.5rem;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #646cff, #a78bfa, #ec4899);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: iconShimmer 3s ease-in-out infinite;
    }

    @keyframes iconShimmer {
        0%, 100% { background-position: 0% center; }
        50% { background-position: 200% center; }
    }

    .hero-stat-large .hero-stat-number {
        font-size: 2rem;
        font-weight: 800;
        background: linear-gradient(135deg, #646cff, #a78bfa, #ec4899);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 4px;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.5px;
        animation: valueGlow 3s ease-in-out infinite;
    }

    @keyframes valueGlow {
        0%, 100% { background-position: 0% center; }
        50% { background-position: 200% center; }
    }

    .hero-stat-large .hero-stat-label {
        font-size: 0.65rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
    }

    /* Secondary Smaller Stats */
    .hero-stats-secondary {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        padding: 0 20px;
    }

    .hero-stat-small {
        flex: 1;
        min-width: 140px;
        max-width: 170px;
        padding: 14px 12px;
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.05), rgba(167, 139, 250, 0.02));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(100, 108, 255, 0.12);
        border-radius: 12px;
        transform: translateY(30px);
        opacity: 0;
        animation: slideUp 0.8s ease forwards;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        text-align: center;
    }

    .hero-stat-small:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(100, 108, 255, 0.12);
        border-color: rgba(100, 108, 255, 0.25);
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.08), rgba(167, 139, 250, 0.04));
    }

    .hero-stat-small .hero-stat-icon {
        font-size: 1.1rem;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #646cff, #a78bfa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-stat-small .hero-stat-number {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 3px;
        font-variant-numeric: tabular-nums;
    }

    .hero-stat-small .hero-stat-label {
        font-size: 0.6rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    /* Animation delays */
    .hero-stat-large:nth-child(1) { animation-delay: 0.3s; }
    .hero-stat-large:nth-child(2) { animation-delay: 0.5s; }
    .hero-stat-small:nth-child(1) { animation-delay: 0.6s; }
    .hero-stat-small:nth-child(2) { animation-delay: 0.7s; }

    @keyframes slideUp {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* ===== FLOATING TECH BADGES ===== */
    .tech-badges {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        opacity: 0.85;
        overflow: hidden;
    }

    .tech-badge {
        position: absolute;
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.08), rgba(167, 139, 250, 0.04));
        border: 1px solid rgba(100, 108, 255, 0.2);
        border-radius: 30px;
        padding: 10px 20px;
        font-size: 0.85rem;
        color: var(--text-secondary);
        animation: float 12s ease-in-out infinite;
        white-space: nowrap;
        backdrop-filter: blur(8px);
        overflow: hidden;
        min-width: 150px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(100, 108, 255, 0.1);
    }

    .tech-badge i {
        transition: opacity 0.3s ease-out;
        margin-right: 8px;
        background: linear-gradient(135deg, #646cff, #a78bfa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .badge-text {
        position: relative;
        display: inline-block;
        transition: all 0.4s ease-out;
    }

    .badge-1 { top: 12%; left: 3%; animation-delay: 0s; animation-duration: 10s; }
    .badge-2 { top: 20%; right: 5%; animation-delay: 1.5s; animation-duration: 11s; }
    .badge-3 { bottom: 35%; left: 5%; animation-delay: 3s; animation-duration: 9s; }
    .badge-4 { bottom: 25%; right: 3%; animation-delay: 4.5s; animation-duration: 12s; }
    .badge-5 { top: 45%; left: 2%; animation-delay: 6s; animation-duration: 10.5s; }
    .badge-6 { top: 8%; right: 12%; animation-delay: 7.5s; animation-duration: 11.5s; }

    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
            opacity: 0.7;
        }
        25% {
            transform: translateY(-15px) rotate(2deg);
            opacity: 1;
        }
        50% {
            transform: translateY(-25px) rotate(-2deg);
            opacity: 1;
        }
        75% {
            transform: translateY(-15px) rotate(1deg);
            opacity: 1;
        }
    }

    /* ===== LIVE INDICATOR ===== */
    .live-indicator {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        padding: 8px 16px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.06));
        border: 1px solid rgba(16, 185, 129, 0.25);
        border-radius: 20px;
        position: relative;
        z-index: 10;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    }

    .live-dot {
        width: 8px;
        height: 8px;
        background: #10b981;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    }

    .live-text {
        color: #10b981;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

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

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

    /* ===== HERO RESPONSIVE ===== */
    @media (max-width: 1024px) {
        .hero-main-title {
            font-size: 2.4rem;
            letter-spacing: 4px;
        }

        .hero-stat-large {
            min-width: 180px;
        }

        .tech-badges {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .hero-section {
            min-height: auto;
            padding-top: 16px;
            padding-bottom: 30px;
            overflow: hidden !important;
            overflow-x: hidden !important;
            overflow-y: hidden !important;
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
        }

        .hero-section::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .hero-main-title {
            font-size: 1.8rem;
            letter-spacing: 2px;
        }

        .hero-tagline {
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .typewriter {
            white-space: normal;
            width: 100% !important;
            animation: none;
        }

        .hero-stats-primary {
            flex-direction: row;
            gap: 10px;
        }

        .hero-stat-large {
            min-width: 140px;
            max-width: 180px;
            padding: 14px 12px;
        }

        .hero-stat-large .hero-stat-number {
            font-size: 1.6rem;
        }

        .hero-stat-large .hero-stat-icon {
            font-size: 1.2rem;
            margin-bottom: 6px;
        }

        .hero-stat-large .hero-stat-label {
            font-size: 0.55rem;
        }

        .hero-stats-secondary {
            flex-direction: row;
            justify-content: center;
            gap: 8px;
        }

        .hero-stat-small {
            flex: 1 1 45%;
            min-width: 100px;
            max-width: 140px;
            padding: 10px 8px;
        }

        .hero-stat-small .hero-stat-number {
            font-size: 1.1rem;
        }

        .hero-stat-small .hero-stat-icon {
            font-size: 0.9rem;
        }

        .live-indicator {
            padding: 6px 12px;
            margin-top: 12px;
        }

        .live-text {
            font-size: 0.7rem;
        }
    }

    @media (max-width: 480px) {
        .hero-main-title {
            font-size: 1.5rem;
            letter-spacing: 1px;
        }

        .hero-stats-primary {
            gap: 8px;
        }

        .hero-stat-large {
            min-width: 120px;
            padding: 12px 10px;
        }

        .hero-stats-secondary {
            gap: 6px;
        }

        .hero-stat-small {
            min-width: 90px;
            padding: 8px 6px;
        }

        .hero-stat-small .hero-stat-label {
            font-size: 0.5rem;
            letter-spacing: 0.5px;
        }
    }

    /* Legacy hero class (deprecated - kept for backwards compatibility) */
    .hero {
        margin-top: 80px;
        padding: 60px 24px 40px;
        text-align: center;
        position: relative;
        background: var(--bg-primary);
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: -20%;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 60%;
        background: radial-gradient(
            ellipse at center,
            rgba(100, 108, 255, 0.08) 0%,
            rgba(167, 139, 250, 0.04) 30%,
            transparent 60%
        );
        z-index: 0;
        pointer-events: none;
    }

    .hero > * {
        position: relative;
        z-index: 1;
    }

    .hero h1 {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
        letter-spacing: -2px;
        color: var(--text-primary);
    }

    @media (max-width: 768px) {
        .hero {
            padding: 40px 20px 30px;
        }

        .hero h1 {
            font-size: 36px;
            letter-spacing: -1px;
        }
    }

    /* Product Derivation Tree - Interactive Diagram */
    .visual-derivation-tree {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .tree-diagram-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* SVG connection lines */
    .tree-connections {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    .tree-line {
        stroke: rgba(20, 184, 166, 0.5);
        stroke-width: 2;
        fill: none;
        stroke-dasharray: 4 4;
        opacity: 0;
        animation: lineAppear 3s ease-in-out infinite;
        filter: drop-shadow(0 0 4px rgba(20, 184, 166, 0.4));
    }

    .line-1 { animation-delay: 0.5s; }
    .line-2 { animation-delay: 0.6s; }
    .line-3 { animation-delay: 1.2s; }
    .line-4 { animation-delay: 1.3s; }
    .line-5 { animation-delay: 1.4s; }
    .line-6 { animation-delay: 1.5s; }

    @keyframes lineAppear {
        0%, 10% {
            opacity: 0;
            stroke-dashoffset: 100;
        }
        20%, 95% {
            opacity: 1;
            stroke-dashoffset: 0;
        }
        100% {
            opacity: 0;
        }
    }

    /* Tree nodes */
    .tree-node {
        position: absolute;
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(20, 184, 166, 0.08));
        border: 2px solid rgba(20, 184, 166, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
        z-index: 2;
        opacity: 0;
        animation: nodeAppear 3s ease-in-out infinite;
    }

    .tree-node i {
        font-size: 16px;
        color: #14b8a6;
        filter: drop-shadow(0 0 5px rgba(20, 184, 166, 0.6));
    }

    /* Root node (parent) */
    .root-node {
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        animation-delay: 0s;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(20, 184, 166, 0.15));
        border-width: 3px;
    }

    .root-node i {
        font-size: 18px;
    }

    /* Level 1 children */
    .child-node.node-1 {
        top: 42%;
        left: 30%;
        transform: translate(-50%, -50%);
        animation-delay: 0.5s;
    }

    .child-node.node-2 {
        top: 42%;
        left: 70%;
        transform: translate(-50%, -50%);
        animation-delay: 0.6s;
    }

    /* Level 2 children (grandchildren) */
    .grandchild-node.node-3 {
        top: 70%;
        left: 15%;
        transform: translate(-50%, -50%);
        animation-delay: 1.2s;
    }

    .grandchild-node.node-4 {
        top: 70%;
        left: 45%;
        transform: translate(-50%, -50%);
        animation-delay: 1.3s;
    }

    .grandchild-node.node-5 {
        top: 70%;
        left: 55%;
        transform: translate(-50%, -50%);
        animation-delay: 1.4s;
    }

    .grandchild-node.node-6 {
        top: 70%;
        left: 85%;
        transform: translate(-50%, -50%);
        animation-delay: 1.5s;
    }

    @keyframes nodeAppear {
        0%, 8% {
            opacity: 0;
            transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(0);
        }
        12%, 95% {
            opacity: 1;
            transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(var(--tx, -50%), var(--ty, -50%)) scale(0);
        }
    }

    .root-node {
        --tx: -50%;
        --ty: 0;
    }

    .child-node, .grandchild-node {
        --tx: -50%;
        --ty: -50%;
    }

    /* Tree info badge */
    .tree-badge {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 12px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(20, 184, 166, 0.08));
        border: 1.5px solid rgba(20, 184, 166, 0.5);
        border-radius: 12px;
        font-size: 9px;
        font-weight: 700;
        color: #14b8a6;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
        animation: treePulse 2.5s ease-in-out infinite;
        z-index: 10;
    }

    .tree-badge i {
        font-size: 8px;
        margin-right: 5px;
    }

    @keyframes treePulse {
        0%, 100% {
            box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
        }
        50% {
            box-shadow: 0 0 20px rgba(20, 184, 166, 0.6);
        }
    }

    /* Depth indicator */
    .depth-indicator {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 12px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(20, 184, 166, 0.08));
        border: 1.5px solid rgba(20, 184, 166, 0.5);
        border-radius: 12px;
        font-size: 10px;
        font-weight: 800;
        color: #14b8a6;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
        z-index: 10;
    }

    .learn-more-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        background: rgba(236, 72, 153, 0.15);
        color: #ec4899;
        border: 1px solid rgba(236, 72, 153, 0.3);
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .learn-more-badge:hover {
        background: rgba(236, 72, 153, 0.25);
        border-color: rgba(236, 72, 153, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
    }

    /* Stats Grid */
    .stats-grid {
        max-width: 1000px;
        margin: 0 auto 80px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        padding: 0 24px;
    }

    .stat-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
    }

    .stat-value {
        font-size: 32px;
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 4px;
    }

    .stat-label {
        font-size: 13px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Main Content */
    .showcase-wrapper {
        background: var(--bg-secondary);
        min-height: 100vh;
        padding: 60px 0;
        position: relative;
        overflow: visible;
        isolation: isolate;
    }

    /* ===== ANIMATED PREMIUM BACKGROUND ===== */
    
    /* Simple subtle gradient glow - no extra elements needed */
    .showcase-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(ellipse 80% 50% at 20% 30%, rgba(100, 108, 255, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse 60% 40% at 80% 70%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
        z-index: -1;
        pointer-events: none;
    }

    .showcase-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 24px;
        position: relative;
        z-index: 1;
    }

    /* PREMIUM SECTION HEADER - Ultra Powerful & Themed */
    .section-header {
        margin-bottom: 64px;
        position: relative;
        padding: 40px 0;
    }

    /* Premium section header - clean styling */
    .tool-category:first-child .section-header {
        position: relative;
        background: transparent;
    }

    /* PREMIUM SERVICES Label - Epic Style */
    .section-label {
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 4px;
        margin-bottom: 20px;
        display: inline-block;
        position: relative;
        padding-bottom: 12px;
    }

    /* Premium label with gradient */
    .tool-category:first-child .section-label {
        background: linear-gradient(
            90deg,
            #646cff 0%,
            #a78bfa 50%,
            #ec4899 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Underline for premium label */
    .tool-category:first-child .section-label::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, #646cff, #a78bfa, transparent);
    }

    /* Historical Services - Green theme */
    .tool-category:nth-child(2) .section-label {
        color: #10b981;
    }

    .tool-category:nth-child(2) .section-label::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, #10b981, transparent);
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        animation: underlineGrow 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
    }

    /* Additional Tools - Purple theme */
    .tool-category:nth-child(3) .section-label {
        color: #8b5cf6;
    }

    .tool-category:nth-child(3) .section-label::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, #8b5cf6, transparent);
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
        animation: underlineGrow 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
    }

    /* SECTION TITLE - Massive & Powerful */
    .section-title {
        font-size: 48px;
        font-weight: 800;
        margin-bottom: 16px;
        letter-spacing: -2px;
        line-height: 1.1;
        position: relative;
        animation: titleRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
    }

    @keyframes titleRise {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            filter: blur(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

    /* Premium title - Epic gradient with glow */
    .tool-category:first-child .section-title {
        background: linear-gradient(
            135deg,
            #ffffff 0%,
            #c4b5fd 20%,
            #a78bfa 40%,
            #ec4899 60%,
            #c4b5fd 80%,
            #ffffff 100%
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation:
            titleRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards,
            titleMegaShimmer 10s ease-in-out infinite 1.5s;
        position: relative;
    }

    @keyframes titleMegaShimmer {
        0%, 100% {
            background-position: 0% center;
        }
        50% {
            background-position: 200% center;
        }
    }


    /* SUBTITLE */
    .section-subtitle {
        font-size: 18px;
        color: var(--text-secondary);
        font-weight: 400;
        animation: subtitleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
    }

    @keyframes subtitleFade {
        0% {
            opacity: 0;
            transform: translateY(15px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .tool-category:first-child .section-subtitle {
        color: #c4b5fd;
    }

    /* Power lines decoration for Premium */
    .tool-category:first-child .section-header > *::selection {
        background: rgba(100, 108, 255, 0.3);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .section-title {
            font-size: 32px;
        }

        .section-label {
            font-size: 11px;
            letter-spacing: 3px;
        }
    }

    /* Tool Category */
    .tool-category {
        margin-bottom: 80px;
    }

    .tools-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 28px;
        padding: 30px 12px;
        margin: -12px;
    }

    /* Tool Card - Working Animated Border */
    .tool-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .tool-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    /* Animated border using box-shadow for Premium Tools */
    .tool-category:first-child .tool-card {
        border: 1px solid rgba(100, 108, 255, 0.4);
        box-shadow:
            0 0 0 1px rgba(100, 108, 255, 0.2),
            0 0 20px rgba(100, 108, 255, 0.1);
        animation: premiumBorderGlow 6s ease-in-out infinite;
    }

    @keyframes premiumBorderGlow {
        0%, 100% {
            border-color: rgba(100, 108, 255, 0.4);
            box-shadow:
                0 0 0 1px rgba(100, 108, 255, 0.2),
                0 0 20px rgba(100, 108, 255, 0.15);
        }
        33% {
            border-color: rgba(167, 139, 250, 0.5);
            box-shadow:
                0 0 0 1px rgba(167, 139, 250, 0.3),
                0 0 25px rgba(167, 139, 250, 0.2);
        }
        66% {
            border-color: rgba(236, 72, 153, 0.5);
            box-shadow:
                0 0 0 1px rgba(236, 72, 153, 0.3),
                0 0 25px rgba(236, 72, 153, 0.2);
        }
    }

    .tool-category:first-child .tool-card:hover {
        border-color: rgba(100, 108, 255, 0.8);
        box-shadow:
            0 0 0 2px rgba(100, 108, 255, 0.5),
            0 0 30px rgba(100, 108, 255, 0.4),
            0 20px 40px rgba(0, 0, 0, 0.3);
        animation: premiumBorderGlowFast 3s ease-in-out infinite;
    }

    @keyframes premiumBorderGlowFast {
        0%, 100% {
            border-color: rgba(100, 108, 255, 0.8);
            box-shadow:
                0 0 0 2px rgba(100, 108, 255, 0.5),
                0 0 30px rgba(100, 108, 255, 0.4),
                0 20px 40px rgba(0, 0, 0, 0.3);
        }
        50% {
            border-color: rgba(236, 72, 153, 0.8);
            box-shadow:
                0 0 0 2px rgba(236, 72, 153, 0.6),
                0 0 35px rgba(236, 72, 153, 0.5),
                0 20px 40px rgba(0, 0, 0, 0.3);
        }
    }

    /* Green glow for Historical Services */
    .tool-category:nth-child(2) .tool-card {
        border-color: rgba(16, 185, 129, 0.3);
    }

    .tool-category:nth-child(2) .tool-card:hover {
        border-color: rgba(16, 185, 129, 0.7);
        box-shadow:
            0 0 0 1px rgba(16, 185, 129, 0.4),
            0 0 25px rgba(16, 185, 129, 0.3),
            0 20px 40px rgba(0, 0, 0, 0.3);
    }

    /* Purple glow for Additional Tools */
    .tool-category:nth-child(3) .tool-card {
        border-color: rgba(139, 92, 246, 0.3);
    }

    .tool-category:nth-child(3) .tool-card:hover {
        border-color: rgba(139, 92, 246, 0.7);
        box-shadow:
            0 0 0 1px rgba(139, 92, 246, 0.4),
            0 0 25px rgba(139, 92, 246, 0.3),
            0 20px 40px rgba(0, 0, 0, 0.3);
    }

    /* Tool Visual Preview */
    .tool-visual {
        height: 260px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Prevent visual elements from capturing touch scroll on mobile */
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        /* Hide any scrollbars that might appear */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    /* Hide scrollbar for Chrome/Safari/Opera */
    .tool-visual::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Disable pointer events on animated visual containers (decorative only) */
    .tool-visual > div:not(.tool-visual-overlay):not(.tool-visual-overlay-left) {
        pointer-events: none;
        overflow: hidden !important;
    }

    /* Ensure ALL visual containers and their children hide scrollbars */
    .tool-visual *,
    [class^="visual-"],
    [class^="visual-"] * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .tool-visual *::-webkit-scrollbar,
    [class^="visual-"]::-webkit-scrollbar,
    [class^="visual-"] *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Force overflow hidden on all animated visual containers */
    [class^="visual-"] {
        overflow: hidden !important;
    }

    /* Badge overlays - proper positioning and layering */
    .tool-visual-overlay {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 15; /* Badge should be on top */
    }

    .tool-visual-overlay-left {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 15; /* Same level as right badge */
    }

    .learn-more-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        background: rgba(236, 72, 153, 0.15);
        color: #ec4899;
        border: 1px solid rgba(236, 72, 153, 0.3);
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .learn-more-badge:hover {
        background: rgba(236, 72, 153, 0.25);
        border-color: rgba(236, 72, 153, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
    }

    .tool-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .badge-premium {
        background: rgba(100, 108, 255, 0.15);
        color: #646cff;
        border: 1px solid rgba(100, 108, 255, 0.3);
    }

    .badge-premium:hover {
        background: rgba(100, 108, 255, 0.25);
        border-color: rgba(100, 108, 255, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 0 15px rgba(100, 108, 255, 0.4);
    }

    .badge-free {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .badge-beta {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .badge-coming-soon {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    /* Shop Product Extractor Visual */
    .visual-file-extract {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(ellipse at center, rgba(100, 108, 255, 0.08) 0%, transparent 70%);
    }

    .extraction-container {
        position: relative;
        width: 280px;
        height: 180px;
        overflow: hidden !important;
    }

    .folder-source {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.2), rgba(100, 108, 255, 0.05));
        border: 2px solid rgba(100, 108, 255, 0.4);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 30px rgba(100, 108, 255, 0.3);
        z-index: 2;
    }

    .folder-source i {
        font-size: 32px;
        color: var(--accent);
        filter: drop-shadow(0 0 8px rgba(100, 108, 255, 0.6));
    }

    .folder-source::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border: 2px solid rgba(100, 108, 255, 0.6);
        border-radius: 12px;
        animation: extractPulse 2s ease-out infinite;
    }

    @keyframes extractPulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    .extracted-file {
        position: absolute;
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, rgba(100, 108, 255, 0.3), rgba(100, 108, 255, 0.1));
        border: 1.5px solid rgba(100, 108, 255, 0.5);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(100, 108, 255, 0.4);
    }

    .extracted-file i {
        font-size: 18px;
        color: var(--accent);
    }

    .extracted-file.extracted {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
        border-color: rgba(16, 185, 129, 0.5);
    }

    .extracted-file.extracted i {
        color: var(--success);
    }

    .extracted-file:nth-child(2) {
        top: 10%;
        left: 10%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 0s;
    }

    .extracted-file:nth-child(3) {
        top: 10%;
        right: 10%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 0.5s;
    }

    .extracted-file:nth-child(4) {
        bottom: 15%;
        left: 5%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 1s;
    }

    .extracted-file:nth-child(5) {
        bottom: 15%;
        right: 5%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 1.5s;
    }

    .extracted-file:nth-child(6) {
        top: 40%;
        left: 0%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 2s;
    }

    .extracted-file:nth-child(7) {
        top: 40%;
        right: 0%;
        animation: extractFile 3s ease-in-out infinite;
        animation-delay: 2.5s;
    }

    @keyframes extractFile {
        0% {
            transform: translate(0, 0) scale(0);
            opacity: 0;
        }
        20% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.3;
        }
    }

    .data-stream {
        position: absolute;
        width: 2px;
        background: linear-gradient(to bottom, rgba(100, 108, 255, 0.8), transparent);
        transform-origin: center top;
        z-index: 1;
        opacity: 0;
        animation: streamFlow 3s ease-in-out infinite;
    }

    .data-stream:nth-child(8) {
        height: 60px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        animation-delay: 0s;
    }

    .data-stream:nth-child(9) {
        height: 60px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        animation-delay: 0.5s;
    }

    .data-stream:nth-child(10) {
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-120deg);
        animation-delay: 1s;
    }

    .data-stream:nth-child(11) {
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(120deg);
        animation-delay: 1.5s;
    }

    @keyframes streamFlow {
        0%, 100% {
            opacity: 0;
        }
        20%, 80% {
            opacity: 0.6;
        }
    }

    /* Private Room Scanner - Clean & Elegant Version */
    .visual-room-monitor {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
        overflow: hidden;
    }

    .scanning-container-clean {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden !important;
    }

    .scanner-hub {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.1));
        border: 2px solid rgba(236, 72, 153, 0.8);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-shadow: 0 0 40px rgba(236, 72, 153, 0.5);
        z-index: 10;
    }

    .hub-glow {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(236, 72, 153, 0.3), transparent 70%);
        animation: hubBreath 2s ease-in-out infinite;
    }

    @keyframes hubBreath {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.8;
        }
    }

    .scanner-hub i {
        font-size: 32px;
        color: #ec4899;
        filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
        z-index: 2;
    }

    .scan-count {
        position: absolute;
        bottom: 8px;
        font-size: 11px;
        font-weight: 800;
        color: #ec4899;
        text-shadow: 0 0 8px rgba(236, 72, 153, 1);
        z-index: 2;
    }

    .clean-radar {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform-origin: center center;
        animation: radarClean 2s linear infinite;
        z-index: 5;
    }

    .clean-radar::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 90px;
        background: linear-gradient(to top,
            rgba(236, 72, 153, 0.9) 0%,
            rgba(236, 72, 153, 0.5) 50%,
            transparent 100%);
        transform-origin: bottom center;
        transform: translate(-50%, -100%);
        box-shadow: 0 0 15px rgba(236, 72, 153, 0.8);
    }

    @keyframes radarClean {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .pulse-wave {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border: 2px solid rgba(236, 72, 153, 0.5);
        border-radius: 50%;
        animation: pulseOut 3s ease-out infinite;
    }

    .pulse-1 {
        animation-delay: 0s;
    }

    .pulse-2 {
        animation-delay: 1s;
    }

    .pulse-3 {
        animation-delay: 2s;
    }

    @keyframes pulseOut {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }

    .avatar-simple {
        position: absolute;
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.4), rgba(236, 72, 153, 0.1));
        border: 2px solid rgba(236, 72, 153, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: avatarAppear 3s ease-in-out infinite;
        z-index: 8;
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
    }

    .avatar-simple i {
        font-size: 20px;
        color: #ec4899;
        filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.8));
    }

    .check-mark {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background: #10b981;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: checkPop 3s ease-in-out infinite;
    }

    .check-mark i {
        font-size: 8px;
        color: #fff;
        filter: none;
    }

    @keyframes checkPop {
        0%, 25%, 100% {
            opacity: 0;
            transform: scale(0);
        }
        30%, 85% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .avatar-1 {
        top: 5%;
        left: 50%;
        animation-delay: 0s;
    }

    .avatar-2 {
        top: 50%;
        right: 0%;
        animation-delay: 0.75s;
    }

    .avatar-4 {
        top: 50%;
        left: 0%;
        animation-delay: 1.5s;
    }

    @keyframes avatarAppear {
        0%, 100% {
            opacity: 0;
            transform: translate(0, 0) scale(0);
        }
        8% {
            opacity: 1;
            transform: translate(0, 0) scale(1.15);
        }
        12%, 85% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        95% {
            opacity: 0;
            transform: translate(0, 0) scale(0.8);
        }
    }

    .avatar-1 {
        animation-name: avatarAppearTop;
    }

    .avatar-2 {
        animation-name: avatarAppearRight;
    }

    .avatar-4 {
        animation-name: avatarAppearLeft;
    }

    @keyframes avatarAppearTop {
        0%, 100% { opacity: 0; transform: translateX(-50%) scale(0); }
        8% { opacity: 1; transform: translateX(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateX(-50%) scale(1); }
    }

    @keyframes avatarAppearRight {
        0%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
        8% { opacity: 1; transform: translateY(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    @keyframes avatarAppearLeft {
        0%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
        8% { opacity: 1; transform: translateY(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    .scan-speed {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.1));
        border: 2px solid rgba(236, 72, 153, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
        color: #ec4899;
        box-shadow: 0 0 25px rgba(236, 72, 153, 0.5);
        animation: speedBadgePulse 2s ease-in-out infinite;
        z-index: 8;
        opacity: 1;
    }

    @keyframes speedBadgePulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
        }
        50% {
            box-shadow: 0 0 35px rgba(236, 72, 153, 0.7);
        }
    }

    /* Auto Private Room Tracker - Clean & Automated Version */
    .visual-auto-room-monitor {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
        overflow: hidden;
        /* Explicitly hide scrollbars */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .visual-auto-room-monitor::-webkit-scrollbar {
        display: none;
    }

    .auto-scanning-container-clean {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden !important;
    }

    .auto-scanner-hub {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
        border: 2px solid rgba(139, 92, 246, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
        z-index: 10;
    }

    .auto-hub-glow {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
        animation: autoHubBreath 2s ease-in-out infinite;
    }

    @keyframes autoHubBreath {
        0%, 100% {
            transform: scale(1);
            opacity: 0.5;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.8;
        }
    }

    .auto-scanner-hub i {
        font-size: 32px;
        color: #8b5cf6;
        filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.8));
        z-index: 2;
    }

    .auto-refresh-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.2));
        border: 2px solid rgba(139, 92, 246, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
        animation: autoRefreshBounce 3s ease-in-out infinite;
        z-index: 3;
    }

    .auto-refresh-badge i {
        font-size: 12px;
        color: #8b5cf6;
        filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.8));
        animation: autoRefreshSpin 3s linear infinite;
    }

    @keyframes autoRefreshSpin {
        0%, 20% {
            transform: rotate(0deg);
        }
        30%, 100% {
            transform: rotate(360deg);
        }
    }

    @keyframes autoRefreshBounce {
        0%, 20%, 100% {
            transform: scale(1);
        }
        25% {
            transform: scale(1.15);
        }
    }

    .auto-clean-radar {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform-origin: center center;
        animation: autoRadarClean 2.5s linear infinite;
        z-index: 5;
    }

    .auto-clean-radar::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 90px;
        background: linear-gradient(to top,
            rgba(139, 92, 246, 0.9) 0%,
            rgba(139, 92, 246, 0.5) 50%,
            transparent 100%);
        transform-origin: bottom center;
        transform: translate(-50%, -100%);
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.8);
    }

    @keyframes autoRadarClean {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .auto-pulse-wave {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border: 2px solid rgba(139, 92, 246, 0.5);
        border-radius: 50%;
        animation: autoPulseOut 3s ease-out infinite;
    }

    .auto-pulse-1 {
        animation-delay: 0s;
    }

    .auto-pulse-2 {
        animation-delay: 1s;
    }

    .auto-pulse-3 {
        animation-delay: 2s;
    }

    @keyframes autoPulseOut {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.8;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }

    .auto-avatar-simple {
        position: absolute;
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.1));
        border: 2px solid rgba(139, 92, 246, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: autoAvatarAppear 3s ease-in-out infinite;
        z-index: 8;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    }

    .auto-avatar-simple i {
        font-size: 20px;
        color: #8b5cf6;
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8));
    }

    .auto-check-mark {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background: #10b981;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: autoCheckPop 3s ease-in-out infinite;
    }

    .auto-check-mark i {
        font-size: 8px;
        color: #fff;
        filter: none;
    }

    @keyframes autoCheckPop {
        0%, 25%, 100% {
            opacity: 0;
            transform: scale(0);
        }
        30%, 85% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .auto-avatar-1 {
        top: 5%;
        left: 50%;
        animation-delay: 0s;
    }

    .auto-avatar-2 {
        top: 50%;
        right: 0%;
        animation-delay: 0.75s;
    }

    .auto-avatar-4 {
        top: 50%;
        left: 0%;
        animation-delay: 1.5s;
    }

    @keyframes autoAvatarAppear {
        0%, 100% {
            opacity: 0;
            transform: translate(0, 0) scale(0);
        }
        8% {
            opacity: 1;
            transform: translate(0, 0) scale(1.15);
        }
        12%, 85% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
        95% {
            opacity: 0;
            transform: translate(0, 0) scale(0.8);
        }
    }

    .auto-avatar-1 {
        animation-name: autoAvatarAppearTop;
    }

    .auto-avatar-2 {
        animation-name: autoAvatarAppearRight;
    }

    .auto-avatar-4 {
        animation-name: autoAvatarAppearLeft;
    }

    @keyframes autoAvatarAppearTop {
        0%, 100% { opacity: 0; transform: translateX(-50%) scale(0); }
        8% { opacity: 1; transform: translateX(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateX(-50%) scale(1); }
    }

    @keyframes autoAvatarAppearRight {
        0%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
        8% { opacity: 1; transform: translateY(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    @keyframes autoAvatarAppearLeft {
        0%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
        8% { opacity: 1; transform: translateY(-50%) scale(1.15); }
        12%, 85% { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    .auto-frequency {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
        border: 2px solid rgba(139, 92, 246, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        color: #8b5cf6;
        box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
        animation: autoFrequencyPulse 2s ease-in-out infinite;
        z-index: 8;
        opacity: 1;
    }

    @keyframes autoFrequencyPulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
        }
        50% {
            box-shadow: 0 0 35px rgba(139, 92, 246, 0.7);
        }
    }

    /* Live Room Updates - Work in Progress */
    /* Hidden Catalog Visual */
    .visual-hidden-catalog {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(139, 92, 246, 0.02) 100%);
    }

    .hidden-catalog-container {
        position: relative;
        width: 85%;
        height: 80%;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        align-items: center;
        gap: 12px;
    }

    .hidden-search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.25);
        border-radius: 8px;
        width: 80%;
    }

    .hidden-search-bar i {
        color: rgba(168, 85, 247, 0.6);
        font-size: 12px;
    }

    .search-placeholder {
        color: rgba(168, 85, 247, 0.4);
        font-size: 11px;
    }

    .hidden-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 80%;
    }

    .hidden-product-card {
        position: relative;
        aspect-ratio: 1;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(168, 85, 247, 0.2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: hiddenPulse 2s ease-in-out infinite;
    }

    .hidden-product-card:nth-child(2) { animation-delay: 0.3s; }
    .hidden-product-card:nth-child(3) { animation-delay: 0.6s; }
    .hidden-product-card:nth-child(4) { animation-delay: 0.9s; }

    .hidden-product-card i {
        font-size: 20px;
        color: rgba(168, 85, 247, 0.4);
    }

    .hidden-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        background: rgba(168, 85, 247, 0.8);
        color: #fff;
        font-size: 6px;
        font-weight: 700;
        padding: 2px 4px;
        border-radius: 3px;
        letter-spacing: 0.5px;
    }

    .reveal-indicator {
        position: absolute;
        bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.15));
        border: 1px solid rgba(168, 85, 247, 0.4);
        border-radius: 6px;
        color: #a855f7;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        animation: revealGlow 2s ease-in-out infinite;
    }

    .reveal-indicator i {
        font-size: 10px;
    }

    @keyframes hiddenPulse {
        0%, 100% { 
            opacity: 0.6;
            border-color: rgba(168, 85, 247, 0.2);
        }
        50% { 
            opacity: 1;
            border-color: rgba(168, 85, 247, 0.5);
        }
    }

    @keyframes revealGlow {
        0%, 100% { 
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
        }
        50% { 
            box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
        }
    }

    .visual-live-activity {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    }

    .dev-container {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden !important;
    }

    .dev-core {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
        border: 2px solid rgba(245, 158, 11, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
        z-index: 3;
        animation: devPulse 2s ease-in-out infinite;
    }

    .dev-core i {
        font-size: 28px;
        color: #f59e0b;
        filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
    }

    @keyframes devPulse {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.05);
        }
    }

    .progress-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 110px;
        height: 110px;
        border: 3px solid transparent;
        border-top-color: rgba(245, 158, 11, 0.6);
        border-right-color: rgba(245, 158, 11, 0.3);
        border-radius: 50%;
        animation: ringRotate 3s linear infinite;
        z-index: 2;
    }

    @keyframes ringRotate {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .dev-wave {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        border: 2px solid rgba(245, 158, 11, 0.4);
        border-radius: 50%;
        animation: waveExpand 2s ease-out infinite;
        z-index: 1;
    }

    @keyframes waveExpand {
        0% {
            width: 70px;
            height: 70px;
            opacity: 1;
        }
        100% {
            width: 200px;
            height: 200px;
            opacity: 0;
        }
    }

    .dev-indicator {
        position: absolute;
        width: 35px;
        height: 35px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0.1));
        border: 2px solid rgba(245, 158, 11, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: toolAppear 3s ease-in-out infinite;
        z-index: 2;
    }

    .dev-indicator i {
        font-size: 16px;
        color: #f59e0b;
    }

    .dev-indicator-1 {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        animation-delay: 0s;
    }

    .dev-indicator-2 {
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        animation-delay: 0.75s;
    }

    .dev-indicator-3 {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        animation-delay: 1.5s;
    }

    .dev-indicator-4 {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        animation-delay: 2.25s;
    }

    @keyframes toolAppear {
        0%, 100% {
            opacity: 0;
            transform: translate(0, 0) scale(0) rotate(0deg);
        }
        15% {
            opacity: 1;
            transform: translate(0, 0) scale(1) rotate(0deg);
        }
        20% {
            transform: translate(0, 0) scale(1) rotate(180deg);
        }
        85% {
            opacity: 1;
            transform: translate(0, 0) scale(1) rotate(360deg);
        }
    }

    .dev-indicator-1 {
        animation-name: toolAppearTop;
    }

    .dev-indicator-2 {
        animation-name: toolAppearRight;
    }

    .dev-indicator-3 {
        animation-name: toolAppearBottom;
    }

    .dev-indicator-4 {
        animation-name: toolAppearLeft;
    }

    @keyframes toolAppearTop {
        0%, 100% {
            opacity: 0;
            transform: translateX(-50%) scale(0) rotate(0deg);
        }
        15%, 85% {
            opacity: 1;
            transform: translateX(-50%) scale(1) rotate(360deg);
        }
    }

    @keyframes toolAppearRight {
        0%, 100% {
            opacity: 0;
            transform: translateY(-50%) scale(0) rotate(0deg);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(-50%) scale(1) rotate(360deg);
        }
    }

    @keyframes toolAppearBottom {
        0%, 100% {
            opacity: 0;
            transform: translateX(-50%) scale(0) rotate(0deg);
        }
        15%, 85% {
            opacity: 1;
            transform: translateX(-50%) scale(1) rotate(360deg);
        }
    }

    @keyframes toolAppearLeft {
        0%, 100% {
            opacity: 0;
            transform: translateY(-50%) scale(0) rotate(0deg);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(-50%) scale(1) rotate(360deg);
        }
    }

    .status-label {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 12px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
        border: 1px solid rgba(245, 158, 11, 0.4);
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        color: #f59e0b;
        white-space: nowrap;
        animation: statusBlink 2s ease-in-out infinite;
    }

    @keyframes statusBlink {
        0%, 100% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        }
    }

    /* OTHER VISUALS - Keeping existing simple ones */
    .visual-room-analytics {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .room-archive-container {
        position: relative;
        width: 280px;
        height: 180px;
        overflow: hidden !important;
    }

    /* The room visualization */
    .archive-room {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 160px;
        height: 110px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
        border: 2px solid rgba(16, 185, 129, 0.5);
        border-radius: 14px;
        box-shadow:
            0 0 30px rgba(16, 185, 129, 0.25),
            inset 0 0 30px rgba(16, 185, 129, 0.08);
        z-index: 2;
    }

    .archive-room::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2px solid rgba(16, 185, 129, 0.3);
        border-radius: 14px;
        animation: roomScanPulse 3s ease-in-out infinite;
    }

    @keyframes roomScanPulse {
        0%, 100% {
            opacity: 0;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.12);
        }
    }

    /* Room label */
    .room-label {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        font-weight: 800;
        color: #10b981;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        opacity: 0.9;
        text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    }

    /* Participants (avatars) inside the room with seating positions */
    .room-participant {
        position: absolute;
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(16, 185, 129, 0.3));
        border: 2px solid rgba(16, 185, 129, 1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: participantAppear 4s ease-in-out infinite;
        box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
    }

    .room-participant i {
        font-size: 11px;
        color: #10b981;
        filter: drop-shadow(0 0 4px rgba(16, 185, 129, 1));
    }

    /* Outfit indicator */
    .outfit-marker {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 10px;
        height: 10px;
        background: #34d399;
        border: 2px solid #fff;
        border-radius: 50%;
        opacity: 0;
        animation: outfitPing 4s ease-in-out infinite;
        box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
    }

    @keyframes outfitPing {
        0%, 30%, 100% {
            opacity: 0;
            transform: scale(0);
        }
        35%, 95% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Different seating positions - more spread out */
    .participant-1 {
        top: 25%;
        left: 20%;
        animation-delay: 0s;
    }

    .participant-2 {
        top: 25%;
        right: 20%;
        animation-delay: 0.5s;
    }

    .participant-3 {
        bottom: 25%;
        left: 25%;
        animation-delay: 1s;
    }

    .participant-4 {
        bottom: 25%;
        right: 25%;
        animation-delay: 1.5s;
    }

    @keyframes participantAppear {
        0%, 100% {
            opacity: 0;
            transform: translate(0, 0) scale(0);
        }
        10% {
            opacity: 1;
            transform: translate(0, 0) scale(1.2);
        }
        15%, 90% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }
    }

    /* Session/snapshot timestamps in corners */
    .timestamp-snapshot {
        position: absolute;
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.08));
        border: 1.5px solid rgba(16, 185, 129, 0.5);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 700;
        color: #10b981;
        white-space: nowrap;
        opacity: 0;
        animation: snapshotFloat 5s ease-in-out infinite;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
    }

    .timestamp-snapshot i {
        font-size: 9px;
        margin-right: 3px;
    }

    .timestamp-1 {
        top: 8%;
        left: 3%;
        animation-delay: 0s;
    }

    .timestamp-2 {
        top: 8%;
        right: 3%;
        animation-delay: 1.2s;
    }

    .timestamp-3 {
        bottom: 8%;
        left: 3%;
        animation-delay: 2.4s;
    }

    .timestamp-4 {
        bottom: 8%;
        right: 3%;
        animation-delay: 3.6s;
    }

    @keyframes snapshotFloat {
        0%, 100% {
            opacity: 0;
            transform: translateY(3px) scale(0.95);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Archive icon - moved to bottom center */
    .archive-badge {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
        border: 2px solid rgba(16, 185, 129, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
        animation: archivePulse 3s ease-in-out infinite;
        z-index: 10;
    }

    .archive-badge i {
        font-size: 12px;
        color: #10b981;
        filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.8));
    }

    @keyframes archivePulse {
        0%, 100% {
            transform: translateX(-50%) scale(1);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
        }
        50% {
            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 0 25px rgba(16, 185, 129, 0.8);
        }
    }

    /* Data stream lines showing archive collection */
    .data-stream-archive {
        position: absolute;
        width: 2px;
        height: 35px;
        background: linear-gradient(to bottom, rgba(16, 185, 129, 0.8), transparent);
        opacity: 0;
        animation: streamArchive 3s ease-in-out infinite;
    }

    .stream-1 {
        top: 35%;
        left: 8%;
        animation-delay: 0.5s;
    }

    .stream-2 {
        top: 35%;
        right: 8%;
        animation-delay: 1s;
    }

    .stream-3 {
        top: 55%;
        left: 15%;
        animation-delay: 1.5s;
    }

    .stream-4 {
        top: 55%;
        right: 15%;
        animation-delay: 2s;
    }

    @keyframes streamArchive {
        0%, 100% {
            opacity: 0;
            transform: translateY(0);
        }
        20%, 80% {
            opacity: 0.7;
            transform: translateY(-25px);
        }
    }

    .analytics-bar {
        width: 25px;
        background: linear-gradient(to top, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.2));
        border-radius: 4px 4px 0 0;
        animation: barGrow 2s ease-in-out infinite;
    }

    .analytics-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
    .analytics-bar:nth-child(2) { height: 70%; animation-delay: 0.2s; }
    .analytics-bar:nth-child(3) { height: 55%; animation-delay: 0.4s; }
    .analytics-bar:nth-child(4) { height: 85%; animation-delay: 0.6s; }
    .analytics-bar:nth-child(5) { height: 60%; animation-delay: 0.8s; }

    @keyframes barGrow {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(1.1); }
    }

    /* Avatar Profile Card Search - Enhanced */
    .visual-profile-card {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .profile-card-container {
        position: relative;
        width: 200px;
        height: 160px;
        overflow: hidden !important;
    }

    /* Main profile card */
    .profile-mockup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130px;
        height: 140px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
        border: 2px solid rgba(59, 130, 246, 0.5);
        border-radius: 12px;
        position: relative;
        overflow: visible;
        box-shadow:
            0 0 30px rgba(59, 130, 246, 0.3),
            inset 0 0 20px rgba(59, 130, 246, 0.08);
        z-index: 2;
    }

    .profile-mockup::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2px solid rgba(59, 130, 246, 0.3);
        border-radius: 12px;
        animation: cardScanPulse 3s ease-in-out infinite;
    }

    @keyframes cardScanPulse {
        0%, 100% {
            opacity: 0;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.08);
        }
    }

    /* Avatar circle */
    .profile-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.2));
        border: 3px solid rgba(59, 130, 246, 0.8);
        border-radius: 50%;
        margin: 15px auto 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
        animation: avatarGlow 2.5s ease-in-out infinite;
        position: relative;
    }

    .profile-avatar i {
        font-size: 22px;
        color: #3b82f6;
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
    }

    @keyframes avatarGlow {
        0%, 100% {
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
            border-color: rgba(59, 130, 246, 0.8);
        }
        50% {
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
            border-color: rgba(59, 130, 246, 1);
        }
    }

    /* Profile data lines */
    .profile-line {
        height: 6px;
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.1));
        border-radius: 3px;
        margin: 7px 15px;
        animation: dataLoad 3s ease-in-out infinite;
        position: relative;
        overflow: hidden;
    }

    .profile-line::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
        animation: lineScan 2s linear infinite;
    }

    .profile-line:nth-child(1) {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        animation-delay: 0s;
    }

    .profile-line:nth-child(2) {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        animation-delay: 0.3s;
    }

    .profile-line:nth-child(3) {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        animation-delay: 0.6s;
    }

    .profile-line:nth-child(4) {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        animation-delay: 0.9s;
    }

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

    @keyframes lineScan {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    /* Data field labels floating around */
    .data-field {
        position: absolute;
        padding: 3px 8px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.08));
        border: 1.5px solid rgba(59, 130, 246, 0.4);
        border-radius: 8px;
        font-size: 9px;
        font-weight: 700;
        color: #3b82f6;
        white-space: nowrap;
        opacity: 0;
        animation: fieldFloat 4s ease-in-out infinite;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    }

    .data-field i {
        font-size: 8px;
        margin-right: 3px;
    }

    .field-bio {
        top: 5%;
        left: 0%;
        animation-delay: 0s;
    }

    .field-interests {
        top: 5%;
        right: 0%;
        animation-delay: 1s;
    }

    .field-status {
        bottom: 5%;
        left: 0%;
        animation-delay: 2s;
    }

    .field-details {
        bottom: 5%;
        right: 0%;
        animation-delay: 3s;
    }

    @keyframes fieldFloat {
        0%, 100% {
            opacity: 0;
            transform: translateY(3px) scale(0.9);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Search/scan icon */
    .search-badge {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
        border: 2px solid rgba(59, 130, 246, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        animation: searchPulse 2.5s ease-in-out infinite;
        z-index: 10;
    }

    .search-badge i {
        font-size: 12px;
        color: #3b82f6;
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.8));
    }

    @keyframes searchPulse {
        0%, 100% {
            transform: translateX(-50%) scale(1);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        50% {
            transform: translateX(-50%) scale(1.15);
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
        }
    }

    /* Data streams showing access */
    .data-stream-profile {
        position: absolute;
        width: 2px;
        height: 30px;
        background: linear-gradient(to top, rgba(59, 130, 246, 0.8), transparent);
        opacity: 0;
        animation: streamProfile 3s ease-in-out infinite;
    }

    .stream-profile-1 {
        bottom: 35%;
        left: 12%;
        animation-delay: 0.5s;
    }

    .stream-profile-2 {
        bottom: 35%;
        right: 12%;
        animation-delay: 1s;
    }

    .stream-profile-3 {
        bottom: 45%;
        left: 25%;
        animation-delay: 1.5s;
    }

    .stream-profile-4 {
        bottom: 45%;
        right: 25%;
        animation-delay: 2s;
    }

    @keyframes streamProfile {
        0%, 100% {
            opacity: 0;
            transform: translateY(0);
        }
        20%, 80% {
            opacity: 0.7;
            transform: translateY(-20px);
        }
    }

    /* Time Tracker - Automatic Activity Logging */
    .visual-clock-tracking {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .time-tracker-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* Central clock display */
    .clock-display {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90px;
        height: 90px;
        border: 3px solid rgba(20, 184, 166, 0.6);
        border-radius: 50%;
        position: relative;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(20, 184, 166, 0.02));
        box-shadow:
            0 0 30px rgba(20, 184, 166, 0.3),
            inset 0 0 20px rgba(20, 184, 166, 0.1);
        z-index: 5;
    }

    .clock-display::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border: 2px solid rgba(20, 184, 166, 0.3);
        border-radius: 50%;
        animation: clockPulse 3s ease-in-out infinite;
    }

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

    /* Clock center dot */
    .clock-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background: #14b8a6;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(20, 184, 166, 0.8);
        z-index: 3;
    }

    /* Clock hands */
    .clock-hand {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        background: linear-gradient(to top, rgba(20, 184, 166, 0.8), rgba(20, 184, 166, 1));
        transform-origin: bottom center;
        border-radius: 2px;
        box-shadow: 0 0 8px rgba(20, 184, 166, 0.6);
    }

    .clock-hand.hour {
        height: 25px;
        animation: clockTickHour 8s linear infinite;
        z-index: 2;
    }

    .clock-hand.minute {
        height: 35px;
        width: 2px;
        background: linear-gradient(to top, rgba(20, 184, 166, 0.6), rgba(20, 184, 166, 0.9));
        animation: clockTickMinute 4s linear infinite;
        z-index: 1;
    }

    @keyframes clockTickHour {
        0% { transform: translate(-50%, -100%) rotate(0deg); }
        100% { transform: translate(-50%, -100%) rotate(360deg); }
    }

    @keyframes clockTickMinute {
        0% { transform: translate(-50%, -100%) rotate(0deg); }
        100% { transform: translate(-50%, -100%) rotate(360deg); }
    }

    /* Activity logs floating around */
    .activity-log {
        position: absolute;
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(20, 184, 166, 0.08));
        border: 1.5px solid rgba(20, 184, 166, 0.5);
        border-radius: 10px;
        font-size: 9px;
        font-weight: 700;
        color: #14b8a6;
        white-space: nowrap;
        opacity: 0;
        animation: logFloat 5s ease-in-out infinite;
        box-shadow: 0 0 12px rgba(20, 184, 166, 0.4);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .activity-log i {
        font-size: 8px;
    }

    .log-user-1 {
        top: 8%;
        left: 3%;
        animation-delay: 0s;
    }

    .log-user-2 {
        top: 8%;
        right: 3%;
        animation-delay: 1.2s;
    }

    .log-room-1 {
        bottom: 8%;
        left: 3%;
        animation-delay: 2.4s;
    }

    .log-room-2 {
        bottom: 8%;
        right: 3%;
        animation-delay: 3.6s;
    }

    @keyframes logFloat {
        0%, 100% {
            opacity: 0;
            transform: translateY(3px) scale(0.9);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Time duration indicators */
    .time-indicator {
        position: absolute;
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(20, 184, 166, 0.1));
        border: 2px solid rgba(20, 184, 166, 0.6);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 800;
        color: #14b8a6;
        box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
        opacity: 0;
        animation: indicatorPop 4s ease-in-out infinite;
    }

    .time-indicator .time-value {
        font-size: 11px;
        line-height: 1;
    }

    .time-indicator .time-unit {
        font-size: 7px;
        opacity: 0.8;
    }

    .indicator-1 {
        top: 20%;
        left: 10%;
        animation-delay: 0.5s;
    }

    .indicator-2 {
        top: 20%;
        right: 10%;
        animation-delay: 1.5s;
    }

    .indicator-3 {
        bottom: 20%;
        left: 10%;
        animation-delay: 2.5s;
    }

    .indicator-4 {
        bottom: 20%;
        right: 10%;
        animation-delay: 3.5s;
    }

    @keyframes indicatorPop {
        0%, 100% {
            opacity: 0;
            transform: scale(0);
        }
        12%, 88% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Auto-tracking badge */
    .auto-track-badge {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(20, 184, 166, 0.08));
        border: 1.5px solid rgba(20, 184, 166, 0.5);
        border-radius: 12px;
        font-size: 9px;
        font-weight: 700;
        color: #14b8a6;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
        animation: autoBadgePulse 2.5s ease-in-out infinite;
        z-index: 10;
    }

    .auto-track-badge i {
        font-size: 8px;
        margin-right: 4px;
        animation: autoSpin 3s linear infinite;
    }

    @keyframes autoSpin {
        0%, 85% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes autoBadgePulse {
        0%, 100% {
            box-shadow: 0 0 10px rgba(20, 184, 166, 0.3);
        }
        50% {
            box-shadow: 0 0 20px rgba(20, 184, 166, 0.6);
        }
    }

    /* Data streams */
    .data-stream-time {
        position: absolute;
        width: 2px;
        height: 25px;
        background: linear-gradient(to top, rgba(20, 184, 166, 0.8), transparent);
        opacity: 0;
        animation: streamTime 3s ease-in-out infinite;
    }

    .stream-time-1 {
        bottom: 40%;
        left: 15%;
        animation-delay: 0.5s;
    }

    .stream-time-2 {
        bottom: 40%;
        right: 15%;
        animation-delay: 1s;
    }

    .stream-time-3 {
        bottom: 50%;
        left: 25%;
        animation-delay: 1.5s;
    }

    .stream-time-4 {
        bottom: 50%;
        right: 25%;
        animation-delay: 2s;
    }

    @keyframes streamTime {
        0%, 100% {
            opacity: 0;
            transform: translateY(0);
        }
        20%, 80% {
            opacity: 0.7;
            transform: translateY(-20px);
        }
    }

    /* Avatar Outfits Search - Hidden Items Reveal */
    .visual-outfit-simple {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .outfit-simple-container {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden !important;
    }

    /* Central avatar - clean and simple */
    .avatar-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
        border: 2px solid rgba(245, 158, 11, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.3);
        z-index: 5;
        animation: centerPulse 3s ease-in-out infinite;
    }

    @keyframes centerPulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            box-shadow: 0 0 35px rgba(245, 158, 11, 0.5);
            transform: translate(-50%, -50%) scale(1.05);
        }
    }

    .avatar-center i {
        font-size: 30px;
        color: #f59e0b;
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
    }

    /* Floating outfit items - CLEAN & SPACED */
    .floating-item {
        position: absolute;
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
        border: 2px solid rgba(245, 158, 11, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
        z-index: 3;
    }

    .floating-item i {
        font-size: 18px;
        color: #f59e0b;
        filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.6));
    }

    /* Position items around avatar with MORE SPACE */
    .item-top {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        animation: floatAppear 3s ease-in-out infinite;
        animation-delay: 0.3s;
    }

    .item-right {
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        animation: floatAppear 3s ease-in-out infinite;
        animation-delay: 0.9s;
    }

    .item-bottom {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        animation: floatAppear 3s ease-in-out infinite;
        animation-delay: 1.5s;
    }

    .item-left {
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        animation: floatAppear 3s ease-in-out infinite;
        animation-delay: 2.1s;
    }

    @keyframes floatAppear {
        0%, 8% {
            opacity: 0;
            transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.7);
        }
        12%, 96% {
            opacity: 1;
            transform: translate(var(--tx, 0), var(--ty, 0)) scale(1);
        }
        100% {
            opacity: 0;
            transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.7);
        }
    }

    .item-top {
        --tx: -50%;
        --ty: 0;
    }

    .item-right {
        --tx: 0;
        --ty: -50%;
    }

    .item-bottom {
        --tx: -50%;
        --ty: 0;
    }

    .item-left {
        --tx: 0;
        --ty: -50%;
    }

    /* Small indicator dots - MINIMAL */
    .hidden-dot {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 12px;
        height: 12px;
        background: #ef4444;
        border: 2px solid #fff;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }

    .ap-dot {
        position: absolute;
        bottom: -4px;
        right: -4px;
        width: 16px;
        height: 16px;
        background: #8b5cf6;
        border: 2px solid #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 7px;
        font-weight: 800;
        color: #fff;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
    }

    /* Simple status badge at top */
    .simple-status {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 14px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
        border: 1.5px solid rgba(245, 158, 11, 0.4);
        border-radius: 14px;
        font-size: 10px;
        font-weight: 700;
        color: #f59e0b;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
        animation: statusPulse 2.5s ease-in-out infinite;
        z-index: 10;
    }

    .simple-status i {
        font-size: 9px;
        margin-right: 5px;
    }

    @keyframes statusPulse {
        0%, 100% {
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
        }
        50% {
            box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
        }
    }

    /* Simple count at bottom */
    .simple-count {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px 14px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
        border: 1.5px solid rgba(245, 158, 11, 0.4);
        border-radius: 14px;
        font-size: 11px;
        font-weight: 800;
        color: #f59e0b;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
        z-index: 10;
    }
    /* Avatar Name Search - Name History Timeline */
    .visual-name-history {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .name-history-container {
        position: relative;
        width: 100%;
        max-width: 220px;
        height: 160px;
        overflow: hidden !important;
    }

    /* Timeline line */
    .timeline-line {
        position: absolute;
        top: 15%;
        bottom: 15%;
        left: 20px;
        width: 3px;
        background: linear-gradient(to bottom,
            rgba(6, 182, 212, 0.8),
            rgba(6, 182, 212, 0.5),
            rgba(6, 182, 212, 0.3));
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
        z-index: 1;
    }

    .timeline-line::before {
        content: '';
        position: absolute;
        top: 0;
        left: -2px;
        width: 7px;
        height: 7px;
        background: #06b6d4;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    }

    .timeline-line::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: -2px;
        width: 7px;
        height: 7px;
        background: #06b6d4;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.8);
    }

    /* Name entries */
    .name-entry {
        position: absolute;
        left: 38px;
        padding: 6px 12px;
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
        border-left: 3px solid rgba(6, 182, 212, 0.7);
        border-radius: 6px;
        opacity: 0;
        animation: nameSlideIn 4s ease-in-out infinite;
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
        min-width: 140px;
    }

    .name-entry::before {
        content: '';
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background: #06b6d4;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
    }

    .name-text {
        font-size: 11px;
        font-weight: 700;
        color: #06b6d4;
        margin-bottom: 2px;
        text-shadow: 0 0 5px rgba(6, 182, 212, 0.4);
    }

    .name-timestamp {
        font-size: 8px;
        font-weight: 600;
        color: rgba(6, 182, 212, 0.7);
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .name-timestamp i {
        font-size: 7px;
    }

    .entry-1 {
        top: 12%;
        animation-delay: 0s;
    }

    .entry-2 {
        top: 38%;
        animation-delay: 1s;
    }

    .entry-3 {
        top: 64%;
        animation-delay: 2s;
    }

    .entry-4 {
        top: 90%;
        animation-delay: 3s;
    }

    @keyframes nameSlideIn {
        0%, 100% {
            opacity: 0;
            transform: translateX(-15px);
        }
        15%, 90% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* History badge */
    .history-badge {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(6, 182, 212, 0.1));
        border: 2px solid rgba(6, 182, 212, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
        animation: historyPulse 3s ease-in-out infinite;
        z-index: 10;
    }

    .history-badge i {
        font-size: 14px;
        color: #06b6d4;
        filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.8));
    }

    @keyframes historyPulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 25px rgba(6, 182, 212, 0.7);
        }
    }

    /* Change count */
    .change-count {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(6, 182, 212, 0.08));
        border: 1.5px solid rgba(6, 182, 212, 0.5);
        border-radius: 12px;
        font-size: 9px;
        font-weight: 800;
        color: #06b6d4;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
        animation: countBlink 2.5s ease-in-out infinite;
        z-index: 10;
    }

    @keyframes countBlink {
        0%, 100% {
            opacity: 0.8;
        }
        50% {
            opacity: 1;
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
        }
    }

    /* ========================================
       Spouse History - Marriage Timeline
       ======================================== */
    .visual-spouse-history {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
        overflow: hidden;
    }

    .spouse-history-container {
        position: relative;
        width: 100%;
        max-width: 280px;
        height: 180px;
        display: flex;
        overflow: hidden !important;
        align-items: center;
        justify-content: center;
    }

    /* Floating hearts background */
    .floating-hearts {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .float-heart {
        position: absolute;
        color: rgba(236, 72, 153, 0.15);
        animation: floatHeart 4s ease-in-out infinite;
    }

    .heart-1 {
        top: 10%;
        left: 10%;
        font-size: 12px;
        animation-delay: 0s;
    }

    .heart-2 {
        top: 20%;
        right: 15%;
        font-size: 8px;
        animation-delay: 1s;
    }

    .heart-3 {
        bottom: 30%;
        left: 20%;
        font-size: 10px;
        animation-delay: 2s;
    }

    .heart-4 {
        bottom: 20%;
        right: 10%;
        font-size: 14px;
        animation-delay: 0.5s;
    }

    @keyframes floatHeart {
        0%, 100% {
            transform: translateY(0) scale(1);
            opacity: 0.3;
        }
        50% {
            transform: translateY(-10px) scale(1.1);
            opacity: 0.6;
        }
    }

    /* Connection line between avatars */
    .marriage-line {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 3px;
        background: linear-gradient(90deg, 
            rgba(236, 72, 153, 0.3), 
            rgba(236, 72, 153, 0.8), 
            rgba(236, 72, 153, 0.3)
        );
        border-radius: 2px;
        animation: lineGlow 2s ease-in-out infinite;
    }

    @keyframes lineGlow {
        0%, 100% {
            box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
        }
        50% {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
        }
    }

    /* Avatar circles */
    .spouse-avatar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .avatar-left {
        left: 15px;
        animation: avatarPulseLeft 3s ease-in-out infinite;
    }

    .avatar-right {
        right: 15px;
        animation: avatarPulseRight 3s ease-in-out infinite;
    }

    @keyframes avatarPulseLeft {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
        }
        50% {
            transform: translateY(-50%) translateX(5px);
        }
    }

    @keyframes avatarPulseRight {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
        }
        50% {
            transform: translateY(-50%) translateX(-5px);
        }
    }

    .avatar-circle {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05));
        border: 2px solid rgba(236, 72, 153, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #ec4899;
    }

    .avatar-label {
        font-size: 9px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Central heart */
    .marriage-heart {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .marriage-heart > i {
        font-size: 28px;
        color: #ec4899;
        filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.5));
        animation: heartBeat 1.5s ease-in-out infinite;
    }

    .heart-pulse {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border: 2px solid rgba(236, 72, 153, 0.4);
        border-radius: 50%;
        animation: heartPulseRing 2s ease-out infinite;
    }

    @keyframes heartBeat {
        0%, 100% {
            transform: scale(1);
        }
        15% {
            transform: scale(1.15);
        }
        30% {
            transform: scale(1);
        }
        45% {
            transform: scale(1.1);
        }
        60% {
            transform: scale(1);
        }
    }

    @keyframes heartPulseRing {
        0% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.8;
        }
        100% {
            transform: translate(-50%, -50%) scale(1.8);
            opacity: 0;
        }
    }

    /* History entries at bottom */
    .marriage-history {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }

    .history-entry {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(236, 72, 153, 0.2);
        border-radius: 12px;
        font-size: 8px;
        color: rgba(255, 255, 255, 0.6);
        animation: entryFadeIn 0.5s ease-out forwards;
        opacity: 0;
    }

    .history-entry i {
        font-size: 8px;
        color: #ec4899;
    }

    .history-entry.entry-1 {
        animation-delay: 0.2s;
    }

    .history-entry.entry-2 {
        animation-delay: 0.4s;
    }

    .history-entry.entry-2 i {
        color: #9ca3af;
    }

    .history-entry.entry-3 {
        animation-delay: 0.6s;
    }

    @keyframes entryFadeIn {
        from {
            opacity: 0;
            transform: translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Status badge */
    .spouse-status-badge {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(236, 72, 153, 0.08));
        border: 1.5px solid rgba(236, 72, 153, 0.5);
        border-radius: 15px;
        font-size: 10px;
        font-weight: 700;
        color: #f472b6;
        text-transform: uppercase;
        letter-spacing: 1px;
        animation: badgeGlow 2s ease-in-out infinite;
    }

    .spouse-status-badge i {
        font-size: 9px;
        animation: miniHeartBeat 1s ease-in-out infinite;
    }

    @keyframes badgeGlow {
        0%, 100% {
            box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
        }
        50% {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
        }
    }

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

    /* Outfit Catalog - Browse Collections */
    .visual-catalog-grid {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .catalog-grid-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* Grid of outfit cards */
    .catalog-grid-display {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8px;
        width: 200px;
        height: 140px;
        z-index: 2;
    }

    .catalog-cell {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
        border: 1.5px solid rgba(139, 92, 246, 0.4);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        opacity: 0;
        animation: catalogFadeIn 3s ease-in-out infinite;
        transition: all 0.3s ease;
    }

    .catalog-cell i {
        font-size: 14px;
        color: #8b5cf6;
        opacity: 0.7;
    }

    /* Stagger the appearance */
    .catalog-cell:nth-child(1) { animation-delay: 0s; }
    .catalog-cell:nth-child(2) { animation-delay: 0.1s; }
    .catalog-cell:nth-child(3) { animation-delay: 0.2s; }
    .catalog-cell:nth-child(4) { animation-delay: 0.3s; }
    .catalog-cell:nth-child(5) { animation-delay: 0.4s; }
    .catalog-cell:nth-child(6) { animation-delay: 0.5s; }
    .catalog-cell:nth-child(7) { animation-delay: 0.6s; }
    .catalog-cell:nth-child(8) { animation-delay: 0.7s; }
    .catalog-cell:nth-child(9) { animation-delay: 0.8s; }
    .catalog-cell:nth-child(10) { animation-delay: 0.9s; }
    .catalog-cell:nth-child(11) { animation-delay: 1s; }
    .catalog-cell:nth-child(12) { animation-delay: 1.1s; }

    @keyframes catalogFadeIn {
        0%, 100% {
            opacity: 0;
            transform: scale(0.9);
        }
        15%, 90% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Collection badge */
    .collection-badge {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
        border: 1.5px solid rgba(139, 92, 246, 0.4);
        border-radius: 10px;
        font-size: 9px;
        font-weight: 700;
        color: #8b5cf6;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
        z-index: 10;
    }

    .collection-badge i {
        font-size: 8px;
        margin-right: 4px;
    }

    /* Outfit count badge */
    .outfit-count-badge {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
        border: 1.5px solid rgba(139, 92, 246, 0.4);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 800;
        color: #8b5cf6;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
        z-index: 10;
    }

    /* Room Card Viewer - Room Exploration & Asset Extraction */
    .visual-room-card {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .room-card-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* Room card with thumbnail */
    .room-mockup {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 130px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(236, 72, 153, 0.04));
        border: 2px solid rgba(236, 72, 153, 0.5);
        border-radius: 12px;
        position: relative;
        overflow: visible;
        box-shadow:
            0 0 30px rgba(236, 72, 153, 0.3),
            inset 0 0 20px rgba(236, 72, 153, 0.08);
        z-index: 2;
        display: flex;
        flex-direction: column;
    }

    .room-mockup::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2px solid rgba(236, 72, 153, 0.3);
        border-radius: 12px;
        animation: roomCardPulse 3s ease-in-out infinite;
    }

    @keyframes roomCardPulse {
        0%, 100% {
            opacity: 0;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.08);
        }
    }

    /* Room thumbnail area */
    .room-thumbnail {
        width: calc(100% - 16px);
        height: 60px;
        margin: 8px 8px 0 8px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.08));
        border: 1.5px solid rgba(236, 72, 153, 0.4);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 15px rgba(236, 72, 153, 0.15);
    }

    .room-thumbnail i {
        font-size: 24px;
        color: #ec4899;
        opacity: 0.6;
        filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.5));
    }

    /* Shimmer effect on thumbnail */
    .room-thumbnail::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        animation: thumbnailShimmer 3s linear infinite;
    }

    @keyframes thumbnailShimmer {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    /* Room info section */
    .room-info-section {
        flex: 1;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .room-info-line {
        height: 5px;
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.4), rgba(236, 72, 153, 0.1));
        border-radius: 2px;
        opacity: 0;
        animation: infoLineLoad 3s ease-in-out infinite;
    }

    .info-line-1 {
        width: 80%;
        animation-delay: 0.2s;
    }

    .info-line-2 {
        width: 60%;
        animation-delay: 0.4s;
    }

    .info-line-3 {
        width: 70%;
        animation-delay: 0.6s;
    }

    .info-line-4 {
        width: 50%;
        animation-delay: 0.8s;
    }

    @keyframes infoLineLoad {
        0%, 100% {
            opacity: 0.3;
        }
        50% {
            opacity: 0.8;
        }
    }

    /* Room title label */
    .room-title-label {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 3px 8px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(236, 72, 153, 0.08));
        border: 1.5px solid rgba(236, 72, 153, 0.5);
        border-radius: 8px;
        font-size: 8px;
        font-weight: 700;
        color: #ec4899;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
        z-index: 10;
    }

    /* Info badges floating around */
    .info-badge {
        position: absolute;
        padding: 3px 8px;
        background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.05));
        border: 1.5px solid rgba(236, 72, 153, 0.4);
        border-radius: 8px;
        font-size: 8px;
        font-weight: 700;
        color: #ec4899;
        white-space: nowrap;
        opacity: 0;
        animation: badgeFloat 4s ease-in-out infinite;
        box-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .info-badge i {
        font-size: 7px;
    }

    .badge-capacity {
        top: 8%;
        left: 3%;
        animation-delay: 0s;
    }

    .badge-rating {
        top: 8%;
        right: 3%;
        animation-delay: 1s;
    }

    .badge-id {
        bottom: 8%;
        left: 3%;
        animation-delay: 2s;
    }

    .badge-status {
        bottom: 8%;
        right: 3%;
        animation-delay: 3s;
    }

    @keyframes badgeFloat {
        0%, 100% {
            opacity: 0;
            transform: translateY(3px) scale(0.9);
        }
        15%, 85% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* CID/Avatar Name - Bidirectional Lookup */
    .visual-search-lookup {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .lookup-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* Combined lookup box */
    .lookup-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 160px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
        border: 2px solid rgba(59, 130, 246, 0.5);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
        z-index: 5;
        animation: lookupPulse 3s ease-in-out infinite;
    }

    @keyframes lookupPulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            border-color: rgba(59, 130, 246, 0.5);
        }
        50% {
            box-shadow: 0 0 35px rgba(59, 130, 246, 0.5);
            border-color: rgba(59, 130, 246, 0.7);
        }
    }

    /* CID Section (top half) */
    .cid-section {
        padding: 12px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
        border-bottom: 2px solid rgba(59, 130, 246, 0.3);
        text-align: center;
    }

    .cid-label {
        font-size: 8px;
        font-weight: 700;
        color: rgba(59, 130, 246, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 4px;
    }

    .cid-value {
        font-size: 15px;
        font-weight: 800;
        color: #3b82f6;
        text-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
        animation: valuePulse 3s ease-in-out infinite;
    }

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

    /* Divider with swap icon */
    .lookup-divider {
        position: relative;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
    }

    .swap-icon {
        width: 20px;
        height: 20px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
        border: 2px solid rgba(147, 197, 253, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
        animation: swapRotate 4s ease-in-out infinite;
    }

    .swap-icon i {
        font-size: 9px;
        color: #3b82f6;
        filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.8));
    }

    @keyframes swapRotate {
        0%, 85% {
            transform: rotate(0deg);
        }
        90%, 100% {
            transform: rotate(180deg);
        }
    }

    /* Name Section (bottom half) */
    .name-section {
        padding: 12px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
        text-align: center;
    }

    .name-label {
        font-size: 8px;
        font-weight: 700;
        color: rgba(16, 185, 129, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 4px;
    }

    .name-value {
        font-size: 15px;
        font-weight: 800;
        color: #10b981;
        text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        animation: valuePulse 3s ease-in-out infinite 0.5s;
    }

    /* Search badge */
    .search-badge {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 28px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
        border: 2px solid rgba(59, 130, 246, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        animation: searchPulse 2.5s ease-in-out infinite;
        z-index: 15;
    }

    .search-badge i {
        font-size: 12px;
        color: #3b82f6;
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.8));
    }

    @keyframes searchPulse {
        0%, 100% {
            transform: translateX(-50%) scale(1);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        50% {
            transform: translateX(-50%) scale(1.1);
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
        }
    }

    /* Speed badge */
    .speed-badge {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.08));
        border: 1.5px solid rgba(59, 130, 246, 0.5);
        border-radius: 12px;
        font-size: 9px;
        font-weight: 700;
        color: #3b82f6;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
        animation: speedBlink 2.5s ease-in-out infinite;
        z-index: 15;
    }

    .speed-badge i {
        font-size: 8px;
        margin-right: 4px;
    }

    @keyframes speedBlink {
        0%, 100% {
            opacity: 0.8;
        }
        50% {
            opacity: 1;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
        }
    }

    .search-box {
        width: 180px;
        height: 40px;
        background: rgba(59, 130, 246, 0.1);
        border: 2px solid rgba(59, 130, 246, 0.3);
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    .search-box::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
        animation: searchScan 2s linear infinite;
    }

    @keyframes searchScan {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    /* Creator Product Catalog - Browse Creator Items */
    .visual-product-catalog {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .product-catalog-container {
        position: relative;
        width: 240px;
        height: 180px;
        overflow: hidden !important;
    }

    /* Search bar */
    .creator-search-bar {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 40px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
        border: 2px solid rgba(16, 185, 129, 0.5);
        border-radius: 20px;
        display: flex;
        align-items: center;
        padding: 0 14px;
        gap: 10px;
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
        z-index: 5;
    }

    .search-icon-circle {
        width: 22px;
        height: 22px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
        border: 1.5px solid rgba(16, 185, 129, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .search-icon-circle i {
        font-size: 10px;
        color: #10b981;
        filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.8));
    }

    .search-text-input {
        flex: 1;
        font-size: 13px;
        font-weight: 700;
        color: #10b981;
        text-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
        opacity: 0;
        animation: searchTyping 4s ease-in-out infinite;
    }

    @keyframes searchTyping {
        0%, 100% {
            opacity: 0;
        }
        20%, 80% {
            opacity: 1;
        }
    }

    /* Shimmer effect on search bar */
    .creator-search-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        animation: searchShimmer 3s linear infinite;
    }

    @keyframes searchShimmer {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    /* Product grid below */
    .creator-product-grid {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        width: 160px;
        z-index: 2;
    }

    .creator-product-item {
        aspect-ratio: 1;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
        border: 1.5px solid rgba(16, 185, 129, 0.4);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: itemFadeIn 3s ease-in-out infinite;
    }

    .creator-product-item i {
        font-size: 14px;
        color: #10b981;
        opacity: 0.7;
    }

    .creator-product-item:nth-child(1) { animation-delay: 0.3s; }
    .creator-product-item:nth-child(2) { animation-delay: 0.4s; }
    .creator-product-item:nth-child(3) { animation-delay: 0.5s; }
    .creator-product-item:nth-child(4) { animation-delay: 0.6s; }

    @keyframes itemFadeIn {
        0%, 100% {
            opacity: 0;
            transform: scale(0.9);
        }
        30%, 90% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Creator badge at top */
    .creator-badge {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
        border: 1.5px solid rgba(16, 185, 129, 0.4);
        border-radius: 10px;
        font-size: 9px;
        font-weight: 700;
        color: #10b981;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
        z-index: 10;
    }

    .creator-badge i {
        font-size: 8px;
        margin-right: 4px;
    }

    /* Items found badge */
    .items-found-badge {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 10px;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
        border: 1.5px solid rgba(16, 185, 129, 0.4);
        border-radius: 10px;
        font-size: 10px;
        font-weight: 800;
        color: #10b981;
        white-space: nowrap;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
        z-index: 10;
    }

    /* Feed Viewer - Live Activity Stream */
    .visual-feed-activity {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
        overflow: hidden;
    }

    .feed-activity-container {
        position: relative;
        width: 100%;
        max-width: 280px;
        height: 160px;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;
        gap: 12px;
        padding-top: 30px;
    }

    /* Individual feed post items */
    .feed-post-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04));
        border: 1.5px solid rgba(245, 158, 11, 0.3);
        border-radius: 10px;
        opacity: 0;
        transform: translateX(-30px);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
        position: relative;
    }

    .post-avatar {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.1));
        border: 2px solid rgba(245, 158, 11, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .post-avatar i {
        font-size: 14px;
        color: #f59e0b;
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
    }

    .post-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .post-line {
        height: 6px;
        background: linear-gradient(90deg, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0.1));
        border-radius: 3px;
        position: relative;
        overflow: hidden;
    }

    .post-line.line-1 {
        width: 80%;
    }

    .post-line.line-2 {
        width: 60%;
    }

    /* Shimmer effect on content lines */
    .post-line::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent);
        animation: lineShimmer 2s linear infinite;
    }

    @keyframes lineShimmer {
        0% { left: -100%; }
        100% { left: 100%; }
    }

    .post-timestamp {
        font-size: 8px;
        font-weight: 700;
        color: rgba(245, 158, 11, 0.7);
        white-space: nowrap;
    }

    /* Stagger post animations */
    .post-1 {
        animation: postSlideIn 3s ease-in-out infinite;
        animation-delay: 0s;
    }

    .post-2 {
        animation: postSlideIn 3s ease-in-out infinite;
        animation-delay: 0.4s;
    }

    .post-3 {
        animation: postSlideIn 3s ease-in-out infinite;
        animation-delay: 0.8s;
    }

    @keyframes postSlideIn {
        0%, 10% {
            opacity: 0;
            transform: translateX(-30px);
        }
        15%, 95% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateX(30px);
        }
    }

    /* Live indicator at top - for feed activity visual only */
    .visual-feed-activity .feed-live-indicator {
        position: absolute;
        top: 5px;
        left: 50%;
        transform: translateX(-50%);
        padding: 4px 12px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.08));
        border: 1.5px solid rgba(245, 158, 11, 0.5);
        border-radius: 12px;
        font-size: 9px;
        font-weight: 700;
        color: #f59e0b;
        white-space: nowrap;
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        animation: feedLivePulse 2s ease-in-out infinite;
        z-index: 10;
    }

    .visual-feed-activity .feed-live-indicator i {
        font-size: 7px;
        margin-right: 5px;
        color: #ef4444;
        animation: liveDot 1.5s ease-in-out infinite;
    }

    @keyframes feedLivePulse {
        0%, 100% {
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
        }
        50% {
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
        }
    }

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

    /* Scroll indicator */
    .scroll-indicator {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
        border: 1.5px solid rgba(245, 158, 11, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scrollBounce 2s ease-in-out infinite;
        z-index: 10;
    }

    .scroll-indicator i {
        font-size: 10px;
        color: #f59e0b;
    }

    @keyframes scrollBounce {
        0%, 100% {
            transform: translateX(-50%) translateY(0);
        }
        50% {
            transform: translateX(-50%) translateY(3px);
        }
    }

    /* Tool Content */
    .tool-content {
        padding: 28px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

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

    .tool-title-group {
        flex: 1;
    }

    /* Tool Titles - Clean Style */
    .tool-name {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 4px;
        letter-spacing: -0.3px;
        color: #e0e7ff;
        position: relative;
        transition: color 0.3s ease;
    }

    /* Subtle color change on hover */
    .tool-card:hover .tool-name {
        color: #ffffff;
    }

    /* PREMIUM TOOLS - Purple accent */
    .tool-category:first-child .tool-name {
        color: #c4b5fd;
        transition: color 0.3s ease;
    }

    .tool-category:first-child .tool-card:hover .tool-name {
        color: #e9d5ff;
    }

    /* Historical Services - Green accent */
    .tool-category:nth-child(2) .tool-name {
        color: #a7f3d0;
        transition: color 0.3s ease;
    }

    .tool-category:nth-child(2) .tool-card:hover .tool-name {
        color: #d1fae5;
    }

    /* Additional Tools - Purple accent */
    .tool-category:nth-child(3) .tool-name {
        color: #ddd6fe;
        transition: color 0.3s ease;
    }

    .tool-category:nth-child(3) .tool-card:hover .tool-name {
        color: #f3e8ff;
    }

    .tool-tagline {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .tool-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .badge-premium {
        background: rgba(100, 108, 255, 0.15);
        color: #646cff;
        border: 1px solid rgba(100, 108, 255, 0.3);
    }

    .badge-premium:hover {
        background: rgba(100, 108, 255, 0.25);
        border-color: rgba(100, 108, 255, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 0 15px rgba(100, 108, 255, 0.4);
    }

    .badge-free {
        background: rgba(16, 185, 129, 0.1);
        color: var(--success);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .badge-beta {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .badge-coming-soon {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    /* Tool Description - Subtle enhancement */
    .tool-description {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 20px;
        min-height: 120px; /* Minimum 5 lines */
    }

    .tool-description strong {
        font-weight: 600;
    }

    .tool-category:first-child .tool-description strong {
        color: #e5e7eb;
        font-weight: 600;
    }

    .tool-category:first-child .tool-card:hover .tool-description {
        color: #b8b8d1;
    }

    /* Tool Metrics - RE-ANIMATE ON HOVER */
    .tool-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
        margin-top: auto; /* Push to consistent position */
    }

    .metric {
        text-align: center;
        position: relative;
        transition: all 0.3s ease;
    }

    .tool-card:hover .metric {
        transform: translateY(-2px);
    }

    /* Animate ALL metric values on hover (not just ones with data-animate) */
    .tool-card:hover .metric-value {
        animation: metricPulse 0.6s ease-in-out;
    }

    @keyframes metricPulse {
        0%, 100% {
            transform: scale(1);
            color: var(--text-primary);
        }
        50% {
            transform: scale(1.1);
            color: var(--accent);
            text-shadow: 0 0 10px rgba(100, 108, 255, 0.5);
        }
    }

    .metric-value {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 4px;
        transition: all 0.3s ease;
        position: relative;
    }

    .metric-value.counting {
        color: var(--accent);
        animation: metricGlow 0.5s ease-in-out;
    }

    @keyframes metricGlow {
        0%, 100% {
            text-shadow: 0 0 5px rgba(100, 108, 255, 0.3);
        }
        50% {
            text-shadow: 0 0 15px rgba(100, 108, 255, 0.6),
                         0 0 25px rgba(100, 108, 255, 0.4);
            transform: scale(1.1);
        }
    }

    .metric-value::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--accent);
        transition: width 0.6s ease;
    }

    .metric-value.counting::after {
        width: 100%;
    }

    /* Underline appears on hover too */
    .tool-card:hover .metric-value::after {
        width: 100%;
    }

    .metric-label {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
    }

    .tool-card:hover .metric-label {
        color: var(--accent);
    }

    /* Premium Note */
    .premium-note {
        margin-top: 16px;
        padding: 12px;
        background: rgba(245, 158, 11, 0.05);
        border: 1px solid rgba(245, 158, 11, 0.1);
        border-radius: 8px;
        font-size: 13px;
        color: var(--warning);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ANIMATED ACCESS BUTTON */
    .tool-action {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--border);
    }

    .access-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 14px 20px;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow: none;
        gap: 10px;
        white-space: nowrap;
        min-height: 48px;
    }

    /* Removed glowing pulse animation for cleaner look */
    .access-btn > * {
        position: relative;
    }

    .access-btn:hover {
        background: var(--accent-dim);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Icon animation */
    .access-btn i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        flex-shrink: 0;
        width: auto;
        height: auto;
        line-height: 1;
    }
    
    /* Ensure text is properly styled */
    .access-btn {
        line-height: 1.2;
    }
    
    .access-btn > span {
        flex: 0 1 auto;
        text-align: center;
    }

    .access-btn:hover i {
        transform: translateX(5px);
    }

    /* Disabled state */
    .access-btn.disabled {
        background: var(--bg-hover);
        cursor: not-allowed;
        opacity: 0.5;
        animation: none;
    }

    .access-btn.disabled:hover {
        transform: none;
        box-shadow: none;
        animation: none;
    }

    /* Premium button extra effects */
    .tool-category:first-child .access-btn {
        background: linear-gradient(135deg, #646cff, #7c3aed);
    }

    .tool-category:first-child .access-btn:hover {
        background: linear-gradient(135deg, #7c3aed, #646cff);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Pricing Section */
    .pricing-section {
        padding: 80px 24px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .pricing-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 32px;
    }
    
    @media (max-width: 768px) {
        .pricing-section {
            padding: 50px 16px;
        }
        
        .pricing-header {
            margin-bottom: 40px;
        }
        
        .pricing-header .section-title {
            font-size: 26px;
        }
        
        .pricing-header .section-subtitle {
            font-size: 14px;
        }
    }
    
    @media (max-width: 480px) {
        .pricing-section {
            padding: 40px 12px;
        }
        
        .pricing-header {
            margin-bottom: 30px;
        }
        
        .pricing-header .section-title {
            font-size: 22px;
        }
    }

    .pricing-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 32px;
        position: relative;
    }

    .pricing-card.featured {
        border-color: var(--accent);
        transform: scale(1.05);
    }

    .pricing-card.featured::before {
        content: 'RECOMMENDED';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--accent);
        color: white;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .price {
        font-size: 48px;
        font-weight: 700;
        margin: 20px 0;
    }

    .price-period {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 400;
    }

    /* Footer */
    .footer {
        padding: 60px 24px 40px;
        text-align: center;
        border-top: 1px solid var(--border);
        margin-top: 100px;
    }

    .footer-text {
        color: var(--text-muted);
        font-size: 14px;
    }

    /* ===== COMPREHENSIVE MOBILE RESPONSIVE ===== */
    
    @media (max-width: 1024px) {
        .showcase-wrapper {
            padding: 40px 0;
        }
        
        .showcase-container {
            padding: 0 20px;
        }
        
        .tools-grid {
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 24px;
            padding: 12px;
            margin: -12px;
        }
        
        .section-header {
            margin-bottom: 40px;
            padding: 30px 0;
        }
        
        .section-title {
            font-size: 36px;
        }
    }

    @media (max-width: 768px) {
        .showcase-wrapper {
            padding: 30px 0;
        }
        
        .showcase-container {
            padding: 0 16px;
        }
        
        .tools-grid {
            grid-template-columns: 1fr;
            gap: 16px;
            padding: 12px;
            margin: -12px;
        }
        
        .section-header {
            margin-bottom: 30px;
            padding: 20px 0;
        }
        
        .section-title {
            font-size: 28px;
        }
        
        .section-subtitle {
            font-size: 14px;
        }
        
        .section-label {
            font-size: 10px;
        }

        .tool-card {
            border-radius: 12px;
        }

        .tool-visual {
            height: 200px;
            /* Prevent visual elements from capturing touch scroll events */
            touch-action: pan-y;
            -webkit-overflow-scrolling: auto;
        }

        /* Disable pointer events on all animated visual containers on mobile */
        .tool-visual > div {
            pointer-events: none;
        }

        .tool-content {
            padding: 24px 20px;
        }

        .tool-name {
            font-size: 20px;
        }

        .tool-tagline {
            font-size: 14px;
        }

        .tool-description {
            font-size: 13px;
            line-height: 1.5;
        }

        .tool-metrics {
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .metric-value {
            font-size: 14px;
        }

        .metric-label {
            font-size: 9px;
        }

        .access-btn {
            padding: 12px 20px;
            font-size: 13px;
        }

        .premium-note {
            font-size: 11px;
            padding: 10px 12px;
        }

        /* Pricing section mobile */
        .pricing-grid {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 0 16px;
        }

        .pricing-card {
            padding: 30px 24px;
        }

        .pricing-card.featured {
            transform: none;
        }

        .pricing-card h3 {
            font-size: 22px;
        }

        .price {
            font-size: 42px;
        }

        /* Footer mobile */
        .footer {
            margin-top: 60px;
            padding: 30px 16px;
        }

        .footer-text {
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {
        .showcase-container {
            padding: 0 12px;
        }
        
        .tools-grid {
            gap: 14px;
            padding: 12px;
            margin: -12px;
        }
        
        .section-header {
            margin-bottom: 24px;
            padding: 16px 0;
        }
        
        .section-title {
            font-size: 24px;
        }
        
        .section-subtitle {
            font-size: 13px;
        }

        .tool-visual {
            height: 180px;
            /* Prevent visual elements from capturing touch scroll events */
            touch-action: pan-y;
        }

        .tool-content {
            padding: 20px 18px;
        }

        .tool-name {
            font-size: 18px;
        }

        .tool-tagline {
            font-size: 13px;
        }

        .tool-description {
            font-size: 13px;
            line-height: 1.6;
        }

        .tool-metrics {
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
        }

        .metric {
            padding: 8px 4px;
        }

        .metric-value {
            font-size: 12px;
        }

        .metric-label {
            font-size: 8px;
        }

        .access-btn {
            padding: 10px 16px;
            font-size: 12px;
        }

        .premium-note {
            font-size: 10px;
            padding: 8px 10px;
        }

        .pricing-card {
            padding: 24px 20px;
        }

        .price {
            font-size: 36px;
        }
    }

    /* Touch-friendly improvements */
    @media (hover: none) and (pointer: coarse) {
        .tool-card:hover {
            transform: none;
        }
        
        .tool-card:active {
            transform: scale(0.98);
        }
        
        .nav-link:hover::before {
            opacity: 0;
        }
        
        .nav-link:active::before {
            opacity: 1;
        }
        
        .access-btn:hover {
            transform: none;
        }
        
        .access-btn:active {
            transform: scale(0.98);
        }
    }

/* ===== ARCHIVE STATISTICS SECTION ===== */
.stats-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(100, 108, 255, 0.03) 50%, var(--bg-primary) 100%);
    position: relative;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #646cff, transparent);
}

.stats-header {
    text-align: center;
    margin-bottom: 50px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.stats-card {
    background: linear-gradient(145deg, rgba(26, 29, 35, 0.9), rgba(18, 21, 26, 0.95));
    border: 1px solid rgba(100, 108, 255, 0.15);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stats-card:hover {
    border-color: rgba(100, 108, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(100, 108, 255, 0.15);
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #646cff, #ec4899, #646cff);
    background-size: 200% 100%;
    animation: gradientShift 4s ease infinite;
}

.stats-card.current-scan::before {
    background: linear-gradient(90deg, #10b981, #14b8a6, #10b981);
    background-size: 200% 100%;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stats-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.stats-card-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

@keyframes livePulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.3);
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
    }
}

.monthly-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(100, 108, 255, 0.12);
    border: 1px solid rgba(100, 108, 255, 0.25);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: #646cff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stats-grid.totals-grid {
    grid-template-columns: repeat(3, 1fr);
}

.stat-item {
    text-align: center;
    padding: 18px 12px;
    background: rgba(100, 108, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(100, 108, 255, 0.08);
    transition: all 0.3s ease;
}

.current-scan .stat-item {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.08);
}

.stat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(100, 108, 255, 0.2);
    background: rgba(100, 108, 255, 0.08);
}

.current-scan .stat-item:hover {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.08);
}

.stat-icon {
    font-size: 1.3rem;
    color: #646cff;
    margin-bottom: 10px;
    opacity: 0.9;
}

.current-scan .stat-icon {
    color: #10b981;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
    font-weight: 500;
}

.scan-speed {
    margin-top: 18px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(20, 184, 166, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.scan-speed i {
    color: #10b981;
    margin-right: 10px;
}

.scan-speed span {
    font-weight: 700;
    color: #fff;
    font-size: 1.3rem;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

.stats-cta {
    text-align: center;
    margin-top: 40px;
}

.pricing-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(100, 108, 255, 0.1), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(100, 108, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pricing-link:hover {
    background: linear-gradient(135deg, rgba(100, 108, 255, 0.2), rgba(236, 72, 153, 0.2));
    border-color: rgba(100, 108, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(100, 108, 255, 0.2);
}

.pricing-link i:first-child {
    color: #f59e0b;
}

.pricing-link i:last-child {
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.pricing-link:hover i:last-child {
    transform: translateX(4px);
}

/* Stats Section Responsive */
@media (max-width: 900px) {
    .stats-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .stats-section {
        padding: 60px 16px;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid.totals-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stat-value {
        font-size: 1.2rem;
    }
    
    .stat-icon {
        font-size: 1.1rem;
    }
    
    .stat-label {
        font-size: 9px;
    }
    
    .stats-card {
        padding: 20px;
    }
    
    .scan-speed span {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .stats-grid.totals-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .stat-item {
        padding: 14px 8px;
    }
    
    .stat-value {
        font-size: 1rem;
    }
}