/* Z Auto DMS — marketing site. One stylesheet, five pages, zero dependencies.
   Self-contained on purpose: no CDN fonts, no framework, nothing that can be
   slow or down. System fonts render instantly on every device a dealer owns. */

:root {
  --ink: #0c1322;
  --ink-2: #17233b;
  --ink-3: #1f2f4f;
  --paper: #f6f7f9;
  --card: #ffffff;
  --line: #e3e7ee;
  --text: #232b3a;
  --muted: #5b6678;
  --muted-on-dark: #9fb0cc;
  --accent: #e8a33d;
  --accent-deep: #c9821a;
  --blue: #4f8ef7;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(12, 19, 34, 0.06), 0 8px 24px rgba(12, 19, 34, 0.07);
  --shadow-lift: 0 2px 4px rgba(12, 19, 34, 0.08), 0 18px 44px rgba(12, 19, 34, 0.14);
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  max-width: 100%;
}
a {
  color: inherit;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 19, 34, 0.92);
  backdrop-filter: blur(8px);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
}
/* The real Z Auto mark (inline SVG traced from the dealership's logo). It
   paints with currentColor for ink and --zl-bg for its knockouts, so one
   asset works on the dark header without a recolored copy. */
.brand-logo {
  height: 44px;
  width: auto;
  --zl-bg: var(--ink);
  color: #fff;
  display: block;
}
.brand-dms {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: 2px;
}

.site-nav {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.site-nav a {
  text-decoration: none;
  color: var(--muted-on-dark);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.site-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
.site-nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-cta {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-cta .signin {
  text-decoration: none;
  color: var(--muted-on-dark);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.nav-cta .signin:hover {
  color: #fff;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #fff;
  padding: 7px 11px;
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.98rem;
  font-family: var(--font);
  padding: 12px 22px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(232, 163, 61, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(232, 163, 61, 0.45);
  filter: brightness(1.04);
}
.btn:active {
  transform: translateY(0);
}
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.btn.ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.btn.quiet {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(12, 19, 34, 0.25);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(79, 142, 247, 0.28), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(232, 163, 61, 0.2), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  padding: 92px 0 96px;
}
.hero::after {
  /* a slow drifting glow — transform-only, so it costs nothing */
  content: '';
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 142, 247, 0.16) 0%, transparent 65%);
  top: -180px;
  right: -120px;
  pointer-events: none;
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-70px, 50px) scale(1.15);
  }
}

.hero .kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(232, 163, 61, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
  background: rgba(232, 163, 61, 0.08);
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  font-weight: 850;
  max-width: 17ch;
}
.hero h1 .glow {
  color: var(--accent);
}
.hero .sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--muted-on-dark);
  max-width: 56ch;
  margin: 0 0 32px;
}
.hero .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hero .aside-note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted-on-dark);
}

/* staggered entrance — pure CSS so it happens even before JS loads */
.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.7s ease forwards;
}
.rise.d1 {
  animation-delay: 0.08s;
}
.rise.d2 {
  animation-delay: 0.18s;
}
.rise.d3 {
  animation-delay: 0.3s;
}
.rise.d4 {
  animation-delay: 0.42s;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- sections ---------- */
.section {
  padding: 72px 0;
}
.section.tint {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section.dark {
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  color: #fff;
}
.section.dark .muted {
  color: var(--muted-on-dark);
}
.eyebrow {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 10px;
}
.section.dark .eyebrow {
  color: var(--accent);
}
.section h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  font-weight: 800;
}
.lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 36px;
}
.section.dark .lede {
  color: var(--muted-on-dark);
}

/* ---------- cards ---------- */
.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.grid.two {
  grid-template-columns: repeat(2, 1fr);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(232, 163, 61, 0.18), rgba(79, 142, 247, 0.14));
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.section.dark .card {
  background: var(--ink-3);
  border-color: rgba(255, 255, 255, 0.08);
}
.section.dark .card h3 {
  color: #fff;
}
.section.dark .card p {
  color: var(--muted-on-dark);
}

/* scroll reveal (site.js flips .visible; motion-reduced users skip it) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal.lag1 {
  transition-delay: 0.08s;
}
.reveal.lag2 {
  transition-delay: 0.16s;
}

/* ---------- stats band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}
.stat .num {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat .label {
  color: var(--muted-on-dark);
  font-size: 0.95rem;
}

/* ---------- story page ---------- */
.prose {
  max-width: 68ch;
}
.prose p {
  margin: 0 0 20px;
  font-size: 1.05rem;
  color: var(--text);
}
.prose .pull {
  border-left: 4px solid var(--accent);
  padding: 6px 0 6px 20px;
  margin: 30px 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.value-list {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.value-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.value-list .tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(232, 163, 61, 0.16);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.9rem;
  margin-top: 2px;
}

/* ---------- pricing ---------- */
.price-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 36px;
  box-shadow: var(--shadow);
}
.price-card .badge {
  display: inline-block;
  background: rgba(79, 142, 247, 0.12);
  color: #2f66c4;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.price-card h3 {
  font-size: 1.7rem;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.price-card p {
  color: var(--muted);
  margin: 0 0 26px;
}

/* ---------- form ---------- */
.form-shell {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 38px;
  box-shadow: var(--shadow);
}
.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}
.form-grid .full {
  grid-column: 1 / -1;
}
label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
label .opt {
  font-weight: 500;
  color: var(--muted);
}
input,
select,
textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid #cdd4df;
  border-radius: 9px;
  padding: 11px 13px;
}
input:focus,
textarea:focus {
  outline: 2px solid rgba(79, 142, 247, 0.45);
  border-color: var(--blue);
}
textarea {
  min-height: 110px;
  resize: vertical;
}
.notice {
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 0.95rem;
  display: none;
}
.notice.error {
  background: #fdeeee;
  border: 1px solid #f3c2c2;
  color: #8f2020;
}
.notice.show {
  display: block;
}
/* the honeypot: real users never see it, bots reliably fill it */
.field-website {
  position: absolute;
  left: -6000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--muted-on-dark);
  padding: 44px 0 52px;
  font-size: 0.92rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}
.site-footer a {
  color: var(--muted-on-dark);
  text-decoration: none;
  margin-right: 18px;
}
.site-footer a:hover {
  color: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .grid,
  .grid.two,
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .site-nav,
  .nav-cta {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .site-header.open .site-nav,
  .site-header.open .nav-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--ink);
    padding: 12px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .site-header.open .site-nav {
    top: 64px;
  }
  .site-header.open .nav-cta {
    top: calc(64px + 218px);
    margin: 0;
  }
}
@media (max-width: 560px) {
  .grid,
  .grid.two,
  .stats {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 64px 0 70px;
  }
}

/* Anyone who asked for less motion gets exactly none. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .rise,
  .hero::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card,
  .btn {
    transition: none;
  }
}

/* ------------------------------------------------------------------------
   The hero lap: the Z from the logo drives the perimeter of the hero on a
   race line, laying tire marks on its first lap and smoking the tires in
   every corner. All transform/opacity/dashoffset — nothing here causes
   layout or paint storms. One lap is var(--lap); every delay below is a
   fraction of the same lap so car, rubber and smoke stay in sync.
   ------------------------------------------------------------------------ */
.hero {
  --lap: 16s;
}
.hero-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* tire marks: two parallel lines, revealed at the car's own pace (both paths
   carry pathLength=100, so one animation fits both despite different true
   lengths). Rubber is laid once and stays — the following laps run on it. */
.skid {
  fill: none;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lay-rubber var(--lap) linear forwards;
}
@keyframes lay-rubber {
  to {
    stroke-dashoffset: 0;
  }
}

/* the car: the logo's Z riding its own two wheels, nose following the track
   (offset-rotate auto), which sends it up the right wall and upside down
   across the top — deliberately. */
.zcar {
  offset-path: path(
    'M 260 505 L 1380 505 A 70 70 0 0 0 1450 435 L 1450 140 A 70 70 0 0 0 1380 70 L 220 70 A 70 70 0 0 0 150 140 L 150 435 A 70 70 0 0 0 220 505 Z'
  );
  offset-rotate: auto;
  animation: drive var(--lap) linear infinite;
  color: #fff;
  --zl-bg: #101a2e;
}
@keyframes drive {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
.zcar-wheelspin {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelspin 0.7s linear infinite;
}
@keyframes wheelspin {
  to {
    transform: rotate(360deg);
  }
}

/* tire smoke: stationary puffs at each corner, timed to the car passing.
   Delays are the corners' measured fractions of the lap (path length math in
   index.html next to the geometry). Negative delays make lap 1 correct too. */
.puff {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: puff var(--lap) linear infinite;
}
@keyframes puff {
  0%,
  1.5% {
    opacity: 0;
    transform: scale(0.25) translateY(0);
  }
  4% {
    opacity: 0.75;
  }
  7% {
    opacity: 0.55;
  }
  12% {
    opacity: 0;
    transform: scale(2.5) translateY(-16px);
  }
  100% {
    opacity: 0;
    transform: scale(0.25) translateY(0);
  }
}
/* corner mid-points as lap fractions: BR .361, TR .482, TL .861, BL .982 —
   minus a small lead so smoke starts as the car ENTERS the corner */
.puff-br {
  animation-delay: calc(var(--lap) * 0.335 - var(--lap));
}
.puff-tr {
  animation-delay: calc(var(--lap) * 0.455 - var(--lap));
}
.puff-tl {
  animation-delay: calc(var(--lap) * 0.835 - var(--lap));
}
.puff-bl {
  animation-delay: calc(var(--lap) * 0.955 - var(--lap));
}

/* No room to drive on a phone, and no show at all for anyone who asked for
   less motion or whose browser lacks motion paths. */
@media (max-width: 700px) {
  .hero-track {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-track {
    display: none;
  }
}
@supports not (offset-path: path('M 0 0 L 1 1')) {
  .hero-track {
    display: none;
  }
}