/* -- HERO -- */
        .hero { background: linear-gradient(135deg, var(--red) 0%, #8b0f22 100%); padding: 3rem 1.25rem 2.5rem; position: relative; overflow: hidden; }
        .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 28px 28px; }
        .hero-blob { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%); top: -150px; right: -100px; pointer-events: none; }
        .hero-inner { max-width: 1300px; margin: 0 auto; position: relative; z-index: 1; }
        .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.9rem; border-radius: 9999px; margin-bottom: 1rem; }
        .hero-badge .dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; display: inline-block; }
        .hero-title { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; color: white; margin-bottom: 0.4rem; line-height: 1.15; letter-spacing: -0.5px; }
        .hero-subtitle { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-bottom: 1.75rem; }
        .hero-stats { display: flex; gap: 2rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
        .hero-stat strong { display: block; font-size: 1.35rem; font-weight: 800; color: white; }
        .hero-stat span { font-size: 0.74rem; color: rgba(255,255,255,0.72); }

        /* -- SEARCH BAR -- */
        .search-bar { background: white; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.22); overflow: hidden; }
        .search-bar-row { display: grid; grid-template-columns: 1fr auto auto; }
        .search-field { display: flex; align-items: center; gap: 0.75rem; padding: 0 1.25rem; border-right: 1px solid var(--border); min-width: 0; }
        .search-field i { color: var(--muted); flex-shrink: 0; font-size: 0.88rem; }
        .search-field input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 0.95rem; color: var(--text); min-width: 0; background: transparent; padding: 0; height: 58px; }
        .search-field input::placeholder { color: var(--muted-light); }
        .search-select { border: none; border-right: 1px solid var(--border); background: #f4f5f7; font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--text-2); outline: none; cursor: pointer; padding: 0 1.25rem; width: 170px; height: 58px; }
        .search-select:hover { background: #eaecee; }
        .search-submit { background: var(--red); color: white; border: none; padding: 0 2rem; font-family: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.2s; white-space: nowrap; height: 58px; }
        .search-submit:hover { background: var(--red-dark); }

        @media (max-width: 600px) {
            .search-bar { border-radius: 14px; }
            .search-bar-row { grid-template-columns: 1fr; }
            .search-field { border-right: none; border-bottom: 1px solid var(--border); padding: 0 1rem; }
            .search-field input { height: 50px; }
            .search-select { width: 100%; height: 50px; border-right: none; border-bottom: 1px solid var(--border); padding: 0 1rem; }
            .search-submit { height: 50px; }
        }

        /* -- CATEGORY PILLS -- */
        .cats-scroll-outer { overflow: hidden; margin: 0 -1.25rem; padding: 0 1.25rem; -webkit-mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 2rem, black calc(100% - 2rem), transparent 100%); }
        .cats-scroll { display: flex; gap: 0.6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
        .cats-scroll::-webkit-scrollbar { display: none; }
        .cat-pill { text-decoration:none;flex-shrink: 0; background: white; border: 1.5px solid var(--border); border-radius: 9999px; padding: 0.46rem 1rem; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: var(--text-2); font-family: inherit; font-size: 0.80rem; font-weight: 600; transition: all 0.18s; white-space: nowrap; }
        .cat-pill i { font-size: 0.78rem; }
        .cat-pill:hover { border-color: var(--red); color: var(--red); }
        .cat-pill.active { background: var(--red); border-color: var(--red); color: white; box-shadow: 0 2px 8px var(--red-glow); }
        .cat-count { background: rgba(0,0,0,0.07); font-size: 0.69rem; padding: 0.08rem 0.4rem; border-radius: 9999px; font-weight: 700; }
        .cat-pill.active .cat-count { background: rgba(255,255,255,0.25); }

        /* -- CATEGORY GRID -- */
        .cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
        @media (max-width: 480px) { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
        .cat-card { background: white; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.1rem 0.75rem; text-align: center; cursor: pointer; text-decoration: none; color: var(--text); transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
        .cat-card:hover { border-color: var(--red); box-shadow: 0 4px 16px var(--red-glow); transform: translateY(-2px); }
        .cat-card-icon { width: 44px; height: 44px; border-radius: 12px; background: #fef2f2; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 1.1rem; }
        .cat-card-name { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
        .cat-card-count { font-size: 0.71rem; color: var(--muted); }

        /* listings, ads-grid, ad-card -> style.css */