/* Falcon Flair – Luxury Dark Green + Gold theme */
:root{
  --bg:#0f2d26;
  --bg-2:#13352d;
  --surface:#132f28;
  --gold:#d7b46a;
  --text:#edf3ef;
  --muted:#b9c6bf;
  --danger:#ff5c5c;
  --ok:#6fe69b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;scroll-behavior:smooth}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
.nav{
  position:sticky;top:0;z-index:50;background:rgba(15,45,38,.8);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(215,180,106,.12)
}
.nav .inner{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.brand .name{font-weight:700;letter-spacing:.12em;color:var(--gold)}
.menu{display:flex;gap:18px}
.menu a{padding:10px 12px;border-radius:12px;transition:.2s}
.menu a:hover{background:rgba(215,180,106,.12)}
.cta{
  background:linear-gradient(180deg,var(--gold),#caa251);
  color:#1a1a1a;font-weight:700;padding:10px 14px;border-radius:14px;box-shadow:var(--shadow);
}
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:48px 0 36px}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 10px;letter-spacing:.02em}
.hero p{color:var(--muted);margin:0 0 22px}
.hero .card{
  background:linear-gradient(180deg,rgba(19,47,40,.6),rgba(19,47,40,.9));
  border:1px solid rgba(215,180,106,.15);padding:18px;border-radius:var(--radius);
}
.hero .stats{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}
.stat{background:rgba(215,180,106,.08);border:1px solid rgba(215,180,106,.18);padding:10px 14px;border-radius:14px;color:var(--gold)}
.btn{display:inline-block;background:rgba(215,180,106,.14);border:1px solid rgba(215,180,106,.4);padding:12px 16px;border-radius:14px;color:var(--text);transition:.2s}
.btn:hover{transform:translateY(-1px);border-color:var(--gold)}
.section{padding:42px 0;border-top:1px solid rgba(215,180,106,.12)}
.section h2{font-size:28px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}.hero h1{font-size:36px}}
.cardCar{
  position:relative;background:linear-gradient(180deg,var(--surface),#102721);
  border:1px solid rgba(215,180,106,.14);border-radius:18px;overflow:hidden;
  box-shadow: var(--shadow)
}
.cardCar .photo{aspect-ratio:16/10;background:#102821}
.cardCar .body{padding:14px}
.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.45);color:var(--text);padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.15)}
.price{color:var(--gold);font-weight:800}
.meta{color:var(--muted);font-size:14px}
.footer{padding:28px 0;color:#a9b9b1;border-top:1px solid rgba(215,180,106,.12)}
/* Car detail */
.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery img{border-radius:12px;border:1px solid rgba(215,180,106,.12)}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:rgba(215,180,106,.08);border:1px solid rgba(215,180,106,.18);padding:8px 12px;border-radius:12px;color:var(--gold);font-size:14px}
.table{width:100%;border-collapse:collapse}
.table td{padding:10px;border-bottom:1px dashed rgba(215,180,106,.18)}
.kicker{letter-spacing:.28em;color:var(--gold);font-weight:700;font-size:12px}
.small{font-size:13px;color:var(--muted)}
.searchbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
input,select{
  background:#102721;border:1px solid rgba(215,180,106,.22);color:var(--text);padding:10px 12px;border-radius:12px;outline:none;
}
.notice{font-size:14px;color:var(--muted);margin-top:12px}
/* Lightbox (fullscreen image viewer) */
.lightbox{
  position: fixed; inset: 0; 
  background: rgba(0,0,0,.85);
  display: none; 
  align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox.open{ display: flex; }
.lightbox img{
  max-width: 92vw; max-height: 88vh;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox .close, .lightbox .nav{
  position: absolute; color: #fff; font-weight: 700;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 10px 14px; border-radius: 12px; cursor: pointer; user-select: none;
}
.lightbox .close{ top: 18px; right: 18px; }
.lightbox .nav.prev{ left: 18px; }
.lightbox .nav.next{ right: 18px; }



/* === LIQUID GLASS THEME === */

/* Tokens */
:root{
  --glass-fill: rgba(255,255,255,.14);
  --glass-stroke: rgba(255,255,255,.35);
  --glass-shadow: 0 30px 60px rgba(0,0,0,.12);
  --glass-blur: 14px;
  --ink-weak: rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root{
    --glass-fill: rgba(255,255,255,.06);
    --glass-stroke: rgba(255,255,255,.16);
    --glass-shadow: 0 40px 90px rgba(0,0,0,.6);
    --ink-weak: rgba(255,255,255,.75);
  }
}

/* Generic glass utility */
.glass{
  position:relative;
  background: linear-gradient(180deg, var(--glass-fill), transparent) border-box;
  backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(120%);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  border-radius: 22px;
  overflow: hidden;
}
.glass::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(240px 140px at 10% -10%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(320px 200px at 120% 0%, rgba(255,255,255,.14), transparent 55%);
  pointer-events:none;
}

/* Nav glass */
.nav{ background: rgba(255,255,255,.55); border-bottom:1px solid var(--glass-stroke); backdrop-filter: blur(10px) saturate(120%); }
@media (prefers-color-scheme: dark){ .nav{ background: rgba(17,18,19,.45);} }

/* Pills & buttons */
.pill, .btn, .cta{
  background: linear-gradient(180deg, var(--glass-fill), transparent);
  border:1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.pill{ border-radius:999px }
.btn, .cta{ border-radius:16px }
.btn:hover, .cta:hover{ transform: translateY(-1px); }

/* Cards */
.cardCar{
  background: linear-gradient(180deg, var(--glass-fill), transparent);
  border:1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
}
.cardCar .body{ background: transparent }
.cardCar .photo{ border-bottom: 1px solid var(--glass-stroke) }
.cardCar .badge{ background: rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.22); }

/* Detail panel (right column) */
.detail > *:last-child{
  padding:18px 18px; border-radius:22px;
  background: linear-gradient(180deg, var(--glass-fill), transparent);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.detail h1{ margin-top:6px }
.detail .kicker, .detail .meta{ color: var(--ink-weak) }
.detail .price{ color: var(--accent) }

/* Chips */
.chip, .chip-lite, .meta > span{
  background: linear-gradient(180deg, var(--glass-fill), transparent);
  border:1px solid var(--glass-stroke);
}

/* Inputs */
input, select{
  background: linear-gradient(180deg, var(--glass-fill), transparent);
  border:1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Footer */
.footer{ background: linear-gradient(180deg, rgba(0,0,0,.02), transparent); }



/* === Marquee auto-scroll cars === */
.marquee{overflow:hidden;width:100%;padding:20px 0}
.marquee-track{display:flex;gap:18px;animation:scroll 40s linear infinite}
.marquee-track > *{flex:0 0 auto;width:280px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}



/* === Infinite Marquee (auto-scrolling cars) === */
.marquee{ width:100%; overflow:hidden; padding:16px 0; ;  }
.marquee-track{
  display:flex; gap:18px; align-items:stretch;
  will-change: transform;
  animation: marquee-scroll 40s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; } /* pause on hover */

@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tighter cards inside marquee */
.marquee .cardCar{ width:280px; flex:0 0 auto }
.marquee .cardCar .photo{ aspect-ratio: 16/9 }
.marquee .cardCar .badge{ display:none }



/* === Marquee centered on page === */
.marquee-center{ padding: 10px 0 18px; }
.marquee-center .container{ position: relative }
/* Premium card polish */
.cardCar{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cardCar .photo{ aspect-ratio: 4/3; overflow:hidden }
.cardCar .photo img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .35s ease }
.cardCar:hover{ transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,.35); border-color: rgba(215,180,106,.28) }
.cardCar:hover .photo img{ transform: scale(1.06) }

.cardCar .body{ position:relative }
.cardCar .body .meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;
}
.chip-lite{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background: rgba(215,180,106,.10);
  border:1px solid rgba(215,180,106,.22);
  color: var(--gold);
}
.cardCar .go{
  font-weight:700; border:1px solid rgba(215,180,106,.35);
  padding:8px 12px; border-radius:12px;
  background: linear-gradient(180deg, var(--glass-fill), transparent);
}
.cardCar .go:hover{ transform: translateX(2px) }



/* Price range readability */
.cardCar .price{ white-space: normal; line-height: 1.2; }

/* Marquee specific tweaks */
.marquee .cardCar{ width:320px; }
.marquee .cardCar .price{ font-size:14px; }



/* === Refined favorite button === */
.fav-btn{
  position:absolute; top:12px; right:12px;
  background: rgba(0,0,0,.55);
  border:none;
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:#fff;
  cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.fav-btn:hover{ background:rgba(0,0,0,.75); transform: scale(1.1); }
.fav-btn.on{ background: var(--gold); color:#1a1a1a; }

/* === Car image full cover === */
.cardCar .photo{ aspect-ratio: 16/10; overflow:hidden; }
.cardCar .photo img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  display:block;
}



/* === Favorite button restyle (clean circular, top-right over photo) === */
.cardCar .photo{ position: relative }
.fav-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; padding:0;
  display:grid; place-items:center;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; border-radius:50%; font-size:16px; line-height:1;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.fav-btn.on{ background:#fff; color:#e63946; border-color:#fff }

/* Remove any stray overlays/strips on top of cards */
.cardCar::before, .cardCar .photo::before{ content:none !important; display:none !important; }

/* Images fully visible (no crop) */
.cardCar .photo img{ object-fit: contain; background: #0f2d26; }



/* === Octane-like hero with big background and centered search === */
.hero-octane{
  background: var(--bg-2);
  position:relative;
  padding: 60px 0 40px;
}
.hero-octane::before{
  content:""; position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
  opacity:.35; filter: saturate(110%) contrast(105%);
}
.hero-octane .wrap{ position:relative; z-index:1 }
.hero-center{ max-width:800px; margin: 0 auto; text-align:center }
.hero-center h1{ font-size:42px; margin:0 0 16px }
.home-search{
  display:flex; gap:8px; justify-content:center; margin: 0 auto 14px;
}
.home-search input{
  width:min(560px, 80vw);
}
.brand-pills{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px;
}
.brand-pill{ cursor:pointer }
.cat-tabs{
  display:flex; gap:14px; justify-content:center; margin-top:14px;
}
.cat{ cursor:pointer }