/* ============================================================
   JLRDecoder — 品牌主题（色值 1:1 取自 logo 与现有站点）
   Gold  #D4A72C  ·  Ink  #0d1117  ·  Panel  #161b22
   Line  #30363d  ·  Text #e6edf3  ·  Muted #9da7b3
   ============================================================ */

:root {
  --gold: #D4A72C;
  --gold-soft: rgba(212, 167, 44, 0.14);
  --ink: #0d1117;
  --ink-2: #161b22;
  --ink-3: #1c2128;
  --line: #30363d;
  --text: #e6edf3;
  --text-2: #c9d1d9;
  --muted: #9da7b3;
  --green: #3fb950;
  --radius: 14px;
  --maxw: 1120px;
  --font: "Inter", "SF Pro Display", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-nav {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 36px; }
.brand:hover { text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 128px 32px 112px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, var(--gold-soft), transparent 70%),
    linear-gradient(180deg, var(--ink-3) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 900px; margin: 0 auto 24px;
  background: linear-gradient(120deg, var(--text) 60%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .tagline {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--text-2);
  max-width: 720px; margin: 0 auto 40px;
}
.cta-button {
  display: inline-block;
  background: var(--gold); color: #111;
  font-weight: 700; font-size: 17px;
  padding: 16px 36px; border-radius: 10px;
  box-shadow: 0 8px 32px rgba(212, 167, 44, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(212, 167, 44, 0.4);
  text-decoration: none;
}
.cta-secondary {
  display: inline-block; margin-left: 16px;
  color: var(--text); font-weight: 600; font-size: 17px;
  padding: 16px 32px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: border-color 0.15s ease;
}
.cta-secondary:hover { border-color: var(--gold); text-decoration: none; }

/* ---------- 内容骨架 ---------- */
main article > section,
main article > nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 88px 32px 0;
}
main article > section:last-of-type { padding-bottom: 96px; }

.byline {
  max-width: var(--maxw); margin: 0 auto;
  padding: 28px 32px 0;
  color: var(--muted); font-size: 14px;
}

h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 750; letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 24px;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
}
h3 { font-size: 20px; font-weight: 700; margin: 0; }
section p { color: var(--text-2); max-width: 820px; }
section p + p { margin-top: 16px; }

/* 定义块：AI 提取的核心段落，视觉上也是全页焦点 */
.definition-block {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 48px auto 0;
  padding: 48px 56px !important;
}
.definition-block p {
  font-size: 19px; color: var(--text);
  max-width: none;
}
.definition-block strong { font-weight: 500; }

/* 统计卡 */
.key-stats ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.key-stats li {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  font-size: 15px; color: var(--text-2);
}
.key-stats cite { display: block; margin-top: 14px; font-style: normal; font-size: 13px; color: var(--muted); }

/* 编号步骤 */
section ol { max-width: 820px; padding-left: 22px; color: var(--text-2); }
section li { margin-bottom: 12px; }
section li::marker { color: var(--gold); font-weight: 700; }

/* 对比表 + 定价表 */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15.5px;
}
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--ink-3);
  color: var(--gold);
  font-weight: 700; letter-spacing: 0.02em;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(212, 167, 44, 0.05); }
td:first-child { color: var(--text); font-weight: 600; }

/* 定价 */
#pricing td:nth-child(2) { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* FAQ 手风琴 */
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-list summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); font-size: 24px; font-weight: 400; margin-left: 16px; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { color: var(--text-2); font-size: 15px; margin-top: 12px; }

/* Related */
nav[aria-label="Related pages"] ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
nav[aria-label="Related pages"] a {
  display: block;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 18px 22px;
  color: var(--text); font-weight: 600;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
nav[aria-label="Related pages"] a:hover {
  border-color: var(--gold); transform: translateY(-2px); text-decoration: none;
}
nav[aria-label="Related pages"] a::after { content: " →"; color: var(--gold); }

/* 底部 CTA */
.cta {
  text-align: center;
  background:
    radial-gradient(ellipse 55% 60% at 50% 110%, var(--gold-soft), transparent 70%),
    var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin: 88px auto 96px !important;
  padding: 80px 48px !important;
  max-width: calc(var(--maxw) - 64px) !important;
}
.cta h2 { border: none; padding-left: 0; }
.cta p { margin: 0 auto 32px; }
.cta a { /* 复用主按钮样式 */ }
.cta a[href] {
  display: inline-block;
  background: var(--gold); color: #111;
  font-weight: 700; font-size: 17px;
  padding: 16px 36px; border-radius: 10px;
  box-shadow: 0 8px 32px rgba(212, 167, 44, 0.28);
}
.cta a[href]:hover { text-decoration: none; transform: translateY(-2px); }

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 36px 32px;
  text-align: center;
  color: var(--muted); font-size: 14px;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--gold); }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .hero { padding: 88px 24px 72px; }
  .cta-secondary { margin: 14px 0 0; }
  .key-stats ul { grid-template-columns: 1fr; }
  .definition-block { padding: 32px 28px !important; }
  main article > section, main article > nav { padding: 64px 24px 0; }
  table { font-size: 14px; }
  th, td { padding: 12px 14px; }
}

/* ---------- 内嵌 VIN 解码器组件 ---------- */
.decoder-widget {
  max-width: 860px !important;
  text-align: center;
  padding-top: 72px !important;
}
.decode-box {
  display: flex; gap: 12px; justify-content: center;
  max-width: 720px; margin: 0 auto;
}
#vin-input {
  flex: 1;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 18px; letter-spacing: 0.08em;
  padding: 16px 20px;
  text-transform: uppercase;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#vin-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
#vin-input::placeholder { color: var(--muted); text-transform: none; letter-spacing: normal; }
.decode-box .cta-button { border: none; cursor: pointer; }
.decode-box .cta-button:disabled { opacity: 0.6; cursor: wait; transform: none; }

.decode-msg { margin-top: 14px; font-size: 15px; color: var(--muted); min-height: 1.4em; }
.decode-msg.err { color: #f0883e; }

.result-card {
  margin-top: 32px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 36px;
  text-align: left;
}
.result-card h3 { margin-bottom: 18px; }
.result-card table { font-size: 15px; }
.result-card td:first-child { color: var(--muted); font-weight: 500; width: 38%; }
.result-card td:last-child { color: var(--text); font-weight: 600; }
.result-card .trace { margin-top: 14px; font-size: 12.5px; color: var(--muted); font-family: monospace; }
.result-next { margin-top: 18px; font-size: 15px; }

@media (max-width: 860px) {
  .decode-box { flex-direction: column; }
  .decoder-widget { margin-top: 0; }
}

/* ---------- 评价收集表单 ---------- */
.review-form-section { text-align: center; margin-top: 84px; }
.review-form { max-width: 640px; margin: 32px auto 0; display: grid; gap: 14px; text-align: left; }
.rf-stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; }
.rf-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rf-stars label { font-size: 32px; color: var(--line); cursor: pointer; transition: color .12s, transform .12s; }
.rf-stars label:hover { transform: scale(1.15); }
.rf-stars input:checked ~ label,
.rf-stars label:hover, .rf-stars label:hover ~ label { color: var(--gold); }
.rf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.review-form input[type="text"], .review-form textarea {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 16px; color: var(--text); font: inherit; width: 100%;
}
.review-form input:focus, .review-form textarea:focus { outline: none; border-color: var(--gold); }
.review-form ::placeholder { color: var(--muted); }
.rf-submit {
  background: var(--gold); color: #111; border: none; border-radius: 10px;
  font-weight: 700; font-size: 16px; padding: 14px 32px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(212,167,44,.28); transition: transform .15s;
}
.rf-submit:hover { transform: translateY(-2px); }
.rf-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.rf-msg { text-align: center; color: var(--text-2); min-height: 1.4em; }
.rf-msg.err { color: #f85149; }
.rf-msg a { font-weight: 700; }
.rf-thanks { color: var(--gold); font-size: 19px; font-weight: 700; text-align: center; padding: 20px 0; }
.decode-review-cta { text-align: center; margin-top: 18px; color: var(--text-2); }
.decode-review-cta a { font-weight: 700; }
@media (max-width: 640px) { .rf-row { grid-template-columns: 1fr; } }
.review-form-section .sec-kicker { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }