Untitled

<style>
  /* =========================
     Best Deals Auto — Inventory Wireframe (Light Theme)
     Red / Black / White
     ========================= */

  :root{
    --bg:#f6f7f9;              /* page background */
    --panel:#ffffff;           /* surfaces */
    --panel2:#ffffff;
    --card:#ffffff;
    --muted:#5e6b7a;           /* secondary text */
    --text:#111316;            /* main text */
    --line:rgba(17,19,22,.10); /* borders */
    --line2:rgba(17,19,22,.18);

    --accent:#d91422;          /* primary red */
    --accent2:#ff3b30;         /* secondary red */
    --good:#16a34a;
    --warn:#b45309;
    --bad:#dc2626;

    --shadow: 0 16px 40px rgba(17,19,22,.10);
    --shadow2: 0 10px 25px rgba(17,19,22,.08);

    --radius: 18px;
    --radius2: 14px;
    --max: 1180px;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font: 15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
    color:var(--text);
    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(217,20,34,.12), transparent 60%),
      radial-gradient(900px 500px at 80% 0%, rgba(17,19,22,.05), transparent 55%),
      linear-gradient(180deg, #ffffff 0%, var(--bg) 40%, #ffffff 100%);
  }

  a{color:inherit;text-decoration:none}
  button, input, select{font:inherit;color:inherit}
  .container{max-width:var(--max); margin:0 auto; padding:0 18px;}
  .sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

  .chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background: #fff;
    color: var(--muted);
    white-space:nowrap;
  }
  .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding:11px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background: #fff;
    cursor:pointer;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 18px rgba(17,19,22,.05);
  }
  .btn:hover{
    background:#fff;
    border-color:var(--line2);
    box-shadow: var(--shadow2);
  }
  .btn:active{transform: translateY(1px)}

  .btn.primary{
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: rgba(217,20,34,.35);
    color:#fff;
    font-weight:800;
    box-shadow: 0 14px 30px rgba(217,20,34,.18);
  }
  .btn.primary:hover{filter:brightness(1.03)}
  .btn.ghost{
    background:transparent;
    box-shadow:none;
  }
  .btn.small{padding:9px 12px; border-radius:12px}

  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    border:1px solid var(--line);
    background:#fff;
    color: var(--text);
  }
  .badge.good{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.08)}
  .badge.warn{border-color:rgba(180,83,9,.25);  background:rgba(180,83,9,.08)}
  .badge.bad {border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.08)}
  .badge.hot {border-color:rgba(220,38,38,.25); background:rgba(220,38,38,.08)}
  .badge.new {border-color:rgba(217,20,34,.25); background:rgba(217,20,34,.08)}

  .kicker{color:var(--muted); font-weight:700; letter-spacing:.02em}

  /* Header */
  .topbar{
    position:sticky; top:0; z-index:50;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar .row{
    height:68px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    min-width: 220px;
  }
  .logo{
    width:40px; height:40px; border-radius:12px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 10px 20px rgba(217,20,34,.14);
  }
  .brand strong{display:block; font-size:14px; letter-spacing:.02em}
  .brand span{display:block; font-size:12px; color:var(--muted)}
  .nav{
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  /* Hero */
  .hero{padding: 26px 0 18px;}
  .heroCard{
    border:1px solid var(--line);
    border-radius: calc(var(--radius) + 6px);
    background:
      radial-gradient(900px 420px at 12% 30%, rgba(217,20,34,.10), transparent 60%),
      radial-gradient(700px 420px at 85% 15%, rgba(17,19,22,.05), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
    box-shadow: var(--shadow);
    overflow:hidden;
  }
  .heroInner{
    padding: 22px;
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:stretch;
  }
  .heroTitle{margin:0; font-size:30px; line-height:1.15; letter-spacing:-.02em}
  .heroSub{margin:10px 0 0; color:var(--muted); max-width:52ch}
  .trustRow{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;}

  .heroRight{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.92);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height: 140px;
    box-shadow: 0 12px 28px rgba(17,19,22,.06);
  }
  .heroRight .mini{
    display:flex; justify-content:space-between; gap:8px; align-items:center;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius: 14px;
    background: #fff;
  }
  .mini b{font-size:13px}
  .mini span{font-size:12px; color:var(--muted)}
  .heroCtas{display:flex; gap:10px; margin-top:auto}

  /* Search Bar */
  .searchWrap{
    margin-top:14px;
    border-top:1px solid var(--line);
    background: rgba(255,255,255,.88);
    padding: 16px 22px;
  }
  .searchBar{
    display:grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
  }
  .field label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:7px;
    font-weight:700;
  }
  .field input, .field select{
    width:100%;
    padding:12px 12px;
    border-radius: 14px;
    background:#fff;
    border:1px solid var(--line);
    outline:none;
  }
  .field input:focus, .field select:focus{
    border-color: rgba(217,20,34,.55);
    box-shadow: 0 0 0 4px rgba(217,20,34,.10);
  }

  .tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
  .tab{
    padding:9px 12px;
    border-radius: 999px;
    border:1px solid var(--line);
    background:#fff;
    color: var(--muted);
    cursor:pointer;
    user-select:none;
    font-weight:800;
    font-size:13px;
  }
  .tab.active{
    color: var(--text);
    border-color: rgba(217,20,34,.55);
    background: rgba(217,20,34,.08);
  }

  /* Main layout */
  .main{padding: 18px 0 88px;}
  .layout{
    display:grid;
    grid-template-columns: 320px 1fr;
    gap:16px;
    align-items:start;
  }

  /* Sidebar Filters */
  .panel{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background:#fff;
    box-shadow: var(--shadow2);
    overflow:hidden;
  }
  .panelHeader{
    padding:14px 14px;
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  .panelHeader h3{margin:0;font-size:14px;letter-spacing:.02em}
  .panelBody{padding:14px; display:grid; gap:12px}
  .divider{height:1px;background:var(--line); margin:4px 0}
  .quickBtns{display:flex; gap:8px; flex-wrap:wrap}

  .range{display:grid; gap:8px}
  .range input[type="range"]{width:100%; accent-color: var(--accent);}
  .range .meta{display:flex; justify-content:space-between; color:var(--muted); font-size:12px}

  .iconsRow{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px}
  .iconBtn{
    padding:10px 10px;
    border-radius: 14px;
    border:1px solid var(--line);
    background:#fff;
    text-align:center;
    color:var(--muted);
    font-weight:800;
    cursor:pointer;
  }
  .iconBtn:hover{border-color:var(--line2); background:#fff}

  .checkRow{
    display:flex; align-items:center; gap:10px; color:var(--muted);
    padding:10px 10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
  }
  .checkRow input{width:16px;height:16px; accent-color: var(--accent);}

  /* Content area */
  .contentHead{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    margin-bottom: 10px;
  }
  .contentHead h2{margin:0; font-size:18px}
  .sortRow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .pill{
    padding:9px 11px;
    border-radius: 999px;
    border:1px solid var(--line);
    background:#fff;
    color: var(--muted);
    font-weight:800;
    font-size:13px;
  }
  .pill select{
    border:none; outline:none; background:transparent; color:inherit; font-weight:800;
    appearance:none;
    padding-right: 18px;
    cursor:pointer;
  }

  /* Featured row */
  .featured{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background:#fff;
    overflow:hidden;
    margin-bottom: 14px;
    box-shadow: var(--shadow2);
  }
  .featuredHeader{
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center;
  }
  .featuredHeader b{font-size:13px}
  .featuredGrid{
    padding:14px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }

  /* Vehicle cards */
  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  .card{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background:#fff;
    overflow:hidden;
    box-shadow: var(--shadow2);
    position:relative;
    transition: transform .10s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .card:hover{
    transform: translateY(-2px);
    border-color: var(--line2);
    box-shadow: var(--shadow);
  }
  .cardTop{
    position:relative;
    height: 168px;
    background:
      linear-gradient(135deg, rgba(217,20,34,.06), rgba(17,19,22,.02));
  }
  .imgPh{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    color:rgba(17,19,22,.35);
    font-weight:900;
    letter-spacing:.06em;
    font-size:12px;
  }
  .overlayBadges{
    position:absolute; left:10px; top:10px;
    display:flex; gap:8px; flex-wrap:wrap;
    max-width: calc(100% - 54px);
  }
  .heart{
    position:absolute; right:10px; top:10px;
    width:34px; height:34px;
    border-radius: 12px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.92);
    display:grid; place-items:center;
    cursor:pointer;
  }
  .photos{
    position:absolute; left:10px; bottom:10px;
    padding:8px 10px;
    border-radius: 999px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.92);
    color: rgba(17,19,22,.82);
    font-size:12px;
    font-weight:800;
  }

  .cardBody{padding:12px 12px 14px}
  .titleRow{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
  .vehicleTitle{
    margin:0;
    font-size:14px;
    letter-spacing:.01em;
    line-height:1.25;
  }
  .metaLine{
    margin-top:6px;
    color:var(--muted);
    font-size:12px;
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .priceRow{
    margin-top:10px;
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  }
  .price{
    font-size:20px;
    font-weight:950;
    letter-spacing:-.02em;
  }
  .payment{
    color: var(--text);
    font-weight:900;
    font-size:12px;
    padding:7px 9px;
    border-radius: 999px;
    border:1px solid rgba(217,20,34,.35);
    background: rgba(217,20,34,.08);
    white-space:nowrap;
  }
  .highlights{
    margin-top:10px;
    display:grid;
    gap:6px;
    font-size:12px;
  }
  .highlights span{
    display:flex; align-items:center; gap:8px;
    color: var(--muted);
  }
  .highlights i{
    width:6px; height:6px; border-radius:999px;
    background: rgba(22,163,74,.75);
    display:inline-block;
  }
  .trustLine{
    margin-top:10px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    color: var(--muted);
    font-size:12px;
    border-top:1px solid var(--line);
    padding-top:10px;
  }
  .trustLeft{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .trustPill{
    padding:6px 8px;
    border-radius: 999px;
    border:1px solid var(--line);
    background:#fff;
    font-weight:900;
    font-size:11px;
    color: rgba(17,19,22,.82);
  }
  .ctaRow{
    margin-top:10px;
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:10px;
  }
  .fineprint{
    margin-top:8px;
    font-size:11px;
    color: rgba(94,107,122,.95);
  }

  /* Mid Trust section */
  .why{
    margin: 16px 0 14px;
    border:1px solid var(--line);
    border-radius: var(--radius);
    background:#fff;
    overflow:hidden;
    box-shadow: var(--shadow2);
  }
  .whyInner{
    padding:14px;
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:12px;
    align-items:start;
  }
  .why h3{margin:0 0 6px; font-size:14px}
  .why p{margin:0; color:var(--muted); font-size:13px; max-width: 70ch}
  .whyGrid{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:10px;
  }
  .whyTile{
    border:1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding:12px;
    display:grid; gap:6px;
  }
  .whyTile b{font-size:12px}
  .whyTile span{font-size:12px; color:var(--muted)}

  /* Footer note */
  .footNote{
    margin-top: 14px;
    color: var(--muted);
    font-size: 12px;
    text-align:center;
    padding: 12px 0 0;
  }

  /* Mobile sticky bar */
  .stickyBar{
    position: fixed;
    left:0; right:0; bottom:0;
    z-index: 60;
    padding: 10px 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-top:1px solid var(--line);
    display:none;
  }
  .stickyInner{
    max-width: var(--max);
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
  .stickyInner .btn{border-radius:14px}

  /* Responsive */
  @media (max-width: 1100px){
    .grid{grid-template-columns: repeat(2, 1fr)}
    .featuredGrid{grid-template-columns: repeat(2, 1fr)}
    .searchBar{grid-template-columns: 1fr 1fr 1fr 1fr auto}
  }
  @media (max-width: 900px){
    .heroInner{grid-template-columns: 1fr}
    .layout{grid-template-columns: 1fr}
    .panel{order: 2}
    .searchBar{grid-template-columns: 1fr 1fr; }
    .heroRight{min-height:auto}
    .featuredGrid{grid-template-columns: repeat(2, 1fr)}
    .grid{grid-template-columns: repeat(2, 1fr)}
  }
  @media (max-width: 640px){
    .nav{display:none}
    .heroTitle{font-size:24px}
    .featuredGrid{grid-template-columns: 1fr}
    .grid{grid-template-columns: 1fr}
    .searchWrap{padding: 14px 14px}
    .heroInner{padding: 16px}
    .stickyBar{display:block}
    .main{padding-bottom: 110px}
  }
</style>