@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700;900&display=swap');

        body {
            font-family: 'Inter', system-ui, sans-serif;
        }

        .heading-font {
            font-family: 'Space Grotesk', sans-serif;
        }

        .logo-card {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .logo-card:hover {
            transform: translateY(-14px) scale(1.04);
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25);
        }

        .award-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: linear-gradient(135deg, #facc15, #eab308);
            color: #1f2937;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 9999px;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15);
            letter-spacing: 0.5px;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            filter: blur(14px) brightness(0.85);
            opacity: 0.12;
            z-index: -1;
        }

        .nav-link {
            transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-link:hover {
            color: rgb(124 58 237);
        }

        :root {
            --bg: #fafafa;
            --surface: #ffffff;
            --surface-soft: #f4f4f5;
            --text: #18181b;
            --text-soft: #52525b;
            --line: #e4e4e7;
            --header-bg: #18181b;
            --header-text: #ffffff;
            --input-bg: #ffffff;
            --input-text: #18181b;
            --input-line: #e4e4e7;
            --chip-bg: #f4f4f5;
            --chip-text: #52525b;
            --footer-bg: #18181b;
            --footer-text: #a1a1aa;
        }

        html.dark-mode {
            --bg: #0e1018;
            --surface: #151925;
            --surface-soft: #101420;
            --text: #f4f4f5;
            --text-soft: #a1a1aa;
            --line: #2f3548;
            --header-bg: #090b12;
            --header-text: #f4f4f5;
            --input-bg: #1a1f2d;
            --input-text: #f4f4f5;
            --input-line: #36405b;
            --chip-bg: #1d2333;
            --chip-text: #d4d4d8;
            --footer-bg: #0a0c13;
            --footer-text: #9ca3af;
        }

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

        .app-header {
            background: var(--header-bg) !important;
            color: var(--header-text) !important;
            border-bottom-color: color-mix(in oklab, var(--line) 42%, transparent) !important;
        }

        .search-shell {
            background: var(--input-bg) !important;
            border: 1px solid var(--input-line) !important;
        }

        .search-shell input {
            color: var(--input-text) !important;
        }

        .top-cta {
            background: var(--surface) !important;
            color: var(--text) !important;
            border: 1px solid var(--line) !important;
        }

        .theme-btn,
        .menu-btn {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            border: 1px solid color-mix(in oklab, var(--header-text) 20%, transparent);
            background: color-mix(in oklab, var(--header-bg) 78%, white 22%);
            color: var(--header-text);
        }

        .hero-shell,
        .vault-shell,
        .final-shell {
            background: var(--surface) !important;
            border-color: var(--line) !important;
        }

        .hero-title,
        .section-title,
        .final-title {
            color: var(--text) !important;
        }

        .hero-sub,
        .section-sub,
        .value-sub,
        .footer-copy {
            color: var(--text-soft) !important;
        }

        .filter-btn {
            background: var(--chip-bg) !important;
            color: var(--chip-text) !important;
            border: 1px solid var(--line) !important;
        }

        .filter-btn.active {
            background: #7c3aed !important;
            color: #fff !important;
            border-color: #7c3aed !important;
        }

        .logo-card {
            background: var(--surface) !important;
            border: 1px solid var(--line) !important;
        }

        .logo-card .logo-frame {
            background: var(--surface-soft) !important;
        }

        .logo-name {
            color: var(--text) !important;
        }

        .logo-meta {
            color: var(--text-soft) !important;
        }

        .pager-btn {
            border: 1px solid var(--line) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
        }

        .pager-meta {
            color: var(--text-soft) !important;
        }

        .footer-shell {
            background: var(--footer-bg) !important;
            color: var(--footer-text) !important;
        }

        .footer-link {
            color: var(--footer-text) !important;
        }

        .footer-link:hover {
            color: #ffffff !important;
        }

        .value-shell {
            background: var(--surface-soft) !important;
            color: var(--text) !important;
            border-top: 1px solid var(--line) !important;
            border-bottom: 1px solid var(--line) !important;
        }

        .value-card {
            background: var(--surface) !important;
            border: 1px solid var(--line) !important;
            color: var(--text) !important;
        }

        .value-card:hover {
            background: color-mix(in oklab, var(--surface) 85%, var(--surface-soft) 15%) !important;
        }

        .value-copy {
            color: var(--text-soft) !important;
        }

        .footer-heading {
            color: var(--text) !important;
        }

        @media (max-width: 1024px) {
            .header-wrap {
                padding: 1rem 1rem !important;
                gap: 0.75rem;
            }

            .search-wrap {
                order: 3;
                flex-basis: 100%;
                max-width: 100% !important;
                margin: 0 !important;
            }

            .nav-wrap {
                position: absolute;
                top: 84px;
                left: 1rem;
                right: 1rem;
                display: none !important;
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
                background: var(--surface);
                border: 1px solid var(--line);
                border-radius: 16px;
                padding: 0.6rem;
                box-shadow: 0 20px 36px rgba(0, 0, 0, 0.2);
            }

            .nav-wrap.open {
                display: flex !important;
            }

            .nav-wrap .nav-link,
            .nav-wrap .top-cta {
                display: block !important;
                padding: 0.75rem 0.9rem;
                border-radius: 12px;
                color: var(--text) !important;
                text-align: left;
            }

            .menu-btn {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
            }

            #logoGrid {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 1rem !important;
            }
        }

        @media (max-width: 640px) {
            body {
                padding-top: 76px !important;
            }

            .hero-content-wrap {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }

            .hero-title {
                font-size: 2.25rem !important;
                line-height: 1.05 !important;
            }

            .hero-sub {
                font-size: 1rem !important;
                max-width: 90% !important;
            }

            #logoGrid {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 0.7rem !important;
            }

            .logo-card {
                padding: 0.75rem !important;
                border-radius: 1rem !important;
            }

            .logo-card .logo-frame {
                height: 120px !important;
            }

            .logo-name {
                font-size: 0.84rem !important;
            }

            .logo-meta {
                font-size: 0.62rem !important;
            }

            .value-grid {
                grid-template-columns: 1fr !important;
            }
        }