/* Village Automotive — shared shell styles
   Loaded on every Village page so we don't duplicate inline CSS. */

:root { color-scheme: dark; }
* { -webkit-tap-highlight-color: transparent; }
html, body { background: #10141a; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
  color: #dfe2eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
::selection { background: rgba(159,202,255,0.3); color: #d2e4ff; }
h1,h2,h3,h4 { letter-spacing: -0.02em; }
.display { letter-spacing: -0.04em; }
section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .display { letter-spacing: -0.035em; }
  h1, h2, h3 { letter-spacing: -0.025em; }
  main, footer { padding-bottom: 80px; }
}

/* Glass + gradients */
.glass-nav {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(16,20,26,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.glass-card {
  background: linear-gradient(135deg, rgba(28,32,38,0.85) 0%, rgba(10,14,20,0.95) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.05);
}
.glass-soft {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.cta-glow {
  box-shadow: 0 8px 30px -8px rgba(159,202,255,0.45), 0 0 0 1px rgba(159,202,255,0.25) inset;
}
.cta-glow:hover { box-shadow: 0 14px 44px -8px rgba(159,202,255,0.6), 0 0 0 1px rgba(159,202,255,0.4) inset; }
.cta-secondary { box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; }
.cta-secondary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset; }

/* Vehicle card hover */
.v-card { transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s; }
.v-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6); }
.v-card .v-img { transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.v-card:hover .v-img { transform: scale(1.06); }

/* Vehicle paint backgrounds — used when no real photo */
.v-bg-1 { background: linear-gradient(135deg, #1e3a5f 0%, #0a0e14 100%); }
.v-bg-2 { background: linear-gradient(135deg, #3a2e1e 0%, #0a0e14 100%); }
.v-bg-3 { background: linear-gradient(135deg, #1e3f3a 0%, #0a0e14 100%); }
.v-bg-4 { background: linear-gradient(135deg, #3f1e2e 0%, #0a0e14 100%); }
.v-bg-5 { background: linear-gradient(135deg, #2a1e3f 0%, #0a0e14 100%); }
.v-bg-6 { background: linear-gradient(135deg, #2f3a1e 0%, #0a0e14 100%); }

/* Reveal-on-scroll */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) forwards; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; animation: none !important; } }

/* Form inputs */
.form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  width: 100%;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.form-input::placeholder { color: rgba(193,199,209,0.5); }
.form-input:focus { outline: none; border-color: #9fcaff; background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(159,202,255,0.15); }
textarea.form-input { resize: vertical; min-height: 100px; }
.form-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #c1c7d1; font-weight: 600; margin-bottom: 8px; display:block; }

/* Mobile bottom nav pill */
.mobile-pill {
  background: rgba(28,32,38,0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* OliviaAI chat FAB */
.chat-fab {
  position: fixed; bottom: 96px; right: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #7c3aed, #0071e3);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(124,58,237,0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transition: transform 0.2s ease;
}
.chat-fab:hover { transform: scale(1.05); }
.chat-fab:active { transform: scale(0.95); }
@media (min-width: 1024px) { .chat-fab { bottom: 28px; right: 28px; width: 64px; height: 64px; } }

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 50s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Pricing/spec micro-bars */
.spec-row { display:flex; align-items:center; justify-content:space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14px; }
.spec-row:last-child { border-bottom: none; }
.spec-row .spec-key { color: #c1c7d1; }
.spec-row .spec-val { color: #fff; font-weight: 600; }