/* QuietFleet 2026 — modern design layer
   Hermes 2026-10-25. ADDITIVE: loaded after style.css, overrides only presentation.
   Adds the light/dark token system, sticky glass nav, hero mesh, responsive EV card grid,
   billboard slot styling and accessible focus states that the revamp plan called for but never
   landed (base.html had no data-theme, no toggle and a single legacy stylesheet). */

:root {
  --qf-bg: #f7f8fb;
  --qf-bg-elev: #ffffff;
  --qf-surface: rgba(255, 255, 255, 0.86);
  --qf-text: #0d1220;
  --qf-text-dim: #5a6478;
  --qf-border: #e3e7f0;
  --qf-brand: #5b6cff;
  --qf-brand-2: #22d3a6;
  --qf-brand-ink: #ffffff;
  --qf-warn: #f59e0b;
  --qf-danger: #ef4444;
  --qf-radius: 16px;
  --qf-radius-sm: 10px;
  --qf-shadow-sm: 0 1px 2px rgba(13, 18, 32, .06), 0 2px 8px rgba(13, 18, 32, .05);
  --qf-shadow-md: 0 10px 30px rgba(13, 18, 32, .09), 0 2px 8px rgba(13, 18, 32, .06);
  --qf-shadow-lg: 0 24px 60px rgba(13, 18, 32, .16);
  --qf-max: 1180px;
  --qf-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --qf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

html[data-theme="dark"] {
  --qf-bg: #080b14;
  --qf-bg-elev: #111726;
  --qf-surface: rgba(17, 23, 38, 0.82);
  --qf-text: #eef2ff;
  --qf-text-dim: #9aa6c0;
  --qf-border: #1e2740;
  --qf-brand: #7c8cff;
  --qf-brand-2: #2ee6b6;
  --qf-brand-ink: #05080f;
  --qf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --qf-shadow-md: 0 12px 34px rgba(0, 0, 0, .55);
  --qf-shadow-lg: 0 28px 70px rgba(0, 0, 0, .65);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --qf-bg: #080b14;
    --qf-bg-elev: #111726;
    --qf-surface: rgba(17, 23, 38, 0.82);
    --qf-text: #eef2ff;
    --qf-text-dim: #9aa6c0;
    --qf-border: #1e2740;
    --qf-brand: #7c8cff;
    --qf-brand-2: #2ee6b6;
    --qf-brand-ink: #05080f;
    color-scheme: dark;
  }
}

html { scroll-behavior: smooth; }
body {
  background: var(--qf-bg) !important;
  color: var(--qf-text) !important;
  font-family: var(--qf-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.62;
}

/* ---------- typography ---------- */
h1, .hero-title { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem) !important; line-height: 1.06 !important; letter-spacing: -.022em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem) !important; letter-spacing: -.015em; }
h3 { letter-spacing: -.01em; }
p, li { color: var(--qf-text); }
.hero-subhead { color: var(--qf-text-dim) !important; font-size: clamp(1rem, .95rem + .35vw, 1.18rem); max-width: 62ch; }

/* ---------- sticky glass nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--qf-surface) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--qf-border) !important;
}
.navbar {
  max-width: var(--qf-max); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px;
}
.navbar a {
  color: var(--qf-text) !important; text-decoration: none; font-weight: 600;
  font-size: .94rem; padding: 8px 4px; border-radius: 8px;
  transition: color .16s ease, opacity .16s ease;
}
.navbar a:hover { color: var(--qf-brand) !important; }
.navbar a[aria-current="page"], .navbar a.active { color: var(--qf-brand) !important; }

/* ---------- theme toggle ---------- */
.qf-theme-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--qf-bg-elev); color: var(--qf-text);
  border: 1px solid var(--qf-border); border-radius: 999px;
  padding: 8px 14px; font: 600 .85rem/1 var(--qf-font); cursor: pointer;
  box-shadow: var(--qf-shadow-sm); transition: transform .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.qf-theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--qf-shadow-md); }
.qf-theme-toggle .qf-ico { width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .qf-theme-toggle .qf-ico-sun { display: block; }
html[data-theme="dark"] .qf-theme-toggle .qf-ico-moon { display: none; }
.qf-theme-toggle .qf-ico-sun { display: none; }

/* ---------- hero ---------- */
.hero-2026 {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 92px) 20px clamp(36px, 5vw, 64px);
  background:
    radial-gradient(1100px 460px at 12% -10%, color-mix(in oklab, var(--qf-brand) 22%, transparent), transparent 62%),
    radial-gradient(900px 420px at 88% 0%, color-mix(in oklab, var(--qf-brand-2) 18%, transparent), transparent 60%),
    var(--qf-bg) !important;
}
.hero-quick-match, .quick-match-form {
  background: var(--qf-surface) !important;
  border: 1px solid var(--qf-border) !important;
  border-radius: var(--qf-radius) !important;
  box-shadow: var(--qf-shadow-md);
  padding: 18px !important;
  backdrop-filter: blur(10px);
}
.hero-trust-list { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--qf-text-dim); }
.hero-trust-item { font-size: .9rem; }
.hero-trust-item .check { color: var(--qf-brand-2); font-weight: 800; }

/* ---------- buttons ---------- */
.btn-hero-primary, .btn-hero-secondary, .btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px !important; font-weight: 700 !important;
  padding: 12px 22px !important; border: 1px solid transparent;
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-hero-primary {
  background: linear-gradient(135deg, var(--qf-brand), color-mix(in oklab, var(--qf-brand) 55%, var(--qf-brand-2))) !important;
  color: var(--qf-brand-ink) !important; box-shadow: var(--qf-shadow-md);
}
.btn-hero-secondary {
  background: var(--qf-bg-elev) !important; color: var(--qf-text) !important;
  border-color: var(--qf-border) !important; box-shadow: var(--qf-shadow-sm);
}
.btn-hero-primary:hover, .btn-hero-secondary:hover, .btn:hover { transform: translateY(-2px); box-shadow: var(--qf-shadow-lg); }

/* ---------- responsive EV card grid ---------- */
.ev-grid, .ev-showcase-grid, .models-grid, .card-grid {
  display: grid !important; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  margin: 22px auto; max-width: var(--qf-max);
  align-items: stretch;
}
.ev-card, .model-card, .card {
  background: var(--qf-bg-elev) !important;
  border: 1px solid var(--qf-border) !important;
  border-radius: var(--qf-radius) !important;
  box-shadow: var(--qf-shadow-sm);
  padding: 18px !important; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ev-card:hover, .model-card:hover, .card:hover {
  transform: translateY(-4px); box-shadow: var(--qf-shadow-md);
  border-color: color-mix(in oklab, var(--qf-brand) 45%, var(--qf-border)) !important;
}
.ev-card img, .model-card img { border-radius: var(--qf-radius-sm); }

/* ---------- billboard slot (plan §10) ---------- */
.billboard-slot {
  max-width: var(--qf-max); margin: 26px auto !important;
  background: var(--qf-bg-elev); border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius); padding: 14px 16px !important;
  box-shadow: var(--qf-shadow-sm);
}
.billboard-label { color: var(--qf-text-dim) !important; }
.billboard-fallback { border: 1px dashed color-mix(in oklab, var(--qf-brand) 55%, var(--qf-border)) !important; border-radius: var(--qf-radius-sm) !important; }
.billboard-house { color: var(--qf-brand) !important; }
.billboard-slot .btn-secondary {
  background: var(--qf-bg) !important; color: var(--qf-text) !important; border-color: var(--qf-border) !important;
}

/* ---------- sections / surfaces ---------- */
.feature-section, .market-section, .case-studies-section, .trust-section, .newsletter-d1, .ev-showcase-section {
  background: transparent !important;
  max-width: var(--qf-max); margin: 0 auto; padding: clamp(34px, 4vw, 60px) 20px;
}
.news-strip-swanky { border-color: var(--qf-border) !important; }
table { border-color: var(--qf-border) !important; }
th { color: var(--qf-text-dim) !important; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; }
input, select, textarea {
  background: var(--qf-bg-elev) !important; color: var(--qf-text) !important;
  border: 1px solid var(--qf-border) !important; border-radius: var(--qf-radius-sm) !important;
  padding: 11px 13px !important; font: inherit; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--qf-brand); outline-offset: 2px;
}
.site-footer { background: var(--qf-bg-elev) !important; border-top: 1px solid var(--qf-border) !important; color: var(--qf-text-dim) !important; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .navbar { flex-wrap: wrap; gap: 10px; }
  .qf-theme-toggle { padding: 7px 12px; }
  .hero-quick-match { padding: 14px !important; }
}
@media (max-width: 560px) {
  .navbar a { font-size: .88rem; padding: 6px 2px; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- revamp fix-pass (Hermes 2026-10-25, after visual QC) ---------- */
/* hero line 1 inherited a white colour from the old dark hero -> invisible on the light surface */
.hero-2026 .hero-title,
.hero-2026 .hero-title strong,
.hero-2026 .hero-title b { color: var(--qf-text) !important; }
.hero-2026 .hero-title .gradient-text { color: transparent !important; }

/* legacy placeholder AdSense units reserved ~600px and rendered nothing */
.ad-unit:has(ins.adsbygoogle[data-ad-slot^="PLACEHOLDER"]) { display: none !important; }
ins.adsbygoogle[data-ad-slot^="PLACEHOLDER"] { display: none !important; }

/* make the pre-existing dark-mode button match the 2026 pill */
.dark-mode-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--qf-bg-elev) !important; color: var(--qf-text) !important;
  border: 1px solid var(--qf-border) !important; box-shadow: var(--qf-shadow-sm);
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease;
}
.dark-mode-btn:hover { transform: translateY(-1px); box-shadow: var(--qf-shadow-md); }
html[data-theme="dark"] .dark-mode-btn { background: var(--qf-bg-elev) !important; }

/* ---------- dark-theme contrast pass (Hermes 2026-10-25, QC round 3) ---------- */
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main .eyebrow,
html[data-theme="dark"] main .section-kicker,
html[data-theme="dark"] main .feature-section h2 { color: var(--qf-text) !important; }

html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] main .section-sub { color: var(--qf-text-dim) !important; }

html[data-theme="dark"] main [class*="card"],
html[data-theme="dark"] main [class*="stat-strip"],
html[data-theme="dark"] main [class*="telemetry"] {
  background: var(--qf-bg-elev) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text) !important;
}
html[data-theme="dark"] main [class*="card"] h3,
html[data-theme="dark"] main [class*="card"] h4,
html[data-theme="dark"] main [class*="card"] p,
html[data-theme="dark"] main [class*="stat-strip"] span,
html[data-theme="dark"] main [class*="stat-strip"] code { color: var(--qf-text) !important; }
html[data-theme="dark"] main .stat-number { color: var(--qf-brand-2) !important; }
html[data-theme="dark"] .hero-2026 .hero-title { color: var(--qf-text) !important; }

/* dark: telemetry badge had a white pill with unreadable label (QC round 3 nit) */
html[data-theme="dark"] .stat-badge,
html[data-theme="dark"] main .stat-badge {
  background: color-mix(in oklab, var(--qf-brand-2) 18%, var(--qf-bg-elev)) !important;
  color: var(--qf-text) !important;
  border: 1px solid var(--qf-border) !important;
}