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

        :root {
            --green:        #2E9E3E;
            --green-dark:   #1e7a2c;
            --green-light:  #E8F5EA;
            --yellow:       #F5A623;
            --yellow-dark:  #d4891a;
            --yellow-light: #FFF8EC;
            --blue:         #1A5FA8;
            --blue-light:   #E3EEF9;
            --orange:       #E8650A;
            --orange-light: #FEF0E6;
            --gray:         #8A96A8;
            --gray-light:   #F0F2F6;
            --white:        #ffffff;
            --bg:           #F3F5F9;
            --text:         #18191F;
            --text-2:       #52576B;
            --border:       #E2E6EE;
            --radius:       14px;
            --radius-sm:    9px;
            --shadow:       0 2px 12px rgba(0,0,0,0.3);
            --shadow-md:    0 6px 24px rgba(0,0,0,0.11);
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        a { text-decoration: none; color: inherit; }

        /* ══ DESKTOP LAYOUT ══════════════════════ */
        .desktop-nav {
            display: none;
            position: fixed; top: 0; left: 0; right: 0;
            height: 66px; background: var(--white);
            border-bottom: 1px solid var(--border);
            align-items: center; justify-content: space-between;
            padding: 0 40px; z-index: 300;
            box-shadow: 0 1px 8px rgba(0,0,0,0.05);
        }

        .desktop-logo {
            display: flex; align-items: center; gap: 10px;
        }

        .desktop-logo img {
            height: 40px; object-fit: contain;
        }

        .logo-text {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 24px; color: var(--text);
        }
        .logo-text span { color: var(--yellow); }

        .desktop-links {
            display: flex; align-items: center; gap: 6px;
        }

        .desktop-links a {
            padding: 8px 16px; border-radius: 8px;
            font-size: 14px; font-weight: 600; color: var(--text-2);
            transition: background .15s, color .15s;
        }

        .desktop-links a:hover { background: var(--bg); color: var(--text); }
        .desktop-links a.active { color: var(--green); }

        .desktop-actions { display: flex; align-items: center; gap: 10px; }

        .btn-outline {
            padding: 9px 20px; border-radius: 50px;
            border: 2px solid var(--green); color: var(--green);
            font-size: 14px; font-weight: 700;
            transition: background .15s, color .15s;
        }
        .btn-outline:hover { background: var(--green); color: var(--white); }

        .btn-solid {
            padding: 9px 20px; border-radius: 50px;
            background: var(--green); color: var(--white);
            font-size: 14px; font-weight: 700;
            transition: background .15s, box-shadow .15s;
        }
        .btn-solid:hover { background: var(--green-dark); box-shadow: var(--shadow-md); }

        /* ══ MOBILE TOPBAR ══════════════════════ */
        .mobile-topbar {
            position: fixed; top: 0; left: 0; right: 0;
            height: 62px; background: var(--white);
            border-bottom: 1px solid var(--border);
            display: flex; align-items: center;
            justify-content: space-between;
            padding: 0 18px; z-index: 300;
        }

        .topbar-logo {
            display: flex; align-items: center; gap: 8px;
        }

        .topbar-logo img {
            height: 38px; object-fit: contain;
        }

        .topbar-logo-text {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 22px; color: var(--text);
        }
        .topbar-logo-text span { color: var(--yellow); }

        .topbar-right { display: flex; align-items: center; gap: 10px; }

        .av {
            width: 38px; height: 38px; border-radius: 50%;
            background: var(--green); color: var(--white);
            display: flex; align-items: center; justify-content: center;
            font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px;
            cursor: pointer; overflow: hidden; flex-shrink: 0;
            border: 2px solid var(--green-light);
        }

        /* ══ PAGE WRAP ══════════════════════════ */
        .page {
            padding-top: 6px; /* mobile topbar height */
            padding-bottom: 70px; /* bottom nav */
        }

        /* ══ SEARCH BAR ═════════════════════════ */
        .search-section { padding: 14px 16px 10px; background: var(--white); }

        .search-pill {
            display: flex; align-items: center; gap: 0;
            background: var(--white);
            border-radius: 50px;
            border: 2px solid var(--border);
            height: 50px;
            box-shadow: 0 2px 12px rgba(0,0,0,.06);
            transition: border-color .2s, box-shadow .2s;
            overflow: hidden;
        }
        .search-pill:focus-within {
            border-color: var(--green);
            box-shadow: 0 0 0 4px rgba(46,158,62,.12);
        }

        /* Search icon on left */
        .search-icon-btn {
            width: 50px; height: 50px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: transparent; border: none; cursor: pointer;
            color: var(--gray);
        }

        .search-pill input {
            flex: 1; border: none; background: transparent;
            font-size: 14.5px; font-family: 'DM Sans', sans-serif;
            color: var(--text); outline: none; padding: 0;
            min-width: 0;
        }
        .search-pill input::placeholder { color: var(--gray); }

        /* Divider between input and action buttons */
        .search-divider {
            width: 1px; height: 28px;
            background: var(--border);
            flex-shrink: 0; margin: 0 2px;
        }

        /* Mic button */
        .search-mic-btn {
            width: 44px; height: 44px; border-radius: 50%;
            background: transparent; color: var(--gray);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0; border: none;
            margin: 0 2px;
            transition: background .15s, color .15s;
        }
        .search-mic-btn:hover { background: var(--gray-light); color: var(--text); }
        .search-mic-btn.listening {
            background: var(--red, #D94040) !important;
            color: #fff !important;
            animation: micPulse 1s infinite;
        }
        @keyframes micPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(217,64,64,.45); }
            60%      { box-shadow: 0 0 0 8px rgba(217,64,64,0); }
        }

        /* Search GO button */
        .search-go-btn {
            height: 50px; padding: 0 20px;
            background: var(--green); color: #fff;
            border: none; border-radius: 0 48px 48px 0;
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 13.5px;
            cursor: pointer; flex-shrink: 0;
            display: flex; align-items: center; gap: 6px;
            transition: background .15s;
            white-space: nowrap;
        }
        .search-go-btn:hover { background: var(--green-dark); }
        .search-go-btn:active { transform: scale(.97); }

        /* ══ HERO BANNER ════════════════════════ */
        .hero-wrap { padding: 12px 16px; }

        .hero-banner {
            border-radius: var(--radius);
            position: relative; overflow: hidden;
            min-height: 180px;
            display: flex; flex-direction: column;
            justify-content: flex-end;
            background: #1e7a2c; /* fallback colour while images load */
        }

        /* Each slide image layer */
        .slide-bg {
            position: absolute; inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.2s ease;
            border-radius: var(--radius);
        }

        .slide-bg.active { opacity: 1; }

        /* Gradient overlay — ensures text is legible on any photo */
        .slide-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(
                to right,
                rgba(0,0,0,0.55) 0%,
                rgba(0,0,0,0.30) 60%,
                rgba(0,0,0,0.10) 100%
            );
            border-radius: var(--radius);
            z-index: 1;
        }

        .hero-content {
            position: relative; z-index: 2;
            padding: 20px 20px 22px;
        }

        .hero-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 19px;
            color: var(--white); line-height: 1.25;
            margin-bottom: 5px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.3);
            transition: opacity .4s ease;
        }

        .hero-title span { color: var(--yellow); }

        .hero-sub {
            font-size: 12.5px; color: rgba(255,255,255,0.9);
            line-height: 1.5; margin-bottom: 14px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
            transition: opacity .4s ease;
        }

        .hero-cta {
            display: inline-block;
            background: var(--yellow); color: var(--text);
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 13px;
            padding: 9px 22px; border-radius: 50px;
            transition: background .2s, transform .2s, box-shadow .2s;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        .hero-cta:hover {
            background: var(--yellow-dark);
            transform: scale(1.04);
            box-shadow: 0 5px 16px rgba(0,0,0,0.25);
        }

        /* Carousel dots */
        .hero-dots {
            display: flex; gap: 6px;
            margin-top: 12px; align-items: center;
        }
        .dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: width .35s ease, background .35s ease, border-radius .35s ease;
        }
        .dot.active {
            width: 22px; border-radius: 4px;
            background: var(--white);
        }

        /* Text fade animation on slide change */
        .hero-title.fading, .hero-sub.fading { opacity: 0; }


        /* ══ SECTION HEADER ═════════════════════ */
        .section-head {
            display: flex; align-items: center;
            justify-content: space-between;
            padding: 16px 16px 10px;
        }

        .section-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 17px; color: var(--text);
        }

        .view-all {
            font-size: 13px; font-weight: 600; color: var(--text-2);
        }
        .view-all:hover { color: var(--green); }

        /* ══ CATEGORIES ════════════════════════ */
        .categories-wrap { padding: 0 16px 4px; }

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

        .cat-item {
            border-radius: var(--radius);
            padding: 14px 6px 11px;
            display: flex; flex-direction: column;
            align-items: center; gap: 7px;
            cursor: pointer; text-decoration: none;
            transition: transform .15s, box-shadow .15s;
            box-shadow: var(--shadow-md);
        }
        .cat-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

        .cat-item.green  { background: var(--green); }
        .cat-item.blue   { background: var(--blue); }
        .cat-item.yellow { background: var(--yellow); }
        .cat-item.orange { background: var(--orange); }
        .cat-item.gray   { background: #E8EBF3; }

        .cat-icon { font-size: 26px; line-height: 1; }

        .cat-label {
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 11px;
            color: grey; text-align: center; line-height: 1.25;
        }

        .cat-item.gray .cat-label { color: var(--text-2); }

        /* ══ POPULAR OFFERS ═════════════════════ */
        .offers-scroll {
            display: flex; gap: 12px;
            padding: 0 16px 4px;
            min-height: 300px; 
            max-height:450px;/* or estimated real height */
            contain: layout paint;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .offers-scroll::-webkit-scrollbar { display: none; }

        .offer-card {
            background: white;
            border-radius: var(--radius);
            width: 165px; flex-shrink: 0;
            min-width:145px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform .15s, box-shadow .15s;
            cursor: pointer;
        }
        .offer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

        
        .offer-img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  position: relative;
  z-index: 2;
}

        .offer-img-placeholder {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

        .offer-body { padding: 10px 11px 12px; }

        .offer-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 13px;
            color: var(--text); line-height: 1.3;
            margin-bottom: 4px;
        }

        .offer-price {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 16px;
            color: var(--text); margin-bottom: 5px;
        }

        .offer-price .from {
            font-size: 11px; font-weight: 600;
            color: var(--text-2); vertical-align: middle;
        }

        .offer-seller {
            display: flex; align-items: center; gap: 5px;
            font-size: 11px; color: var(--text-2); margin-bottom: 4px;
        }

        .seller-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--green); flex-shrink: 0;
        }

        .offer-stars {
            display: flex; align-items: center; gap: 3px;
            font-size: 11px; color: var(--yellow-dark);
        }

        .offer-loc {
            font-size: 10.5px; color: var(--gray);
            margin-left: auto; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; max-width: 70px;
        }

        /* ══ BANNER AD / PROMO ══════════════════ */
        .promo-wrap { padding: 10px 16px; }

        .promo-card {
            background: black;
            border-radius: var(--radius);
            padding: 18px 20px;
            display: flex; align-items: center;
            justify-content: space-between; gap: 14px;
        }

        .promo-text {}
        .promo-eyebrow {
            font-size: 11px; color: rgba(255,255,255,0.75);
            font-weight: 600; margin-bottom: 3px;
        }
        .promo-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 17px;
            color: var(--white); margin-bottom: 10px;
        }
        .promo-title span { color: var(--yellow); }
        .promo-btn {
            display: inline-block; background: var(--yellow);
            color: var(--text); font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 13px;
            padding: 8px 18px; border-radius: 50px;
        }
        .promo-icon { font-size: 52px; flex-shrink: 0; }

        /* ══ BOTTOM NAV ═════════════════════════ */
        .bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--white);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:0 4px 2px;z-index:300}
        .bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:700;color:var(--gray);text-decoration:none;padding:4px 8px;border-radius:10px;transition:color .15s,transform .12s;flex:1;min-width:0}
        .bnav-item:active{transform:scale(.92)}
        .bnav-item.active{color:var(--yellow)}
        .bnav-icon{font-size:19px;line-height:1}

        /* ══ INDIVIDUAL vs BUSINESS CARD STYLES ═══════ */

        /* Business card — blue top stripe + border */
        .offer-card.biz {
            border-top: 3px solid #1A5FA8;
            border: 1px solid #c3d8f7;
        }
        .offer-card.biz .offer-img-placeholder {
            background: linear-gradient(135deg, #dbeeff 0%, #e8f0fb 100%);
        }

        /* Individual card — green top stripe */
        .offer-card.ind {
            border-top: 3px solid lightgrey;
        }

        /* Type badge row */
        .card-type-row {
            display: flex; align-items: center; gap: 4px;
            margin-bottom: 5px; flex-wrap: wrap;
        }
        .badge-biz {
            display: inline-flex; align-items: center; gap: 3px;
            background: #E3EEF9; color: #1A5FA8;
            font-family: 'Nunito', sans-serif; font-weight: 800;
            font-size: 9.5px; padding: 2px 7px; border-radius: 20px;
            border: 1px solid #c3d8f7; white-space: nowrap;
        }
        .badge-ind {
            display: inline-flex; align-items: center; gap: 3px;
            background: transparent; color:grey;
            font-family: 'Nunito', sans-serif; font-weight: 800;
            font-size: 9.5px; padding: 2px 7px; border-radius: 20px;
            border: 1px solid rgba(46,158,62,.25); white-space: nowrap;
        }
        .badge-verified {
            display: inline-flex; align-items: center; gap: 2px;
            background: #E8F5EA; color: #1e7a2c;
            font-family: 'Nunito', sans-serif; font-weight: 800;
            font-size: 9px; padding: 2px 6px; border-radius: 20px;
            border: 1px solid rgba(46,158,62,.3);
        }
        .badge-hot {
            background: #D94040; color: #fff;
            font-size: 9px; font-weight: 700;
            padding: 2px 6px; border-radius: 20px;
            font-family: 'Nunito', sans-serif;
        }
        /* Business seller name shows in blue */
        .seller-biz { color: #1A5FA8; font-weight: 700; }
        /* Business dot is blue, individual is green */
        .dot-biz  { background: #1A5FA8 !important; }
        .dot-ind  { background: var(--green) !important; }

        /* ══ FOOTER ════════════════════════════════ */
        .site-footer {
            background: black;
            color: rgba(255,255,255,.7);
            font-size: 13.5px;
        }

        /* Top band — tagline + social */
        .footer-top {
            background: black;
            padding: 32px 20px 24px;
            display: flex; flex-direction: column; align-items: center;
            text-align: center; gap: 14px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .footer-logo {
            display: flex; align-items: center; gap: 10px;
            text-decoration: none; margin-bottom: 2px;
        }
        .footer-logo img { height: 36px; object-fit: contain; }
        .footer-logo-text {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 26px; color: #fff;
        }
        .footer-logo-text span { color: var(--yellow); }
        .footer-tagline {
            font-size: 13.5px; color: rgba(255,255,255,.55);
            line-height: 1.6; max-width: 320px;
        }
        .footer-social {
            display: flex; gap: 10px; margin-top: 4px;
        }
        .social-btn {
            width: 38px; height: 38px; border-radius: 50%;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            display: flex; align-items: center; justify-content: center;
            font-size: 17px; text-decoration: none; color: #fff;
            transition: background .18s, transform .18s;
        }
        .social-btn:hover { background: var(--green); transform: translateY(-2px); }

        /* Link columns */
        .footer-cols {
            padding: 28px 20px 24px;
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 28px 16px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .footer-col-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 13px;
            color: #fff; text-transform: uppercase;
            letter-spacing: .6px; margin-bottom: 12px;
            display: flex; align-items: center; gap: 6px;
        }
        .footer-col-title::after {
            content: ''; flex: 1; height: 1px;
            background: rgba(255,255,255,.1);
        }
        .footer-links { display: flex; flex-direction: column; gap: 9px; }
        .footer-link {
            color: rgba(255,255,255,.6); text-decoration: none;
            font-size: 13px; display: flex; align-items: center; gap: 7px;
            transition: color .15s;
        }
        .footer-link:hover { color: var(--yellow); }
        .footer-link .fl-icon { font-size: 14px; flex-shrink: 0; }

        /* Contact block */
        .footer-contact { display: flex; flex-direction: column; gap: 9px; }
        .contact-row {
            display: flex; align-items: flex-start; gap: 8px;
            font-size: 13px; color: rgba(255,255,255,.6);
        }
        .contact-icon {
            font-size: 14px; flex-shrink: 0; margin-top: 1px;
        }

        /* Newsletter */
        .footer-newsletter {
            padding: 22px 20px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .newsletter-title {
            font-family: 'Nunito', sans-serif;
            font-weight: 800; font-size: 14.5px;
            color: #fff; margin-bottom: 5px;
        }
        .newsletter-sub {
            font-size: 12.5px; color: rgba(255,255,255,.5);
            margin-bottom: 12px;
        }
        .newsletter-form {
            display: flex; gap: 8px;
        }
        .newsletter-input {
            flex: 1; background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 50px; padding: 10px 16px;
            font-family: 'DM Sans', sans-serif; font-size: 13.5px;
            color: #fff; outline: none; min-width: 0;
            transition: border-color .15s;
        }
        .newsletter-input::placeholder { color: rgba(255,255,255,.35); }
        .newsletter-input:focus { border-color: var(--green); }
        .newsletter-btn {
            background: var(--green); color: #fff; border: none;
            border-radius: 50px; padding: 10px 18px;
            font-family: 'Nunito', sans-serif; font-weight: 800;
            font-size: 13px; cursor: pointer; flex-shrink: 0;
            transition: background .15s;
        }
        .newsletter-btn:hover { background: var(--green-dark); }

        /* Stats strip */
        .footer-stats {
            display: grid; grid-template-columns: repeat(3,1fr);
            gap: 0; border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .footer-stat {
            padding: 18px 12px; text-align: center;
            border-right: 1px solid rgba(255,255,255,.08);
        }
        .footer-stat:last-child { border-right: none; }
        .footer-stat-val {
            font-family: 'Nunito', sans-serif;
            font-weight: 900; font-size: 22px; color: var(--yellow);
            line-height: 1; margin-bottom: 4px;
        }
        .footer-stat-lbl {
            font-size: 11px; color: rgba(255,255,255,.45);
            font-weight: 600; line-height: 1.3;
        }

        /* Bottom bar */
        .footer-bottom {
            padding: 16px 20px;
            display: flex; flex-direction: column;
            align-items: center; gap: 10px; text-align: center;
        }
        .footer-bottom-links {
            display: flex; flex-wrap: wrap; gap: 6px 14px;
            justify-content: center;
        }
        .footer-bottom-links a {
            color: rgba(255,255,255,.4); font-size: 12px;
            text-decoration: none; transition: color .15s;
        }
        .footer-bottom-links a:hover { color: #fff; }
        .footer-copy {
            font-size: 11.5px; color: rgba(255,255,255,.3);
        }
        .footer-copy span { color: var(--yellow); }

        /* App badges */
        .app-badges {
            display: flex; gap: 8px; flex-wrap: wrap;
            justify-content: center; margin-top: 4px;
        }
        .app-badge {
            display: flex; align-items: center; gap: 7px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 10px; padding: 8px 14px;
            text-decoration: none; color: #fff;
            transition: background .18s;
        }
        .app-badge:hover { background: rgba(255,255,255,.15); }
        .app-badge-icon { font-size: 20px; }
        .app-badge-text {}
        .app-badge-sub { font-size: 9px; color: rgba(255,255,255,.5); display: block; }
        .app-badge-name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; }

        /* ══ DESKTOP GRID LAYOUT ════════════════ */
        @media (min-width: 769px) {
            .mobile-topbar { display: none; }
            .desktop-nav   { display: flex; }
            .page          { padding-top: 66px; padding-bottom: 0; max-width: 1100px; margin: 0 auto;background:white; }
            .bottom-nav    { display: none; }

            .hero-wrap     { padding: 28px 28px 0; }
            .hero-banner   { min-height: 240px; }
            .hero-title    { font-size: 26px; }
            .hero-content  { padding: 28px 32px 30px; }

            .search-section { padding: 20px 28px 14px; }

            .section-head  { padding: 20px 28px 10px; }
            .categories-wrap { padding: 0 28px 4px; }
            .cat-grid      { 
            grid-template-columns: repeat(9, 1fr); gap: 12px; }

            .offers-scroll { padding: 0 28px 4px; }
            .offer-card    { width: 200px; }
            .offer-img, .offer-img-placeholder { height: 130px; }

            .promo-wrap    { padding: 14px 28px; }

            /* Footer desktop */
            .footer-top     { flex-direction: row; justify-content: space-between; text-align: left; padding: 36px 60px 28px; }
            .footer-tagline { max-width: 360px; }
            .footer-cols    { grid-template-columns: repeat(4,1fr); padding: 32px 60px 28px; gap: 0 32px; }
            .footer-newsletter { padding: 24px 60px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
            .newsletter-title, .newsletter-sub { margin-bottom: 0; }
            .newsletter-form { width: 400px; flex-shrink: 0; }
            .footer-stats   { grid-template-columns: repeat(3,1fr); }
            .footer-stat    { padding: 22px; }
            .footer-stat-val{ font-size: 28px; }
            .footer-bottom  { flex-direction: row; justify-content: space-between; padding: 18px 60px; }
            .footer-copy    { order: -1; }
            .site-footer    { max-width: 100%; }
        }

        /* ══ ANIMATIONS ═════════════════════════ */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(18px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .hero-wrap     { animation: fadeUp .5s ease both; }
        .search-section{ animation: fadeUp .4s ease both; }
        .categories-wrap{ animation: fadeUp .55s .05s ease both; }
        .offers-scroll { animation: fadeUp .55s .1s ease both; }
        .promo-wrap    { animation: fadeUp .55s .15s ease both; }

        .notif-btn{position:relative;width:36px;height:36px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;text-decoration:none}
        .notif-badge{position:absolute;top:1px;right:1px;width:16px;height:16px;border-radius:50%;background:var(--red,#D94040);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;border:2px solid #fff}
        .topbar-right{display:flex;align-items:center;gap:10px}

        /* ══ BRAND LOGO MARQUEE ═══════════════════ */
        .brands-strip {
            padding: 6px 0 10px;
            overflow: hidden;
            position: relative;
            background: var(--white);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }
        .brands-strip::before,
        .brands-strip::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0;
            width: 60px;
            z-index: 2;
            pointer-events: none;
        }
        .brands-strip::before {
            left: 0;
            background: linear-gradient(to right, var(--white), transparent);
        }
        .brands-strip::after {
            right: 0;
            background: linear-gradient(to left, var(--white), transparent);
        }
        .brands-label {
            text-align: center;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: var(--gray);
            padding: 8px 0 6px;
        }
        .brands-track {
            display: flex;
            gap: 0;
            width: max-content;
            animation: brandScroll 28s linear infinite;
        }
        .brands-track:hover { animation-play-state: paused; }
        .brands-inner {
            display: flex;
            align-items: center;
            gap: 0;
        }
        @keyframes brandScroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .brand-logo-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 22px;
            gap: 5px;
            cursor: default;
            transition: transform .2s;
            flex-shrink: 0;
        }
        .brand-logo-item:hover { transform: scale(1.1); }
        .brand-logo-icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
            background: var(--white);
            border: 1.5px solid var(--border);
            position: relative;
            overflow: hidden;
        }
        .brand-logo-icon svg {
            width: 28px; height: 28px;
        }
        .brand-logo-name {
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
            font-size: 9.5px;
            color: var(--text-2);
            letter-spacing: .3px;
        }
        /* Separator dot between brands */
        .brand-sep {
            width: 4px; height: 4px; border-radius: 50%;
            background: var(--border);
            flex-shrink: 0;
            align-self: center;
            margin: 0 2px;
        }

        @media(min-width:769px) {
            .brands-strip::before,
            .brands-strip::after { width: 100px; }
            .brand-logo-item { padding: 10px 28px; }
            .brand-logo-icon { width: 52px; height: 52px; font-size: 28px; border-radius: 14px; }
            .brand-logo-icon svg { width: 34px; height: 34px; }
            .brand-logo-name { font-size: 10.5px; }
        }

        /* ══ LIVE AUCTIONS ═══════════════════════ */
        .auc-header{margin:8px 16px 0;border-radius:14px;background:linear-gradient(135deg,#0f1923 0%,#2d1010 100%);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
        .auc-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(217,64,64,.04) 20px,rgba(217,64,64,.04) 40px)}
        .auc-header-left{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
        .live-pill{display:flex;align-items:center;gap:5px;background:#D94040;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;padding:4px 10px;border-radius:20px;animation:ring 2s infinite}
        @keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(217,64,64,.45)}50%{box-shadow:0 0 0 6px rgba(217,64,64,0)}}
        .live-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
        .auc-header-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;color:#fff;position:relative;z-index:1}
        .auc-header-sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:1px;position:relative;z-index:1}
        .see-auctions-btn{display:inline-flex;align-items:center;gap:5px;background:#F5A623;color:#0f1923;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;padding:7px 14px;border-radius:50px;flex-shrink:0;position:relative;z-index:1;transition:background .15s;text-decoration:none}
        .see-auctions-btn:hover{background:#fbb83a}
        .auctions-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:10px 16px 4px}
        .auctions-scroll::-webkit-scrollbar{display:none}
        .auc-card{flex-shrink:0;width:146px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07);border:1px solid #E2E6EE;cursor:pointer;transition:transform .15s,box-shadow .15s;text-decoration:none;color:inherit;display:block}
        .auc-card:hover{transform:translateY(-3px);box-shadow:0 6px 28px rgba(0,0,0,.12)}
        .auc-img{width:100%;height:106px;background:#F0F2F6;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden}
        .auc-live-badge{position:absolute;top:7px;left:7px;background:#D94040;color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;display:flex;align-items:center;gap:4px}
        .auc-live-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1.2s infinite}
        .auc-body{padding:8px 10px 10px}
        .auc-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:11.5px;color:#18191F;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .auc-bid{font-size:11px;color:#52576B;margin-bottom:5px}
        .auc-bid strong{color:#2E9E3E;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px}
        .auc-timer{display:flex;gap:3px;align-items:center}
        .t-block{background:#18191F;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;padding:2px 5px;border-radius:4px;min-width:20px;text-align:center}
        .t-sep{color:#52576B;font-weight:700;font-size:11px}
        @media(min-width:769px){
            .auc-header{margin:8px 28px 0}
            .auctions-scroll{padding-left:28px;padding-right:28px}
            .auc-card{width:170px}.auc-img{height:120px}
        }
    </style>

<style>
/* ══ DEALFITY FAB ════════════════════════════════════════ */
.dfab-wrap{position:fixed;right:18px;bottom:76px;z-index:500;pointer-events:none}
.dfab-wrap *{pointer-events:all}
.dfab-btn{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(145deg,#34b84a,#1e7a2c);
  border:3px solid #fff;
  box-shadow:0 4px 20px rgba(30,122,44,.45);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;outline:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s;
  position:relative;z-index:501;
}
.dfab-btn:hover{box-shadow:0 6px 26px rgba(30,122,44,.55)}
.dfab-btn.open{
  background:linear-gradient(145deg,#f05252,#b91c1c);
  transform:rotate(45deg);
  box-shadow:0 4px 20px rgba(185,28,28,.45);
}
.dfab-cross{position:relative;width:20px;height:20px}
.dfab-cross span{position:absolute;background:#fff;border-radius:3px;transition:all .3s}
.dfab-cross .dfc-h{width:20px;height:2.5px;top:50%;left:0;transform:translateY(-50%)}
.dfab-cross .dfc-v{width:2.5px;height:20px;left:50%;top:0;transform:translateX(-50%)}
/* Radial nodes */
.dfab-node{
  position:absolute;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.dfab-node.n-ai   {transform:translate(60px,80px)   scale(.5);transition-delay:0s}
.dfab-node.n-msg  {transform:translate(50px,10px)   scale(.5);transition-delay:.04s}
.dfab-node.n-supp {transform:translate(0px,-50px)   scale(.5);transition-delay:.08s}
.dfab-wrap.open .dfab-node{opacity:1;pointer-events:all}
.dfab-wrap.open .dfab-node.n-ai  {transform:translate(-92px, 80px) scale(1);transition-delay:.06s}
.dfab-wrap.open .dfab-node.n-msg {transform:translate(-112px,10px) scale(1);transition-delay:.12s}
.dfab-wrap.open .dfab-node.n-supp{transform:translate(-82px,-60px) scale(1);transition-delay:.18s}
.dfab-circle{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  border:3px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.22);
  cursor:pointer;transition:transform .18s,box-shadow .18s;
}
.dfab-circle:hover{transform:scale(1.1);box-shadow:0 8px 26px rgba(0,0,0,.32)}
.dfab-circle.c-ai  {background:#7B3FBE}
.dfab-circle.c-msg {background:#1A5FA8}
.dfab-circle.c-spp {background:#0D9488}
.dfab-label{
  background:#183020;color:#fff;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;
  padding:4px 11px;border-radius:20px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);pointer-events:none;white-space:nowrap;
}
/* Scrim */
.dfab-scrim{
  position:fixed;inset:0;z-index:499;
  background:rgba(10,20,14,.5);
  opacity:0;visibility:hidden;
  transition:opacity .22s,visibility .22s;
}
.dfab-scrim.open{opacity:1;visibility:visible}
/* Panel background scrim — fills the right side not covered by the slide panel */
.dfab-panel-scrim{
  position:fixed;inset:0;z-index:498;
  background:rgba(10,20,14,.45);
  opacity:0;visibility:hidden;
  transition:opacity .28s,visibility .28s;
  cursor:pointer;
}
.dfab-panel-scrim.open{opacity:1;visibility:visible}
/* ── SLIDE PANEL ── */
.dfab-panel{
  position:fixed;top:0;bottom:0;left:-100%;
  width:72%;max-width:360px;
  z-index:600;background:#fff;
  border-radius:0 24px 24px 0;
  box-shadow:4px 0 40px rgba(0,0,0,.22);
  transition:left .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.dfab-panel.open{left:0}
.dfab-panel-header{
  background:linear-gradient(135deg,#1B6B2F,#2E9E3E 60%,#3CB84B);
  padding:50px 20px 20px;flex-shrink:0;position:relative;
}
.dfab-panel-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.2);border:none;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.dfab-panel-close:hover{background:rgba(255,255,255,.35)}
.dfab-panel-av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px}
.dfab-panel-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:17px;color:#fff;margin-bottom:3px}
.dfab-panel-sub{font-size:12px;color:rgba(255,255,255,.75)}
.dfab-panel-body{flex:1;overflow-y:auto}
.dfab-section-lbl{font-size:10px;font-weight:800;color:#8A96A8;text-transform:uppercase;letter-spacing:.8px;padding:16px 18px 6px}
.dfab-item{
  display:flex;align-items:center;gap:13px;padding:13px 18px;
  cursor:pointer;text-decoration:none;color:#18191F;
  transition:background .15s;border:none;background:none;width:100%;font-family:inherit;
}
.dfab-item:hover{background:#F3F5F9}
.dfab-item-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.dfab-item-body{flex:1;text-align:left}
.dfab-item-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:#18191F;margin-bottom:1px}
.dfab-item-sub{font-size:11.5px;color:#8A96A8}
.dfab-item-arrow{font-size:20px;color:#ccc;font-weight:300}
.dfab-divider{height:1px;background:#F0F2F6;margin:2px 18px}
.dfab-panel-footer{padding:14px 18px;border-top:1px solid #F0F2F6;flex-shrink:0;text-align:center;font-size:11px;color:#8A96A8}
/* inner page */
.dfab-page{display:none;flex:1;flex-direction:column;height:100%;overflow:hidden}
.dfab-page.show{display:flex}
.dfab-page-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #F0F2F6;flex-shrink:0}
.dfab-page-back{width:34px;height:34px;border-radius:50%;background:#F3F5F9;border:none;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#52576B;line-height:1;transition:background .15s}
.dfab-page-back:hover{background:#E8F5EA;color:#2E9E3E}
.dfab-page-name{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:#18191F;flex:1}
.dfab-page-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.dfab-page-iframe{border:none;flex:1;width:100%;background:#F3F5F9}
/* ════════════════════════════════════════════════════════ */
/* FAB notification badge */
.dfab-notif-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:9px;
  background:#D94040;color:#fff;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:9px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;border:2px solid #fff;
  pointer-events:none;line-height:1;
}
.dfab-circle{position:relative}
/* Panel item badge */
.dfab-item-badge{
  min-width:20px;height:20px;border-radius:10px;
  background:#D94040;color:#fff;
  font-family:'Nunito',sans-serif;font-weight:900;font-size:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 5px;margin-right:4px;
}

.offer-media {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f3f3f3;
    display: block;
}

.offer-img {
    width: 100%;
    height: 180px;
    display: block !important;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.offer-img-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    background: #f3f3f3;
}