/* ──────────────────────────────────────────────────────────────────────────
   Showpiece layer: the morphing vehicle, hero stage, 3D viewer chrome, and
   motion polish. Same brand tokens; bolder presence. Reduced motion honored.
   ────────────────────────────────────────────────────────────────────────── */
h1 { letter-spacing: -0.015em; font-weight: 600; }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; }

/* ── Vehicle morph ── */
.vehicle-morph { --vm-ink: #1d2733; position: relative; }
.vm-stage { position: relative; border-radius: 18px; padding: 8px 4px 0; background:
  radial-gradient(120% 90% at 50% 95%, #efe8da 0%, rgba(239,232,218,0) 60%),
  linear-gradient(180deg, #fbf9f5 0%, #f6f1e8 100%);
  border: 1px solid var(--line); overflow: hidden; }
.vm-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.vm-svg { width: 100%; height: auto; display: block; }
.vm-body { stroke: #0f151d; stroke-width: 1.5; transition: fill-opacity 500ms var(--ease), stroke-opacity 500ms var(--ease); }
.vm-sheen { opacity: 0.9; pointer-events: none; }
.vm-glass { stroke: rgba(255,255,255,0.45); stroke-width: 1; fill-opacity: 0.92; transition: fill-opacity 500ms var(--ease); }
.vm-line { stroke: rgba(255,255,255,0.18); stroke-width: 1.5; fill: none; }
.vm-tire { fill: #141a21; stroke: #0b0f14; stroke-width: 2; }
.vm-rim { fill: #e9e4da; stroke: #b9b0a0; stroke-width: 2; }
.vm-hub { fill: var(--gold); }
.vm-spokes { stroke: #b9b0a0; stroke-width: 3; stroke-linecap: round; fill: none; }
.vm-lamp.front { fill: #fff3cf; stroke: #e2c66c; stroke-width: 1; filter: drop-shadow(0 0 6px rgba(255, 220, 130, 0.9)); }
.vm-lamp.rear { fill: #d9574a; stroke: #b3412f; stroke-width: 1; filter: drop-shadow(0 0 5px rgba(217, 87, 74, 0.8)); }
.vm-halo { opacity: 0; transition: opacity 600ms var(--ease); }
.vm-systems { opacity: 0; transition: opacity 500ms var(--ease); }
.vm-sys { fill: rgba(31,111,107,0.14); stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 4 3; transition: fill 300ms var(--ease), stroke 300ms var(--ease), filter 300ms var(--ease); }
.vm-sys-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: none; }
.vm-sys.lit { fill: rgba(176,124,31,0.22); stroke: var(--amber-text); stroke-dasharray: none; stroke-width: 2.4; filter: drop-shadow(0 0 8px rgba(176,124,31,0.75)); }
.vm-sys.danger { stroke: var(--red); fill: rgba(179,65,47,0.18); filter: drop-shadow(0 0 8px rgba(179,65,47,0.7)); }
.vm-hot { fill: transparent; stroke: transparent; stroke-width: 2; cursor: pointer; transition: stroke 200ms var(--ease), fill 200ms var(--ease); }
.vm-hot:hover { fill: rgba(31,111,107,0.08); stroke: rgba(31,111,107,0.5); }
.vm-hot.active { stroke: var(--amber-text); fill: rgba(176,124,31,0.10); }
.vm-hot.danger { stroke: var(--red); fill: rgba(179,65,47,0.10); }
@media (prefers-reduced-motion: no-preference) { .vm-hot.active { animation: vm-ring 1.4s ease-in-out 2; } @keyframes vm-ring { 50% { stroke-width: 5; stroke-opacity: 0.6; } } }
.is-xray .vm-body { fill-opacity: 0.08; stroke-opacity: 0.9; stroke: var(--ink); }
.is-xray .vm-glass { fill-opacity: 0.14; }
.is-xray .vm-sheen { opacity: 0; }
.is-xray .vm-systems, .is-xray .vm-halo { opacity: 1; }
.vm-callout { opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; }
.vm-callout-line { fill: none; stroke: var(--amber-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.vm-callout-dot { fill: var(--amber-text); }
.vm-label { position: absolute; top: 8px; max-width: min(60%, 320px); background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-left: 3px solid var(--amber-text); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-sm); box-shadow: var(--shadow); backdrop-filter: blur(4px); }
.vm-label[hidden] { display: none; }
.vm-label b { display: block; font-family: var(--font-display); font-size: var(--fs-md); }
.vm-label .vm-label-d { color: var(--muted); font-size: var(--fs-xs); }
.vm-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: var(--sp-3); }
.vm-classes { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--ink-soft); padding: 4px; border-radius: 999px; }
.vm-classes button { border: 0; background: transparent; border-radius: 999px; min-height: 36px; padding: 6px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); cursor: pointer; transition: background var(--ease), color var(--ease); }
.vm-classes button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.vm-xray[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.vm-legend { margin-top: var(--sp-3); }
.vm-legend button[aria-pressed="true"] { border-color: var(--amber-text); background: var(--amber-soft); color: var(--amber-text); }

/* ── Hero (home) ── */
.hero-stage { position: relative; margin: 0 -16px var(--sp-5); padding: var(--sp-4) 16px var(--sp-5); background:
  radial-gradient(70% 60% at 50% 100%, rgba(31,111,107,0.10) 0%, rgba(31,111,107,0) 70%),
  radial-gradient(90% 70% at 50% 0%, #fffdf9 0%, rgba(255,253,249,0) 60%); }
.hero-stage .vm-stage { border: 0; background: transparent; }
.hero-stage .vm-stage::after { display: none; }
.hero-copy { text-align: center; max-width: 560px; margin: 0 auto var(--sp-3); }
.hero-copy .eyebrow { display: block; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: 10px; }
.hero-copy h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.04; margin-bottom: 12px; }
.hero-copy .lead { color: var(--muted); font-size: var(--fs-lg); margin: 0; }
.hero-strip { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.hero-strip .chip { background: var(--card); }
@media (min-width: 720px) { .hero-stage { margin: 0 0 var(--sp-5); border-radius: 24px; padding: var(--sp-6) var(--sp-5); } }

/* ── 3D viewer chrome ── */
.v3d { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, #fbf9f5, #f1ebe0); }
.v3d canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.v3d canvas:active { cursor: grabbing; }
.v3d-hud { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px 12px; }
@media (min-width: 720px) { .v3d-hud { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 0; pointer-events: none; } .v3d-hud > * { pointer-events: auto; } }
.v3d-hud .vm-classes { background: rgba(238,234,227,0.92); backdrop-filter: blur(6px); }
.v3d-hud .btn { background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); }
.v3d-hud .btn[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.v3d-slider { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); backdrop-filter: blur(6px); }
.v3d-slider input { width: 120px; accent-color: var(--teal); }
.v3d-tag { position: absolute; transform: translate(-50%, -100%); margin-top: -10px; background: rgba(255,255,255,0.94); border: 1px solid var(--line); border-left: 3px solid var(--amber-text); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); font-weight: 600; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow); }
.v3d-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.v3d-status { position: absolute; left: 12px; top: 12px; font-size: var(--fs-xs); color: var(--muted); background: rgba(255,255,255,0.85); border-radius: 999px; padding: 4px 10px; }

/* ── Explore page ── */
.explore-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 880px) { .explore-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } .explore-sticky { position: sticky; top: 76px; } }
.system-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.system-list button { width: 100%; text-align: left; display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color var(--ease), transform var(--ease), background var(--ease); }
.system-list button:hover { border-color: var(--teal); }
.system-list button[aria-pressed="true"] { border-color: var(--amber-text); background: var(--amber-soft); }
.system-list .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: none; }
.system-list button[aria-pressed="true"] .dot { background: var(--amber-text); }
.system-list .t { font-weight: 600; font-size: var(--fs-sm); } .system-list .d { color: var(--muted); font-size: var(--fs-xs); display: block; }
.system-detail { border-left: 3px solid var(--amber-text); }

/* ── Motion polish ── */
@media (prefers-reduced-motion: no-preference) {
  .stack > .card, .defense-card > .card, #quote-result > *, #deal-result > *, #used-result > *, #shop-result > * { animation: rise 420ms var(--ease) both; }
  .stack > .card:nth-child(2), #quote-result > :nth-child(2), #shop-result > :nth-child(2) { animation-delay: 50ms; }
  .stack > .card:nth-child(3), #quote-result > :nth-child(3), #shop-result > :nth-child(3) { animation-delay: 100ms; }
  .stack > .card:nth-child(4), #quote-result > :nth-child(4), #shop-result > :nth-child(4) { animation-delay: 150ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .verdict .mark { animation: pop 500ms cubic-bezier(.2,.9,.3,1.4) both; }
  @keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .situation:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(29,39,51,0.08); }
}
.verdict { border-width: 1px; border-left-width: 6px; }
.verdict.green { border-left-color: var(--green); } .verdict.amber { border-left-color: var(--amber-text); } .verdict.red { border-left-color: var(--red); } .verdict.teal { border-left-color: var(--teal); }
.card { transition: box-shadow var(--ease); }
.card:hover { box-shadow: 0 2px 4px rgba(29,39,51,0.05), 0 12px 32px rgba(29,39,51,0.07); }