:root{
  --bg:#07070a;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text:#f2f2f5;
  --muted: rgba(242,242,245,.75);
  --line: rgba(255,255,255,.12);
  --red:#e11d48;
  --red2:#fb7185;

  /* CHANGE THIS to your car background URL */
  --bgImage: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2400&q=80");
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    linear-gradient(rgba(7,7,10,.72), rgba(7,7,10,.88)),
    var(--bgImage);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  background-attachment: fixed;
}

a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:0 16px}

.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  border-bottom:1px solid var(--line);
  background: rgba(7,7,10,.55);
  backdrop-filter: blur(12px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.3px;
}
.brand-mark{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(225,29,72,.95), rgba(251,113,133,.95));
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.brand-text{opacity:.95}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color: rgba(242,242,245,.85);
  border: 1px solid transparent;
}
.nav a.active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
.header-actions{display:flex; gap:10px; align-items:center}
.nav-toggle{display:none}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.btn-primary{
  background: linear-gradient(135deg, rgba(225,29,72,.95), rgba(251,113,133,.95));
  border-color: rgba(255,255,255,.12);
}
.btn-secondary{
  background: rgba(255,255,255,.10);
}
.btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
}

main{ padding-bottom: 120px; }
.tab-page{display:none}
.tab-page.active{display:block}

.section{padding:34px 0}
.section.alt{background: rgba(0,0,0,.18); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-gap{margin-top:14px}

.hero{padding:28px 0 10px}
.hero-inner{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap:16px;
}
.hero h1{
  margin:10px 0 8px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing:.6px;
  text-shadow: 0 20px 70px rgba(0,0,0,.6);
}
.sub{color: var(--muted); font-size: 1.05rem; line-height:1.5}

.pillline{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.pill.ghost{background: transparent}

.hero-actions{display:flex; gap:10px; margin:14px 0 10px; flex-wrap:wrap}
.hero-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:14px;
}
.stat{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
}
.stat-num{font-weight:950; font-size:1.05rem}
.stat-label{color: rgba(242,242,245,.72); font-weight:700; font-size:.85rem}

.card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px;
}
.spotlight{
  position:relative;
  overflow:hidden;
}
.spotlight::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(225,29,72,.22), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(251,113,133,.16), transparent 55%);
  filter: blur(18px);
  opacity: .95;
  animation: rrGlow 6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes rrGlow{
  from{ transform: translate3d(-10px,-10px,0) scale(1.02); }
  to{ transform: translate3d(10px,10px,0) scale(1.04); }
}

.quick{margin:0 0 12px; padding-left:18px; line-height:1.8}
.row-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.tiny{margin-top:10px; color: rgba(242,242,245,.72); font-weight:700; font-size:.85rem}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.lead{color: var(--muted); margin:0; line-height:1.55}
.cta-card{background: rgba(255,255,255,.08)}

.status-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.status-grid{display:grid; grid-template-columns:1fr}
.status-card .big{font-size:56px; font-weight:950; margin:14px 0 4px}
.subline{color: rgba(242,242,245,.72); font-weight:700}
.kicker{color: rgba(242,242,245,.72); font-weight:800}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
}
.dot-status{width:10px; height:10px; border-radius:999px; background: rgba(242,242,245,.45)}
.mini-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
.mini{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px; background: rgba(255,255,255,.06)}
.mini-label{color: rgba(242,242,245,.72); font-weight:800; font-size:.85rem}
.mini-val{font-weight:950}

.faq .card{margin-bottom:12px}

.site-footer{
  border-top:1px solid var(--line);
  background: rgba(7,7,10,.55);
  backdrop-filter: blur(12px);
}
.footer-inner{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px 0;
  flex-wrap:wrap;
}
.dot{opacity:.55}
.backtop{text-decoration:none; opacity:.85}
.credit{opacity:.9}

/* ===== Badges ===== */
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.5px;
  margin-left:8px;
  border:1px solid rgba(255,255,255,.12);
  vertical-align:middle;
}
.badge.live{background: rgba(34,197,94,.15); color:#22c55e; border-color: rgba(34,197,94,.35)}
.badge.dev{background: rgba(251,191,36,.15); color:#fbbf24; border-color: rgba(251,191,36,.35)}
.badge.soon{background: rgba(239,68,68,.15); color:#ef4444; border-color: rgba(239,68,68,.35)}

/* ===== Reveal ===== */
.reveal{opacity:0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease}
.reveal.show{opacity:1; transform: translateY(0)}

/* Sticky Join */
.sticky-join{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: .3px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(225,29,72,.95), rgba(251,113,133,.95));
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: transform .2s ease, filter .2s ease;
}
.sticky-join:hover{transform: translateY(-2px); filter: brightness(1.05)}

/* Live Banner */
.live-banner{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9998;

  /* ✅ hide by default */
  display: none;

  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(10,10,14,.72);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  font-weight: 900;
}

/* ✅ only show when we add this class */
.live-banner.show{
  display: flex;
}

.live-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(242,242,245,.50);
  box-shadow: 0 0 0 4px rgba(242,242,245,.10);
}
.live-sep{opacity:.5}
.live-text{opacity:.95}
.live-count{opacity:.9}

/* Mobile */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .grid2{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;
    position:absolute;
    left:16px;
    right:16px;
    top:64px;
    padding:12px;
    border-radius:18px;
    background: rgba(7,7,10,.85);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
  }
  .nav.open{display:flex; flex-direction:column}
  .header-inner{position:relative}
}
@media (max-width: 520px){
  .live-banner{right: 120px; max-width: calc(100% - 150px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
}
/* ==============================
   NAV DROPDOWN (Desktop + Mobile)
================================= */

.nav{
  align-items:center;
}

/* Dropdown wrapper */
.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Dropdown button */
.nav-dd-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: rgba(242,242,245,.85);
  font-weight:800;
  cursor:pointer;
}
.nav-dd-btn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}
.nav-dd-btn .chev{
  opacity:.7;
  transform: translateY(-1px);
}

/* Dropdown panel (desktop) */
.nav-dd-panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding:10px;
  border-radius:16px;
  background: rgba(7,7,10,.92);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:none;
  flex-direction: column;
  gap:6px;
  z-index: 1000;
}
.nav-dd.open .nav-dd-panel{ display:flex; }

/* Make dropdown links look like menu items */
.nav-dd-panel a{
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid transparent;
  color: rgba(242,242,245,.85);
}
.nav-dd-panel a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}

/* Mobile: dropdown becomes inline section inside opened menu */
@media (max-width: 820px){
  .nav-dd{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .nav-dd-btn{
    width:100%;
    justify-content:space-between;
  }
  .nav-dd-panel{
    position: static;
    min-width: unset;
    top:auto;
    right:auto;
    margin-top:8px;
    display:none;
  }
  .nav-dd.open .nav-dd-panel{ display:flex; }
}
.backtop{
  cursor: pointer;
  text-decoration: none;
  color: rgba(242,242,245,.85);
}
.backtop:hover{
  color: #fff;
  text-decoration: underline;
}
/* ==============================
   Mobile-only Menu Button
================================= */

/* Hide menu button by default (PC/Desktop) */
.nav-toggle {
  display: none;
}

/* Show menu button only on mobile */
@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
  }
}