/* The transparent vehicle shares the homepage's existing navy background. */
.hero.vehicle-hero { display: block; padding: var(--header-h) 0 0; min-height: 100svh; }
.vehicle-hero::after { display: none; }
.vehicle-hero::before { background: radial-gradient(ellipse at 68% 20%, rgba(117,231,255,.16), transparent 48%), linear-gradient(135deg,#020611 0%,#07172a 52%,#030815 100%); }
.vehicle-showcase { position: relative; height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; max-width: 1600px; margin-inline: auto; padding: 26px clamp(16px,4vw,64px) 22px; }
.vehicle-stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.8); font-size: 13px; letter-spacing: .08em; }
.vehicle-stage-hint { color: rgba(255,255,255,.42); font-size: 12px; letter-spacing: 0; }
.vehicle-viewport { position: relative; width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; }
.vehicle-viewport canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: pan-y; }
.vehicle-viewport canvas:active { cursor: grabbing; }
.vehicle-loading { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: rgba(255,255,255,.72); font-size: 13px; pointer-events: none; transition: opacity .3s ease; }
.vehicle-loader { width: 28px; height: 28px; border: 1px solid rgba(117,231,255,.18); border-top-color: #75e7ff; border-radius: 50%; animation: vehicle-spin .8s linear infinite; }
.vehicle-loading-track { width: 130px; height: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.vehicle-loading-track i { display: block; width: 0; height: 100%; background: #75e7ff; transition: width .2s; }
.is-model-loaded .vehicle-loading { opacity: 0; visibility: hidden; }
.vehicle-error { position: absolute; inset: 0; z-index: 4; display: grid; align-content: center; justify-items: center; gap: 20px; font-size: 15px; color: rgba(255,255,255,.8); }
.vehicle-error[hidden] { display: none; }
.vehicle-error button { padding: 12px 22px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); border-radius: 24px; color: #fff; cursor: pointer; }
.has-model-error .vehicle-loading { display: none; }
.vehicle-palette { position: relative; z-index: 2; flex: 0 0 auto; margin-top: 0; text-align: center; }
.vehicle-palette-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 16px; color: rgba(255,255,255,.46); font-size: 12px; line-height: 1.4; }
.vehicle-palette-title strong { color: rgba(255,255,255,.9); font-weight: 500; min-width: 48px; }
.vehicle-swatches { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: max-content; max-width: 100%; margin-inline: auto; gap: clamp(8px,2vw,20px); padding: 8px 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; --fade-left: #000; --fade-right: #000; -webkit-mask-image: linear-gradient(to right,var(--fade-left),#000 24px,#000 calc(100% - 24px),var(--fade-right)); mask-image: linear-gradient(to right,var(--fade-left),#000 24px,#000 calc(100% - 24px),var(--fade-right)); }
.vehicle-swatches::-webkit-scrollbar { display: none; }
.vehicle-swatches.can-scroll-left { --fade-left: transparent; }
.vehicle-swatches.can-scroll-right { --fade-right: transparent; }
.vehicle-swatch { appearance: none; border: 0; background: none; padding: 7px; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; cursor: pointer; color: rgba(255,255,255,.55); }
.vehicle-swatch-chip { display: block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.35),transparent 63%),var(--paint); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18),0 3px 10px rgba(0,0,0,.2); outline: 1px solid transparent; outline-offset: 5px; transition: outline-color .2s,transform .2s; }
.vehicle-swatch[aria-pressed="true"] { color: #fff; }
.vehicle-swatch[aria-pressed="true"] .vehicle-swatch-chip { outline-color: #75e7ff; }
.vehicle-swatch:hover .vehicle-swatch-chip { transform: translateY(-2px); }
.vehicle-swatch:disabled { opacity: .5; cursor: wait; }
.vehicle-swatch:focus-visible,.vehicle-error button:focus-visible,.vehicle-scroll-link:focus-visible { outline: 2px solid #75e7ff; outline-offset: 4px; border-radius: 8px; }
.vehicle-scroll-link { align-self: center; display: flex; gap: 12px; align-items: center; margin-top: 24px; color: rgba(255,255,255,.42); font-size: 12px; }
.vehicle-scroll-link span { font-size: 18px; }
.vehicle-intro-wrap { position: relative; padding: 80px clamp(18px,5vw,78px) 100px; border-top: 1px solid rgba(255,255,255,.06); scroll-margin-top: var(--header-h); }
.vehicle-intro-wrap .hero-content { max-width: 920px; margin-inline: auto; text-align: center; }
.vehicle-intro-wrap h1 { font-size: clamp(40px,5vw,70px); line-height: 1.12; letter-spacing: -.04em; }
.vehicle-intro-wrap .hero-lead { max-width: 680px; margin: 0 auto 30px; font-size: clamp(16px,1.5vw,20px); }
.vehicle-intro-wrap .hero-actions { justify-content: center; }
.vehicle-intro-wrap .hero-wechat-card { flex: 0 1 640px; margin: 24px 0 0; width: 100%; text-align: left; }
@keyframes vehicle-spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
 .hero.vehicle-hero { padding-top: var(--header-h); padding-bottom: 0; }
 .vehicle-showcase { padding: 22px 16px 18px; }
 .vehicle-viewport { min-height: 0; }
 .vehicle-stage-heading { font-size: 12px; }
 .vehicle-palette-title { margin-bottom: 12px; }
 .vehicle-scroll-link { margin-top: 18px; }
 .vehicle-intro-wrap { padding: 58px 20px 64px; }
 .vehicle-intro-wrap .hero-wechat-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .vehicle-loader { animation: none; } .vehicle-loading,.vehicle-swatch-chip { transition: none; } }