:root{
  --dark:#111111;
  --dark-2:#1a1a1a;
  --charcoal:#232323;
  --yellow:#FFC400;
  --yellow-dark:#E6B000;
  --gray-line:#2c2c2c;
}

*{scroll-behavior:smooth;}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:#fff;
  color:var(--dark);
}
.font-display{font-family:'Poppins',sans-serif;}

/* color utilities (bg-dark, text-yellow, bg-yellow/15 etc.) are generated by Tailwind
   via the tailwind.config color tokens declared in index.html — not duplicated here. */

/* ---------- Navbar ---------- */
#navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(17,17,17,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-link{
  position:relative;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.03em;
  color:#d4d4d4;
  padding:6px 2px;
  transition:color .2s ease;
}
.nav-link:hover{color:#fff;}
.nav-link.active{color:var(--yellow);}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--yellow);
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--yellow);color:var(--dark);
  font-weight:700;font-size:.85rem;letter-spacing:.02em;
  padding:13px 26px;border-radius:8px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 18px rgba(255,196,0,.18);
}
.btn-primary:hover{background:var(--yellow-dark);transform:translateY(-1px);}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:#fff;border:1.5px solid var(--yellow);
  font-weight:700;font-size:.85rem;
  padding:12px 24px;border-radius:8px;
  transition:background .18s ease, transform .18s ease;
}
.btn-outline:hover{background:rgba(255,196,0,.1);transform:translateY(-1px);}
.btn-dark{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--dark);color:#fff;font-weight:700;font-size:.85rem;
  padding:12px 24px;border-radius:8px;transition:background .18s ease;
}
.btn-dark:hover{background:#000;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(255,196,0,.10), transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #141414 60%, #0c0c0c 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.badge-ring{
  animation:spin 18s linear infinite;
  transform-origin:center;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* tire illustration hover */
.tire-wrap{transition:transform .4s ease;}
.tire-wrap:hover{transform:rotate(6deg) scale(1.02);}

/* ---------- Fade / slide utilities ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.card-hover{transition:transform .2s ease, box-shadow .2s ease;}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.10);}

.img-zoom{overflow:hidden;}
.img-zoom img,.img-zoom svg{transition:transform .3s ease;}
.img-zoom:hover img,.img-zoom:hover svg{transform:scale(1.06);}

/* ---------- Tabs ---------- */
.tab-btn{
  padding:10px 18px;border-radius:8px;font-weight:600;font-size:.85rem;
  border:1.5px solid #e5e5e5;color:#555;transition:all .18s ease;white-space:nowrap;
}
.tab-btn.active{background:var(--yellow);border-color:var(--yellow);color:var(--dark);}

select.field, input.field, textarea.field{
  width:100%;border:1.5px solid #e5e5e5;border-radius:8px;padding:11px 14px;
  font-size:.88rem;color:var(--dark);background:#fff;transition:border-color .18s ease;
}
select.field:focus, input.field:focus, textarea.field:focus{outline:none;border-color:var(--yellow);}
.field-dark{background:#1c1c1c;border:1.5px solid #333;color:#fff;}
.field-dark::placeholder{color:#888;}
.field-dark:focus{border-color:var(--yellow);outline:none;}

label.field-label{font-size:.78rem;font-weight:600;color:#666;margin-bottom:6px;display:block;}
label.field-label-dark{color:#aaa;}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--yellow); outline-offset:2px;
}

/* Mobile menu */
#mobileMenu{
  transform:translateX(100%);
  transition:transform .28s ease;
}
#mobileMenu.open{transform:translateX(0);}

.underline-yellow{
  display:inline-block;height:4px;width:64px;background:var(--yellow);border-radius:2px;margin-top:10px;
}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px;}

@media (max-width:1024px){
  .desktop-sidebar{display:none;}
}
@media (min-width:1025px){
  .mobile-sidebar-section{display:none;}
}