/* =====================================================================
   DARK PREMIUM THEME (Vareon) — loaded after style.css and overrides it.
   The page is dark end to end, like the showroom photo; magenta is kept
   for primary actions and small labels only. Transparent car/engine
   cut-outs sit on a "showroom spotlight" glow.
   ===================================================================== */
:root {
  color-scheme: dark;
  --bg: #060d19;
  --surface: #0b1627;
  --surface-2: #0f1d33;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --ink: #e8edf5;
  --gray: #93a0b4;
  --gray-2: #6c7a90;
  --soft: #0b1627;
  --dark: #060d19;
  --dark-2: #0f1d33;
  --darker: #040912;
  --accent: #d23a6d;
  --accent-deep: #b12a58;
  --accent-text: #ec7ea3;           /* magenta that stays readable as small text on navy */
  --accent-soft: rgba(210,58,109,.14);
  --spotlight: radial-gradient(90% 75% at 50% 78%, rgba(160,190,235,.20) 0%, rgba(40,62,98,.35) 38%, rgba(11,22,39,0) 72%), linear-gradient(180deg, #0c1a2e 0%, #0a1526 100%);
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { font-weight: 700; }
::placeholder { color: var(--gray-2); }

/* sections */
.section-soft { background: var(--surface); }
.section-dark { background: linear-gradient(180deg, #081324 0%, #060d19 100%); }
.section + .section, .section + .cta-band { border-top: 1px solid var(--line); }
.section-title { color: #fff; letter-spacing: -1px; }
.section-sub, .section-dark .section-sub { color: var(--gray); }
.kicker { color: var(--accent-text); }
.link-arrow { color: #fff; }
.link-arrow:hover { color: var(--accent-text); }

/* buttons */
.btn-dark { background: #16263f; border-color: var(--line-2); color: #fff; }
.btn-dark:hover { background: #1e3353; }
.btn-outline { color: #fff; border-color: var(--line-2); }
.btn-outline:hover { border-color: #fff; }
.btn-ghost svg { color: var(--wa); }
.topbar { border-bottom: 1px solid var(--line); }
.topbar span::before { background: var(--accent); }

/* hero */
.hero::before {
  background: linear-gradient(90deg, rgba(4,9,18,.95) 0%, rgba(4,9,18,.80) 40%, rgba(4,9,18,.30) 72%, rgba(4,9,18,.20) 100%),
              linear-gradient(0deg, rgba(6,13,25,1) 0%, rgba(6,13,25,0) 30%);
}
.hero h1 em, .hero .eyebrow { color: var(--accent-text); }
.hero-call-icon { background: var(--accent); }

/* form controls + quote box */
input, select, textarea { background-color: #0a1424; border-color: var(--line-2); color: #fff; }
select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2393a0b4' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(210,58,109,.22); }
.field label { color: #c6cfdc; }
.finder { background: rgba(11,22,39,.78); backdrop-filter: blur(16px); border: 1px solid var(--line-2); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.finder h2 { color: #fff; }
.finder > p, .finder-note { color: var(--gray); }

/* trust strip */
.trust { background: var(--bg); border-bottom: 1px solid var(--line); }
.trust-item { border-color: var(--line); }
.trust-item strong { color: #fff; }
.trust-item span { color: var(--gray); }
.trust-icon { background: var(--accent-soft); color: var(--accent-text); }

/* headline numbers band */
.numbers { padding: 72px 0; background: radial-gradient(60% 140% at 50% 0%, rgba(90,130,200,.12) 0%, rgba(6,13,25,0) 70%), var(--bg); border-bottom: 1px solid var(--line); }
.numbers .stats { margin-top: 36px; padding: 0; border: 0; }
.numbers .stat { border-left: 1px solid var(--line); }
.numbers .stat:first-child { border-left: 0; }
.numbers-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.numbers-head h2 { font-size: clamp(26px, 3vw, 36px); color: #fff; letter-spacing: -.8px; margin-top: 10px; }
.numbers-head p { color: var(--gray); font-size: 14.5px; max-width: 360px; }
.stat .n { color: #fff; }
.stat .n em { color: var(--accent-text); }
.stat .l { color: var(--gray); }

/* brand tiles + panels: cars on a showroom spotlight */
.brand-tile { background: var(--spotlight); border-color: var(--line); }
.brand-tile img, .brand-panel-img img { filter: drop-shadow(0 16px 14px rgba(0,0,0,.6)); }
.brand-tile .tier, .brand-panel .kicker { color: var(--accent-text); }
.brand-tile h3 { color: #fff; }
.brand-tile .count { color: var(--gray); }
.brand-tile:hover { border-color: rgba(210,58,109,.55); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.brand-panel { background: var(--surface-2); border-color: var(--line); }
.brand-panel-img { background: var(--spotlight); }
.brand-panel h2 { color: #fff; }
.brand-panel .count { color: #fff; }
.brand-panel p { color: var(--gray); }
.chip, .brand-panel .chip { background: transparent; border-color: var(--line-2); color: #c6cfdc; }

/* grades + product lines */
.grade { background: var(--surface-2); border-color: var(--line); }
.grade-img { background: var(--spotlight); }
.grade-img.cover { background: #000; }
.grade-tag { color: #fff; border-bottom-color: #7f8ea6; }
.grade:nth-child(2) .grade-tag { border-color: #5b86c4; }
.grade:nth-child(3) .grade-tag { border-color: var(--accent); }
.grade p { color: var(--gray); }
.line-card { background: var(--surface-2); border-color: var(--line); }
.line-card .product-img { padding: 0; border-bottom: 1px solid var(--line); }
.line-card .product-img img { object-fit: cover; }
.line-card h3 { color: #fff; }
.line-card p { color: var(--gray); }
.tag { background: var(--accent-soft); color: var(--accent-text); }
.product .ask, .line-card .ask { color: #4ade80; }
.sub-head { color: #fff; }

/* trade account section */
.account { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
.account .steps { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
.account .step { border-top: 1px solid var(--line); padding: 20px 0; display: grid; grid-template-columns: 72px 1fr; column-gap: 12px; }
.account .step .num { grid-row: span 2; font-size: 13px; padding-top: 4px; }
.account .step h3 { margin-top: 0; }
.account .step p { margin-top: 4px; }
.account .hero-actions { margin-top: 24px; }
.perk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feature { background: var(--surface-2); border-color: var(--line); }
.feature-icon { background: var(--accent-soft); color: var(--accent-text); }
.step { border-top-color: var(--accent); }
.step h3 { color: #fff; }
.step p { color: var(--gray); }
.step .num { color: var(--accent-text); }

/* programmes */
.program { background: var(--surface-2); border-color: var(--line); }
.program h3 { color: #fff; }
.program .for { color: var(--accent-text); }
.check-list li { color: #c6cfdc; }
.check-list svg { color: var(--accent-text); }

/* warehouse / map */
.location { background: var(--surface-2); border-color: var(--line); }
.location-body h3 { color: #fff; }
.location-body address { color: var(--gray); }
.flag { color: var(--accent-text); }
.hours td { border-bottom-color: var(--line); color: #c6cfdc; }
.hours td:last-child { color: #fff; }
.hours tr.closed td:last-child { color: var(--gray); }
.map { background: var(--surface); }

/* CTA: dark with a magenta glow instead of a full magenta block */
.cta-band { background: radial-gradient(70% 160% at 100% 0%, rgba(210,58,109,.30) 0%, rgba(210,58,109,0) 60%), var(--surface); }
.cta-band::after { border-color: rgba(255,255,255,.04); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--gray); }

/* about / contact / misc pages */
.prose p { color: #b8c3d3; }
.prose .big { color: #fff; }
.side-img { background: var(--spotlight); border: 1px solid var(--line); }
.mv { background: var(--surface-2); border-color: var(--line); }
.mv h3 { color: #fff; }
.mv p { color: var(--gray); }
.contact-card { background: var(--surface-2); border-color: var(--line); }
.contact-card h3 { color: #fff; }
.contact-list .ci { background: #0a1424; border-color: var(--line); color: var(--accent-text); }
.contact-list a, .contact-list span { color: #fff; }
.contact-list small { color: var(--gray); }
.form-note, .form-or { color: var(--gray); }
.center-page h1 { color: #fff; }
.center-page p { color: var(--gray); }
.site-footer { border-top: 1px solid var(--line); }

/* brand-routed sales lines (footer + contact card) */
.footer-links li.team { display: flex; flex-direction: column; gap: 2px; }
.footer-links .grp { font-size: 12px; color: var(--gray-2); line-height: 1.4; }
.contact-list a.wa-link { display: block; font-size: 13.5px; font-weight: 600; color: #4ade80; margin-top: 2px; }
.contact-list a.wa-link:hover { color: #86efac; }

@media (max-width: 960px) {
  .account { grid-template-columns: 1fr; gap: 36px; }
  .numbers .stat { border-left: 0; }
}
@media (max-width: 600px) {
  .perk-grid { grid-template-columns: 1fr; }
  .numbers { padding: 56px 0; }
}