/* ============================================================
  decoding.vin — design system
  Archivo + JetBrains Mono. Navy trust, teal intelligence, purple momentum.
  ============================================================ */

:root {
  /* expanded brand palette */
  --color-navy-900:  #042856;
  --color-teal-600:  #229fae;
  --color-purple-600:#6D5DFB;
  --color-purple-50: #EAE8FF;
  --color-blue-600:  #2F80ED;
  --color-green-600: #21A67A;
  --color-amber-500: #F5A524;
  --color-aqua-50:   #DDF4F6;
  --color-gray-50:   #F4F7FA;
  --color-text:      #1D2733;

  /* ===== LIGHT THEME (default) ===== */
  /* base surfaces */
  --bg:          var(--color-gray-50);
  --bg-1:        #ffffff;
  --bg-2:        #eef3f8;
  --surface:     #ffffff;
  --surface-2:   #edf4fa;
  --elevated:    #ffffff;

  /* lines */
  --line:        rgba(4, 40, 86, 0.10);
  --line-2:      rgba(4, 40, 86, 0.16);
  --line-strong: rgba(4, 40, 86, 0.28);

  /* text */
  --text:        var(--color-text);
  --text-2:      #324252;
  --text-3:      #5f6f80;
  --text-4:      #8a97a5;

  /* accents */
  --acc:         var(--color-teal-600);
  --acc-bright:  #1a8e9c;
  --acc-dim:     #98d4dc;
  --acc-glow:    rgba(34, 159, 174, 0.28);
  --acc-wash:    rgba(34, 159, 174, 0.10);
  --start-cta:        var(--color-purple-600);
  --start-cta-bright: #5f52e8;
  --start-cta-border: #5346d1;
  --start-cta-glow:   rgba(109, 93, 251, 0.30);

  /* signal */
  --ok:          var(--color-green-600);
  --ok-dim:      rgba(31, 157, 107, 0.12);
  --warn:        var(--color-amber-500);
  --bad:         #cf4329;
  --bad-dim:     rgba(207, 67, 41, 0.10);

  /* VIN segment hues (readable on white) */
  --seg-wmi:     #2f5fd0;
  --seg-vds:     #6b54d8;
  --seg-check:   #1f9d6b;
  --seg-year:    #c2810f;
  --seg-plant:   #b94d8e;
  --seg-serial:  #7b8390;

  /* neutral fills + chrome */
  --fill-subtle: rgba(4, 40, 86, 0.018);
  --fill-1:      rgba(4, 40, 86, 0.032);
  --fill-2:      rgba(4, 40, 86, 0.060);
  --inset-hi:    rgba(255, 255, 255, 0.7);
  --shadow-card: 0 1px 2px rgba(4,40,86,0.05), 0 18px 44px -22px rgba(4,40,86,0.18);
  --nav-bg:      rgba(255, 255, 255, 0.88);
  --brand-bar:   rgba(255, 255, 255, 0.92);

  --maxw: 1200px;
  --radius: 4px;
  --radius-lg: 8px;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  /* ===== DARK THEME ===== */
  --bg:          #080b11;
  --bg-1:        #0a0e15;
  --bg-2:        #0e131c;
  --surface:     #11161f;
  --surface-2:   #161c27;
  --elevated:    #1b2230;

  --line:        rgba(232, 230, 225, 0.08);
  --line-2:      rgba(232, 230, 225, 0.14);
  --line-strong: rgba(232, 230, 225, 0.22);

  --text:        #e8e6e1;
  --text-2:      #aab2c0;
  --text-3:      #6c7686;
  --text-4:      #495162;

  --acc:         #2cb9c9;
  --acc-bright:  #47c7d5;
  --acc-dim:     #1f6f79;
  --acc-glow:    rgba(44, 185, 201, 0.35);
  --acc-wash:    rgba(44, 185, 201, 0.12);
  --start-cta:        #7d70ff;
  --start-cta-bright: #8f84ff;
  --start-cta-border: #6f63e8;
  --start-cta-glow:   rgba(143, 132, 255, 0.34);

  --ok:          #3fb98a;
  --ok-dim:      rgba(63, 185, 138, 0.14);
  --warn:        #e0a13b;
  --bad:         #e0563b;
  --bad-dim:     rgba(224, 86, 59, 0.14);

  --seg-wmi:     #5b8cff;
  --seg-vds:     #8b7ff0;
  --seg-check:   #3fb98a;
  --seg-year:    #e0a13b;
  --seg-plant:   #d96fb0;
  --seg-serial:  #6c7686;

  --fill-subtle: rgba(255, 255, 255, 0.015);
  --fill-1:      rgba(255, 255, 255, 0.02);
  --fill-2:      rgba(255, 255, 255, 0.05);
  --inset-hi:    rgba(255, 255, 255, 0.05);
  --shadow-card: 0 30px 80px -40px rgba(0,0,0,0.9);
  --nav-bg:      rgba(8, 11, 17, 0.72);
  --brand-bar:   rgba(255, 255, 255, 0.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--acc-glow); color: #fff; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -44px;
  z-index: 3000;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-navy-900);
  color: #fff;
  font-weight: 600;
  transition: top .18s ease;
}

.skip-link:focus-visible {
  top: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-blue-600);
  outline-offset: 3px;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

section { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--acc);
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }

.h-display {
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.h-section {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 620;
  letter-spacing: -0.035em;
}
.lead {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  line-height: 1.5;
  max-width: 56ch;
}
.mono { font-family: var(--mono); }
.txt-2 { color: var(--text-2); }
.txt-3 { color: var(--text-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 14px; font-weight: 540;
  letter-spacing: -0.01em;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--acc);
  color: #fff;
  border-color: var(--acc-bright);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 20px -8px var(--acc-glow);
}
.btn-primary:hover { background-color: var(--acc-bright); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 28px -8px var(--acc-glow); }
.btn-started {
  background-color: var(--start-cta);
  color: #ffffff;
  border-color: var(--start-cta-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 10px 26px -10px var(--start-cta-glow);
}
.btn-started:hover {
  background-color: var(--start-cta-bright);
  border-color: var(--start-cta-border);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 34px -12px var(--start-cta-glow);
}
.btn-ghost {
  background-color: transparent;
  color: var(--color-navy-900);
  border-color: rgba(4, 40, 86, 0.36);
}
.btn-ghost:hover { border-color: var(--color-navy-900); background-color: rgba(4, 40, 86, 0.06); }
.btn-sm { padding: 8px 13px; font-size: 13px; }

/* ---------- chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-2);
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--fill-subtle);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); }
.dot.live { animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,185,138,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63,185,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,138,0); }
}

/* ---------- card ---------- */
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ---------- hairline grid bg ---------- */
.grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---------- section divider ---------- */
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- utility ---------- */
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.num-tab { font-variant-numeric: tabular-nums; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 90px;
}
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 13.5px; color: var(--text-2); transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--color-navy-900);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px 0 16px;
}
.mobile-menu-links {
  display: grid;
  gap: 10px;
}
.mobile-menu-links a {
  font-size: 14px;
  color: var(--text-2);
  padding: 6px 0;
}
.mobile-menu-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.mobile-menu-actions .btn {
  width: 100%;
  justify-content: center;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo {
  display: block;
  height: 64px;
  width: auto;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--acc);
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px var(--acc-bright) inset, 0 4px 14px -4px var(--acc-glow);
}
.brand-mark::before, .brand-mark::after {
  content: ""; position: absolute; background: var(--brand-bar);
}
.brand-mark::before { left: 7px; top: 5px; width: 2px; height: 16px; }
.brand-mark::after { left: 13px; top: 5px; width: 2px; height: 16px; transform: skewX(-16deg); }
.brand-name { font-weight: 640; letter-spacing: -0.02em; font-size: 16px; }
.brand-name .tld { color: var(--acc-bright); }

@media (max-width: 820px) {
  .nav-inner { height: 76px; }
  .nav-links,
  .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.nav-open .mobile-menu { display: block; }
  .brand-logo { height: 46px; }
  .wrap, .wrap-wide { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}