:root {
            --trust-blue: #2F6BFF;
            --teal-green: #2CB1BC;
            --warm-amber: #FFB703;
            --charcoal: #1A1A1A;
            --neutral-gray: #666666;
            --mist-gray: #F4F6F8;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
            color: var(--charcoal);
            overflow-x: hidden;
        }

        h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
        .mono { font-family: 'Roboto Mono', monospace; }

        /* Smooth Page Transitions */
        .page-view { display: none; opacity: 0; }
        .page-view.active { display: block; opacity: 1; animation: pageFadeIn 0.6s ease-out forwards; }

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

        /* Hero Background Animation */
        .hero-bg {
            background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
            position: relative;
            overflow: hidden;
        }
        .hero-circle {
            position: absolute;
            border-radius: 50%;
            background: var(--trust-blue);
            filter: blur(80px);
            opacity: 0.05;
            animation: float 20s infinite alternate;
        }

        @keyframes float {
            0% { transform: translate(0, 0); }
            100% { transform: translate(100px, 50px); }
        }

        /* Editorial Elements */
        .editorial-card {
            background: white;
            border: 1px solid #e5e7eb;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .editorial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.06);
            border-color: var(--trust-blue);
        }

        .btn-amber {
            background-color: var(--warm-amber);
            color: var(--charcoal);
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 700;
            transition: all 0.3s;
        }
        .btn-amber:hover { transform: scale(1.03); filter: brightness(1.05); }

        .nav-link {
            position: relative;
            font-weight: 500;
            color: var(--neutral-gray);
            transition: color 0.3s;
        }
        .nav-link:hover, .nav-link.active { color: var(--trust-blue); }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 2px;
            background: var(--trust-blue);
            transition: width 0.3s;
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }

        /* Comparison Basket Badge */
        .basket-badge {
            position: absolute;
            top: -5px; right: -8px;
            background: var(--warm-amber);
            color: var(--charcoal);
            font-size: 10px;
            font-weight: 800;
            width: 18px; height: 18px;
            display: flex; items-center; justify-content: center;
            border-radius: 50%;
        }

        /* Custom Modal */
        .modal-overlay {
            backdrop-filter: blur(4px);
            background: rgba(26, 26, 26, 0.8);
        }
        .nav-link {
    @apply text-sm font-semibold text-charcoal hover:text-blue-600 transition;
}

.basket-badge {
    @apply absolute -top-2 -right-2 bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full;
}
#qv-scroll::-webkit-scrollbar {
    width: 6px;
}

#qv-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
}